/* ==========================================================================
   Sunset Suite — Shared Design System
   Unified tokens + component classes for all frontend modules.
   Aligned with sunsetcaribbean.com.do + brand collateral.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --ss-brand:       #00809f;
    --ss-brand-deep:  #005f76;
    --ss-brand-soft:  #e7f8fc;
    --ss-brand-glow:  rgba(0, 128, 159, 0.14);

    /* Ink / text */
    --ss-ink:         #0b1a1f;
    --ss-ink-2:       #1f2933;
    --ss-muted:       #5b6b74;

    /* Surfaces */
    --ss-surface:     #ffffff;
    --ss-page:        #f5f9fb;
    --ss-line:        #d6e4ea;
    --ss-line-soft:   #edf3f6;

    /* Semantic */
    --ss-gold:        #e8a838;
    --ss-gold-soft:   rgba(232, 168, 56, 0.12);
    --ss-danger:      #c0392b;
    --ss-danger-soft: rgba(192, 57, 43, 0.10);
    --ss-success:     #1f7a48;
    --ss-success-soft:rgba(31, 122, 72, 0.10);

    /* Typography */
    --ss-font:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ss-text-xs:     0.75rem;    /* 12px */
    --ss-text-sm:     0.8125rem;  /* 13px */
    --ss-text-base:   0.9375rem;  /* 15px */
    --ss-text-md:     1rem;       /* 16px */
    --ss-text-lg:     1.125rem;   /* 18px */
    --ss-text-xl:     1.35rem;    /* ~22px */
    --ss-text-2xl:    1.65rem;    /* ~26px */
    --ss-text-3xl:    2.1rem;     /* ~34px */

    /* Spacing */
    --ss-space-1:     0.25rem;    /* 4px */
    --ss-space-2:     0.5rem;     /* 8px */
    --ss-space-3:     0.75rem;    /* 12px */
    --ss-space-4:     1rem;       /* 16px */
    --ss-space-5:     1.25rem;    /* 20px */
    --ss-space-6:     1.5rem;     /* 24px */
    --ss-space-7:     2rem;       /* 32px */
    --ss-space-8:     3rem;       /* 48px */

    /* Shadows */
    --ss-shadow-soft:   0 1px 4px rgba(0, 40, 60, 0.04), 0 4px 12px rgba(0, 40, 60, 0.04);
    --ss-shadow-card:   0 4px 16px rgba(0, 50, 80, 0.06), 0 12px 28px rgba(0, 50, 80, 0.06);
    --ss-shadow-float:  0 8px 30px rgba(0, 50, 80, 0.12);
    --ss-shadow-deep:   0 18px 48px rgba(0, 44, 63, 0.20);

    /* Radius */
    --ss-radius-sm:   8px;
    --ss-radius-md:   12px;
    --ss-radius-lg:   18px;
    --ss-radius-xl:   24px;
    --ss-radius-pill:  999px;

    /* Transitions */
    --ss-transition:   0.2s ease;
    --ss-transition-slow: 0.35s ease;
}

/* --------------------------------------------------------------------------
   2. BASE RESETS (scoped to sunset-suite elements)
   -------------------------------------------------------------------------- */
[class^="ss-"],
[class*=" ss-"] {
    box-sizing: border-box;
    font-family: var(--ss-font);
}

/* --------------------------------------------------------------------------
   3. CARD COMPONENTS
   -------------------------------------------------------------------------- */
.ss-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-space-5);
    box-shadow: var(--ss-shadow-card);
    transition: box-shadow var(--ss-transition), transform var(--ss-transition);
}

.ss-card:hover {
    box-shadow: var(--ss-shadow-float);
}

.ss-card--glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-card);
}

.ss-card--flat {
    box-shadow: none;
    border: 1px solid var(--ss-line);
}

.ss-card--flat:hover {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. FORM CONTROLS
   -------------------------------------------------------------------------- */
.ss-label {
    display: block;
    font-family: var(--ss-font);
    font-size: var(--ss-text-sm);
    font-weight: 600;
    color: var(--ss-ink-2);
    letter-spacing: 0.01em;
    margin-bottom: var(--ss-space-1);
}

.ss-input,
.ss-select,
.ss-textarea {
    width: 100%;
    min-height: 48px;
    font-family: var(--ss-font);
    font-size: var(--ss-text-base);
    color: var(--ss-ink);
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius-md);
    padding: 0.72rem 0.85rem;
    transition: border-color var(--ss-transition), box-shadow var(--ss-transition);
    outline: none;
}

.ss-input:focus,
.ss-select:focus,
.ss-textarea:focus {
    border-color: var(--ss-brand);
    box-shadow: 0 0 0 4px var(--ss-brand-glow);
}

.ss-input::placeholder,
.ss-textarea::placeholder {
    color: var(--ss-muted);
    opacity: 0.7;
}

.ss-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

.ss-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b6b74'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.15rem;
    padding-right: 2.5rem;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--ss-font);
    font-size: var(--ss-text-base);
    font-weight: 600;
    color: #fff;
    background: var(--ss-brand);
    border: 2px solid transparent;
    border-radius: var(--ss-radius-pill);
    padding: 0.7rem 1.6rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ss-transition);
    line-height: 1.3;
}

.ss-btn:hover {
    background: var(--ss-brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 128, 159, 0.28);
    color: #fff;
    text-decoration: none;
}

