/*
 * Safari trên iPhone tự động zoom cả trang khi focus vào input/select/
 * textarea có font-size < 16px. Theme gốc đặt .form-control ở 12-15px tuỳ
 * chỗ (form liên hệ, đặt bàn, đặt món, tài khoản...) — ép về 16px trên di
 * động cho MỌI input của site, không riêng form nào, để gõ chữ ở đâu cũng
 * không bị giật zoom. !important vì các selector gốc như .contact-form
 * .form-control cụ thể hơn nên nếu không có !important sẽ thắng rule này.
 */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/*
 * Tinh chỉnh riêng cho phần chuyển đổi sang Laravel — không phải file gốc
 * của template. Banner mặc định (.dlab-bnr-inr) cao 220px như trang giới
 * thiệu/thực đơn gốc; áp lại kiểu gọn của trang Đặt món cho mọi trang để
 * đồng nhất.
 */
.dlab-bnr-inr {
    height: 140px !important;
    min-height: 140px !important;
}
.dlab-bnr-inr .dlab-bnr-inr-entry {
    padding: 15px 0 8px !important;
}
.dlab-bnr-inr h1 {
    font-size: 28px !important;
    margin-bottom: 0 !important;
}
.dlab-bnr-inr h1::after {
    display: none !important;
}
.dlab-bnr-inr .sub-title {
    font-size: 12px !important;
    margin-bottom: 3px !important;
    letter-spacing: 2px;
}
.dlab-bnr-inr .breadcrumb-row {
    margin-top: 0 !important;
}
.dlab-bnr-inr .breadcrumb {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .dlab-bnr-inr {
        height: 100px !important;
        min-height: 100px !important;
    }
    .dlab-bnr-inr h1 {
        font-size: 22px !important;
    }
}

/*
 * Logo trong thanh menu dọc: template gốc để img max-width:100% nên logo
 * phình to hết bề ngang cột — ép lại còn khoảng nửa cột, có margin để không
 * dính viền. 140px -> 115px (~18%) và giảm padding trên/dưới của khối logo
 * (vendor: .logo-header padding-top 20px, .logo-header a padding-bottom
 * 20px) để CTA "Đặt món ngay" xuất hiện sớm hơn khi mở sidebar.
 */
.header-sidenav .header-nav .logo-header {
    padding: 10px 20px 0;
}
.header-sidenav .header-nav .logo-header a {
    padding: 0 0 10px;
}
.header-sidenav .header-nav .logo-header img {
    max-width: 115px;
    margin: 0 auto;
    display: block;
}

/*
 * Nút Đặt món đứng riêng một khối ngay dưới logo — tách hẳn khỏi danh sách
 * điều hướng bên dưới thay vì làm một mục được tô màu khác trong list, để
 * không bị hiểu nhầm là "một trang trong menu" mà là hành động chính.
 */
.order-cta {
    display: block;
    margin: 4px 20px 10px;
    padding: 13px 15px;
    background: linear-gradient(135deg, #c89f5b, #a67c3d);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 30px;
    /* Tăng nhẹ tương phản/đổ bóng so với bản trước để CTA nổi hơn, vẫn cùng
       tông vàng nâu thương hiệu, không đổi kích thước. */
    box-shadow: 0 5px 16px rgba(166, 124, 61, .55);
    transition: transform .2s ease, box-shadow .2s ease;
}
.order-cta:hover,
.order-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(166, 124, 61, .65);
}
.order-cta.is-current {
    background: linear-gradient(135deg, #a67c3d, #8a6530);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

/*
 * Lưới lối đi phụ dưới CTA: tra cứu đơn / tài khoản / chỉ đường / đổi ngôn
 * ngữ. Hai cột nhãn ngắn thay cho bốn pill hết chiều ngang xếp chồng —
 * sidebar chỉ cao 100vh, bốn pill kia ăn mất ~200px và đẩy các mục điều hướng
 * cuối xuống dưới mép màn hình.
 *
 * Vẫn nhạt và nhỏ hơn hẳn .order-cta: đây là lối đi phụ, không được tranh
 * chú ý với "Đặt món ngay".
 */
.sidenav-utility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 20px 12px;
}
.sidenav-utility a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 6px 8px;
    background: rgba(200, 159, 91, .14);
    border-radius: 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: #e9d3a3;
    transition: background-color .2s ease, color .2s ease;
}
.sidenav-utility a:hover,
.sidenav-utility a:active,
.sidenav-utility a.active {
    background: rgba(200, 159, 91, .28);
    color: #fff;
}
/* Lẻ một ô (chưa cấu hình Google Maps -> không có nút "Đường đi") thì ô cuối
   trải hết hàng thay vì bỏ trống nửa bên phải. */
