/*
Theme Name: BamiVietnamese
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*--------------------------------------------------------------------
# Import Fonts & Icons
--------------------------------------------------------------------*/
/* Helvetica - Light (300) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-light.woff2") format("woff2"),
        url("assets/fonts/helvetica/helvetica-light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Helvetica - Light Oblique (300 italic) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-light-oblique.woff2")
            format("woff2"),
        url("assets/fonts/helvetica/helvetica-light-oblique.ttf")
            format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Helvetica - Regular (400) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-regular.woff2") format("woff2"),
        url("assets/fonts/helvetica/helvetica-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Helvetica - Oblique (400 italic) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-oblique.woff2") format("woff2"),
        url("assets/fonts/helvetica/helvetica-oblique.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Helvetica - Bold (700) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-bold.woff2") format("woff2"),
        url("assets/fonts/helvetica/helvetica-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Helvetica - Bold Oblique (700 italic) */
@font-face {
    font-family: "Helvetica";
    src:
        url("assets/fonts/helvetica/helvetica-bold-oblique.woff2")
            format("woff2"),
        url("assets/fonts/helvetica/helvetica-bold-oblique.ttf")
            format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* =============================================
   FONT IMPORTS - Helvetica Neue
   ============================================= */

/* Helvetica Neue - Ultra Light (100) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-ultralight.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-ultralight.otf")
            format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Ultra Light Italic (100 italic) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-ultralight-italic.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-ultralight-italic.otf")
            format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Helvetica Neue - Light (300) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-light.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-light.otf")
            format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Light Italic (300 italic) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-light-italic.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-light-italic.otf")
            format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Helvetica Neue - Regular (400) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-regular.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-regular.otf")
            format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Italic (400 italic) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-italic.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-italic.otf")
            format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Helvetica Neue - Medium (500) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-medium.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-medium.otf")
            format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Bold (700) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-bold.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-bold.otf")
            format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Bold Italic (700 italic) */
@font-face {
    font-family: "Helvetica Neue";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-bold-italic.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-bold-italic.otf")
            format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Helvetica Neue - Condensed Bold (700, condensed) */
@font-face {
    font-family: "Helvetica Neue Condensed";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-condensed-bold.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-condensed-bold.otf")
            format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Helvetica Neue - Condensed Black (900, condensed) */
@font-face {
    font-family: "Helvetica Neue Condensed";
    src:
        url("assets/fonts/helvetica-neue/helvetica-neue-condensed-black.woff2")
            format("woff2"),
        url("assets/fonts/helvetica-neue/helvetica-neue-condensed-black.otf")
            format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =============================================
   FONT IMPORTS - Dancing Script
   ============================================= */

/* Dancing Script - Vietnamese */
@font-face {
    font-family: "Dancing Script";
    src: url("assets/fonts/dancing-script/dancing-script-vietnamese.woff2")
        format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
        U+1EA0-1EF9, U+20AB;
}

/* Dancing Script - Latin Extended */
@font-face {
    font-family: "Dancing Script";
    src: url("assets/fonts/dancing-script/dancing-script-latin-ext.woff2")
        format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Dancing Script - Latin */
@font-face {
    font-family: "Dancing Script";
    src: url("assets/fonts/dancing-script/dancing-script-latin.woff2")
        format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/*--------------------------------------------------------------------
# General
--------------------------------------------------------------------*/
:root {
    --font-primary: "Helvetica";
    --font-secondary: "Helvetica Neue";
    --font-accent: "Dancing Script";
    --color-primary: #008fd5;
    --color-secondary: #161138;
    --color-white: #ffffff;
    --color-bg: #f5f5f5;
    --color-border: #ededed;
}

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    font-family: var(--font-primary);
    color: var(--color-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-secondary);
}
h1,
.h1 {
    font-size: 4em;
}
h2,
.h2 {
    font-size: 2.1em;
}
@media screen and (max-width: 849px) {
    .col {
        padding-bottom: 20px;
    }
}
@media (max-width: 768px) {
    h1,
    .h1 {
        font-size: 1.8em;
    }
    h2,
    .h2 {
        font-size: 1.4em;
    }
}

.font-bold {
    font-weight: 700 !important;
}

.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-20 {
    margin-bottom: 20px;
}
.p-0 {
    padding: 0 !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}

.text-light {
    text-shadow: 2px 0px 8px #ffffff;
}
.text-collapse p {
    margin-bottom: 0;
}
.col.large-12 {
    padding-bottom: 0;
}

.img-cover img {
    object-fit: cover;
    min-height: 600px;
}

.ux-menu-link__link {
    min-height: 0;
    padding-top: 0;
}
.form-flat input:not([type="submit"]),
.form-flat select,
.form-flat textarea {
    border-radius: 6px;
}
input[type="checkbox"],
input[type="radio"] {
    margin-bottom: 0;
    margin-right: 0;
}

/* =============================================
   Tables — Clean & Modern
   Override inline styles from content editors
   ============================================= */
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 1.5em;
    border: none !important;
}
table th,
table td {
    padding: 12px 16px !important;
    text-align: left;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    vertical-align: middle;
}
table th {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-bottom: none !important;
    text-align: center !important;
}
table th:first-child {
    border-radius: 6px 0 0 0;
}
table th:last-child {
    border-radius: 0 6px 0 0;
}
/* Subtle alternating rows */
table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
/* Hover highlight */
table tbody tr {
    transition: background-color 0.2s ease;
}
table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}
/* Last row — no bottom border */
table tbody tr:last-child td {
    border-bottom: none !important;
}

.primary,
input[type="submit"],
input[type="submit"].button {
    font-size: 16px;
    font-weight: 600;
}

.card-white .col-inner {
    background-color: white;
    border-radius: 12px;
    padding: 15px 24px;
    box-shadow: 1px 11px 5px rgba(0, 0, 0, 0.2);
}

.card-radius,
.card-radius > .col-inner {
    border-radius: 12px;
    overflow: hidden;
}

.card-white .box-text {
    background-color: white;
    padding: 15px 24px;
}
.card-white .box-text h3 {
    margin-bottom: 12px;
}
.card-white .box-text p {
    font-size: 16px;
    line-height: 1.4;
}
.text-primary {
    color: var(--color-primary);
}
.box-white {
    background-color: var(--color-white);
    padding: 20px;
    border-radius: 12px;
}
iframe {
    border: none;
}
.d-flex .col-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}
.d-flex .col-inner .img {
    margin-bottom: 0;
}

/* YouTube background video — object-fit: cover */
.banner .banner-bg iframe.ux-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.78vh; /* 16:9 ratio based on viewport height */
    height: 56.25vw; /* 16:9 ratio based on viewport width */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.select-resize-ghost,
.select2-container .select2-choice,
.select2-container .select2-selection,
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    box-shadow: none;
    border-radius: 6px;
    margin-bottom: 0;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
    height: 42px;
    border-radius: 6px;
    background-color: var(--color-primary);
}
a.lead,
p.lead {
    font-size: 1.15rem;
    font-weight: 500;
}
.button.is-large {
    font-size: 16px;
    padding: 6px 24px !important;
}
.button.white {
    color: var(--color-primary) !important;
}
.position-relative {
    position: relative;
}
.video-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.box-shade .shade {
    background-image: linear-gradient(
        0deg,
        rgb(0 143 213) 0,
        rgba(0, 143, 213, 0.4) 50%
    );
    opacity: 1;
}
.box-shade .box-text h3 {
    font-size: 24px;
}
.no-lh {
    line-height: 0;
}

/* Accordion */
.accordion-item {
    padding: 0;
    border-radius: 12px;
    background-color: var(--color-bg);
    margin-bottom: 12px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}
.accordion-item:has(.accordion-title.active) {
    border-left-color: var(--color-primary);
    background-color: #eef6fb;
}
.accordion-title {
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 12px 24px;
    transition: color 0.3s ease;
    cursor: pointer;
}
.accordion-title.active {
    background-color: transparent;
    border: none;
    color: var(--color-primary);
}
.accordion .toggle {
    order: 2;
    right: 12px;
    background: transparent;
    left: unset;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hide default Flatsome icon */
.accordion .toggle i {
    display: none !important;
}
/* Plus icon (default state) */
.accordion .toggle::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--color-secondary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='11' width='20' height='2'/%3E%3Crect x='11' y='2' width='2' height='20'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='11' width='20' height='2'/%3E%3Crect x='11' y='2' width='2' height='20'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Minus icon (active state) */
.accordion-title.active .toggle::before {
    background-color: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='11' width='20' height='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='11' width='20' height='2'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}
.accordion-title.active .toggle {
    transform: translateY(-50%);
}
.accordion span {
    order: 1;
    margin-bottom: 0;
}
.accordion-inner {
    padding: 0 24px 12px;
}

.section-title .section-large {
    font-size: 4.8rem;
    padding: 0;
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    opacity: 0.2;
}
.section-title h2 {
    font-size: 40px;
    position: relative;
    z-index: 2;
}

/*--------------------------------------------------------------------
# Header
--------------------------------------------------------------------*/
.header-main {
    height: 80px;
    background-color: var(--color-secondary);
}

/* ── Header Menu — Full-width, centered items ─────────────────── */
.header-main .header-inner {
    position: relative;
}

/* Let flex-left expand to fill available space (no absolute positioning) */
.header-main .header-inner .flex-left {
    flex-grow: 1 !important;
    margin-right: 0;
}

/* Center nav items within the expanded flex-left */
.header-main .header-inner .flex-left .header-nav {
    justify-content: center;
}

/* Nav items: tighter spacing to fit more items on one line */
.header-main .nav > li {
    margin: 0 10px;
}

.header-main .nav > li > a {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
}

/* ── Mobile Header — Give flex-right more breathing room ─────── */
@media (max-width: 849px) {
    /* Let mobile flex-right expand so buttons don't wrap */
    .header-main .header-inner .flex-right {
        flex-grow: 1 !important;
        justify-content: flex-end;
    }

    /* Mobile buttons: compact sizing */
    .header-main .header-button .button {
        font-size: 12px;
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 4px;
        white-space: nowrap;
    }

    /* Shrink logo slightly to give right side more room */
    .header-main #logo img {
        max-height: 50px;
    }
}

/* ── Nav Link Hover & Active Animation ─────────────────────────────── */
.header-main .nav > li > a.nav-top-link {
    position: relative;
    transition: color 0.25s ease;
}

/* Underline bar via ::after */
.header-main .nav > li > a.nav-top-link::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover → underline expands */
.header-main .nav > li:hover > a.nav-top-link::after {
    width: 60%;
}

/* Active / current page → underline always visible */
.header-main .nav > li.current-menu-item > a.nav-top-link,
.header-main .nav > li.current_page_item > a.nav-top-link,
.header-main .nav > li.current-menu-ancestor > a.nav-top-link {
    color: var(--color-primary);
}
.header-main .nav > li.current-menu-item > a.nav-top-link::after,
.header-main .nav > li.current_page_item > a.nav-top-link::after,
.header-main .nav > li.current-menu-ancestor > a.nav-top-link::after {
    width: 60%;
}
.header-button .button {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px !important;
}
.nav-dropdown-has-shadow .nav-dropdown {
    box-shadow: none;
    border: none;
    border-radius: 8px;
}
.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-arrow li.has-dropdown:before {
    bottom: -4px;
}
.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {
    border-color: transparent;
}
.nav-dropdown-default .nav-column li > a,
.nav-dropdown.nav-dropdown-default > li > a {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    border-bottom: 1px solid #ededed;
}
.nav-dropdown-default .nav-column li:hover > a,
.nav-dropdown.nav-dropdown-default > li:hover > a {
    color: var(--color-primary);
}

/* ── Dropdown — Arrow Icon Animation ──────────────────────────────── */

/* Arrow icon: display:inline-block needed for transform */
.header-main .nav > li.has-dropdown > a .icon-angle-down {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    margin-left: 3px;
}

/* Rotate 180° when dropdown is open (li hovered) */
.header-main .nav > li.has-dropdown:hover > a .icon-angle-down {
    transform: rotate(180deg);
}

/* ── Dropdown Panel — Slide-in Animation ──────────────────────────── */

/* Default: panel starts slightly above (pairs with Flatsome opacity/visibility transition) */
.header-main .nav > li.has-dropdown > .nav-dropdown {
    transform: translateY(-6px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* On hover: slide into place */
.header-main .nav > li.has-dropdown:hover > .nav-dropdown {
    transform: translateY(0);
}

/* ── Dropdown Items — Underline hover ─────────────────────────────── */

/* Items use relative + underline via background-image (same as footer nav) */
.nav-dropdown-default > li > a,
.nav-dropdown-default .nav-column li > a {
    position: relative;
    background-image: linear-gradient(
        var(--color-primary),
        var(--color-primary)
    );
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: left bottom;
    transition:
        color 0.2s ease,
        background-size 0.3s ease;
}

.nav-dropdown-default > li:hover > a,
.nav-dropdown-default .nav-column li:hover > a {
    background-size: 100% 1px;
}

/* ── Hamburger Menu Animation ─────────────────────────────────────── */
/* Hide the original Flatsome icon-menu */
.bami-nav-toggle i.icon-menu {
    display: none !important;
}

/* Toggle link — needs position for ::before circle */
.bami-nav-toggle {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
    border-radius: 50%;
    text-decoration: none !important;
}

/* Ghost circle — appears on hover */
.bami-nav-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        background 0.3s ease;
    pointer-events: none;
}

/* Hover — circle pops in with spring */
.bami-nav-toggle:hover::before {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Wrapper */
.bami-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 22px;
    height: 18px;
    cursor: pointer;
    transition: gap 0.25s ease;
}

/* Lines spread slightly on hover */
.bami-nav-toggle:hover .bami-hamburger {
    gap: 6px;
}

/* Each bar — all equal width */
.bami-hamburger__line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.2s ease,
        width 0.25s ease,
        background 0.25s ease;
}

/* Middle line shortens on hover — adds visual interest */
.bami-nav-toggle:hover .bami-hamburger__line--mid {
    width: 14px;
}

/* Active (menu open) — X shape */
a.active .bami-hamburger__line--top,
a[aria-expanded="true"] .bami-hamburger__line--top {
    transform: translateY(7px) rotate(45deg);
}
a.active .bami-hamburger__line--mid,
a[aria-expanded="true"] .bami-hamburger__line--mid {
    opacity: 0;
}
a.active .bami-hamburger__line--bot,
a[aria-expanded="true"] .bami-hamburger__line--bot {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Menu Overlay — Fullscreen Fix ─────────────────────────── */
/*
 * Flatsome opens the mobile sidebar via Magnific Popup.
 * The chain: .mfp-wrap > .mfp-container > .mfp-content > #main-menu
 * MFP defaults: .mfp-content { display:inline-block; vertical-align:middle }
 * → We must override the full chain to get fullscreen.
 */

/* Target the mfp-wrap that contains our main-menu overlay */
.mfp-wrap:has(#main-menu),
.mfp-wrap[data-bg="main-menu-overlay"] {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.mfp-wrap:has(#main-menu) .mfp-container,
.mfp-wrap[data-bg="main-menu-overlay"] .mfp-container {
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
/* Remove the :before pseudo that forces vertical centering */
.mfp-wrap:has(#main-menu) .mfp-container:before,
.mfp-wrap[data-bg="main-menu-overlay"] .mfp-container:before {
    display: none !important;
}

.mfp-wrap:has(#main-menu) .mfp-content,
.mfp-wrap[data-bg="main-menu-overlay"] .mfp-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    vertical-align: top !important;
    transform: none !important;
    max-width: 100% !important;
    position: static !important;
}

/* Hide MFP's default close button — we use our own inside the template */
.mfp-wrap:has(#main-menu) .mfp-close:not(.mobile-menu-close),
.mfp-wrap[data-bg="main-menu-overlay"] .mfp-close:not(.mobile-menu-close) {
    display: none !important;
}

/* Custom close button inside #main-menu */
.mobile-menu-close {
    /* Reset Flatsome .mfp-close defaults */
    appearance: none;
    -webkit-appearance: none;
    mix-blend-mode: normal !important; /* Flatsome sets difference — reset it */
    opacity: 1 !important; /* Flatsome sets opacity:0 on mfp-close */
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    color: var(--color-white) !important;
    line-height: 1 !important;
    font-size: inherit !important;
    /* Layout */
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease !important;
    padding: 0 !important;
    text-align: center !important;
}
.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
.mobile-menu-close svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    display: block;
    flex-shrink: 0;
    mix-blend-mode: normal;
}

/* #main-menu itself — fills the mfp-content block */
#main-menu.mobile-sidebar {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh;
    background: none !important;
    overflow: hidden;
}

/* Layer 1 — Background image */
.mobile-menu-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-secondary);
    background-image: url("assets/images/menu-background.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Layer 2 — Dot overlay on top of bg */
.off-canvas-center .mfp-content {
    padding-top: 0;
}
.off-canvas .nav-vertical > li > a {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-white);
    padding-top: 5px;
    padding-bottom: 5px;
}
.mobile-menu-dot-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.25;
    background-image: url("assets/images/dot-overlay@2x.png");
    background-size: 10px 10px !important;
    background-repeat: repeat;
    pointer-events: none;
}

/* Layer 3 — Scrollable content on top */
#main-menu.mobile-sidebar .sidebar-menu {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: none !important;
}

/* Logo block */
.mobile-menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px 42px;
}
.mobile-menu-logo a {
    display: block;
    line-height: 0;
}
.mobile-menu-logo__img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}
.mobile-menu-logo__text {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 0.05em;
}

/*--------------------------------------------------------------------
# Posts & Pages
--------------------------------------------------------------------*/
.featured-box {
    margin-bottom: 12px;
}
.featured-box .icon-box-text {
    padding-left: 6px !important;
}
.featured-box .icon-box-img img {
    padding-top: 0 !important;
}
.featured-box.text-left {
    display: flex;
    align-items: center;
}

.spacing-normal p {
    margin-bottom: 6px;
}

.box-blog-post .is-divider {
    display: none;
}
.box-blog-post {
    box-shadow: 9.899px 9.899px 30px 0 rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}
.box-blog-post .post-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}
.box-blog-post .box-text {
    min-height: 196px;
}
.box-blog-post .box-text .button {
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 6px;
    border: none;
}

.cta-download .tm-image-group {
    justify-content: center !important;
}
@media (max-width: 768px) {
    .cta-download .tm-image-group {
        justify-content: center !important;
    }
    .cta-download .tm-image-group img {
        height: 50px !important;
    }
}

.section-catering {
    padding: 12px 0 !important;
}
.section-catering p {
    margin-bottom: 0;
}
.section-catering a {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
}
.section-catering a:nth-child(2) {
    position: relative;
    padding-left: 40px;
}
.section-catering a:nth-child(2):before {
    content: "";
    background-color: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.catering-menu .box-text.text-center {
    padding-left: 0;
    padding-right: 0;
}
/* Horizontal line between rows */
.catering-menu .row {
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.catering-menu .row:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.catering-menu .row-small > .col {
    padding: 20px;
}

/* Animation Home */
.section-whycook {
    /* overflow: clip clips visually but does NOT create a scroll container
     so GSAP ScrollTrigger calculates trigger positions correctly */
    overflow: clip;
}
.section-whycook .col,
.section-whycook .col-inner {
    position: unset;
}
.img-tomato {
    position: absolute;
    left: 0;
    bottom: -80%;
    width: 180px !important;
}
.img-bami {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 560px !important;
    transform: translateY(-50%);
}
.img-shallot,
.img-basil {
    position: absolute;
    top: 50%;
    right: 10%;
    width: 680px !important;
    transform: translateY(-50%);
}
.img-pepper {
    position: absolute;
    bottom: -70%;
    right: 10%;
    width: 170px !important;
}

/* ── Why Cook — Tablet ──────────────────────────────────────────── */
@media (max-width: 849px) {
    .img-bami {
        width: 380px !important;
        right: 0;
    }
    .img-shallot,
    .img-basil {
        width: 420px !important;
        right: 0;
    }
    .img-tomato {
        width: 120px !important;
        bottom: -40%;
    }
    .img-pepper {
        width: 110px !important;
        bottom: -40%;
    }
}

/* ── Why Cook — Mobile ──────────────────────────────────────────── */
@media (max-width: 549px) {
    .section-whycook {
        min-height: unset !important;
    }
    .section-whycook .wrap-text {
        padding-bottom: 60%;
        text-align: center;
    }
    .section-whycook .wrap-img {
        min-height: 200px;
    }
    /* Reset col positioning so Flatsome col-12 stacks naturally */
    .section-whycook .col,
    .section-whycook .col-inner {
        position: relative !important;
    }

    /* All images — normal flow below text, keep animation & opacity */
    .img-bami,
    .img-shallot,
    .img-basil,
    .img-tomato,
    .img-pepper {
        margin: 0 auto;
        display: block;
        opacity: 1 !important;
    }
    .img-tomato {
        left: -15px !important;
        bottom: -200%;
    }
}

/*--------------------------------------------------------------------
# Footer
--------------------------------------------------------------------*/
.section-featured {
    background-color: var(--color-white);
}
.footer-copyright .col {
    padding-bottom: 0;
}
.footer-wrapper .social-icons .button.icon {
    margin-bottom: 0;
}
.footer-cta .app-download .col-inner {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0;
}
.footer-cta .cta-content .col-inner {
    margin-left: 40px;
}
.footer-cta .cta-content .cta-heading {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-secondary);
    margin-bottom: 0;
}
.footer-copyright p,
.footer-cta .cta-content p {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-secondary);
    margin-bottom: 0px;
}
.footer-cta .app-download .img {
    margin-bottom: 0;
    width: 42% !important;
    max-width: unset !important;
    margin: 0;
}

.footer-cta .app-download .col-inner img {
    object-fit: contain;
}

.footer-widgets .widget-menu {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
}

/* Footer nav links — Flatsome UX Menu widget */
.footer-wrapper .ux-menu-link__link,
.footer-wrapper .nav .ux-menu-link__link,
.footer-wrapper .nav-vertical .ux-menu-link__link {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-white) !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

/* JS wraps text in .nav-underline-text span — display:inline → width = text width */
.footer-wrapper .nav-underline-text {
    display: inline;
    position: relative;
}

/* Underline ::after on the inline span → exactly text width */
.footer-wrapper .nav-underline-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.75);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.footer-wrapper .ux-menu-link__link:hover .nav-underline-text::after {
    transform: scaleX(1);
}

