/* =========================================================
   Devilclubb Booking — Devil Club Design System
   Basado en: devil-booking-widget.html
   !important en todo para compatibilidad con Elementor
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');

/*
   PALETA:
   bg-paper:     #FFFFFF
   bg-card:      #FAFAFA
   ink-black:    #131313
   ink-gray:     #404040
   ink-light:    #71767b
   ink-muted:    #9CA3AF
   green:        #00875A
   green-dim:    rgba(0,135,90,0.05)
   green-light:  rgba(0,135,90,0.08)
   green-border: rgba(0,135,90,0.2)
   danger:       #DC2626
*/

/* =========================================================
   WRAPPER — actúa como la tarjeta principal
   ========================================================= */

#devilclubb-booking-wrap {
    max-width: 540px !important;
    margin: 0 auto !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #131313 !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    background: #FFFFFF !important;
    border-left: 5px solid #00875A !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.45) !important,
        0 0 80px -20px rgba(0, 135, 90, 0.25) !important;
    overflow: hidden !important;
    animation: dcbCardEnter 0.7s ease 0.1s both !important;
}

@keyframes dcbCardEnter {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

#devilclubb-booking-wrap *,
#devilclubb-booking-wrap *::before,
#devilclubb-booking-wrap *::after {
    box-sizing: border-box !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* =========================================================
   INDICADOR DE PASOS
   ========================================================= */

.dcb-steps {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 20px 22px 16px !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Línea que conecta los dots */
.dcb-steps::before {
    content: '' !important;
    position: absolute !important;
    top: 34px !important;
    left: calc(22px + 14px) !important;
    right: calc(22px + 14px) !important;
    height: 2px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    z-index: 0 !important;
}

.dcb-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
    cursor: default !important;
    transition: all 0.3s ease !important;
}

.dcb-step-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    color: #9CA3AF !important;
    border: 2px solid transparent !important;
    transition: all 0.4s ease !important;
}

.dcb-step.active .dcb-step-num {
    background: #00875A !important;
    color: #FFFFFF !important;
    border-color: #00875A !important;
    box-shadow: 0 0 0 4px rgba(0, 135, 90, 0.1) !important;
}

.dcb-step.done .dcb-step-num {
    background: rgba(0, 135, 90, 0.05) !important;
    color: #00875A !important;
    border-color: rgba(0, 135, 90, 0.25) !important;
    font-size: 0 !important;
}

.dcb-step.done .dcb-step-num::after {
    content: '✓' !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}

.dcb-step-label {
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    transition: color 0.3s ease !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.dcb-step.active .dcb-step-label {
    color: #00875A !important;
}

.dcb-step.done .dcb-step-label {
    color: #71767b !important;
}

/* =========================================================
   FORM — reset visual (la tarjeta la hace el wrapper)
   ========================================================= */

#devilclubb-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#devilclubb-form input[type="hidden"] {
    display: none !important;
}

/* =========================================================
   PANELES DE PASO
   ========================================================= */

.dcb-panel {
    display: none !important;
    padding: 24px 22px !important;
    animation: dcbStepIn 0.42s ease both !important;
}

.dcb-panel.active {
    display: block !important;
}

@keyframes dcbStepIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.dcb-panel > h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #131313 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.3 !important;
}

/* =========================================================
   PASO 1 — SERVICIOS
   ========================================================= */

.dcb-service-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

label.dcb-service-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px !important;
    background: #FAFAFA !important;
    border: 2px solid rgba(0, 0, 0, 0.06) !important;
    cursor: pointer !important;
    transition: all 0.28s ease !important;
    position: relative !important;
    margin: 0 !important;
    text-align: left !important;
}

label.dcb-service-card:hover {
    border-color: rgba(0, 135, 90, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

label.dcb-service-card.selected {
    border-color: #00875A !important;
    background: rgba(0, 135, 90, 0.05) !important;
    box-shadow:
        0 0 0 3px rgba(0, 135, 90, 0.08) !important,
        0 8px 24px rgba(0, 135, 90, 0.08) !important;
}

/* Radio nativo oculto */
label.dcb-service-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}

/* Checkmark en esquina */
label.dcb-service-card::after {
    content: '✓' !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #00875A !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    text-align: center !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all 0.28s ease !important;
}

label.dcb-service-card.selected::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.dcb-service-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #131313 !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
}