.sidenav-utility a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.header-sidenav .header-nav .navbar-nav {
    padding: 4px 0;
}
.header-sidenav .header-nav .navbar-nav > li > a {
    padding: 13px 15px;
}

/*
 * Trang đang mở chỉ đổi màu chữ thì dễ lướt qua — thêm vạch màu bên trái +
 * nền mờ để nhận ra ngay đang ở đâu.
 */
.header-sidenav .header-nav .navbar-nav li.active {
    background: rgba(200, 159, 91, .12);
    border-left: 3px solid #c89f5b;
}
.header-sidenav .header-nav .navbar-nav li.active > a {
    color: #c89f5b !important;
    padding-left: 12px;
}

/*
 * Khối giờ mở cửa / SĐT: lấp khoảng trống giữa menu và chân trang, đồng thời
 * đưa thông tin khách hay cần (quán còn mở không, gọi số nào) lên ngay trong
 * tầm mắt thay vì phải xuống tận footer.
 */
.sidenav-info {
    margin: 6px 20px 0;
    padding: 14px 14px;
    border-top: 1px solid hsla(0, 0%, 100%, .15);
    text-align: center;
}
.sidenav-info p {
    margin: 0 0 8px;
    color: hsla(0, 0%, 100%, .75);
    font-size: 12.5px;
    letter-spacing: .2px;
}
.sidenav-info p:last-child { margin-bottom: 0; }
.sidenav-info i {
    color: #c89f5b;
    margin-right: 5px;
    width: 14px;
    text-align: center;
}
.sidenav-info a {
    color: hsla(0, 0%, 100%, .75);
    transition: color .2s ease;
}
.sidenav-info a:hover { color: #c89f5b; }

/* Chân menu (social/copyright) — vendor để padding 30px 0 hơi rộng, gọn lại
   còn 18px cho đồng bộ với phần đã siết ở trên. */
.header-sidenav .header-nav .footer-menu {
    padding: 18px 0;
}

/*
 * Bottom nav thay cho thanh trên cùng cũ ở màn ≤1200px — sidebar cố định vẫn
 * là điều hướng chính ở desktop (ẩn hẳn bottom nav bằng cùng breakpoint),
 * xem markup ở resources/views/site/partials/header.blade.php.
 *
 * padding-bottom cộng thêm safe-area-inset-bottom vì iPhone có thanh cử chỉ
 * (home indicator) đè lên đúng vị trí bottom nav nếu không chừa chỗ.
 */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 1200px) {
    .mobile-bottom-nav {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999986;
        background: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Xoay ngang: notch/tai thỏ nằm bên cạnh chứ không phải phía trên
           nữa, có thể đè vào mục đầu/cuối của thanh vì nó dài hết chiều
           ngang màn hình. */
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 2px 6px;
        color: #6b6b6b;
        font-family: 'Oswald', sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .2px;
        text-transform: uppercase;
        text-align: center;
    }
    .bottom-nav-item:hover,
    .bottom-nav-item:focus {
        color: #a67c3d;
    }
    .bottom-nav-item.active {
        color: #a67c3d;
    }
    .bottom-nav-icon {
        font-size: 19px;
        line-height: 1;
    }
    /* Nút giữa (Đặt món) nổi bật hơn hẳn — CTA chính của cả thanh, giống
       nút chụp ảnh nổi giữa tab bar của app camera/mạng xã hội. */
    .bottom-nav-cta {
        color: #6b6b6b;
    }
    .bottom-nav-cta-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-top: -22px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c89f5b, #a67c3d);
        box-shadow: 0 3px 10px rgba(166, 124, 61, .5);
        font-size: 19px;
        /* Icon thừa hưởng màu chữ xám của .bottom-nav-item — trên nền
           gradient vàng nâu thì gần như lẫn vào nhau. Trắng mới đủ tương
           phản, giống mọi nút CTA tròn màu khác trong site (order-fab cũ,
           mobile-topbar-cta cũ). */
        color: #fff;
    }
    .bottom-nav-cta.active,
    .bottom-nav-cta:hover,
    .bottom-nav-cta:focus {
        color: #a67c3d;
    }
    /* Trang có bottom nav che mất 60px cuối — chừa chỗ để nội dung/footer
       không bị khuất phía sau. */
    .header-sidenav + .page-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }
}

