@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Playfair Display", ui-serif, Georgia, serif;

    --color-gold-50: #fff9e6;
    --color-gold-100: #fff1c2;
    --color-gold-200: #ffe28a;
    --color-gold-300: #ffd152;
    --color-gold-400: #f2be2e;
    --color-gold-500: #d7a62b;
    --color-gold-600: #b88a20;
    --color-gold-700: #916b1a;
    --color-gold-800: #6d4f16;
    --color-gold-900: #4b3511;

    --shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.1);
}

/* Premium base typography */
@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        @apply bg-white text-slate-900 font-sans antialiased;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-display);
        @apply tracking-tight;
    }
}

/* Reusable premium components */
@layer components {
    .container-site {
        @apply max-w-7xl mx-auto px-4;
    }

    /* Buttons (Tailwind-safe, no custom class composition) */
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
           bg-slate-900 text-white hover:bg-slate-800;
    }

    .btn-gold {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
           bg-gold-500 text-slate-950 hover:bg-gold-600;
    }

    .btn-outline {
        @apply inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
           border border-slate-300 bg-white hover:bg-slate-50;
    }

    .card {
        @apply rounded-3xl border border-slate-200 bg-white shadow-soft;
    }
}

/* ===== Premium form controls ===== */
.input-premium {
    @apply w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900
         shadow-[0_1px_0_rgba(15,23,42,0.04)] outline-none
         focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20;
}

/* remove number arrows/spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Vehicle SVG color + sizing (bigger + scalable) */
.vehicle-svg svg {
    width: 44px;
    height: 44px;
    display: block;
}

.vehicle-svg svg * {
    stroke: currentColor;
}

.vehicle-svg svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

/* helps when SVG has no viewBox scaling issues */
.vehicle-svg svg {
    max-width: 100%;
    max-height: 100%;
}

/* ================================
   TOUR DETAILS PAGE (FIX PACK)
   Class used: .tour-show-page
   ================================ */

@layer components {
    /* Page wrapper: kills mobile white space + overflow */
    @layer components {
        /* Page wrapper */
        .tour-show-page {
            @apply w-full overflow-x-hidden;
        }

        /* ✅ DO NOT restrict all elements. Only media needs max-width */
        .tour-show-page img,
        .tour-show-page iframe,
        .tour-show-page video,
        .tour-show-page svg {
            max-width: 100%;
            height: auto;
        }

        /* ✅ Full bleed helper (hero can break out of container-site) */
        .full-bleed {
            width: 100vw;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            max-width: none !important;
        }
        @supports (width: 100dvw) {
            .full-bleed {
                width: 100dvw;
            }
        }

        /* HERO sizing */
        .tour-hero {
            height: 62vh;
            min-height: 520px;
        }
        @media (min-width: 768px) {
            .tour-hero {
                height: 72vh;
                min-height: 620px;
            }
        }

        /* Premium lights overlay */
        .tour-hero-lights {
            background:
                radial-gradient(
                    900px 520px at 18% 20%,
                    rgba(215, 166, 43, 0.22),
                    transparent 60%
                ),
                radial-gradient(
                    800px 520px at 85% 35%,
                    rgba(255, 255, 255, 0.1),
                    transparent 55%
                );
        }
    }

    /* HERO sizing (safe on mobile) */
    .tour-show-page .hero-wrap {
        height: 62vh;
        min-height: 520px;
    }
    @media (min-width: 768px) {
        .tour-show-page .hero-wrap {
            height: 72vh;
            min-height: 620px;
        }
    }

    /* Premium lights overlay (optional if you use it) */
    .tour-show-page .hero-lights {
        background:
            radial-gradient(
                900px 520px at 18% 20%,
                rgba(215, 166, 43, 0.22),
                transparent 60%
            ),
            radial-gradient(
                800px 520px at 85% 35%,
                rgba(255, 255, 255, 0.1),
                transparent 55%
            );
    }

    /* Tabs */
    .tour-show-page .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .tour-show-page .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .tour-show-page .tab-chip {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-2xl border border-slate-200 bg-white
               px-4 py-2 text-[12px] font-bold uppercase tracking-[.16em] text-slate-900 transition;
    }
    .tour-show-page .tab-chip:hover {
        @apply bg-slate-50;
    }

    /* Premium headings helper (optional) */
    .tour-show-page .h2-premium {
        font-family: var(--font-display);
        @apply text-2xl md:text-3xl font-semibold tracking-tight text-slate-900;
    }

    /* Premium card helper (optional) */
    .tour-show-page .card-premium {
        @apply rounded-3xl border border-slate-200 bg-white shadow-soft p-5;
    }

    /* ✅ Tour Plan FIX: stop "one letter per line" */
    .tour-show-page .day-desc {
        /* IMPORTANT: global overrides */
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;

        /* Let text wrap normally */
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: pre-line !important;

        /* Avoid any weird spacing rules */
        letter-spacing: normal !important;

        /* Layout safety for flex children */
        width: 100% !important;
        min-width: 0 !important;

        @apply text-sm md:text-[15px] leading-relaxed text-slate-700;
    }

    /* ✅ Tour Plan layout safety */
    .tour-show-page .day-flex {
        @apply flex flex-col md:flex-row gap-5 md:gap-6 items-start;
    }
    .tour-show-page .day-text {
        @apply min-w-0 flex-1;
    }
    .tour-show-page .day-media {
        @apply w-full md:w-[280px] lg:w-[320px] shrink-0;
    }
    .tour-show-page .day-media .media-box {
        @apply overflow-hidden rounded-3xl border border-slate-200 bg-slate-100;
        aspect-ratio: 16 / 10;
    }
    .tour-show-page .day-media img {
        @apply h-full w-full object-cover;
    }

    /* ✅ Chevron rotate (details) */
    .tour-show-page details[open] i.fa-chevron-down {
        transform: rotate(180deg);
    }

    /* ✅ Map iframe responsive (even if embed has width/height) */
    .tour-show-page .map-embed {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 1rem;
    }
    .tour-show-page .map-embed iframe {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        max-width: 100% !important;
    }

    /* ✅ Gallery safety */
    .tour-show-page img,
    .tour-show-page iframe,
    .tour-show-page video,
    .tour-show-page svg {
        max-width: 100%;
        height: auto;
    }
}

