/**
 * Estilos do Booking Add-on - DPS
 *
 * CSS complementar para a página dedicada de agendamentos.
 * Herda estilos do plugin base e adiciona ajustes específicos para a página.
 *
 * @package Desi_Pet_Shower_Booking
 * @since 1.0.0
 * @since 1.1.0 Simplificado para herdar estilos do plugin base.
 * @since 1.3.0 Migrado para Material 3 Expressive design tokens.
 */

/* ==========================================================================
   Semantic Mapping — Booking Addon Wrapper
   ========================================================================== */

.dps-booking-wrapper {
    /* Colors */
    --booking-text-primary: var(--dps-color-on-surface);
    --booking-text-secondary: var(--dps-color-on-surface-variant);
    --booking-surface-elevated: var(--dps-color-surface-container-lowest);
    --booking-surface-subtle: var(--dps-color-surface-container-low);
    --booking-border: var(--dps-color-outline-variant);
    --booking-border-hover: var(--dps-color-outline);
    
    /* Typography */
    font-family: var(--dps-font-system);
}

/* ==========================================================================
   1. Container Principal
   ========================================================================== */

.dps-booking-wrapper {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ==========================================================================
   2. Header da Página
   ========================================================================== */

.dps-booking-page-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--booking-border);
}

.dps-booking-page-header .dps-page-title {
    font-size: var(--dps-typescale-headline-medium-size);
    font-weight: var(--dps-typescale-headline-medium-weight);
    line-height: var(--dps-typescale-headline-medium-line);
    color: var(--booking-text-primary);
    margin: 0 0 12px;
}

.dps-booking-page-header .dps-page-subtitle {
    font-size: var(--dps-typescale-body-large-size);
    line-height: var(--dps-typescale-body-large-line);
    color: var(--booking-text-secondary);
    margin: 0;
}

/* ==========================================================================
   3. Access Denied
   ========================================================================== */

.dps-booking-access-denied {
    max-width: 500px;
    margin: 60px auto;
    padding: 40px;
    text-align: center;
    background: var(--booking-surface-elevated);
    border: 1px solid var(--booking-border);
    border-radius: var(--dps-shape-medium);
    box-shadow: var(--dps-elevation-1);
}

.dps-booking-access-denied p {
    margin: 0 0 20px;
    font-size: var(--dps-typescale-body-large-size);
    line-height: var(--dps-typescale-body-large-line);
    color: var(--booking-text-primary);
}

.dps-booking-access-denied .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dps-space-3) var(--dps-space-6);
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    line-height: var(--dps-typescale-label-large-line);
    text-decoration: none;
    border: none;
    border-radius: var(--dps-shape-button);
    min-height: 40px;
    cursor: pointer;
    transition: background-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard),
                transform var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard),
                box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
    box-shadow: var(--dps-elevation-button);
    text-shadow: none;
}

.dps-booking-access-denied .button:hover {
    background: var(--dps-color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-3);
    color: var(--dps-color-on-primary);
}

.dps-booking-access-denied .button:active {
    background: var(--dps-color-primary-pressed);
    transform: translateY(0);
}

/* ==========================================================================
   4. Seção de Agendamentos
   ========================================================================== */

.dps-booking-wrapper .dps-section {
    display: block;
}

.dps-booking-wrapper .dps-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--dps-typescale-title-large-size);
    font-weight: var(--dps-typescale-title-large-weight);
    line-height: var(--dps-typescale-title-large-line);
    color: var(--booking-text-primary);
    margin: 0 0 24px;
}

.dps-booking-wrapper .dps-section-title__icon {
    font-size: var(--dps-typescale-headline-medium-size);
}

/* ==========================================================================
   5. Ajustes de Formulário para Página Dedicada
   ========================================================================== */

.dps-booking-wrapper .dps-surface {
    margin-bottom: 24px;
}

.dps-booking-wrapper .dps-form-actions {
    padding-top: 24px;
    border-top: 1px solid var(--booking-border);
    margin-top: 24px;
}

.dps-booking-wrapper .dps-surface--info {
    background: var(--booking-surface-elevated);
    border: 1px solid var(--booking-border);
    border-radius: var(--dps-shape-medium);
    box-shadow: var(--dps-elevation-1);
}