.footer-wrapper .ux-menu-link__link:hover,
.footer-wrapper .nav .ux-menu-link__link:hover,
.footer-wrapper .nav-vertical .ux-menu-link__link:hover {
    color: var(--color-white) !important;
    opacity: 0.85;
}
.footer-widgets .app-download .col-inner {
    display: flex;
    align-items: center;
    justify-content: start;
}
.footer-widgets .app-download .img {
    margin-bottom: 20px;
    max-width: unset !important;
    width: 34% !important;
}
.footer-widgets .app-download img {
    max-height: 36px;
    object-fit: contain;
}
.footer-widgets .col {
    padding-bottom: 0;
}

.absolute-footer {
    display: none;
}
.footer-wrapper {
    background-color: var(--color-secondary);
}
.footer-wrapper .social-icons {
    display: flex;
    justify-content: end;
}
.footer-wrapper .social-icons .button.icon {
    background-color: var(--color-white);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 36px;
}
.footer-wrapper .social-icons .button.icon i {
    color: var(--color-secondary);
    font-size: 16px;
}
@media (max-width: 768px) {
    .footer-wrapper {
        padding-bottom: 20px;
    }
    .footer-widgets .small-6 .col-inner {
        margin-bottom: 20px;
    }
    .footer-copyright p {
        text-align: center;
        margin-bottom: 10px !important;
    }
    .footer-newsletter {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }
    .footer-wrapper .social-icons {
        justify-content: center !important;
    }
    .footer-cta .app-preview .img {
        padding: 0 30px;
    }
    .footer-cta .cta-content .col-inner {
        margin: 0;
        padding: 12px 0;
        text-align: center;
    }
    .footer-cta .cta-content .cta-heading {
        font-size: 24px;
    }
    .footer-cta .cta-content p {
        font-size: 16px;
    }
    .footer-cta .app-download .col-inner {
        justify-content: center;
    }
    .footer-cta .app-download .col-inner img {
        height: 38px;
    }
}
/*--------------------------------------------------------------------
# Plugins
--------------------------------------------------------------------*/
div.wpforms-container-full:not(:empty) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.wpforms-container .wpforms-field,
.wp-core-ui div.wpforms-container .wpforms-field {
    padding: 0 0 16px 0 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    margin-top: 0 !important;
}
div.wpforms-container-full input[type="date"],
div.wpforms-container-full input[type="datetime"],
div.wpforms-container-full input[type="datetime-local"],
div.wpforms-container-full input[type="email"],
div.wpforms-container-full input[type="month"],
div.wpforms-container-full input[type="number"],
div.wpforms-container-full input[type="password"],
div.wpforms-container-full input[type="range"],
div.wpforms-container-full input[type="search"],
div.wpforms-container-full input[type="tel"],
div.wpforms-container-full input[type="text"],
div.wpforms-container-full input[type="time"],
div.wpforms-container-full input[type="url"],
div.wpforms-container-full input[type="week"],
div.wpforms-container-full select,
div.wpforms-container-full textarea,
.wp-core-ui div.wpforms-container-full input[type="date"],
.wp-core-ui div.wpforms-container-full input[type="datetime"],
.wp-core-ui div.wpforms-container-full input[type="datetime-local"],
.wp-core-ui div.wpforms-container-full input[type="email"],
.wp-core-ui div.wpforms-container-full input[type="month"],
.wp-core-ui div.wpforms-container-full input[type="number"],
.wp-core-ui div.wpforms-container-full input[type="password"],
.wp-core-ui div.wpforms-container-full input[type="range"],
.wp-core-ui div.wpforms-container-full input[type="search"],
.wp-core-ui div.wpforms-container-full input[type="tel"],
.wp-core-ui div.wpforms-container-full input[type="text"],
.wp-core-ui div.wpforms-container-full input[type="time"],
.wp-core-ui div.wpforms-container-full input[type="url"],
.wp-core-ui div.wpforms-container-full input[type="week"],
.wp-core-ui div.wpforms-container-full select,
.wp-core-ui div.wpforms-container-full textarea {
    background-color: transparent !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
}
.footer-wrapper
    div.wpforms-container-full
    input[type="submit"]:not(:hover):not(:active),