.dcb-service-duration {
    display: block !important;
    font-size: 11px !important;
    color: #71767b !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   PASO 2 — FECHA
   ========================================================= */

.dcb-date-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
}

.dcb-date-row > label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1 !important;
}

.dcb-date-picker-wrap {
    position: relative !important;
    display: block !important;
}

.dcb-date-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#dcb-date {
    width: 100% !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #131313 !important;
    background: #FAFAFA !important;
    border: 2px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 0 !important;
    padding: 14px 112px 14px 44px !important;
    outline: none !important;
    transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: block !important;
}

#dcb-date:hover:not(:focus) {
    border-color: rgba(0, 135, 90, 0.3) !important;
    background: #F5F5F5 !important;
}

#dcb-date:focus {
    border-color: #00875A !important;
    background: rgba(0, 135, 90, 0.02) !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.08) !important;
    outline: none !important;
}

/* Ocultar el indicador nativo del browser completamente */
#dcb-date::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* Botón visual "Seleccionar →" superpuesto a la derecha — clicable vía JS */
.dcb-date-pick-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    min-width: 100px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 135, 90, 0.07) !important;
    border-left: 2px solid rgba(0, 135, 90, 0.15) !important;
    color: #00875A !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
}

.dcb-date-pick-btn:hover {
    background: rgba(0, 135, 90, 0.13) !important;
    border-left-color: rgba(0, 135, 90, 0.3) !important;
}

.dcb-date-pick-btn.has-date {
    background: #00875A !important;
    border-left-color: #00875A !important;
    color: #FFFFFF !important;
}

.dcb-date-pick-btn.has-date:hover {
    background: #006644 !important;
    border-left-color: #006644 !important;
}

/* =========================================================
   SLOTS DE HORA
   ========================================================= */

.dcb-slots-section {
    margin-bottom: 20px !important;
}

.dcb-slots-label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

#dcb-slots-wrap,
.dcb-slots-wrap {
    margin-bottom: 0 !important;
}

.dcb-slots-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 90px !important;
    background: #FAFAFA !important;
    border: 1px dashed rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    font-size: 11px !important;
    color: #9CA3AF !important;
    text-align: center !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.dcb-tz-notice {
    font-size: 9px !important;
    color: #71767b !important;
    padding: 7px 10px !important;
    margin: 0 0 10px !important;
    background: rgba(0, 135, 90, 0.05) !important;
    border-left: 3px solid rgba(0, 135, 90, 0.3) !important;
    line-height: 1.5 !important;
}

.dcb-tz-notice strong {
    color: #00875A !important;
    font-weight: 600 !important;
}

.dcb-slots-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

button.dcb-slot-btn {
    display: block !important;
    width: 100% !important;
    padding: 13px 8px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #404040 !important;
    background: #FAFAFA !important;
    border: 2px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    line-height: 1 !important;
    position: relative !important;
}

button.dcb-slot-btn:hover {
    border-color: #00875A !important;
    color: #00875A !important;
    background: rgba(0, 135, 90, 0.04) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 135, 90, 0.14) !important;
}

