/**
* Theme Name: Sapa Child
* Description: This is a child theme for Sapa
* Author: Thembay
* Author URI: https://thembay.com/
* Version: 1.1.29
* Template: sapa
*/


/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */

/* ==========================================================================
   Product gallery slider — custom prev/next arrow icons
   Replaces the raw "Previous" / "Next" text link on the main product image
   slider with round icon buttons, using the theme's own "tb-icon" font
   (the same icon set already used for the thumbnail-strip arrows) so it
   matches the existing design instead of pulling in a new icon library.
   Vertical centering on the image is finished by a small JS helper —
   see js/gallery-arrows.js — because the main image height is dynamic.
   ========================================================================== */

.woocommerce-product-gallery .flex-direction-nav {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0; /* overridden per-instance by gallery-arrows.js to sit at the image's vertical center */
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 5;
    pointer-events: none; /* only the arrow buttons themselves are clickable */
}

.woocommerce-product-gallery .flex-direction-nav li {
    margin: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    color: transparent;   /* hide the native "Previous" / "Next" text */
    font-size: 0;
    line-height: 0;
    pointer-events: auto;
    transition: background-color .2s ease, opacity .2s ease;
}

.woocommerce-product-gallery .flex-direction-nav a:before {
    font-family: "tb-icon";
    font-style: normal;
    font-weight: normal;
    speak: none;
    font-size: 16px;
    color: #121216;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
    background-color: #121216;
}

.woocommerce-product-gallery .flex-direction-nav a:hover:before {
    color: #fff;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
    left: 14px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev:before {
    content: "\e023";
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
    right: 14px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next:before {
    content: "\e024";
}

.woocommerce-product-gallery .flex-direction-nav .flex-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}

/* RTL layouts (data-rtl="yes" is set by the theme on the gallery wrapper) */
.woocommerce-product-gallery[data-rtl="yes"] .flex-direction-nav .flex-prev {
    left: auto;
    right: 14px;
}

.woocommerce-product-gallery[data-rtl="yes"] .flex-direction-nav .flex-next {
    right: auto;
    left: 14px;
}

@media (max-width: 480px) {
    .woocommerce-product-gallery .flex-direction-nav a {
        width: 32px;
        height: 32px;
    }
    .woocommerce-product-gallery .flex-direction-nav a:before {
        font-size: 13px;
    }
}

/* ==========================================================================
   GTranslate dropdown — [gtranslate] shortcode, header row
   The plugin only injects a plain native <select class="gt_selector"> into
   its own ".gtranslate_wrapper" div (see wp-content/plugins/gtranslate/js/
   dropdown.js) with no styling of its own. A *native* select's open option
   list is drawn by the OS/browser (Chrome/Edge in particular), which is why
   no amount of CSS on <option> can stop the default blue hover/selected
   highlight in it.

   So js/gtranslate-dropdown.js builds a fully custom trigger button + option
   list next to it (kept in sync with the real, still-present-but-hidden
   <select> so GTranslate's own change handling keeps doing the actual
   translating). Every state of that custom list is plain CSS we own, so the
   blue is gone everywhere and the accent is #FF6A25 throughout. If JS is
   ever unavailable the plain <select> rules below are still there as a
   styled fallback (it just won't get the custom list, and will show the
   browser's own option colors in that case).
   ========================================================================== */

.gtranslate_wrapper {
    --gt-primary: #FF6A25;
    --gt-primary-soft: rgba(255, 106, 37, .16);
    --gt-black: #1a1a1a;
    --gt-gray: #6b7280;
    --gt-gray-light: #d8d8dc;
    --gt-gray-bg: #f6f6f7;

    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Shared "closed control" look — the native select (no-JS fallback) and the
   custom trigger button (js/gtranslate-dropdown.js) render identically. */
.gtranslate_wrapper .gt_selector,
.gtranslate_wrapper .gt-trigger {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    min-width: 152px;
    margin: 0;
    padding: 9px 34px 9px 38px;
    border: 1.5px solid var(--gt-gray-light);
    border-radius: 999px;
    background-color: #fff;
    color: var(--gt-black);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .15s ease;
}

.gtranslate_wrapper .gt_selector::-ms-expand {
    display: none; /* legacy Edge/IE native arrow */
}

.gtranslate_wrapper .gt_selector:hover,
.gtranslate_wrapper .gt-trigger:hover {
    border-color: var(--gt-primary);
    background-color: var(--gt-gray-bg);
}

.gtranslate_wrapper .gt_selector:focus-visible,
.gtranslate_wrapper .gt-trigger:focus-visible,
.gtranslate_wrapper.is-open .gt-trigger {
    border-color: var(--gt-primary);
    box-shadow: 0 0 0 4px var(--gt-primary-soft);
}

.gtranslate_wrapper .gt_selector:active,
.gtranslate_wrapper .gt-trigger:active {
    transform: scale(.98);
}

/* Native <option> styling — best-effort fallback only, see banner above. */
.gtranslate_wrapper .gt_selector {
    scrollbar-width: thin;
    scrollbar-color: var(--gt-primary) var(--gt-gray-bg);
}

.gtranslate_wrapper .gt_selector option {
    background-color: #fff;
    color: var(--gt-black);
    padding: 8px 12px;
}

.gtranslate_wrapper .gt_selector option:checked {
    background-color: var(--gt-primary-soft);
    color: var(--gt-primary);
}

.gtranslate_wrapper .gt_selector option[value=""] {
    color: var(--gt-gray);
    font-style: italic;
}

/* The custom trigger button (js/gtranslate-dropdown.js) — the currently
   selected language always shows in the primary accent color. */
.gtranslate_wrapper .gt-trigger {
    width: 100%;
    text-align: left;
}

.gtranslate_wrapper .gt-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gt-primary);
    font-weight: 600;
}

