/* ======================================================
   BAUNDULE DESIGN SYSTEM — PROFESSIONAL MASTER CSS
   Tone: Premium travel / editorial luxury / enterprise-safe
   Brand: Gold + Noir + Warm Ivory
   Status: FULL PRODUCTION READY (Zero Skips)
====================================================== */

/* ================= ROOT ================= */
:root {
    /* Bootstrap bridge */
    --bs-primary: #f5c400;
    --bs-primary-rgb: 245, 196, 0;
    --bs-secondary: #111111;
    --bs-secondary-rgb: 17, 17, 17;
    --bs-success: #1f8f43;
    --bs-dark: #000000;
    --bs-white: #ffffff;

    /* Brand Colors */
    --color-primary: #f5c400;
    --color-primary-hover: #ddb000;
    --color-primary-active: #bf9600;
    --color-primary-soft: rgba(245, 196, 0, 0.12);
    --color-primary-softer: rgba(245, 196, 0, 0.07);

    /* Luxury Neutrals */
    --color-bg: #faf7ef;
    --color-surface: #ffffff;
    --color-surface-2: #f4efe4;
    --color-surface-3: #ede6d7;
    --color-surface-dark: #161616;

    --color-text: #121212;
    --color-text-muted: #5f5a52;
    --color-text-faint: #8d877d;
    --color-text-inverse: #f7f3ea;

    --color-border: rgba(17, 17, 17, 0.08);
    --color-border-strong: rgba(17, 17, 17, 0.14);
    --color-divider: rgba(17, 17, 17, 0.06);

    --color-success: #1f8f43;
    --color-warning: #9a6b00;
    --color-danger: #b42318;

    --color-brand-gradient: linear-gradient(135deg, #f5c400 0%, #d4a800 100%);

    /* Preloader */
    --pre-bg: #06070a;
    --pre-gold: #d6a84f;
    --pre-text: #f6f1e8;
    --pre-soft: rgba(255, 255, 255, 0.52);
    --pre-line: rgba(255, 255, 255, 0.14);
    --pre-ease: cubic-bezier(.22, 1, .36, 1);
    
    
    --nav-text-light: rgba(255,255,255,0.9);
    --nav-text-dark: #171717;
    --nav-text-muted: #6b7280;
    --nav-border-soft: rgba(0,0,0,0.08);
    --nav-border-strong: rgba(0,0,0,0.12);
    --nav-surface: rgba(255,255,255,0.96);
    --nav-surface-soft: rgba(255,255,255,0.08);
    --nav-shadow: 0 8px 24px rgba(0,0,0,0.08);
    --nav-shadow-lg: 0 20px 50px rgba(0,0,0,0.10);
    --nav-radius-sm: 12px;
    --nav-radius-md: 16px;
    --nav-radius-lg: 18px;
    --nav-radius-full: 999px;
    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-transition: 0.28s var(--nav-ease);
    
    --mobile-bar-height: 64px;
    --mobile-bar-offset: 12px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale */
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
    --text-base: clamp(1rem, 0.98rem + 0.2vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.4rem);
    --text-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
    --text-2xl: clamp(2.2rem, 1.5rem + 3.2vw, 4.75rem);
    --text-hero: clamp(2.8rem, 1.8rem + 4.5vw, 6rem);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(22, 18, 8, 0.05);
    --shadow-md: 0 10px 28px rgba(22, 18, 8, 0.08);
    --shadow-lg: 0 22px 60px rgba(22, 18, 8, 0.12);
    --shadow-focus: 0 0 0 4px rgba(245, 196, 0, 0.18);

    /* Motion */
    --transition-fast: 180ms cubic-bezier(.16, 1, .3, 1);
    --transition-smooth: 280ms cubic-bezier(.16, 1, .3, 1);

    /* Layout */
    --container-width: 1320px;
    --container-wide: 1440px;
    --container-narrow: 860px;
    --header-height: 90px;
    --section-padding: clamp(56px, 7vw, 104px);
}

/* ================= GLOBAL RESET ================= */
html {
    width: 100%;
    overflow-x: clip;
    overflow-y: auto; 
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

img, picture, video, canvas, svg, iframe {
    display: block;
    max-width: 100%;
}

img, video {
    height: auto;
}

ul, ol {
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

/* ================= SCROLLBAR STABILITY ================= */
body, body.modal-open, body.swal2-shown, html.swal2-shown {
    padding-right: 0 !important;
    margin-right: 0 !important;
}

body.modal-open {
    overflow-y: scroll !important;
}

.swal2-container {
    padding: 1rem !important;
}

.swal2-popup {
    box-sizing: border-box;
}

/* ======================================================
   ACCESSIBLE FOCUS SYSTEM — CLEAN + NO BOOTSTRAP BLUE
   Keeps keyboard UX, removes ugly browser/Bootstrap glow
====================================================== */

/* ================= REMOVE DEFAULT BLUE (MOUSE ONLY) ================= */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove tap highlight (mobile) */
button,
.btn,
input,
textarea,
select,
.form-control,
.form-select,
.form-check-input,
.page-link,
.nav-link,
.dropdown-item,
.dropdown-toggle,
a {
    -webkit-tap-highlight-color: transparent !important;
}

/* ================= KILL BOOTSTRAP FOCUS + ACTIVE BLUE ================= */
.btn,
button,
.page-link,
.nav-link,
.dropdown-toggle,
.form-control,
.form-select,
.form-check-input {
    --bs-btn-focus-shadow-rgb: 0,0,0 !important;
    --bs-focus-ring-color: transparent !important;
}

/* Remove all unwanted glow */
.btn:focus,
.btn:active,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active,
button:focus,
button:active,
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus,
.page-link:active,
.nav-link:focus,
.nav-link:active,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-toggle:focus,
.dropdown-toggle:active,
a:focus {
    outline: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* ================= FORM FOCUS (CUSTOM BRAND, NOT BLUE) ================= */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(245, 196, 0, 0.6) !important;
    background: #fffdf7;
}

/* Checkbox / radio fix */
.form-check-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}

/* ================= KEYBOARD ACCESSIBILITY (ONLY WHEN TAB) ================= */
:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 3px !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Special tighter focus for dropdown items */
.dropdown-menu .dropdown-item:focus-visible {
    background: rgba(245, 196, 0, 0.10) !important;
    outline: 2px solid var(--color-primary) !important;
    outline-offset: -2px !important;
}

/* ================= DROPDOWN CLEAN SYSTEM ================= */
.dropdown-menu .dropdown-item {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(245, 196, 0, 0.08) !important;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
    background: rgba(245, 196, 0, 0.14) !important;
}

/* ================= FIREFOX FIX ================= */
button::-moz-focus-inner,
input::-moz-focus-inner,
select::-moz-focus-inner {
    border: 0 !important;
}

/* ================= LAYOUT SAFETY ================= */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    width: 100%;
    max-width: var(--container-width);
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}

.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
    min-width: 0;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

section, .section {
    position: relative;
    padding-block: var(--section-padding);
}

/* ================= TYPOGRAPHY ================= */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--bs-secondary);
    text-wrap: balance;
}

