/* ================================================================
 * Consultations personnalisées (v0.9.0)
 *
 * Rendu des encarts pricing et du tunnel de paiement inline pour le
 * shortcode [ktp_personal_readings]. Look calqué sur l'ancien plugin
 * Kartomanta Stripe Mails (classes .k-pricing-table, .k-card,
 * .k-price, .k-btn) pour ne rien changer visuellement au moment de
 * la bascule.
 *
 * Classes préfixées .ktp-pr- pour éviter tout conflit avec un thème
 * ou un autre plugin qui utiliserait .k-*.
 * ================================================================ */

.ktp-pr-wrapper {
	margin: 0 auto;
	max-width: 900px;
}

.ktp-pr-pricing-table {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	margin: 32px 0;
}

.ktp-pr-card {
	position: relative;
	flex: 1 1 300px;
	max-width: 400px;
	background: #ffffff;
	border: 2px solid #e0d4e5;
	border-radius: 12px;
	padding: 28px 24px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 10px rgba(128, 8, 128, 0.06);
	/* v0.9.14 : le scroll-margin-top posé en v0.9.13 a été retiré. Il
	   servait à donner de l'air visuel pour scrollIntoView({ block:
	   'start' }), mais depuis la v0.9.14 le scroll passe par
	   window.scrollTo() avec compensation dynamique du sticky header
	   dans le JS (getStickyHeaderOffset + extraMargin). La marge est
	   donc gérée exclusivement côté JS pour un comportement
	   déterministe et cohérent entre desktop et mobile. */
}

.ktp-pr-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(128, 8, 128, 0.15);
}

.ktp-pr-card-featured {
	border-color: #800880;
	background: linear-gradient(180deg, #faf5fb 0%, #ffffff 100%);
}

.ktp-pr-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #800880;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 5px 16px;
	border-radius: 20px;
	white-space: nowrap;
}

.ktp-pr-card h3 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	color: #800880;
	line-height: 1.3;
}

.ktp-pr-card em {
	display: block;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: #4a3550;
	font-style: italic;
}

.ktp-pr-price {
	font-size: 44px;
	font-weight: 700;
	color: #2c1a2e;
	margin: 12px 0 20px;
	letter-spacing: -0.02em;
	line-height: 1;
}

/**
 * v0.9.27 : styles du prix barré affiché en cas de promo sur une carte
 * de consultation personnalisée. Le prix final reste dans un <strong>
 * qui hérite des règles ci-dessus (grande taille, couleur d'accent), et
 * le prix original barré s'aligne juste à droite en plus petit et grisé.
 */
.ktp-pr-price-original {
	font-size: 24px;
	font-weight: 500;
	color: #8a7a90;
	margin-left: 8px;
	letter-spacing: 0;
	vertical-align: middle;
}

.ktp-pr-benefits {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
	color: #2c1a2e;
}

.ktp-pr-benefits li {
	padding: 4px 0 4px 22px;
	position: relative;
}

.ktp-pr-benefits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #800880;
	font-weight: 700;
}

.ktp-pr-cta {
	display: block;
	width: 100%;
	padding: 14px 20px;
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(135deg, #800880 0%, #6b0770 100%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 3px 10px rgba(128, 8, 128, 0.25);
}

.ktp-pr-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 14px rgba(128, 8, 128, 0.35);
}

.ktp-pr-cta:active {
	transform: translateY(0);
}

.ktp-pr-cta:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ================================================================
 * Formulaire prénom + email + Payment Element
 * Apparaît en dessous du bouton après clic, à l'intérieur de la même
 * carte pricing pour ne pas casser le layout.
 * ================================================================ */

.ktp-pr-form-zone {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(128, 8, 128, 0.15);
	text-align: left;
	animation: ktp-pr-fade-in 0.3s ease-out;
}

/* v0.9.4 : lien de retour vers la sélection des formules. Discret,
   positionné en haut du formulaire de commande. Permet à un visiteur
   qui a cliqué "Réserver" par erreur ou qui change d'avis de revenir
   à la vue avec toutes les formules côte à côte.

   v0.9.10 : renforcement des styles pour résister aux règles du thème
   GeneratePress qui appliquait un fond bleu vif au hover du <button>,
   rendant le texte violet illisible. Reset agressif du background, de
   la bordure et de l'outline sur tous les états (:hover, :focus,
   :active) via sélecteurs contextuels .ktp-pr-card .ktp-pr-back-btn
   qui augmentent la spécificité au-dessus du thème sans recourir à
   !important. */
.ktp-pr-card .ktp-pr-back-btn,
.ktp-pr-card .ktp-pr-back-btn:hover,
.ktp-pr-card .ktp-pr-back-btn:focus,
.ktp-pr-card .ktp-pr-back-btn:active,
.ktp-pr-card .ktp-pr-back-btn:focus-visible {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	border: none;
	outline: none;
}