.dps-booking-wrapper .dps-form {
    display: grid;
    gap: var(--dps-space-5);
}

.dps-booking-wrapper .dps-radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--dps-space-3);
}

.dps-booking-wrapper .dps-pet-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dps-space-2);
    margin-bottom: var(--dps-space-3);
}

.dps-booking-wrapper .dps-pet-list {
    max-height: 320px;
    overflow: auto;
    padding-right: var(--dps-space-2);
}

.dps-booking-wrapper .dps-appointment-summary {
    position: sticky;
    bottom: var(--dps-space-2);
    z-index: 2;
    border-radius: var(--dps-shape-medium);
    border: 1px solid var(--booking-border);
    box-shadow: var(--dps-elevation-1);
}

.dps-booking-wrapper .dps-form-actions .dps-btn {
    min-height: 44px;
}

.dps-booking-wrapper .dps-btn:focus-visible,
.dps-booking-wrapper input:focus-visible,
.dps-booking-wrapper select:focus-visible,
.dps-booking-wrapper textarea:focus-visible,
.dps-booking-wrapper .dps-pet-option:focus-within,
.dps-booking-wrapper .dps-radio-option:focus-within {
    outline: 2px solid var(--dps-color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   6. Confirmation Page
   ========================================================================== */

.dps-booking-confirmation {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.dps-confirmation-header {
    padding: 40px 20px 30px;
}

.dps-confirmation-icon {
    display: inline-block;
    font-size: var(--dps-typescale-display-small-size);
    margin-bottom: 16px;
    animation: dps-booking-bounce var(--dps-motion-duration-medium-2) var(--dps-motion-easing-emphasized-decelerate);
}

@keyframes dps-booking-bounce {
    0% { 
        transform: scale(0.5); 
        opacity: 0; 
    }
    60% { 
        transform: scale(1.1); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Suporte a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dps-confirmation-icon {
        animation: none;
        opacity: 1;
    }
}

.dps-confirmation-title {
    font-size: var(--dps-typescale-headline-medium-size);
    font-weight: var(--dps-typescale-headline-medium-weight);
    line-height: var(--dps-typescale-headline-medium-line);
    color: var(--booking-text-primary);
    margin: 0 0 8px;
}

.dps-confirmation-subtitle {
    font-size: var(--dps-typescale-body-large-size);
    line-height: var(--dps-typescale-body-large-line);
    color: var(--booking-text-secondary);
    margin: 0;
}

.dps-confirmation-details {
    background: var(--booking-surface-subtle);
    border: 1px solid var(--booking-border);
    border-radius: var(--dps-shape-medium);
    padding: 24px;
    margin: 0 0 24px;
    text-align: left;
}

.dps-confirmation-details h3 {
    font-size: var(--dps-typescale-title-medium-size);
    font-weight: var(--dps-typescale-title-medium-weight);
    line-height: var(--dps-typescale-title-medium-line);
    color: var(--booking-text-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--booking-border);
}

.dps-confirmation-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 16px;
    margin: 0;
}

.dps-confirmation-list dt {
    font-weight: var(--dps-typescale-body-medium-weight);
    color: var(--booking-text-secondary);
    margin: 0;
}

.dps-confirmation-list dd {
    font-weight: var(--dps-typescale-body-medium-weight);
    color: var(--booking-text-primary);
    margin: 0;
}

.dps-confirmation-list dd strong {
    font-size: var(--dps-typescale-title-medium-size);
    color: var(--dps-color-success);
}

.dps-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dps-shape-full);
    font-size: var(--dps-typescale-label-medium-size);
    font-weight: var(--dps-typescale-label-medium-weight);
    line-height: var(--dps-typescale-label-medium-line);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dps-status--pendente {
    background: var(--dps-color-warning-container);
    color: var(--dps-color-on-warning-container);
}

.dps-status--finalizado {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-status--finalizado_pago {
    background: var(--dps-color-success-container);
    color: var(--dps-color-on-success-container);
}

.dps-status--cancelado {
    background: var(--dps-color-error-container);
    color: var(--dps-color-on-error-container);
}

.dps-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.dps-confirmation-actions .dps-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dps-space-2);
    padding: var(--dps-space-3) var(--dps-space-5);
    font-size: var(--dps-typescale-label-large-size);
    font-weight: var(--dps-typescale-label-large-weight);
    line-height: var(--dps-typescale-label-large-line);
    text-decoration: none;
    border-radius: var(--dps-shape-button);
    min-height: 40px;
    cursor: pointer;
    transition: background-color var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard),
                transform var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard),
                box-shadow var(--dps-motion-duration-short-4) var(--dps-motion-easing-standard);
}