.footer-wrapper
    div.wpforms-container-full
    button[type="submit"]:not(:hover):not(:active),
.footer-wrapper
    div.wpforms-container-full
    .wpforms-page-button:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    input[type="submit"]:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    button[type="submit"]:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    .wpforms-page-button:not(:hover):not(:active) {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
    border-radius: 6px !important;
}
.footer-newsletter div.wpforms-container-full input[type="text"],
.footer-newsletter div.wpforms-container-full input[type="email"] {
    color: var(--color-white) !important;
}

.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-form .wpforms-field-description,
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form li,
.wpforms-container .wpforms-form th {
    margin-bottom: 6px;
}
div.wpforms-container-full input[type="submit"]:hover,
div.wpforms-container-full button[type="submit"]:hover,
div.wpforms-container-full .wpforms-page-button:hover,
.wp-core-ui div.wpforms-container-full input[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full button[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full .wpforms-page-button:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    opacity: 1;
    border-radius: 6px;
}

div.wpforms-container-full input[type="submit"]:active,
div.wpforms-container-full button[type="submit"]:active,
div.wpforms-container-full .wpforms-page-button:active,
.wp-core-ui div.wpforms-container-full input[type="submit"]:active,
.wp-core-ui div.wpforms-container-full button[type="submit"]:active,
.wp-core-ui div.wpforms-container-full .wpforms-page-button:active {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    opacity: 1;
    border-radius: 6px;
}
div.wpforms-container-full input::placeholder,
div.wpforms-container-full textarea::placeholder,
.wp-core-ui div.wpforms-container-full input::placeholder,
.wp-core-ui div.wpforms-container-full textarea::placeholder {
    color: var(--color-white) !important;
    opacity: 0.8;
}

div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    input[type="submit"]:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    button[type="submit"]:not(:hover):not(:active),
.wp-core-ui
    div.wpforms-container-full
    .wpforms-page-button:not(:hover):not(:active) {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 6px;
    min-width: 200px;
}
div.wpforms-container-full input[type="submit"]:hover,
div.wpforms-container-full button[type="submit"]:hover,
div.wpforms-container-full .wpforms-page-button:hover,
.wp-core-ui div.wpforms-container-full input[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full button[type="submit"]:hover,
.wp-core-ui div.wpforms-container-full .wpforms-page-button:hover {
    min-width: 200px;
}

/*--------------------------------------------------------------------
# GSAP — Image Reveal Animation (.img-animation)
--------------------------------------------------------------------*/
.img-animation {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.img-animation img {
    display: block;
    width: 100%;
    height: auto;
}

/*--------------------------------------------------------------------
# Button — Style 11 "Calypso" (tympanus.net/Development/ButtonHoverStyles)
# Usage: Add class "button-calypso" to any button in UX Builder
--------------------------------------------------------------------*/

/* ── Keyframes — text fly up then reappear from below ── */
@keyframes btn-calypso-up {
    to {
        transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }
}
@keyframes btn-calypso-in {
    from {
        transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* ── Base ── */
.button.button-calypso {
    position: relative !important;
    overflow: hidden !important;
    /* isolate so mix-blend-mode works */
    isolation: isolate;
    z-index: 1;
}

/* Pseudo-element base: full button size */
.button.button-calypso::before,
.button.button-calypso::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── ::before — expanding circle from below ── */
.button span {
    line-height: unset;
}
.button.button-calypso::before {
    background: var(--color-primary);
    /* Start as a circle below the button */
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    top: -110%;
    left: -10%;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
    transition: none;
    z-index: 1;
}

.button.button-calypso:hover::before {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

/* ── ::after — solid fill slides in at t=0.4s ── */
.button.button-calypso::after {
    background: var(--color-primary);
    transform: translate3d(0, -100%, 0);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    z-index: 1;
}

.button.button-calypso:hover::after {
    transform: translate3d(0, 0, 0);
    transition-duration: 0.05s;
    transition-delay: 0.4s;
    transition-timing-function: linear;
}

/* ── Text — sits above overlays, mix-blend-mode:difference inverts on dark bg ── */
.button.button-calypso span,
.button.button-calypso > .ux-button__text {
    display: block;
    position: relative;
    z-index: 10;
    mix-blend-mode: difference;
}

/* Fly up then reappear from below */
.button.button-calypso:hover span,
.button.button-calypso:hover > .ux-button__text {
    animation:
        btn-calypso-up 0.3s forwards,
        btn-calypso-in 0.3s forwards 0.3s;
}

/* ── Variant: white overlay (for dark buttons on dark bg) ── */
.button.button-calypso.calypso-light::before,
.button.button-calypso.calypso-light::after {
    background: rgba(255, 255, 255, 0.15);
}

/* =============================================
   Slider — Prev / Next Navigation Buttons
   Pure CSS — no JS dependency
   ============================================= */

.flickity-button.flickity-prev-next-button,
.ux-slider-wrapper .flickity-prev-next-button {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    /* Start hidden — fade in when slider is hovered */
    opacity: 0;
    transition:
        opacity 0.3s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}
.flickity-page-dots .dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: none;
    margin: 0 8px;
}
.slider-show-nav .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button {
    transform: translateY(-50%) !important;
}
/* Fade in when hovering the slider wrapper */
.flickity-enabled:hover .flickity-prev-next-button,
.ux-slider-wrapper:hover .flickity-prev-next-button {
    opacity: 1;
}

.flickity-button.flickity-prev-next-button.previous {
    left: 20px;
}
.flickity-button.flickity-prev-next-button.next {
    right: 20px;
}

/* Hover on button itself */
.flickity-button.flickity-prev-next-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Hide original Flickity SVG path */
.flickity-button.flickity-prev-next-button .flickity-button-icon {
    display: none;
}

/* Custom chevron via ::before — URL-encoded SVG, no JS needed */
.flickity-button.flickity-prev-next-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.flickity-button.flickity-prev-next-button.next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 18L15 12L9 6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.flickity-button.flickity-prev-next-button.previous::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15 18L9 12L15 6' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Disabled */
.flickity-button.flickity-prev-next-button:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* =============================================
   Slider Dot — Sizes & Progress Ring (Pure CSS)
   ============================================= */

/* Animatable custom property for conic-gradient */
@property --dot-prog {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@keyframes dot-progress {
    from {
        --dot-prog: 0%;
    }
    to {
        --dot-prog: 100%;
    }
}

/* Base dot — only override what's needed for the ring ::before */
.flickity-page-dots .dot {
    position: relative;
    overflow: visible !important; /* allow ::before ring to show outside dot bounds */
}

/* Progress ring via ::before — conic-gradient, pure CSS */
.flickity-page-dots .dot.is-selected::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: conic-gradient(
        rgba(255, 255, 255, 0.9) var(--dot-prog),
        rgba(255, 255, 255, 0.15) var(--dot-prog)
    );
    -webkit-mask: radial-gradient(circle, transparent 43%, black 44%);
    mask: radial-gradient(circle, transparent 43%, black 44%);
    animation: dot-progress 5s linear forwards;
    pointer-events: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .flickity-page-dots .dot.is-selected::before {
        animation: none;
    }
}

.wpsl-locations-details,
.wpsl-opening-hours {
    display: none !important;
}