.ktp-pr-card .ktp-pr-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #800880;
	font-size: 13px;
	font-weight: 500;
	padding: 4px 2px;
	margin-bottom: 12px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	line-height: 1.4;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	/* v0.9.14 : le scroll-margin-top posé en v0.9.13 a été retiré, la
	   compensation du sticky header est désormais gérée dynamiquement
	   côté JS (scrollToWithOffset). Voir le commentaire jumeau sur
	   .ktp-pr-card ci-dessus. */
}

.ktp-pr-card .ktp-pr-back-btn:hover {
	color: #6b0770;
	text-decoration-thickness: 2px;
}

.ktp-pr-card .ktp-pr-back-btn:active {
	color: #5a0060;
}

/* Accessibilité clavier : un outline discret violet quand navigation
   au clavier, retiré au clic souris grâce à :focus-visible. */
.ktp-pr-card .ktp-pr-back-btn:focus-visible {
	outline: 2px solid #800880;
	outline-offset: 3px;
	border-radius: 3px;
}

@keyframes ktp-pr-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ktp-pr-form label {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	color: #2c1a2e;
	font-weight: 500;
}

.ktp-pr-form label span {
	display: block;
	margin-bottom: 6px;
}

.ktp-pr-form input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #ffffff;
	color: #2c1a2e;
	box-sizing: border-box;
	font-family: inherit;
}

.ktp-pr-form input:focus {
	outline: none;
	border-color: #800880;
	box-shadow: 0 0 0 3px rgba(128, 8, 128, 0.12);
}

.ktp-pr-submit {
	display: block;
	width: 100%;
	padding: 12px 20px;
	margin-top: 8px;
	/* v0.9.15 : margin-bottom pour laisser respirer la mention légale
	   qui suit. Défense en profondeur au cas où le thème écraserait
	   le margin-top de .ktp-pr-form-legal (voir commentaire de cette
	   règle plus bas). */
	margin-bottom: 4px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #800880 0%, #6b0770 100%);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.ktp-pr-submit:hover:not(:disabled) {
	transform: translateY(-1px);
}

.ktp-pr-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* v0.9.15 : sélecteur contextuel .ktp-pr-form .ktp-pr-form-legal
   (spécificité 0,2,0) pour battre les règles génériques du thème
   GeneratePress du type `.entry-content p:last-child` ou `form p`
   qui écrasent le margin-top et collent la mention légale au
   bouton "Continuer vers le paiement" (retour d'Oli). Approche
   identique au fix v0.9.10 sur le back-btn : augmenter la
   spécificité au-dessus du thème sans recourir à !important, ce
   qui permet de rester overridable ponctuellement si un jour Oli
   voulait rejouer sur ces marges depuis un enfant theme. La
   marge passe aussi de 10 px à 14 px pour un peu plus d'air
   visuel sous un bouton coloré. */
.ktp-pr-form .ktp-pr-form-legal {
	margin: 14px 0 0;
	font-size: 12px;
	color: #7a6a80;
	line-height: 1.4;
}

.ktp-pr-form-error {
	margin: 10px 0;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #c53030;
	font-size: 13px;
	line-height: 1.4;
}

/* ================================================================
 * Payment Element inline (après validation du formulaire)
 * ================================================================ */

.ktp-pr-payment-zone {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(128, 8, 128, 0.15);
	animation: ktp-pr-fade-in 0.35s ease-out;
}

.ktp-pr-payment-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	color: #2c1a2e;
}

.ktp-pr-payment-amount {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: #800880;
}

.ktp-pr-payment-element {
	margin-bottom: 12px;
	min-height: 100px;
}

.ktp-pr-payment-error {
	margin: 8px 0 12px;
	padding: 10px 12px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #c53030;
	font-size: 13px;
	line-height: 1.4;
}

.ktp-pr-pay-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	/* v0.9.15 : margin-bottom pour laisser respirer la mention légale
	   Stripe qui suit (défense en profondeur identique à .ktp-pr-submit,
	   voir commentaire sur cette règle plus haut). */
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, #800880 0%, #6b0770 100%);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	box-shadow: 0 3px 12px rgba(128, 8, 128, 0.3);
}

.ktp-pr-pay-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 5px 16px rgba(128, 8, 128, 0.4);
}

.ktp-pr-pay-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ktp-pr-pay-btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: ktp-pr-spin 0.7s linear infinite;
}

.ktp-pr-pay-btn-loading .ktp-pr-pay-btn-spinner {
	display: inline-block;
}

.ktp-pr-pay-btn-loading .ktp-pr-pay-btn-label {
	opacity: 0.85;
}

@keyframes ktp-pr-spin {
	to { transform: rotate(360deg); }
}

/* v0.9.15 : même défense de spécificité que pour .ktp-pr-form-legal
   ci-dessus. Le bouton "Payer" et la mention légale Stripe sont
   susceptibles du même bug d'écrasement par le thème dans la zone
   paiement. Application préventive pour éviter que le bug ne
   ressurgisse plus tard sur la mention légale de paiement. */
.ktp-pr-payment-zone .ktp-pr-payment-legal {
	margin: 14px 0 0;
	font-size: 11.5px;
	color: #7a6a80;
	text-align: center;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.ktp-pr-pricing-table {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.ktp-pr-card {
		max-width: none;
	}
}