button.dcb-slot-btn.selected {
    background: #00875A !important;
    color: #FFFFFF !important;
    border-color: #00875A !important;
    box-shadow:
        0 0 0 3px rgba(0, 135, 90, 0.15) !important,
        0 4px 14px rgba(0, 135, 90, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   PASO 3 — FORMULARIO DE DATOS
   ========================================================= */

.dcb-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

.dcb-field {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dcb-field > label {
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1 !important;
}

.dcb-field .required {
    color: #00875A !important;
}

#dcb-name,
#dcb-email,
#dcb-phone,
.dcb-field input[type="text"],
.dcb-field input[type="email"],
.dcb-field input[type="tel"] {
    width: 100% !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #131313 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#dcb-name:focus,
#dcb-email:focus,
#dcb-phone:focus,
.dcb-field input[type="text"]:focus,
.dcb-field input[type="email"]:focus,
.dcb-field input[type="tel"]:focus {
    border-bottom-color: #00875A !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#dcb-name::placeholder,
#dcb-email::placeholder,
#dcb-phone::placeholder,
.dcb-field input::placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
}

#dcb-name.error,
#dcb-email.error,
.dcb-field input.error {
    border-bottom-color: #DC2626 !important;
}

#dcb-notes,
.dcb-field textarea {
    width: 100% !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #131313 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 72px !important;
    transition: border-color 0.3s ease !important;
    box-shadow: none !important;
    display: block !important;
}

#dcb-notes:focus,
.dcb-field textarea:focus {
    border-bottom-color: #00875A !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

#dcb-notes::placeholder,
.dcb-field textarea::placeholder {
    color: #9CA3AF !important;
    font-weight: 400 !important;
}

/* =========================================================
   PASO 4 — RESUMEN
   ========================================================= */

#dcb-summary,
.dcb-summary {
    background: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

.dcb-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    animation: dcbReviewSlide 0.35s ease both !important;
}

@keyframes dcbReviewSlide {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.dcb-summary-row:last-child {
    border-bottom: none !important;
}

.dcb-summary-label {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #9CA3AF !important;
    flex-shrink: 0 !important;
}

.dcb-summary-value {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #131313 !important;
    text-align: right !important;
    max-width: 62% !important;
    word-break: break-word !important;
}

.dcb-confirm-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 12px 14px !important;
    background: rgba(0, 135, 90, 0.05) !important;
    border-left: 3px solid #00875A !important;
    font-size: 11px !important;
    color: #404040 !important;
    line-height: 1.5 !important;
}

.dcb-confirm-note::before {
    content: '📧' !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.dcb-tz-summary-note {
    font-size: 9px !important;
    color: #71767b !important;
    padding: 5px 0 !important;
    margin: -8px 0 12px !important;
    line-height: 1.4 !important;
}

/* =========================================================
   MENSAJE DE ERROR
   ========================================================= */

#dcb-error,
.dcb-error {
    background: rgba(220, 38, 38, 0.05) !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    border-left: 3px solid #DC2626 !important;
    color: #DC2626 !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.dcb-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
}

/* Base */
.dcb-btn {
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    letter-spacing: 0.2px !important;
}

/* ← Atrás */
.dcb-btn-prev {
    padding: 12px 20px !important;
    background: transparent !important;
    color: #71767b !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.dcb-btn-prev:hover {
    color: #131313 !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    background: transparent !important;
}

/* → Siguiente */
.dcb-btn-next {
    padding: 12px 24px !important;
    background: #00875A !important;
    color: #FFFFFF !important;
    border: none !important;
    margin-left: auto !important;
}

.dcb-btn-next:hover:not(:disabled) {
    background: #006644 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 135, 90, 0.3) !important;
    color: #FFFFFF !important;
}

.dcb-btn-next:disabled {
    background: #9CA3AF !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

/* ✓ Confirmar */
#dcb-submit,
.dcb-btn-submit {
    padding: 12px 24px !important;
    background: #00875A !important;
    color: #FFFFFF !important;
    border: none !important;
    margin-left: auto !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    outline: none !important;
    line-height: 1 !important;
}

#dcb-submit:hover:not(:disabled),
.dcb-btn-submit:hover:not(:disabled) {
    background: #006644 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 135, 90, 0.3) !important;
    color: #FFFFFF !important;
}

#dcb-submit:disabled,
.dcb-btn-submit:disabled {
    background: #9CA3AF !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

/* =========================================================
   LOADING
   ========================================================= */

#dcb-loading,
.dcb-loading {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 52px 22px !important;
    gap: 16px !important;
    background: #FFFFFF !important;
    min-height: 220px !important;
}

/* Solo cuando JS lo muestra */
#dcb-loading[style*="display: block"],
#dcb-loading[style*="display:block"],
.dcb-loading[style*="display: block"],
.dcb-loading[style*="display:block"] {
    display: flex !important;
}

#dcb-loading p,
.dcb-loading p {
    font-size: 13px !important;
    color: #71767b !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
}

.dcb-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 3px solid rgba(0, 135, 90, 0.15) !important;
    border-top-color: #00875A !important;
    border-radius: 50% !important;
    animation: dcbSpin 0.75s linear infinite !important;
    flex-shrink: 0 !important;
}

@keyframes dcbSpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   PÁGINA DE GRACIAS — Thank You
   ========================================================= */

/* Hero de confirmación */
.dcb-ty-hero {
    background: rgba(0, 135, 90, 0.05) !important;
    border-bottom: 1px solid rgba(0, 135, 90, 0.12) !important;
    padding: 40px 22px 32px !important;
    text-align: center !important;
    animation: dcbStepIn 0.5s ease both !important;
}

.dcb-ty-hero--plain {
    background: #FAFAFA !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 52px 22px 40px !important;
}

/* Círculo con checkmark */
.dcb-ty-check {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: #00875A !important;
    color: #FFFFFF !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 64px !important;
    text-align: center !important;
    margin: 0 auto 20px !important;
    display: block !important;
    box-shadow:
        0 0 0 8px rgba(0, 135, 90, 0.1) !important,
        0 8px 24px rgba(0, 135, 90, 0.25) !important;
    animation: dcbCheckPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.15s both !important;
}

@keyframes dcbCheckPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.dcb-ty-hero--plain .dcb-ty-check {
    background: transparent !important;
    box-shadow: none !important;
    font-size: 44px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    animation: none !important;
}

/* Título */
.dcb-ty-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #131313 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.2 !important;
}

/* Subtítulo con email */
.dcb-ty-subtitle {
    font-size: 12px !important;
    color: #71767b !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.dcb-ty-subtitle strong {
    color: #404040 !important;
    font-weight: 600 !important;
}

/* Cuerpo con detalles */
.dcb-ty-body {
    padding: 24px 22px !important;
}

/* Botones de acción */
.dcb-ty-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 20px 0 !important;
}

/* Botón Google Meet (verde primario) */
.dcb-ty-btn-meet {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    background: #00875A !important;
    color: #FFFFFF !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.dcb-ty-btn-meet:hover {
    background: #006644 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 135, 90, 0.35) !important;
    text-decoration: none !important;
}

/* Botón Google Calendar (oscuro) */
.dcb-ty-btn-gcal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px 26px !important;
    background: #131313 !important;
    color: #FFFFFF !important;
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
}

.dcb-ty-btn-gcal:hover {
    background: #00875A !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(0, 135, 90, 0.3) !important;
    text-decoration: none !important;
}

.dcb-ty-btn-gcal svg {
    flex-shrink: 0 !important;
}

/* Nota de contacto */
.dcb-ty-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-left: 3px solid rgba(0, 0, 0, 0.1) !important;
    font-size: 11px !important;
    color: #71767b !important;
    line-height: 1.6 !important;
}

.dcb-ty-note::before {
    content: 'ℹ️' !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 580px) {
    #devilclubb-booking-wrap {
        border-left-width: 4px !important;
    }

    .dcb-steps {
        padding: 16px 16px 14px !important;
    }

    .dcb-step-label {
        display: none !important;
    }

    .dcb-panel {
        padding: 20px 16px !important;
    }

    .dcb-panel > h3 {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }

    .dcb-slots-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .dcb-summary-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 12px 14px !important;
    }

    .dcb-summary-value {
        text-align: left !important;
        max-width: 100% !important;
    }

    .dcb-btn,
    .dcb-btn-prev,
    .dcb-btn-next,
    #dcb-submit,
    .dcb-btn-submit {
        font-size: 11px !important;
        padding: 11px 16px !important;
    }

    /* Thank you — responsive */
    .dcb-ty-hero {
        padding: 32px 16px 24px !important;
    }

    .dcb-ty-check {
        width: 52px !important;
        height: 52px !important;
        line-height: 52px !important;
        font-size: 22px !important;
    }

    .dcb-ty-title {
        font-size: 18px !important;
    }

    .dcb-ty-body {
        padding: 20px 16px !important;
    }

    .dcb-ty-btn-meet,
    .dcb-ty-btn-gcal {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 16px !important;
    }
}