/**
 * Booking System - Theme Overrides
 * Aligns the React booking widget with the CPM Salute design system
 *
 * Brand Colors:
 * - Teal: #3BA9A9 (primary)
 * - Teal Light: #5CBFBF
 * - Teal Dark: #2D8A8A
 * - Blue (Navy): #1D5C6B
 * - Blue Dark: #154854
 * - Text: #1A2C37
 * - Border: #E2E6EC
 *
 * Typography:
 * - Headings: Outfit (via Salient theme)
 * - Body: Inter (via booking widget)
 */

/* ============================================================
   DESIGN SYSTEM ALIGNMENT
   ============================================================ */

.cpm-booking-widget {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Update CSS custom properties to match brand */
.cpm-booking-widget {
    --cpm-teal: #3BA9A9;
    --cpm-teal-light: #5CBFBF;
    --cpm-teal-dark: #2D8A8A;
    --cpm-teal-btn: #2F8787; /* WCAG AA compliant */
    --cpm-teal-btn-hover: #236565;
    --cpm-blue: #1D5C6B;
    --cpm-blue-light: #2A7A8C;
    --cpm-blue-dark: #154854;
    --cpm-text: #1A2C37;
    --cpm-gray: #6C757D;
    --cpm-gray-light: #F8F9FA;
    --cpm-border: #E2E6EC;
}

/* ============================================================
   BORDER RADIUS SYSTEM
   ============================================================ */

/* Update border radius to match design system */
.cpm-booking-widget .cpm-card,
.cpm-booking-widget .rounded-xl {
    border-radius: 1rem; /* 16px */
}

.cpm-booking-widget .rounded-lg {
    border-radius: 0.75rem; /* 12px */
}

.cpm-booking-widget .rounded,
.cpm-booking-widget .rounded-md {
    border-radius: 0.5rem; /* 8px */
}

.cpm-booking-widget button,
.cpm-booking-widget .cpm-btn-primary,
.cpm-booking-widget .cpm-btn-ghost {
    border-radius: 0.5rem; /* 8px - softer than default */
}

.cpm-booking-widget input,
.cpm-booking-widget select,
.cpm-booking-widget textarea {
    border-radius: 0.5rem; /* 8px */
}

/* ============================================================
   SHADOW SYSTEM
   ============================================================ */

/* Update shadows to be softer and more elegant */
.cpm-booking-widget .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.cpm-booking-widget .shadow,
.cpm-booking-widget .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.cpm-booking-widget .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

.cpm-booking-widget .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

.cpm-booking-widget .cpm-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cpm-booking-widget .cpm-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   BUTTONS - PRIMARY
   ============================================================ */

.cpm-booking-widget .cpm-btn-primary {
    background: linear-gradient(135deg, #2F8787 0%, #236565 100%);
    color: white;
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(47, 135, 135, 0.2);
}

.cpm-booking-widget .cpm-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #236565 0%, #1a4e4e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(47, 135, 135, 0.3);
}

.cpm-booking-widget .cpm-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(59, 169, 169, 0.2);
}