/* Once the custom dropdown has built itself, the real <select> is only kept
   around so GTranslate's own change listener still fires — hide it visually. */
.gtranslate_wrapper.gt-enhanced .gt_selector {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The custom option list — fully our own CSS, so no native blue anywhere. */
.gtranslate_wrapper .gt-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    background-color: #fff;
    border: 1.5px solid var(--gt-gray-light);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    scrollbar-width: thin;
    scrollbar-color: var(--gt-primary) var(--gt-gray-bg);
}

.gtranslate_wrapper .gt-list::-webkit-scrollbar {
    width: 8px;
}

.gtranslate_wrapper .gt-list::-webkit-scrollbar-thumb {
    background-color: var(--gt-gray-light);
    border-radius: 999px;
}

.gtranslate_wrapper .gt-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--gt-primary);
}

.gtranslate_wrapper.is-open .gt-list {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.gtranslate_wrapper .gt-option {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--gt-black);
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

/* No blue: hover, keyboard focus and the currently selected language all
   use the same primary-tinted state instead of the browser default. */
.gtranslate_wrapper .gt-option:hover,
.gtranslate_wrapper .gt-option:focus,
.gtranslate_wrapper .gt-option.is-selected {
    background-color: var(--gt-primary-soft);
    color: var(--gt-primary);
    outline: none;
}

/* globe icon, left-aligned inside the control */
.gtranslate_wrapper::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3c2.5 2.5 4 5.7 4 9s-1.5 6.5-4 9c-2.5-2.5-4-5.7-4-9s1.5-6.5 4-9z'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
}

/* chevron, right-aligned; swaps to primary and flips open while the
   control has focus, is open, or the wrapper is hovered */
.gtranslate_wrapper::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .25s ease;
    pointer-events: none;
}

.gtranslate_wrapper:hover::after,
.gtranslate_wrapper:focus-within::after,
.gtranslate_wrapper.is-open::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A25' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.gtranslate_wrapper.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 480px) {
    .gtranslate_wrapper .gt_selector,
    .gtranslate_wrapper .gt-trigger {
        min-width: 130px;
        padding: 8px 28px 8px 32px;
        font-size: 13px;
    }
    .gtranslate_wrapper::before {
        left: 11px;
        width: 14px;
        height: 14px;
    }
    .gtranslate_wrapper::after {
        right: 11px;
    }
}

/* ==========================================================================
   GTranslate attention hint — small callout bubble pointing at the dropdown
   Shows a short "translate this site" tip near the control on page visits so
   first-time users notice it's there, then stops for good. Driven by
   js/gtranslate-hint.js, which tracks a view count in localStorage — see
   MAX_VIEWS in that file to change how many times it appears.
   ========================================================================== */

.gt-hint {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    padding: 10px 14px;
    background-color: #fff;
    color: var(--gt-black);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    border: 1.5px solid var(--gt-primary);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}

.gt-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* a couple of quick, gentle shakes once it's settled in, to catch the eye */
    animation: gt-hint-shake .5s ease .45s 2;
}