h1 { font-size: var(--text-hero); font-weight: 700; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; }
h5, h6 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; }

p { margin: 0 0 var(--space-4); max-width: 65ch; color: var(--color-text-muted); text-wrap: pretty; }
.lead, .text-lead { font-size: var(--text-lg); line-height: 1.75; color: #4f4a43; }

.text-dark { color: var(--color-text) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* ======================================================
   BUTTONS (FINAL PRODUCTION FIXED — NO TEXT ISSUE)
====================================================== */

/* ================= BUTTON CORE ================= */
.btn {
    --bs-btn-focus-shadow-rgb: 0, 0, 0;

    position: relative;
    z-index: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 14px 26px;

    border-radius: var(--radius-full);
    border: 1px solid transparent;

    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.01em;

    cursor: pointer;
    overflow: hidden;
    isolation: isolate;

    transition: all var(--transition-fast);

    box-shadow: none !important;
    outline: none !important;
}

/* ================= TEXT ALWAYS ON TOP ================= */
.btn,
.btn * {
    position: relative;
    z-index: 3;
    color: inherit;
}

/* ================= OVERLAY ================= */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-smooth);
}

/* subtle shine (reduced) */
.btn::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: inherit;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        transparent
    );

    opacity: 0.2;
}

/* ================= HOVER ================= */
.btn:hover {
    transform: translateY(-2px);
}

.btn:hover::before {
    transform: scaleX(1);
}

/* ================= ACTIVE ================= */
.btn:active {
    transform: translateY(0) scale(0.97);
}