/*
 * Nút "×" đóng menu — vendor đặt position:absolute; right:0; top:0 BÊN TRONG
 * .full-sidenav (rộng cố định 300px, không co giãn theo màn hình). Điện
 * thoại rộng hơn 300px thì mép phải của panel không trùng mép phải màn
 * hình — nút nằm lọt thỏm giữa dải nền mờ còn hở ra bên phải, trông như đặt
 * sai chỗ thay vì là nút đóng của cả overlay.
 *
 * position:fixed neo đúng góc phải MÀN HÌNH bất kể panel rộng bao nhiêu.
 * Đổi vậy thì nút không còn "bị kéo" ra khỏi khung nhìn cùng .full-sidenav
 * lúc đóng (left:-100% chỉ dịch được phần tử absolute bên trong nó, không
 * dịch được phần tử fixed) — nên phải tự ẩn/hiện bằng đúng class "active"
 * mà custom.js đã gắn sẵn cho nó (cùng lúc với .full-sidenav), thay vì dựa
 * vào vị trí của panel cha như trước.
 */
@media (max-width: 991px) {
    .header-sidenav .menu-close {
        position: fixed;
        /* cộng thêm safe-area-inset-top: viewport khai viewport-fit=cover
           (site.blade.php) nên vùng tai thỏ/Dynamic Island giờ tính là diện
           tích trang có thể vẽ tới — không cộng thêm thì nút "×" bị notch
           che mất một phần ở máy có màn hình khoét. */
        top: calc(14px + env(safe-area-inset-top, 0px));
        right: 14px;
        z-index: 999989;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease;
    }
    .header-sidenav .menu-close.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ==========================================================================
   ĐỒNG BỘ MÀU THƯƠNG HIỆU TOÀN TRANG
   Skin gốc của template tô mọi điểm nhấn (chữ "Chào mừng"/"Giới thiệu", nút
   CTA, vạch chia mục...) bằng cam mặc định của theme (#e88f2a) — khác hẳn
   vàng nâu (#c89f5b) đã dùng cho logo, badge, nút trong menu dọc (xem phần
   trên). Hai tông cam/vàng nâu cạnh nhau khiến trang trông như "template có
   sẵn + thương hiệu dán thêm vào" chứ chưa phải một bộ nhận diện thống nhất.
   Vì site.css nạp sau cùng (xem layouts/site.blade.php) nên override ở đây
   luôn thắng, không cần sửa file gốc của theme.
   ========================================================================== */
:root {
    --brand-gold: #c89f5b;
    --brand-gold-dark: #a67c3d;
    --brand-gold-deep: #8a6530;
}

.text-primary {
    color: var(--brand-gold) !important;
}

/*
 * Vạch chia dưới mỗi tiêu đề mục (.dlab-separator) bản gốc chỉ là đường kẻ
 * xám 1px gần như vô hình (rgba(0,0,0,.09)) — đổi thành thanh ngắn màu
 * thương hiệu, vừa dễ nhận vừa nhất quán với gradient của nút CTA.
 */
.dlab-separator {
    width: 56px !important;
    height: 3px !important;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-dark)) !important;
}

/*
 * Chữ kicker nhỏ phía trên tiêu đề chính ("Chào mừng", "Giới thiệu", "Có câu
 * hỏi?"...) dùng font chữ viết tay Satisfy đã nạp sẵn cho toàn site nhưng
 * chưa nơi nào áp dụng — cho cảm giác ấm/gần gũi kiểu quán cà phê thay vì
 * chữ in hoa cứng nhắc như phần tiêu đề chính bên dưới nó.
 */
.section-head .main-title {
    font-family: 'Satisfy', cursive;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .3px;
}

.section-head .title {
    letter-spacing: .5px;
}

/*
 * Nút chính (.btn, kể cả .btn.bg-secondry — cả hai đang dùng lẫn lộn làm CTA
 * chính tuỳ trang) đổi từ nền cam phẳng sang gradient vàng nâu + đổ bóng +
 * nhấc nhẹ khi hover, cùng ngôn ngữ thiết kế với nút "Đặt món ngay" trong
 * menu dọc thay vì trông như hai bộ nút khác nhau.
 */
.btn,
a.btn,
.btn.bg-secondry,
a.btn.bg-secondry {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)) !important;
    border-radius: 30px !important;
    box-shadow: 0 8px 20px rgba(166, 124, 61, .35);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover,