@keyframes gt-hint-shake {
    0%, 100% { transform: translateY(0) translateX(0); }
    20% { transform: translateY(0) translateX(-4px); }
    40% { transform: translateY(0) translateX(4px); }
    60% { transform: translateY(0) translateX(-3px); }
    80% { transform: translateY(0) translateX(3px); }
}

/* arrow now points up at the dropdown, since the bubble sits below it */
.gt-hint::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 22px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-left: 1.5px solid var(--gt-primary);
    border-top: 1.5px solid var(--gt-primary);
    transform: translateY(50%) rotate(45deg);
}

.gt-hint-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: -4px -4px -4px 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gt-gray);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.gt-hint-close:hover {
    color: var(--gt-primary);
}

@media (max-width: 480px) {
    .gt-hint {
        max-width: 200px;
        font-size: 12px;
    }
}

/* ==========================================================================
   Sticky site header with a settle-in animation
   The theme ships an unused "main-sticky-header" JS/CSS system (see
   js/functions.js in the parent theme) that nothing in this build ever
   actually turns on — there's no sticky-header option in the theme's own
   settings panel, so #tbay-header just scrolled away normally by default.

   Plain CSS `position: sticky` (the first approach here) turned out not to
   work on this site: `.wrapper-container` — the single element wrapping the
   whole header + page — has `overflow: hidden` in the parent theme's CSS
   (used elsewhere for off-canvas menus/animations), and any ancestor with
   overflow other than visible silently breaks position: sticky, even though
   that ancestor isn't the thing actually scrolling. Changing that shared
   overflow rule site-wide risked side effects elsewhere, so js/header-
   sticky.js switches the header to `position: fixed` instead once you
   scroll past its own height — fixed isn't affected by an ancestor's
   overflow — and inserts a spacer element of the same height right after it
   so the page content doesn't jump up into the gap the header used to fill.
   ========================================================================== */

#tbay-header.header-is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    animation: sapa-child-header-in .3s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

/* keep the fixed header clear of the WP admin toolbar for logged-in staff */
body.admin-bar #tbay-header.header-is-stuck {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #tbay-header.header-is-stuck {
        top: 46px;
    }
}

.header-sticky-spacer {
    height: 0;
    transition: height .2s ease;
}

/* a small settle-into-place nudge as it locks to the top of the viewport */
@keyframes sapa-child-header-in {
    from {
        transform: translateY(-10px);
        opacity: .88;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   Sidebar "Video" widget (shop / product-single sidebar) — background-style
   autoplaying video with just a mute toggle, no scrubber/play control bar.
   Behavior (autoplay-muted, pause-off-screen, the button itself) lives in
   js/sidebar-video-widget.js.
   ========================================================================== */

.sapa-video-widget-wrap {
    position: relative;
    line-height: 0;
}

.sapa-video-widget-wrap video {
    display: block;
    width: 100%;
    height: auto;
}

.sapa-video-mute-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 15px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease;
}

.sapa-video-mute-toggle:hover {
    background: rgba(0, 0, 0, .75);
}

/* ==========================================================================
   Header search box — keep the search-icon button on the same row as
   the input instead of wrapping onto its own line.
   Root cause: the header search widget forces .input-group to a fixed
   250px width (Elementor "Width" setting on that widget instance), but
   the theme's own .tbay-search input has a hard min-width: 200px and the
   parent .input-group is a Bootstrap flex container that wraps by default
   — 200px input + padding + the search button never fit in 250px, so the
   button drops to row two. Letting the input shrink (min-width: 0, flex
   to fill) and forcing the row not to wrap keeps everything inline at any
   widget width instead of only at the widths Elementor happens to leave
   enough room for.
   ========================================================================== */

.tbay-search-form .form-group .input-group {
    flex-wrap: nowrap;
}

.tbay-search-form .form-group .input-group .tbay-search {
    min-width: 0;
    flex: 1 1 auto;
}

.tbay-search-form .form-group .input-group .button-group {
    flex-shrink: 0;
}

/* Search results dropdown was rendering with a default (auto) stacking
   order, so it could end up visually on top but behind other positioned
   elements in the header/hero area for click purposes — clicks on a
   result then land on whatever is actually stacked above it instead of
   the result itself. Force the dropdown to the top of the stack so its
   items are always the thing that receives the click. */
.tbay-search-form .sapa-search-results .autocomplete-suggestions {
    z-index: 1000;
    pointer-events: auto;
}