/*
Theme Name: A Fleur de Jade
Theme URI: https://www.afleurdejade.com
Description: Thème enfant de Twenty Twenty-Five pour À Fleur de Jade
Author: Jade
Author URI: https://www.afleurdejade.com
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: afleurdejade
*/

/* ============================================
   Modal "Quel massage ou soin choisir ?"
   ============================================ */

/* Modal : cachée par défaut, fixée en bas, slide-up à l'ouverture */
#modal-soins.modal-soins {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--wp--preset--color--base, #fff);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(100%);
	transition: transform 0.4s ease-in-out;
	max-width: none !important;
	margin: 0 !important;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

#modal-soins.modal-soins.is-open {
	transform: translateY(0);
}

/* Bouton de fermeture */
.modal-soins__close {
	position: sticky;
	top: 1rem;
	float: right;
	margin-right: 1rem;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
}

.modal-soins__close:hover {
	transform: scale(1.05);
}

/* Empêche le scroll de l'arrière-plan quand modal ouverte */
body.modal-soins-open {
	overflow: hidden;
}

/* Styling des blocs Détails dans la modal */
#modal-soins .wp-block-details {
	margin-bottom: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-1);
	border-radius: 12px;
}

#modal-soins .wp-block-details summary {
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}

#modal-soins .wp-block-details summary::-webkit-details-marker {
	display: none;
}

#modal-soins .wp-block-details summary::after {
	content: '+';
	float: right;
	font-size: 1.4rem;
	line-height: 1;
}

#modal-soins .wp-block-details[open] summary::after {
	content: '−';
}

#modal-soins .wp-block-details p {
	margin-top: 0.75rem;
	font-size: 0.95rem;
}



/* ============================================
   Modal "Bon Cadeau"
   ============================================ */

#modal-boncadeau.modal-boncadeau {
	position: fixed;
	inset: 0;
	z-index: 9999;
	color: var(--wp--preset--color--accent-2);
	background: var(--wp--preset--color--accent-1);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(100%);
	transition: transform 0.4s ease-in-out;
	max-width: none !important;
	margin: 0 !important;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

#modal-boncadeau.modal-boncadeau.is-open {
	transform: translateY(0);
}

.modal-boncadeau__close {
	position: sticky;
	top: 1rem;
	float: right;
	margin-right: 1rem;
	color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-2);
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease;
}

.modal-boncadeau__close:hover {
	transform: scale(1.05);
}

/* Empêche le scroll du body quand une modal est ouverte */
body.modal-open {
	overflow: hidden;
}

/* ============================================
   Style du formulaire CF7 dans la modal Bon Cadeau
   ============================================ */

#modal-boncadeau .wpcf7 {
	max-width: 700px;
	margin: 2rem auto 0;
}

#modal-boncadeau .wpcf7 fieldset {
	border: 1px solid rgba(white,0.5);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

#modal-boncadeau .wpcf7 legend {
	padding: 0 0.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-2);
}

#modal-boncadeau .wpcf7 label {
	display: block;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: 0.4rem;
}

#modal-boncadeau .wpcf7 input[type="text"],
#modal-boncadeau .wpcf7 input[type="email"],
#modal-boncadeau .wpcf7 input[type="tel"],
#modal-boncadeau .wpcf7 input[type="number"],
#modal-boncadeau .wpcf7 textarea {
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

#modal-boncadeau .wpcf7 input:focus,
#modal-boncadeau .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1);
}

#modal-boncadeau .wpcf7 textarea {
	resize: vertical;
	min-height: 100px;
}

#modal-boncadeau .wpcf7 .cf7-help-text {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-2);
	opacity: 0.8;
	margin-top: 0.5rem;
}

#modal-boncadeau .wpcf7 .bon-cadeau-consent {
	font-size: 0.9rem;
	margin: 1rem 0;
}

#modal-boncadeau .wpcf7 input[type="checkbox"] {
	margin-right: 0.5rem;
}

#modal-boncadeau .wpcf7 input[type="submit"] {
	display: block;
	margin: 1.5rem auto 0;
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-1);
	border: none;
	border-radius: 3rem;
	padding: 0.85rem 2rem;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#modal-boncadeau .wpcf7 input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#modal-boncadeau .wpcf7-response-output {
	display: block !important;
	margin: 1.5rem auto !important;
	padding: 1rem 1.25rem !important;
	border-radius: 8px !important;
	max-width: 700px !important;
	font-weight: 500 !important;
	border: none !important;
}