/* ================= PRIMARY ================= */
.btn-primary {
    background: linear-gradient(135deg, #f5c400, #d4a800) !important;
    border-color: #f5c400 !important;
    color: #111 !important;

    box-shadow: 0 10px 24px rgba(245, 196, 0, 0.25) !important;
}

/* hover FIXED (this was your issue) */
.btn-primary:hover {
    background: linear-gradient(135deg, #ffd633, #e0b800) !important;
    color: #000 !important; /* 🔥 FORCE CONTRAST */
    border-color: #e0b800 !important;
}

/* ================= OUTLINE ================= */
.btn-outline,
.btn-outline-primary {
    background: transparent !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong) !important;
}

.btn-outline::before {
    background: rgba(245, 196, 0, 0.2);
}

.btn-outline:hover {
    color: #000 !important;
    border-color: var(--color-primary) !important;
}

/* ================= DARK ================= */
.btn-dark {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

.btn-dark:hover {
    background: #000 !important;
    color: #fff !important;
}

/* ================= GHOST ================= */
.btn-ghost {
    background: transparent !important;
    color: var(--color-text-muted) !important;
}

.btn-ghost::before {
    background: rgba(245, 196, 0, 0.12);
}

.btn-ghost:hover {
    color: var(--color-text) !important;
}

/* ================= DISABLED ================= */
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

.btn:disabled::before {
    transform: scaleX(0) !important;
}
/* ================= CARDS ================= */
.card {
    position: relative;
    height: 100%;
    padding: clamp(24px, 2.5vw, 36px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(17, 17, 17, 0.12); }

/* ================= FORM ELEMENTS ================= */
.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

textarea { min-height: 120px; resize: vertical; }
.form-control::placeholder, textarea::placeholder, input::placeholder { color: var(--color-text-faint); }

.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    border-color: rgba(245, 196, 0, 0.7) !important;
    background: #fffdf7;
}

label, .form-label { display: inline-block; margin-bottom: 8px; font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }

/* ================= BADGES & LISTS ================= */
.badge, .chip, .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--bs-dark);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(245, 196, 0, 0.18);
}

.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean li + li { margin-top: 12px; }

/* ================= MEDIA ================= */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.media-radius { overflow: hidden; border-radius: var(--radius-lg); }

/* ================= TABLES ================= */
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--color-text); vertical-align: middle; }
.table > :not(caption) > * > * { padding: 16px 14px; border-bottom: 1px solid var(--color-divider); }
.table thead th { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

/* ================= UTILITY SURFACES ================= */
.surface { background: var(--color-surface); }
.surface-soft { background: var(--color-surface-2); }
.surface-warm { background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(244,239,228,0.92) 100%); }
.border-soft { border: 1px solid var(--color-border); }
.shadow-soft { box-shadow: var(--shadow-sm); }
.shadow-medium { box-shadow: var(--shadow-md); }

/* ================= MODALS ================= */
.modal-content { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: var(--color-surface); }
.modal-header, .modal-footer { border-color: var(--color-divider); }

/* ================= SWEETALERT2 BRANDING ================= */
.swal2-popup { border-radius: 24px !important; padding: 2rem !important; background: #fffdf8 !important; color: var(--color-text) !important; box-shadow: 0 24px 70px rgba(18, 18, 18, 0.18) !important; }
.swal2-title { font-family: var(--font-display) !important; font-size: clamp(1.8rem, 1.2rem + 1.2vw, 2.6rem) !important; line-height: 1.1 !important; color: var(--color-text) !important; }
.swal2-html-container { font-family: var(--font-body) !important; font-size: var(--text-base) !important; color: var(--color-text-muted) !important; }
.swal2-confirm { background: var(--color-primary) !important; color: #111 !important; border-radius: 999px !important; padding: 0.95rem 1.5rem !important; font-weight: 800 !important; box-shadow: 0 10px 24px rgba(245, 196, 0, 0.22) !important; }
.swal2-cancel { background: #111 !important; color: #fff !important; border-radius: 999px !important; padding: 0.95rem 1.5rem !important; font-weight: 800 !important; }

/* ================= OVERFLOW GUARDS ================= */
.wrapper, .site-wrapper, .page-wrapper, main, section, footer, header { min-width: 0; }
.table-responsive, .overflow-auto { -webkit-overflow-scrolling: touch; }
pre, code, table, iframe { max-width: 100%; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1199px) { :root { --header-height: 82px; } }
@media (max-width: 991px) {
    :root { --section-padding: clamp(44px, 6vw, 72px); }
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { padding-left: 20px; padding-right: 20px; }
    .btn { min-height: 50px; }
    .card { border-radius: 16px; padding: 24px; }
}
@media (max-width: 767px) {
    h1 { line-height: 1.02; }
    h2 { line-height: 1.08; }
    .lead, .text-lead { font-size: var(--text-base); line-height: 1.7; }
}
@media (max-width: 575px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { padding-left: 16px; padding-right: 16px; }
    .row { --bs-gutter-x: 16px; }
    .btn { width: 100%; padding-inline: 20px; }
    .card { padding: 20px; border-radius: 14px; }
    .swal2-popup { padding: 1.4rem !important; border-radius: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}