.ss-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 128, 159, 0.2);
}

.ss-btn:disabled,
.ss-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--ss-muted);
}

.ss-btn--outline {
    background: transparent;
    color: var(--ss-brand);
    border-color: var(--ss-brand);
}

.ss-btn--outline:hover {
    background: var(--ss-brand-soft);
    color: var(--ss-brand-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 128, 159, 0.12);
}

.ss-btn--sm {
    font-size: var(--ss-text-sm);
    padding: 0.45rem 1rem;
}

.ss-btn--ghost {
    background: transparent;
    color: var(--ss-brand);
    border-color: transparent;
    padding: 0.45rem 0.9rem;
}

.ss-btn--ghost:hover {
    background: rgba(0, 128, 159, 0.06);
    color: var(--ss-brand-deep);
    box-shadow: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   6. BADGES (pill tags — inspired by PDF price/status badges)
   -------------------------------------------------------------------------- */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--ss-font);
    font-size: var(--ss-text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.28rem 0.7rem;
    border-radius: var(--ss-radius-pill);
    background: var(--ss-brand-soft);
    color: var(--ss-brand-deep);
    white-space: nowrap;
    line-height: 1.4;
}

.ss-badge--brand {
    background: var(--ss-brand);
    color: #fff;
}

.ss-badge--gold {
    background: var(--ss-gold-soft);
    color: #8a5d10;
}

.ss-badge--success {
    background: var(--ss-success-soft);
    color: var(--ss-success);
}

.ss-badge--danger {
    background: var(--ss-danger-soft);
    color: var(--ss-danger);
}

.ss-badge--pending {
    background: var(--ss-gold-soft);
    color: #916a1a;
}

.ss-badge--neutral {
    background: rgba(91, 107, 116, 0.1);
    color: var(--ss-muted);
}

/* --------------------------------------------------------------------------
   7. SECTION TITLES (with teal accent underline)
   -------------------------------------------------------------------------- */
.ss-section-title {
    font-family: var(--ss-font);
    font-size: var(--ss-text-md);
    font-weight: 700;
    color: var(--ss-ink);
    margin: 0 0 var(--ss-space-4);
    padding-bottom: var(--ss-space-2);
    border-bottom: 2px solid var(--ss-brand);
    display: inline-block;
}

.ss-section-title--left-accent {
    border-bottom: none;
    border-left: 3px solid var(--ss-brand);
    padding-left: var(--ss-space-3);
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. DIVIDERS
   -------------------------------------------------------------------------- */
.ss-divider {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, var(--ss-brand), transparent);
    margin: var(--ss-space-5) 0;
}

.ss-divider--subtle {
    height: 1px;
    background: var(--ss-line);
}

/* --------------------------------------------------------------------------
   9. TABLES (inspired by PDF itinerary/tariff tables)
   -------------------------------------------------------------------------- */
.ss-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--ss-font);
    font-size: var(--ss-text-sm);
    border-radius: var(--ss-radius-md);
    overflow: hidden;
    box-shadow: var(--ss-shadow-soft);
}

.ss-table thead th {
    background: var(--ss-brand);
    color: #fff;
    font-weight: 700;
    font-size: var(--ss-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.72rem 0.85rem;
    text-align: left;
    border: none;
}

.ss-table tbody td {
    padding: 0.68rem 0.85rem;
    border-bottom: 1px solid var(--ss-line-soft);
    color: var(--ss-ink-2);
    vertical-align: middle;
}

.ss-table tbody tr:nth-child(even) {
    background: rgba(214, 228, 234, 0.15);
}

.ss-table tbody tr:hover {
    background: rgba(0, 128, 159, 0.04);
}

.ss-table tbody tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   10. ICON CIRCLES (from PDF day markers)
   -------------------------------------------------------------------------- */
.ss-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ss-brand-soft);
    color: var(--ss-brand);
    font-size: var(--ss-text-base);
    flex-shrink: 0;
}

.ss-icon-circle--sm {
    width: 28px;
    height: 28px;
    font-size: var(--ss-text-sm);
}

.ss-icon-circle--brand {
    background: var(--ss-brand);
    color: #fff;
}

/* --------------------------------------------------------------------------
   11. GLASS OVERLAY UTILITY
   -------------------------------------------------------------------------- */
.ss-glass-overlay {
    position: relative;
}

.ss-glass-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 28, 0.46);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: inherit;
    z-index: 1;
}

.ss-glass-overlay > * {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   12. ALERT / NOTICE BOXES
   -------------------------------------------------------------------------- */
.ss-alert {
    font-family: var(--ss-font);
    font-size: var(--ss-text-sm);
    padding: 0.72rem 1rem;
    border-radius: var(--ss-radius-md);
    border-left: 3px solid var(--ss-brand);
    background: var(--ss-brand-soft);
    color: var(--ss-ink-2);
    line-height: 1.5;
}

.ss-alert--success {
    border-left-color: var(--ss-success);
    background: var(--ss-success-soft);
    color: var(--ss-success);
}

.ss-alert--danger {
    border-left-color: var(--ss-danger);
    background: var(--ss-danger-soft);
    color: var(--ss-danger);
}

.ss-alert--warning {
    border-left-color: var(--ss-gold);
    background: var(--ss-gold-soft);
    color: #8a5d10;
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE UTILITIES
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .ss-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .ss-hide-desktop { display: none !important; }
}