#modal-boncadeau .wpcf7-response-output[aria-hidden="false"],
#modal-boncadeau .wpcf7 form.invalid .wpcf7-response-output,
#modal-boncadeau .wpcf7 form.unaccepted .wpcf7-response-output,
#modal-boncadeau .wpcf7 form.sent .wpcf7-response-output {
	visibility: visible !important;
	opacity: 1 !important;
}
#modal-boncadeau .wpcf7 form.unaccepted .wpcf7-response-output {
    background: #ffe5e5 !important;
    color: #c0392b !important;
}
#modal-boncadeau .wpcf7 form.unaccepted .rgpd::after {
    content: "Vous devez accepter pour continuer.";
    display: block;
    color: #c0392b;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}
/* ============================================
   Hover uniforme sur tous les boutons
   ============================================ */

/* Boutons natifs Gutenberg (RDV, Carte, Quel massage, Bon cadeau, Tel, Avis...) */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Icônes sociales (Instagram, Facebook) */
.wp-block-social-link {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-social-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Bouton de fermeture des modals : on garde le scale existant + shadow */
.modal-soins__close:hover,
.modal-boncadeau__close:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#modal-boncadeau .wpcf7 input[type="number"]::-webkit-inner-spin-button,
#modal-boncadeau .wpcf7 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#modal-boncadeau .wpcf7 input[type="number"] {
    -moz-appearance: textfield;
}
/* Responsive : sur mobile, adapter le padding */
@media (max-width: 600px) {
	#modal-boncadeau .wpcf7 fieldset {
		padding: 1rem;
	}
	.wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link {
		font-size: 1.3rem !important;
	}
}

.ti-widget[data-wkey="feed-instagram"][data-style="custom-style"][data-widget-type="social"] .ti-header-numbers, .ti-widget[data-wkey="feed-instagram"][data-style="custom-style"] header[data-header-type="3"] .ti-widget-header .ti-profile .ti-header-numbers .ti-number .ti-value, .ti-widget[data-wkey="feed-instagram"][data-style="custom-style"] header[data-header-type="3"] .ti-widget-header .ti-profile .ti-name * {
    color: #f5f5f0 !important;
}

.ti-widget[data-wkey="feed-instagram"][data-style="custom-style"][data-widget-type="social"] .ti-widget-header .ti-header-btn .ti-btn {
    background-color: #d82798 !important;
}

.ti-widget[data-wkey="feed-instagram"][data-style="custom-style"][data-widget-type="social"] .ti-widget-header .ti-header-btn .ti-btn:hover
 {
    background-color: #564cd8 !important;
    outline-color: #564cd880 !important;
}


/* ============================================
   Messages d'erreur CF7 dans la modal Bon Cadeau
   ============================================ */

#modal-boncadeau .wpcf7-not-valid-tip {
	display: block !important;
	margin-top: 0.4rem !important;
	padding: 0.4rem 0.7rem !important;
	background: #ffe5e5 !important;
	color: #c0392b !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

#modal-boncadeau .wpcf7 input.wpcf7-not-valid,
#modal-boncadeau .wpcf7 textarea.wpcf7-not-valid {
	border: 2px solid #c0392b !important;
	box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.2) !important;
}

#modal-boncadeau .wpcf7-response-output {
	display: block !important;
	margin: 1.5rem auto !important;
	padding: 1rem 1.25rem !important;
	border-radius: 8px !important;
	max-width: 700px !important;
	font-weight: 500 !important;
	border: none !important;
}

/* État erreur : bandeau rouge */
#modal-boncadeau .wpcf7 form.invalid .wpcf7-response-output,
#modal-boncadeau .wpcf7 form.unaccepted .wpcf7-response-output {
	background: #ffe5e5 !important;
	color: #c0392b !important;
}

/* État succès : bandeau vert */
#modal-boncadeau .wpcf7 form.sent .wpcf7-response-output {
	background: #d5f5e3 !important;
	color: #1e7e3e !important;
}