.dps-confirmation-actions .dps-btn--primary {
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
    border: none;
}

.dps-confirmation-actions .dps-btn--primary:hover {
    background: var(--dps-color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--dps-elevation-3);
    color: var(--dps-color-on-primary);
}

.dps-confirmation-actions .dps-btn--primary:active {
    background: var(--dps-color-primary-pressed);
    transform: translateY(0);
}

.dps-confirmation-actions .dps-btn--secondary {
    background: var(--booking-surface-elevated);
    color: var(--booking-text-primary);
    border: 1px solid var(--booking-border);
}

.dps-confirmation-actions .dps-btn--secondary:hover {
    background: var(--booking-surface-subtle);
    border-color: var(--booking-border-hover);
    color: var(--booking-text-primary);
}

.dps-confirmation-actions .dps-btn--outline {
    background: transparent;
    color: var(--dps-color-primary);
    border: 1px solid var(--dps-color-outline);
}

.dps-confirmation-actions .dps-btn--outline:hover {
    background: var(--dps-color-primary);
    color: var(--dps-color-on-primary);
}

/* ==========================================================================
   7. Responsividade
   ========================================================================== */

/* Tablet grande (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .dps-booking-wrapper {
        max-width: 720px;
        margin: 32px auto;
    }
}

/* Tablet (768px) */
@media (max-width: 768px) {
    .dps-booking-wrapper {
        margin: 24px auto;
        padding: 0 16px;
    }

    .dps-booking-page-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .dps-booking-page-header .dps-page-title {
        font-size: var(--dps-typescale-headline-small-size);
    }

    .dps-booking-page-header .dps-page-subtitle {
        font-size: var(--dps-typescale-body-medium-size);
    }

    .dps-booking-wrapper .dps-section-title {
        font-size: var(--dps-typescale-title-medium-size);
    }

    .dps-confirmation-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dps-confirmation-list dt {
        margin-bottom: -4px;
    }
}

/* Mobile (640px) */
@media (max-width: 640px) {
    .dps-booking-wrapper {
        margin: 16px auto;
        padding: 0 12px;
    }

    .dps-booking-page-header .dps-page-title {
        font-size: var(--dps-typescale-title-large-size);
    }

    .dps-booking-access-denied {
        margin: 40px auto;
        padding: 30px 20px;
    }

    .dps-confirmation-header {
        padding: 30px 16px 24px;
    }

    .dps-confirmation-icon {
        font-size: 48px;
    }

    .dps-confirmation-title {
        font-size: var(--dps-typescale-headline-small-size);
    }

    .dps-confirmation-actions {
        flex-direction: column;
    }

    .dps-confirmation-actions .dps-btn {
        width: 100%;
        justify-content: center;
    }

    .dps-booking-wrapper .dps-appointment-summary {
        position: static;
    }

    .dps-booking-wrapper .dps-pet-list {
        max-height: 260px;
    }
}

/* Mobile pequeno (480px) */
@media (max-width: 480px) {
    .dps-booking-wrapper {
        padding: 0 8px;
    }

    .dps-booking-page-header {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .dps-booking-page-header .dps-page-title {
        font-size: var(--dps-typescale-title-medium-size);
    }

    .dps-booking-page-header .dps-page-subtitle {
        font-size: var(--dps-typescale-body-small-size);
    }

    .dps-booking-wrapper .dps-section-title {
        font-size: var(--dps-typescale-title-small-size);
    }

    .dps-booking-access-denied {
        margin: 24px auto;
        padding: 24px 16px;
    }
}

/* ==========================================================================
   8. Print Styles
   ========================================================================== */

@media print {
    .dps-booking-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .dps-booking-page-header {
        border: none;
    }

    .dps-confirmation-actions {
        display: none;
    }
}