/* ================================================
   KREM — BOOKING FORM STYLES
   Cible : form.em-booking-form.krem-styled
   ================================================ */

/* --- RESET GLOBAL DU FORM --- */
form.em-booking-form.krem-styled {
    font-family: inherit !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* --- MASQUER LES TITRES NATIFS EM --- */
form.em-booking-form.krem-styled .em-booking-section-title {
    display: none !important;
}

/* ================================================
   BARRES NOIRES — TITRES KREM
   Via ::before sur chaque section
   ================================================ */

form.em-booking-form.krem-styled section {
    margin-bottom: 24px !important;
    padding: 0 !important;
}

/* Barre commune */
form.em-booking-form.krem-styled section::before {
    display: block !important;
    background-color: #000 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    margin-bottom: 16px !important;
	border-radius: 6px 6px 0 0;
}

/* Section 1 — RÉSERVATION */
form.em-booking-form.krem-styled .em-booking-form-section-tickets::before {
    content: "RÉSERVATION" !important;
}

/* Section 2 — VOS INFORMATIONS */
form.em-booking-form.krem-styled .em-booking-form-section-details::before {
    content: "VOS INFORMATIONS" !important;
}

/* Section 3 — RÉSUMÉ */
form.em-booking-form.krem-styled .em-booking-form-section-summary::before {
    content: "RÉSUMÉ DE LA RÉSERVATION" !important;
}

/* Section 4 — CONFIRM (pas de titre) */
form.em-booking-form.krem-styled .em-booking-form-section-confirm::before {
    display: none !important;
}

/* ================================================
   LOGO KREM (injecté par JS)
   ================================================ */
form.em-booking-form.krem-styled .krem-logo-wrapper {
    text-align: center !important;
    padding: 16px 0 8px 0 !important;
}

form.em-booking-form.krem-styled .krem-logo {
    max-width: 160px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ================================================
   SECTION TICKETS — Sélecteur places
   ================================================ */
form.em-booking-form.krem-styled .em-booking-section {
    padding: 0 16px 16px 16px !important;
}

form.em-booking-form.krem-styled .ticket-desc {
    font-size: 13px !important;
    color: #555 !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

form.em-booking-form.krem-styled p.em-tickets-spaces label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

form.em-booking-form.krem-styled select.em-ticket-select {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background: #fafafa !important;
}

/* ================================================
   SECTION DETAILS — Champs nom/email/phone
   ================================================ */
form.em-booking-form.krem-styled .em-booking-form-details p {
    margin-bottom: 14px !important;
}

form.em-booking-form.krem-styled .em-booking-form-details label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
    color: #222 !important;
}

form.em-booking-form.krem-styled .em-booking-form-details input.input,
form.em-booking-form.krem-styled .em-booking-form-details textarea {
    width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    background: #fafafa !important;
    transition: border-color 0.2s ease !important;
}

form.em-booking-form.krem-styled .em-booking-form-details input.input:focus,
form.em-booking-form.krem-styled .em-booking-form-details textarea:focus {
    border-color: #000 !important;
    outline: none !important;
    background: #fff !important;
}

/* RGPD */
form.em-booking-form.krem-styled .em-consent-checkbox {
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

form.em-booking-form.krem-styled .em-consent-checkbox input[type="checkbox"] {
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* ================================================
   SECTION SUMMARY — Récapitulatif
   ================================================ */
form.em-booking-form.krem-styled .em-booking-summary {
    font-size: 13px !important;
}

form.em-booking-form.krem-styled .em-bs-row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #eee !important;
}

form.em-booking-form.krem-styled .em-bs-row-total {
    font-weight: 700 !important;
    border-bottom: none !important;
    margin-top: 8px !important;
    font-size: 14px !important;
}

/* ================================================
   BOUTON SUBMIT
   ================================================ */
form.em-booking-form.krem-styled .em-booking-submit {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    background-color: #000 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 13px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

form.em-booking-form.krem-styled .em-booking-submit:hover {
/*     background-color: #333 !important; */
	background-color: #00000045 !important;
    color: #000 !important;
}

/* ================================================
   LOGO
   ================================================ */
form.em-booking-form.krem-styled .krem-logo-wrapper {
    text-align: center !important;
    padding: 20px 0 16px 0 !important;
    background: #fff !important;
}

form.em-booking-form.krem-styled .krem-logo {
    max-width: 150px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ================================================
   MASQUER Téléphone + Commentaire
   ================================================ */
form.em-booking-form.krem-styled p:has(input[name="dbem_phone"]),
form.em-booking-form.krem-styled p:has(textarea[name="booking_comment"]) {
    display: none !important;
}

/* ================================================
   EMAIL — Astérisque rouge (via JS)
   ================================================ */
form.em-booking-form.krem-styled .krem-required-star {
    color: red !important;
    font-weight: bold !important;
    margin-left: 4px !important;
    font-size: 14px !important;
}

/* ================================================
   CHECKBOX RGPD — Rouge jusqu'à cochée
   ================================================ */
form.em-booking-form.krem-styled .em-consent-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px !important;
    border: 2px solid red !important;
    border-radius: 4px !important;
    background: #fff5f5 !important;
    transition: all 0.3s ease !important;
}

form.em-booking-form.krem-styled .em-consent-checkbox.krem-consent-valid {
    border-color: #4CAF50 !important;
    background: #f5fff5 !important;
}

form.em-booking-form.krem-styled .em-consent-checkbox input[type="checkbox"] {
    margin-top: 2px !important;
    accent-color: red !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

form.em-booking-form.krem-styled .em-consent-checkbox.krem-consent-valid input[type="checkbox"] {
    accent-color: #4CAF50 !important;
}

/* ================================================
   SECTION TICKETS — Écraser "RÉSERVATION"
   ================================================ */

/* Cible toutes les variantes possibles du ::before natif EM */
form.em-booking-form.krem-styled .em-booking-form-section-tickets::before,
form.em-booking-form.krem-styled .em-booking-form-section-tickets .em-booking-section-title,
form.em-booking-form.krem-styled .em-booking-form-section-tickets h3 {
    display: none !important;
    content: none !important;
}

/* Notre titre custom injecté via data-krem-title */
form.em-booking-form.krem-styled .em-booking-form-section-tickets.krem-dynamic-title::before {
    content: attr(data-krem-title) !important;
    display: block !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    white-space: normal !important;
}

form.em-booking-form.krem-styled .krem-section-header {
    background: #000 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    letter-spacing: 0.05em !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
    display: block !important;
    text-transform: uppercase !important;  /* ← comme les autres */
	border-radius: 6px 6px 0 0;
}



/* ================================================
   ANIMATION SHAKE — Checkbox non cochée au submit
   ================================================ */
@keyframes kremShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}