/* ============================
   PREMIUM TOUR PLAN EXPANDED UI
   ============================ */

.tour-plan-card {
    display: grid;
    gap: 14px;
}

/* desktop: image left, content right */
@media (min-width: 768px) {
    .tour-plan-card {
        grid-template-columns: 320px 1fr;
        align-items: start;
        gap: 18px;
    }
}

/* Image block */
.tour-plan-media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 1);
    background: #f1f5f9;
    aspect-ratio: 16 / 10;
}

.tour-plan-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
}

.tour-plan-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.35),
        rgba(15, 23, 42, 0)
    );
}

.tour-plan-media-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: white;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

/* Content */
.tour-plan-content {
    min-width: 0;
}

/* pills */
.tour-plan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.tour-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(226, 232, 240, 1);
}

/* ✅ premium prose (still keeps your one-letter fix) */
.tour-prose {
    width: 100% !important;
    min-width: 0 !important;

    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: pre-line !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    letter-spacing: normal !important;

    font-size: 14px;
    line-height: 1.8;
    color: #334155;
    padding: 12px 2px;
}

/* make it feel like premium reading */
@media (min-width: 768px) {
    .tour-prose {
        font-size: 15px;
        max-width: 62ch;
    }
}

/* Overnight box */
.tour-overnight {
    margin-top: 14px;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 1);
    background: rgba(248, 250, 252, 1);
    padding: 12px 14px;
}

.tour-overnight-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #0f172a;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tour-overnight-text {
    margin-top: 6px;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

/* HERO: true vertical centering and reserve space for bottom filter */
.hero-content {
    min-height: 92vh;
    display: flex;
    justify-content: center;

    /* top padding for header area */
    padding-top: clamp(88px, 10vh, 140px);

    /* ✅ reserve space for the FILTER BAR so nothing overlaps */
    padding-bottom: clamp(170px, 22vh, 260px);
}

/* Title scales nicely on laptop + big screens (prevents overflow/overlap) */
.hero-title {
    font-size: clamp(2.2rem, 4vw, 4.6rem);
    line-height: 1.06;
}

.custom-day-card {
    border: 1px solid rgb(226 232 240);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
}
.custom-day-card .label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
}
.custom-day-card select,
.custom-day-card input {
    width: 100%;
}

/* ============================
   END OF PREMIUM FIXES
   ============================ */

.hero-select {
    min-height: 50px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: all 0.18s ease;
}

.hero-select:hover {
    border-color: rgba(215, 166, 43, 0.45);
    background-color: #fffdf8;
}

.hero-select:focus {
    outline: none;
}

.hero-select option {
    color: #0f172a;
    background: #ffffff;
}