a.btn:hover,
.btn:focus,
.btn.bg-secondry:hover,
a.btn.bg-secondry:hover {
    background: linear-gradient(135deg, var(--brand-gold-dark), var(--brand-gold-deep)) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(138, 101, 48, .45);
}

/*
 * Mọi <select> trên trang được custom.js tự biến thành bootstrap-select
 * (jQuery('select').selectpicker()), và nút nó sinh ra mang sẵn class .btn
 * của Bootstrap — vô tình khớp luôn rule ".btn" gradient vàng phía trên, đè
 * lên nền trắng + chữ xám mà .bootstrap-select .dropdown-toggle đã định
 * (background-image thắng vì .btn không set background-color riêng, chỉ set
 * background-image, còn .bootstrap-select .dropdown-toggle chỉ set
 * background-color). Kết quả: nền vàng đặc, chữ xám gần như không đọc được
 * (VD: select "Thời gian nhận hàng" ở trang đặt món, "Giờ đến"/"Số khách" ở
 * trang đặt bàn). Đây là ô chọn trong form, không phải nút CTA nên không nên
 * ăn theo kiểu nút chính — trả nó về đúng nền trắng/chữ xám ban đầu.
 */
.bootstrap-select .dropdown-toggle.btn {
    background-image: none !important;
    box-shadow: none !important;
}

/*
 * .btn-secondry chỉ xuất hiện trong slider (nền ảnh tối) làm CTA phụ — bản
 * gốc tô đen phẳng (#333), không liên quan gì đến thương hiệu. Đổi thành
 * viền trắng trong suốt kiểu "ghost button", tôn ảnh nền, hover mới đổ đầy.
 */
.btn-secondry,
a.btn-secondry {
    background: rgba(255, 255, 255, .08) !important;
    border: 2px solid rgba(255, 255, 255, .8) !important;
    color: #fff !important;
    border-radius: 30px !important;
    backdrop-filter: blur(2px);
    transition: all .25s ease;
}
.btn-secondry:hover,
a.btn-secondry:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--brand-gold-deep) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   HIỆU ỨNG XUẤT HIỆN KHI CUỘN TRANG
   Áp class "reveal" cho từng khối nội dung (xem site/js/reveal.js) — trang
   tĩnh nhiều mục dài dễ cảm giác "phẳng"/rời rạc, hiệu ứng mờ dần + trượt
   lên nhẹ khi cuộn tới giúp từng mục có nhịp riêng thay vì hiện hết cùng lúc.
   Tôn trọng prefers-reduced-motion cho người dùng tắt hiệu ứng chuyển động.
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*
 * Slide đang hiện của hero (Owl Carousel tự thêm/bỏ .active khi chuyển slide)
 * — chữ và hai nút trượt lên lần lượt thay vì hiện sượt một cục, tạo nhịp
 * cho mỗi lần đổi slide chứ không chỉ lần đầu tải trang.
 */
@keyframes heroContentUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
.owl-item.active .slide .content > * {
    animation: heroContentUp .7s ease both;
}
.owl-item.active .slide .content > *:nth-child(1) { animation-delay: .05s; }
.owl-item.active .slide .content > *:nth-child(2) { animation-delay: .15s; }
.owl-item.active .slide .content > *:nth-child(3) { animation-delay: .25s; }
.owl-item.active .slide .content > *:nth-child(4) { animation-delay: .35s; }
.owl-item.active .slide .content > *:nth-child(5) { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
    .owl-item.active .slide .content > * {
        animation: none;
    }
}

/*
 * Dòng định vị dưới logo trong menu dọc — "Coffee • Work • Takeaway •
 * Delivery". Cùng một câu ở mọi trang, cả bản tiếng Việt lẫn bản tiếng Anh.
 */
.brand-positioning {
    margin: 0px 16px 14px;
    color: rgba(255, 255, 255, .72);
    font-family: Oswald, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
}

/*
 * Nền mờ phía sau menu dọc trên di động (.full-sidenav rộng 300px, z-index
 * 999988 — xem templete.css). Overlay nằm ngay dưới nó để phủ phần trang còn
 * lại, và là một "nút đóng" thứ hai: bấm ra ngoài menu là đóng, không phải mò
 * đúng nút × nhỏ ở góc.
 *
 * Mặc định visibility:hidden (không chỉ opacity:0) để lúc menu đóng, overlay
 * không chặn click vào các nút khác — kể cả khi quên đặt pointer-events.
 */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 999987;
    background: rgba(20, 15, 10, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}
.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}