.cpm-booking-widget .cpm-btn-primary:disabled {
    background: #E2E6EC;
    color: #6C757D;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   BUTTONS - SECONDARY/GHOST
   ============================================================ */

.cpm-booking-widget .cpm-btn-ghost {
    background: white;
    border: 2px solid #E2E6EC;
    color: #1D5C6B;
    font-weight: 500;
    transition: all 0.2s ease;
}

.cpm-booking-widget .cpm-btn-ghost:hover:not(:disabled) {
    background: #F8F9FA;
    border-color: #3BA9A9;
    color: #1D5C6B;
}

.cpm-booking-widget .cpm-btn-ghost:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   FORM INPUTS
   ============================================================ */

.cpm-booking-widget input,
.cpm-booking-widget select,
.cpm-booking-widget textarea {
    border: 1px solid #E2E6EC;
    background: white;
    color: #1A2C37;
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
    transition: all 0.2s ease;
}

.cpm-booking-widget input:focus,
.cpm-booking-widget select:focus,
.cpm-booking-widget textarea:focus {
    outline: none;
    border-color: #3BA9A9;
    box-shadow: 0 0 0 3px rgba(59, 169, 169, 0.1);
}

.cpm-booking-widget input::placeholder,
.cpm-booking-widget textarea::placeholder {
    color: #6C757D;
}

/* ============================================================
   STEP INDICATOR / PROGRESS
   ============================================================ */

/* Style the step progress bar */
.cpm-booking-widget [class*="step"] {
    color: #1D5C6B;
}

.cpm-booking-widget .bg-cpm-teal {
    background: linear-gradient(135deg, #3BA9A9 0%, #2D8A8A 100%);
}

.cpm-booking-widget .text-cpm-teal {
    color: #3BA9A9;
}

.cpm-booking-widget .border-cpm-teal {
    border-color: #3BA9A9;
}

/* ============================================================
   CARDS & SELECTIONS
   ============================================================ */

/* Service/Time slot cards */
.cpm-booking-widget .cpm-card {
    border: 2px solid #E2E6EC;
    transition: all 0.2s ease;
}

.cpm-booking-widget .cpm-card:hover {
    border-color: #3BA9A9;
}

.cpm-booking-widget .cpm-card.selected,
.cpm-booking-widget .border-cpm-teal {
    border-color: #3BA9A9;
    background: linear-gradient(135deg, rgba(59, 169, 169, 0.05) 0%, rgba(59, 169, 169, 0.02) 100%);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.cpm-booking-widget .bg-gradient-to-b {
    background: linear-gradient(135deg, #1D5C6B 0%, #154854 100%);
}

.cpm-booking-widget .bg-cpm-blue {
    background: #1D5C6B;
}

.cpm-booking-widget .text-white {
    color: white;
}

/* ============================================================
   DATE PICKER INTEGRATION
   ============================================================ */

/* Override react-datepicker colors */
.cpm-booking-widget .react-datepicker__header {
    background: linear-gradient(135deg, #1D5C6B 0%, #154854 100%);
}

.cpm-booking-widget .react-datepicker__day--selected,
.cpm-booking-widget .react-datepicker__day--keyboard-selected {
    background-color: #3BA9A9 !important;
    color: white !important;
}

.cpm-booking-widget .react-datepicker__day--selected:hover,
.cpm-booking-widget .react-datepicker__day--keyboard-selected:hover {
    background-color: #2D8A8A !important;
}

.cpm-booking-widget .react-datepicker__navigation:hover .react-datepicker__navigation-icon::before {
    border-color: #3BA9A9;
}

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

.cpm-booking-widget .animate-spin {
    border-color: rgba(59, 169, 169, 0.2);
    border-top-color: #3BA9A9;
}

/* ============================================================
   ALERTS & MESSAGES
   ============================================================ */

.cpm-booking-widget .bg-green-50 {
    background: #ECFDF5;
    border-color: #6EE7B7;
}

.cpm-booking-widget .bg-red-50 {
    background: #FEF2F2;
    border-color: #FCA5A5;
}

.cpm-booking-widget .bg-amber-50,
.cpm-booking-widget .bg-yellow-50 {
    background: #FFFBEB;
    border-color: #FCD34D;
}

.cpm-booking-widget .bg-blue-50 {
    background: #EFF6FF;
    border-color: #93C5FD;
}

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

@media (max-width: 768px) {
    .cpm-booking-widget {
        font-size: 0.9375rem; /* Slightly larger text on mobile */
    }

    .cpm-booking-widget .cpm-btn-primary,
    .cpm-booking-widget .cpm-btn-ghost {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }

    .cpm-booking-widget input,
    .cpm-booking-widget select,
    .cpm-booking-widget textarea {
        font-size: 1rem; /* Prevent iOS zoom on focus */
        padding: 0.75rem 1rem;
    }
}

/* ============================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================ */

.cpm-booking-widget *:focus-visible {
    outline: 2px solid #3BA9A9;
    outline-offset: 2px;
}

.cpm-booking-widget button:focus-visible,
.cpm-booking-widget .cpm-btn-primary:focus-visible,
.cpm-booking-widget .cpm-btn-ghost:focus-visible {
    outline: 2px solid #3BA9A9;
    outline-offset: 2px;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    .cpm-booking-widget {
        background: white !important;
        color: black !important;
    }

    .cpm-booking-widget .bg-gradient-to-b,
    .cpm-booking-widget .bg-cpm-blue,
    .cpm-booking-widget .bg-cpm-teal {
        background: white !important;
        border: 1px solid #ddd !important;
    }

    .cpm-booking-widget button {
        display: none;
    }
}

/* ============================================================
   SALIENT THEME COMPATIBILITY
   ============================================================ */

/* Ensure Salient styles don't interfere */
.cpm-booking-widget * {
    box-sizing: border-box;
}

.cpm-booking-widget ul,
.cpm-booking-widget li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.cpm-booking-widget a {
    text-decoration: none;
}

/* Override Salient button styles */
.cpm-booking-widget button.cpm-btn-primary,
.cpm-booking-widget button.cpm-btn-ghost {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: none;
    letter-spacing: normal;
}

/* ============================================================
   SMOOTH SCROLLING & ANIMATIONS
   ============================================================ */

.cpm-booking-widget {
    scroll-behavior: smooth;
}

.cpm-booking-widget .transition-all {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   CUSTOM ENHANCEMENTS
   ============================================================ */

/* Add subtle hover effect to interactive elements */
.cpm-booking-widget [role="button"]:hover,
.cpm-booking-widget button:hover:not(:disabled) {
    cursor: pointer;
}

/* Loading skeleton shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.cpm-booking-widget .loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}