/* Fix: theme-20.css has several duplicate, conflicting
   ".tt-logo img { max-height: ... }" declarations (43px/80px unscoped,
   20px inside "@media (max-width: 1024px)") - the 20px mobile one wins at
   any width under 1025px, shrinking a real 500x500 logo image down to a
   barely-visible 20px icon in the header. Raised to a size that actually
   reads as a logo in the 53px-tall mobile header row. */
@media (max-width: 1024px) {
    .tt-logo img {
        max-height: 36px !important;
    }
}

/* Fix: theme.css forces "footer, footer > * { background-color: #ffffff
   !important; }" (a deliberate site-wide white-footer decision, wins over
   everything via !important) - but the mobile footer accordion still
   carries the theme's .f-mobile-dark class, whose own mobile-only rules
   (@media max-width:789px) set the accordion title and contact-address
   text to white, written back when this footer actually had the dark
   #303030 background .f-mobile-dark also sets - that background lost to
   the !important white rule above, but these leftover white text colors
   didn't get updated to match, leaving both invisible against the now-
   permanently-white footer (reported: footer accordion titles render
   blank, just the "+" icon visible). Overrides just the two text colors
   .f-mobile-dark forces white; every other .f-mobile-dark rule (borders,
   hover colors, the collapse content itself) is untouched since only
   these two are actually unreadable. */
@media (max-width: 789px) {
    .f-mobile-dark .tt-mobile-collapse .tt-collapse-title {
        color: #191919 !important;
    }
    .f-mobile-dark address span {
        color: #191919 !important;
    }
}

/* Fix: .tt-collection-listing (theme.css / theme-20.css) sets a stray
   margin-top: -40px (576-1024px) / -30px (<576px) / -38px (>=1025px) on
   any element carrying that class - written for a *different* component
   (a static "collection" grid whose child tiles carry .tt-collection-item
   to push back down by the same amount), but every product carousel row's
   own class list also happens to include .tt-collection-listing. Slick's
   generated markup (.slick-slide) never carries .tt-collection-item, so
   nothing compensates, and the whole carousel shifts up over its own
   section title. The theme only patches this at desktop
   (".tt-block-title + .arrow-location-tab.tt-carousel-products" inside
   "@media (min-width: 1025px)") - narrower widths never got the same fix,
   so every homepage product row's title overlapped its own carousel below
   1025px (reported at 598px width). Extends that same, already-correct
   selector to every width instead of only desktop. */
.tt-block-title + .arrow-location-tab.tt-carousel-products {
    margin-top: -10px;
}

.float {
    position: fixed;
    bottom: 20rem;
    right: 15px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}

.tt-countdown_box_02 .countdown-section {
    height: 35px !important;
    background: var(--primary-color) !important;
    padding: 5px 0 0 0 !important;
    color: #fff !important;
}

.countdown-amount,
.countdown-period {
    height: 15px !important;
    padding: 5px 0 0 0 !important;
    line-height: 10px !important;
    font-size: 14px !important;
}

.countdown-period {
    font-size: 12px !important;
}

.tt-product,
.tt-collection-item {
    border: solid 1px #ddd;
    background: #fff;
    padding: 5px;
}

.tt-stuck-nav .tt-dropdown-obj .tt-dropdown-toggle {
    color: #fff !important;
}

.tt-stuck-nav .tt-menu-toggle i {
    color: #fff !important;
}

.tt-stuck-nav .tt-cart .tt-dropdown-toggle .tt-badge-cart {
    background: #fff;
    color: #777;
}

.trackorder {
    font-size: 12px !important;
}

.topheadernote {
    background-color: #fc0;
    color: #fff;
    padding: 2px;
    text-align: center;
}

.languageButton {
    border: 0;
    background-color: inherit;
    font-size: 18px;
    font-weight: normal;
    margin-top: 3px;
    cursor: pointer;
    height: 20px;
}

.error {
    color: #ff0000;
}

/*font color for order status*/
.pending {
    color: #f60;
}

.completed {
    color: #009900;
}

.canceled {
    color: #ff0000;
}

.returned {
    color: #03f;
}

/*alert box*/
.alert-danger {
    padding: 20px;
    background-color: #f44336;
    /* Red */
    color: #ffffff;
    margin-bottom: 15px;
}

.alert-success {
    padding: 20px;
    background-color: #bceeb5;
    /* Red */
    color: #006633;
    margin-bottom: 15px;
    font-size: 16px;
}

.textureattr {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.textureattr li {
    float: left;
    width: 35px;
    height: 35px;
}

.pad_3 {
    padding: 3% !important;
}

.font-13 {
    font-size: 13px !important;
}

.mt-10 {
    margin-top: 10px;
}

.my_border {
    border: solid 1px #e9e7e7;
    padding: 5px;
    margin: 10px 0;
}

.list_pro {
    float: left;
    width: 50%;
}

.tt-wishlist-box .tt-wishlist-list .tt-item:not(:last-child) {
    border-bottom: 1px solid #e9e7e7;
}

.tt-wishlist-box .tt-wishlist-list .tt-item:not(:last-child) {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.tt-wishlist-box .tt-wishlist-list .tt-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: center;
}

.mb-30 {
    margin-bottom: 30px;
}

.list_pro img {
    float: left;
    width: 50px;
    height: auto;
    margin: 0 10px 10px 0;
}

.list_pro p {
    float: left;
}

.list_proall {
    width: 100%;
}

.w-160 {
    width: 180px !important;
}

/* ── Header light gray ── */
#tt-header {
    background: #f5f5f5 !important;
}
header .tt-color-scheme-01 {
    background: #efefef !important;
    color: #555555 !important;
    border-bottom: 1px solid #e0e0e0;
}
header .tt-color-scheme-01 .tt-box-info ul li a {
    color: #555555 !important;
}
header .tt-color-scheme-01 .tt-box-info ul li a:hover {
    color: #222222 !important;
}
header .tt-color-scheme-01 .tt-box-info ul li [class^="icon-"],
header .tt-color-scheme-01 .tt-box-info ul li [class*=" icon-"] {
    color: #555555 !important;
}
header .tt-color-scheme-01 .tt-social-icon li a:hover {
    color: #222222 !important;
}
/* ── */

@media all and (max-width: 480px) and (min-width: 320px) {
    header .tt-color-scheme-01 {
        display: none;
    }
}

/*pagination*/
.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

.pagination-lg .page-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.tt-stuck-nav .languageButton {
    color: #fff;
    margin-top: 3px;
}

.color-label {
    font-size: 0.7rem;
}

.search-bar-20 {
    padding: 14px 10px 12px 50px !important;
    width: 100% !important;
}

.options-color {
    border: 1px dashed gray;
}

.tt-top-row .icon-f-55 {
    position: relative !important;
}

.tt-top-row .icon-f-55:before {
    position: absolute !important;
    top: -3px !important;
    left: -20px !important;
}

.row-cols-1>* {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2>* {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3>* {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row-cols-4>* {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5>* {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6>* {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

@media (min-width: 576px) {
    .row-cols-sm-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-sm-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-sm-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-sm-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-sm-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-sm-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

@media (min-width: 768px) {
    .row-cols-md-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-md-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-md-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-md-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-md-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-md-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .w-md-auto {
        width: auto !important;
    }

}

@media (min-width: 992px) {
    .row-cols-lg-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-lg-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-lg-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-lg-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-lg-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-lg-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

@media (min-width: 1200px) {
    .row-cols-xl-1>* {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xl-2>* {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xl-3>* {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .row-cols-xl-4>* {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xl-5>* {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xl-6>* {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

span.tt-img {
    display: flex;
    align-items: center;
    aspect-ratio: 1/1;
    /* height: auto; */
    /* width: 280px; */
    justify-content: center;
}

.tt-product h2.tt-title {
    /* white-space: nowrap; */
    overflow: hidden;
    width: 100%;
    padding-inline: 1rem;
    min-height: 66px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tt-product .tt-price {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.tt-product-single-info .tt-price .old-price,
.tt-product-single-info .tt-price .old-price .money {
    text-decoration: none !important;
}

span#oldprices *,
.tt-product:not(.tt-view) .tt-description .tt-price .old-price {
    color: red !important;
    text-decoration: line-through;
}

@media only screen and (max-width: 600px) {
    .my-sm-14 {
        margin-block: 1.4rem;
    }
}

.optionradio>li>label {
    font-weight: bold;
}

.zoomWindowContainer .zoomWindow {
    height: 100% !important;
}

.square {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
}

.portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 1/2;
}

.landscape {
    width: 100%;
    height: auto;
    aspect-ratio: 2/1;
}

img:is(.square, .portrait, .landscape) {
    object-fit: cover;
}

.min-h-100-1 {
    min-height: calc(100% - 1rem);
}

.min-h-100 {
    min-height: 100%;
}

.min-h-100-1_6 {
    max-height: calc(100% - 1.6rem);
}

.min-h-50-1 {
    min-height: calc(50% - 1rem);
}

.tt-desctop-menu:not(.tt-hover-02) li.dropdown>a {
    text-transform: uppercase !important;
}

.brands-dropdown {
    gap: 1rem;
}

.brands-dropdown .col-sm-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px #80808012 solid;
    border-radius: 0.5rem;
}

@media only screen and (min-width: 520px) {
    .w-md-70vw {
        width: 70vw;
    }
}

.tt-img-roll-over {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    height: 100% !important;
}

.offer-badge {
    border-radius: 2px !important;
    height: 1rem !important;
    margin-top: 3px !important;
    line-height: 1.7;
}

.offer-badge i {
    line-height: 1.3;
}

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}


.accordion button[data-toggle] {
    /* all:unset; */
    background: transparent;
}

.accordion button[data-toggle]:hover {
    /* all:unset; */
    background: transparent;
}

/* Accordion */
.accordion {
    overflow-anchor: none;
}

.accordion>.card>.card-header {
    border-radius: 0;
    margin-bottom: -1px;
}

.accordion>.card>.card-header :is(h2, h2 button) {
    padding: 0 !important;
    margin: 0 !important;
}

.accordion>.card {
    overflow: hidden;
}

.accordion>.card:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion>.card:not(:first-of-type) .card-header {
    border-bottom: 0;
}

.accordion>.card:not(:first-of-type) .card-header:first-child,
.accordion>.card:not(:last-of-type) .card-header:last-child {
    border-radius: 0;
}

.accordion>.card>.card-header {
    margin-bottom: -1px;
}

.accordion>.card>.card-header>.btn {
    width: 100%;
    text-align: left;
    padding-right: 0;
    padding-left: 1.5rem;
    position: relative;
}

.accordion>.card>.card-header>.btn::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s ease-out;
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 0.25rem;
}

.accordion>.card>.card-header>.btn[aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(90deg);
}

.accordion>.card>div {
    transition: all 300ms ease-in-out;
}

.accordion>.card> :is(.collapsing, .collapse) {
    height: 0;
    overflow: hidden;
}

.accordion>.card>.collapse.show {
    height: auto;
    overflow: visible;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: hsl(var(--primary-color-values), 60%) !important;
}


/* card */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

.gap-y-4 {
    gap: 1.5rem 0 !important;
}

/*------------------------------- bottom bar-------------------------------- */
.mobile-bottom-nav {
    display: none;
}

/* --------------------------------- Select2 -------------------------------- */
.select2 {
    display: block !important;
    width: 100% !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-clip: padding-box;
    border-radius: 6px !important;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.select2-selection {
    border: unset !important;
}

/*Mobile Devices.*/
@media all and (max-width: 480px) and (min-width: 320px) {
    .my_title {
        display: block;
        text-align: center;
        font-size: 18px;
        line-height: 21px;
        font-weight: normal;
        letter-spacing: normal;
        margin: 20px 0 -20px 0;
        font-family: 'acum', sans-serif;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        will-change: transform;
        transform: translateZ(0);
        display: flex;
        height: 60px;
        box-shadow: -2px -2px 5px -2px #999;
        background-color: white;
        border-radius: 30px 30px 0 0;
        -webkit-border-radius: 30px 30px 0 0;
        -moz-border-radius: 30px 30px 0 0;
    }

    .mobile-bottom-nav__item {
        flex-grow: 1;
        text-align: center;
        font-size: 13px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 8px;
        line-height: 10px;
    }

    .mobile-bottom-nav__item a {
        color: #1f2841 !important;
    }

    .mobile-bottom-nav__item--active {
        color: #fff;
        /*   background:#37B1D8;
  padding:5px;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  box-shadow: 2px -2px -5px -2px #999; */
    }

    .mobile_acive {
        color: #fff;
        background: var(--primary-color);
        padding: 5px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        box-shadow: 2px -2px -5px -2px #999;
    }

    .mobile-bottom-nav__item-content {
        display: flex;
        flex-direction: column;
    }

    .home_ico,
    .category_ico,
    .favo_ico,
    .check_ico,
    .mobile-bottom-nav__item-content .ico {
        width: 25px;
        height: auto;
        margin: 0 auto 5px auto;
    }

    .mobile-bottom-nav__item-content:not(.mobile_acive) img.ico {
        filter: invert(100%) saturate(0%) brightness(50%);
    }

    .mobile-bottom-nav__item-content.mobile_acive img.ico {
        filter: invert(0%) saturate(0%) brightness(200%);
    }

    .slick-track>div,
    div:has(.tt-product) {
        padding: 4px;
    }
}

/* ── Product info grid ── */
.tt-add-info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    list-style: none;
    margin: 0 0 4px !important;
    padding: 0;
}
.tt-add-info-grid li {
    min-width: 0;
    margin-top: 0 !important;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
}
.tt-add-info-grid li span:first-child {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888 !important;
    font-weight: 600;
    display: inline;
}
/* ── */

/* ── Payment icons ── */
.tt-product-payment-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.tt-product-payment-icons .tt-payment-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 4px;
}
.tt-product-payment-icons img {
    height: 26px;
    object-fit: contain;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 2px 5px;
    background: #fff;
}
/* ── */

/* ── Product actions bar (Share + Wishlist) ── */
.tt-product-actions-bar {
    border-top: 1px solid #ebebeb;
    padding-top: 16px;
    margin-top: 12px;
}
.tt-product-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tt-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 16px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: border-color .2s, background .2s;
    white-space: nowrap;
    position: relative;
}
.tt-action-btn:hover {
    border-color: var(--primary-color, #191919);
    color: var(--primary-color, #191919);
    text-decoration: none;
}
.tt-action-btn i { font-size: 16px; }

.tt-share-wrap { position: relative; }
.tt-share-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    padding: 8px;
    z-index: 200;
    min-width: 170px;
}
[dir=rtl] .tt-share-dropdown { left: unset; right: 0; }
.tt-share-dropdown.open { display: block; }
.tt-share-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #333;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s;
}
.tt-share-dropdown a:hover { background: #f5f5f5; text-decoration: none; }
.tt-share-dropdown a i { font-size: 18px; }
.tt-share-dropdown a .share-label { font-weight: 500; }

/* New search option (adib, 2026-08-19) - Add to Cart inside the header
   autocomplete dropdown (resources/views/website/includes/search-bar/
   quick_search_results.blade.php). Only ever rendered when
   config('features.smart_search_enabled') is on, so this whole block is
   inert (nothing on the page matches these selectors) when the flag is off -
   safe to ship either way.

   Layout note (adib, 2026-08-20): went through two revisions the same day -
   first a single-column row list, then a 6-column card grid matching
   sanamstore.net. adib then asked for a wider dropdown, only 4 columns
   instead of 6 (more room per card so text isn't cramped), the qty stepper
   removed entirely (single click = add 1, same as everywhere else on the
   site), only in-stock/available items shown (no out-of-stock, no
   preorder - filtered server-side in webCartController.php), and an
   explicit red/white Add to Cart button that never wraps to a second line.
   This is that version. Mobile gets its own layout further down - adib
   provided a reference screenshot of sanamstore.net's mobile results
   (stacked rows: thumbnail+title/price on top, full-width Add to Cart
   button below) to match. */
.tt-quicksearch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid !important;
    /* adib: back to 4 items on desktop (was 5) now that the panel width
       matches the search input's own width instead of a fixed 1100px -
       see the panel-width rule below. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 16px;
}
.tt-quicksearch-list li {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}
.tt-quicksearch-list li > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-decoration: none;
}
.tt-quicksearch-list .thumbnail {
    flex: none;
    width: 100px;
    height: 100px;
}
.tt-quicksearch-list .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.tt-quicksearch-list .tt-description {
    width: 100%;
}
.tt-quicksearch-list .tt-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-size: 13px;
    /* adib: "keep title of item not bold" - explicit normal weight so it
       doesn't inherit any bold from elsewhere; only the price stays bold. */
    font-weight: 400;
    line-height: 1.35;
    min-height: 2.7em;
    color: #191919;
    text-align: center !important;
}
.tt-quicksearch-list .tt-price {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    text-align: center !important;
}
/* adib: "the search result window width keep same as width of search input
   field" - so instead of forcing a fixed px width (1100px, then 900px
   before that - both of which were really just guesses at a size that
   looked reasonable), the panel now simply follows the theme's own native
   "width: 100%" rule, which resolves to the same width as the search
   input/form it sits under. No override needed here at all - removing our
   old width:1100px !important is the fix. Paired with going back to 4
   columns above, so cards still get comfortable room at this narrower
   width. */
@media (min-width: 1025px) {
    /* adib: "increase the weight of search input field", and (established
       last round) "weight of result to be same weight of input" - bumped
       further from 600 to 700 (adib asked to increase it again) and kept
       the title matching. Scoped to desktop only, as in the previous round;
       mobile input/title weights are untouched (title stays 400 there). */
    #search_keyname.tt-search-input {
        font-weight: 700;
    }
    .tt-quicksearch-list .tt-title {
        font-weight: 700;
    }
    /* Search by image (2026-08-21): leaves room for .tt-btn-image-search,
       which now sits right after this input inside the same .tt-col.
       Desktop-scoped separately from the mobile width rule above (which
       also has to leave room for the gap toward the close button's own,
       different .tt-col) since the two viewports' layouts aren't the same
       shape. box-sizing: border-box for the same reason as the mobile
       rule - so this `width` is the actual final rendered size rather
       than content-box adding the theme's own padding/border on top.
       40px was exactly the button's own reserved footprint (34px wide +
       6px from the container's right edge, see .tt-btn-image-search's
       `right` below) with nothing left over, so the input's text and the
       button sat flush against each other with no visible gap - adib
       flagged this (2026-08-21, UI polish round), fixed by bumping to 48px
       so the input's right edge sat 8px clear of the button. Bumped again
       (twice) the same round as the button's own size changed - 64px when
       it briefly went to 50px, then settled at 56px for its final 42px
       size (42px wide + 6px offset = 48px, +8px gap = 56px). */
    #search_keyname.tt-search-input {
        box-sizing: border-box !important;
        width: calc(100% - 56px) !important;
    }
}
/* margin-top: auto pins this to the bottom of the card regardless of how
   many lines the title/price above it took - without this, a card with a
   1-line title and no discount price sits shorter than a card with a
   2-line title and an old-price line, so their Add to Cart buttons land at
   different heights across the row. adib: "keep add to cart in same line
   for all items". Needs the <li> to actually stretch to the grid row's
   full height for margin-top:auto to have room to push into - CSS Grid's
   default align-items:stretch on the row already does this, height:100%
   on the <li> above makes it explicit. */
.tt-quicksearch-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding-top: 10px;
}
.tt-quicksearch-response {
    width: 100%;
    font-size: 10px;
    text-align: center;
}
/* Add to Cart / Details button. adib: explicit red background + white text,
   and the label should never wrap onto a second line ("add to cart always
   should be in same line") - white-space:nowrap plus a comfortable min-width
   keeps "ADD TO CART" on one line even in the narrower mobile/tablet
   columns below.

   justify-content needs !important: the theme's own
   "header .tt-search .search-results ul > li a" rule sets
   `place-content: center flex-start` (higher specificity than a plain
   .tt-quicksearch-addtocart class selector), whose justify-content half
   left the button's text pinned to the left instead of centered. */
a.tt-quicksearch-addtocart,
span.tt-quicksearch-addtocart {
    display: flex;
    align-items: center;
    justify-content: center !important;
    text-align: center;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.tt-quicksearch-addtocart.addtocartsingle,
a.tt-quicksearch-addtocart.tt-btn-details {
    background: #d80e15 !important;
    color: #fff !important;
    cursor: pointer;
}
a.tt-quicksearch-addtocart.addtocartsingle:hover,
a.tt-quicksearch-addtocart.tt-btn-details:hover {
    opacity: .9;
    color: #fff;
    text-decoration: none;
}
/* "View all products" - theme-native button (#viewallsearchresult, always
   present below the results, previously unstyled plain text). adib asked
   for it to read as a full-width button under the results.
   adib (next round): "view all product button display after search result
   (auto complete) shows" - the button used to be visible as soon as the
   dropdown panel opened (on focus/first keystroke), well before any
   results existed - for a good part of a second it floated there alone
   above an empty/"Loading..." list. Hidden by default now; gulfweb.js adds
   .tt-view-all-visible only once the autocomplete response actually
   contains result items. */
.search-results .tt-view-all {
    display: none;
    width: 100%;
    padding: 12px !important;
    margin-top: 18px !important;
    border: none !important;
    border-radius: 6px;
    background: #d80e15 !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}
.search-results .tt-view-all.tt-view-all-visible {
    display: block;
}
.search-results .tt-view-all:hover {
    opacity: .9;
}
/* Fewer columns as the dropdown narrows, so cards never get squeezed back
   down to theme-original widths. */
@media (min-width: 481px) and (max-width: 1024px) {
    .tt-quicksearch-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Mobile (adib, 2026-08-20): stacked rows matching the sanamstore.net
   reference screenshot he sent - thumbnail + title/price side by side on
   top, a full-width Add to Cart button below, one result per row down the
   page (not a multi-column grid at this width). */
@media (max-width: 480px) {
    .search-results:has(.tt-quicksearch-list) {
        width: 100% !important;
    }
    .tt-quicksearch-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .tt-quicksearch-list li {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 10px;
    }
    .tt-quicksearch-list li > a {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }
    .tt-quicksearch-list .thumbnail {
        width: 64px;
        height: 64px;
    }
    .tt-quicksearch-list .tt-title,
    .tt-quicksearch-list .tt-price {
        text-align: left !important;
    }
    .tt-quicksearch-action {
        margin-top: 10px;
    }
    /* adib: "keep text add to cart in center" - the button already centers
       its own text via justify-content, but hardening this explicitly in
       case the surrounding li/a's left-alignment (used for the
       thumbnail+title row above) was leaking into it. */
    .tt-quicksearch-action .tt-quicksearch-addtocart {
        text-align: center !important;
        justify-content: center !important;
    }
    /* adib: "in mobile add round box for x button" - the theme's own clear/
       close button (#close_btn / .tt-btn-close), shown only when the mobile
       search panel is actively open (that show/hide timing is the theme's
       own and is left untouched here - only its shape/color/icon are set,
       not its `display`, so this has no effect until the theme already
       shows it).

       adib (next round): "change style of X button it does not look good,
       use new round icon for X button" - the button's icon was the theme's
       own icon-font glyph (class icon-g-80, font "wokiee", the private-use
       character U+EA0F), which rendered as a very thin, faint "x" that was
       hard to see against the gray circle. Replaced it with a crisp inline
       SVG (two rotated lines, rounded caps, dark gray #555) set as a
       background-image on the button itself, sized/centered explicitly -
       looks the same on every device regardless of whether the icon font
       has finished loading, unlike the old font-glyph approach. The
       ::before rule that drew the old glyph is neutralized with
       `content: none` rather than deleted, since `.icon-g-80::before` is a
       theme rule this project doesn't own and could change independently. */
    .tt-btn-close {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background-color: #f0f0f0 !important;
        border: 1px solid #e2e2e2 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
        padding: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 1L13 13M13 1L1 13' stroke='%23555555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 13px 13px !important;
    }
    .tt-btn-close::before {
        content: none !important;
    }
    /* adib: "extend input search text field a little bit more, there is a
       gap between search input and X button" - measured live: the <input>
       itself had no CSS width at all (only its wrapping .tt-col div did,
       155px), so the browser fell back to its intrinsic default width
       (~115px) and left ~40px of dead space between the input's right edge
       and the close button. Filling the wrapper (minus a small, deliberate
       10px gap so the input's border doesn't touch the button) closes that
       gap down to something intentional-looking rather than accidental.

       Widened further (2026-08-21, image search) to also leave room for
       the new .tt-btn-image-search camera button, which now lives inside
       the SAME .tt-col as this input (the close button above is a
       different, second .tt-col) - box-sizing: border-box makes this
       `width` the actual final rendered size instead of content-box's
       "width plus whatever padding/border get added on top" (measured
       live on desktop: a declared width of 654.656px was actually
       rendering at 717px before this, all from the theme's own 50px+10px
       padding and 1px+1px border - border-box removes that guesswork). */
    #search_keyname.tt-search-input {
        box-sizing: border-box !important;
        width: calc(100% - 50px) !important;
    }
    /* adib: "when result window appears it should cover and be on top -
       no other elements like floating whatsapp or next/previous icon (on
       homepage slideshow) should cover this window". Checked live on a
       genuine mobile viewport (finally possible this round): the floating
       WhatsApp button (.float, position:fixed) sits at z-index:100, while
       .search-results was only z-index:9 (the theme's own value) - so on
       any page where the dropdown's rendered height reaches down to where
       that button floats, the button won and visually sat on top of the
       results (confirmed by screenshot: the WhatsApp bubble covering a
       card's Add to Cart button).
       First attempt (raising only .search-results's own z-index) turned
       out not to be enough: on the real mobile markup (which lives in
       .tt-mobile-parent-search - a container that had looked permanently
       empty in every earlier round's testing, but is actually populated on
       a genuine phone), .search-results sits inside .tt-dropdown-menu,
       which is itself `position: absolute; z-index: 3` - that makes
       .tt-dropdown-menu its own stacking context, so anything inside it
       (including .search-results at z-index 999999) only competes within
       that context, never directly against page-level elements like the
       WhatsApp button. .tt-dropdown-menu's own z-index is what actually
       needs to beat 100 at the page level. Raising both here to be safe.

       BUG (found next round): this was originally unconditional - applying
       the instant the media query matched, not only while search was
       actually open. .tt-dropdown-menu turns out to sit in the DOM (and
       overlap on screen) at all times, including before search is opened,
       so cranking its z-index unconditionally put it - invisibly, since it
       has no visible content while closed - on top of the header's own
       search-toggle icon, silently swallowing every tap on it. Scoped to
       `body.tt-open-search` (the class the theme itself adds once the
       search panel is actually opened - confirmed by inspecting the live
       DOM) so the boosted z-index only exists once search is genuinely
       active, never before the toggle has already been tapped. */
    body.tt-open-search .tt-dropdown-menu,
    body.tt-open-search .search-results {
        z-index: 999999 !important;
    }
    /* adib: "when result window appears... scroll down to see the result,
       window search is disappearing" - confirmed from a screen recording of
       the live site. Root cause: .search-results had no max-height/overflow
       of its own, so once there were more results than fit in the viewport,
       the ONLY way to see the rest was to scroll the actual page - and
       scrolling the page far enough to bring the lower results into view
       also scrolled the search input itself off-screen. On mobile Chrome,
       scrolling a focused text input out of view blurs it to reclaim the
       space taken by the keyboard, and bundle.js closes the whole dropdown
       on that same blur event (the pre-existing behavior already noted
       above, and the same one the Add to Cart button had to work around
       with preventDefault on mousedown). So "scroll to see more results"
       was blurring the input as a side effect, which closed the dropdown
       out from under the results the user was trying to scroll to.

       Fix: give the results panel its own capped height and internal
       scrollbar instead of letting it grow the page. The panel stays
       absolutely positioned right where it already was (unchanged), but
       now the user's scroll gesture is consumed by the panel itself once
       their finger is over it - the page underneath never needs to move,
       so the input never leaves the viewport and never blurs.
       overscroll-behavior: contain stops the classic "scroll chaining" bug
       where reaching the bottom of an inner scrollable box hands the rest
       of the drag off to the page - without it, this fix would only work
       until the user reached the last result, then hit the exact same
       bug again. Verified live: scrolling the panel to its own bottom no
       longer moves window.scrollY and body.tt-open-search stays on the
       whole time (see the project doc for the full interaction test). */
    body.tt-open-search .search-results {
        max-height: 65vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}
/* adib: "add a border on search box" in both desktop and mobile - the
   input had a theme-default border already (confirmed applying via
   computed style, unlike the panel-width bug above), but it was a very
   faint #e9e7e7 that's easy to miss. This makes it an explicit, consistent,
   !important-hardened border across every viewport rather than relying on
   the theme's own value. */
#search_keyname.tt-search-input {
    border: 1px solid #d0d0d0 !important;
}
/* adib: "add light gray border in search window result" - the dropdown
   panel itself (not just the input) gets the same light gray border, plus
   a small radius so it reads as one connected card under the input. */
.search-results {
    border: 1px solid #d0d0d0 !important;
    border-radius: 6px;
}
/* adib: "hide the search icon button as search is autocomplete and there
   is no need to click on search" - #search_btns is the magnifying-glass
   submit button next to the header search input. It was already hidden by
   the theme's own desktop CSS, but this makes sure it stays hidden on
   mobile too (and stays hidden even if the theme's CSS changes later).
   Pressing Enter in the input still submits the form as a fallback - only
   the visible icon button is removed, not the form's submit capability. */
#search_btns.tt-btn-search {
    display: none !important;
}

/* Search by image (2026-08-21) - App\Services\ImageSearch /
   webController::imageSearch() on the backend, .tt-btn-image-search /
   .tt-image-search-file/.tt-image-search-form in the header blade,
   gulfweb.js wires the click-to-open-file-picker + submit-on-change.

   Flows in normal document flow right after the input (both #search_keyname
   width rules above were widened to leave room for this) rather than
   trying to reproduce the theme's own #search_btns absolute-overlay
   trick - that button's position was tuned for its own now-unused glyph
   against a containing block (#topsearchform1) this project doesn't
   otherwise touch, and is `display:none` today anyway. Same custom-SVG
   pattern as .tt-btn-close (ninth round) rather than the theme's icon
   font, for the same reason: crisp regardless of whether/how that font
   has loaded. */
.tt-btn-image-search {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin-left: 6px;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #d0d0d0 !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 17px 17px !important;
}
.tt-btn-image-search:hover {
    background-color: #ececec !important;
}
/* Desktop compact-theme search: .tt-col is display:inline there (reset by
   the theme's own "all: unset" rule on
   .header-compact .tt-desctop-parent-search .tt-col), so an inline-flex
   button just wraps onto its own line below the full-width search input
   instead of sitting in the input's reserved 40px gap (see the
   #search_keyname width rule further down). Taking it out of flow and
   anchoring it to .container - which the theme already makes
   position:relative - puts it back inside that gap, vertically centered,
   regardless of the wrap. Scoped to the desktop widget only; the mobile
   clone's .tt-col keeps its own (non-reset) layout and doesn't need this. */
.header-compact .tt-desctop-parent-search .tt-btn-image-search {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 6px !important;
    margin: auto 0 !important;
}
/* RTL mirror (adib, 2026-08-22): "in arabic it should be on left ... but
   now it overlapping search input in right". Root cause, confirmed by
   measuring live rects on http://kash5astore.test/ar: under dir="rtl" the
   input's own box right-aligns itself (normal browser bidi behavior for an
   inline element narrower than its container), so its right edge lands
   within a few px of this button's own right:6px anchor - the button was
   rendering INSIDE the input's box rather than beside it. The 56px of
   empty space this button is meant to sit in (reserved by the
   #search_keyname `calc(100% - 56px)` rule below) ends up on the input's
   LEFT side under RTL instead of its right, so mirroring the button there
   is both the fix adib asked for and what actually closes the overlap.
   Scoped the same as the base rule above (desktop compact-theme search
   only) - the mobile clone's .tt-col isn't absolutely positioned, so it
   already mirrors correctly on its own via normal RTL flow and needs no
   override. The "Take Photo"/"Choose from Gallery" menu under this button
   needs no matching change - gulfweb.js positions it live from the
   button's own getBoundingClientRect() on every click, so it already
   follows the button wherever it renders. */
html[dir="rtl"] .header-compact .tt-desctop-parent-search .tt-btn-image-search {
    right: auto !important;
    left: 6px !important;
}
/* adib: "make search icon a bit bigger (same height as of input search
   field) and make it color not gray" (2026-08-21, desktop only), then
   "looks good now just a bit smaller" once 50px (the input's full height)
   was live - settled on 42px, between the original 34px and that first
   attempt. Brand red (#d80e15, the same red used for Add to Cart/prices
   site-wide) instead of the gray fill+gray-stroke-icon combination, with
   the icon itself switched to white so it stays visible against it.
   Widened the input's own reserved-gap rule below to match this button's
   footprint - it was sized for the original 34px button. Mobile keeps the
   original 34px gray button (the base .tt-btn-image-search rule above)
   since this was scoped to desktop only. */
@media (min-width: 1025px) {
    .header-compact .tt-desctop-parent-search .tt-btn-image-search {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        background-color: #d80e15 !important;
        border-color: #d80e15 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") !important;
        background-size: 19px 19px !important;
    }
    .header-compact .tt-desctop-parent-search .tt-btn-image-search:hover {
        background-color: #b80c12 !important;
        border-color: #b80c12 !important;
    }
}
/* Hide "search by image" below desktop width (adib: "hide the camera
   search" on mobile). .tt-btn-image-search only gets absolutely
   positioned inline with the search input via the desktop-only
   ".header-compact .tt-desctop-parent-search .tt-btn-image-search" rule
   above (min-width: 1025px) - below that width it has no such
   positioning and falls into normal document flow as its own row under
   the input, which both looks broken on its own and pushes the search
   dropdown's content taller than the dropdown's own box (the box's
   height comes from the input row alone), letting page content directly
   underneath show through below it. Hiding the button below the same
   1025px breakpoint its own desktop styling uses removes the extra row
   entirely. Placed after the base ".tt-btn-image-search { display:
   inline-flex !important }" rule above (not just anywhere in this file)
   so it actually wins the cascade - same selector specificity and both
   !important, so source order is what decides the tie. */
@media (max-width: 1024px) {
    .tt-btn-image-search,
    .tt-image-search-choice {
        display: none !important;
    }
}
/* Hides the actual file input - opened only via .tt-btn-image-search's
   click handler in gulfweb.js (input.trigger('click')), never shown
   itself. Kept a real, focusable, in-DOM element (not display:none)
   isn't required here since JS always drives it, so plain display:none is
   fine and simplest. */
.tt-image-search-file {
    display: none !important;
}

/* Small "Take Photo" / "Choose from Gallery" menu, added 2026-08-22 after
   adib found that on production mobile, tapping the camera button opened
   the gallery straight away with no way to reach the camera. Current
   Android Chrome's default file-input chooser for accept="image/*" with no
   capture attribute is a gallery-only "Photos" picker (no camera shortcut
   in it), so relying on the OS/browser's own chooser to offer both isn't
   reliable - this explicit menu is instead. Positioned with position:fixed
   and its exact top/left set in JS (gulfweb.js, from the button's own
   getBoundingClientRect()) rather than relying on a positioned ancestor,
   since the desktop and mobile copies of the search widget sit in
   different DOM structures (see the button-positioning comments elsewhere
   in this file) and this way works identically for both. */
.tt-image-search-choice {
    display: none;
    position: fixed;
    z-index: 1000000;
    min-width: 190px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.tt-image-search-choice.is-visible {
    display: block;
}
.tt-image-search-choice button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: #fff;
    border: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-family: inherit;
}
.tt-image-search-choice button:hover {
    background: #f5f5f5;
}
.tt-image-search-choice button + button {
    border-top: 1px solid #eee;
}
/* RTL mirror (2026-08-22, same round as the .tt-btn-image-search left/
   right fix above): the button labels are Arabic text under dir="rtl", so
   left-aligning them (the base rule above, tuned for English) would read
   backwards - right-align to match. */
html[dir="rtl"] .tt-image-search-choice button {
    text-align: right;
}

/* Full-page loading state shown the instant a photo is picked (gulfweb.js
   adds .is-visible) - Gemini's describe-the-photo call plus the page
   navigation to /search takes a second or two, and a blank/frozen-looking
   screen for that long reads as broken. Lives once outside .tt-search (see
   the header blade comment) so bundle.js's desktop->mobile clone never
   duplicates it. */
.tt-image-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.tt-image-search-overlay.is-visible {
    display: flex;
}
/* Text/spinner bumped up (2026-08-21, UI polish round) - adib flagged the
   original ("Search...", reusing the generic search_txt string, at a plain
   15px gray) as not clear enough that something is actively happening.
   Bigger, bolder, darker text plus a bigger/thicker spinner read more
   clearly as "in progress" at a glance. */
.tt-image-search-overlay p {
    margin: 0;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    max-width: 80vw;
}
.tt-image-search-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 5px solid #e2e2e2;
    border-top-color: #d80e15;
    animation: tt-image-search-spin 0.8s linear infinite;
}

html[dir="rtl"] .tt-dropdown-toggle {
    text-align: right;
}
@keyframes tt-image-search-spin {
    to {
        transform: rotate(360deg);
    }
}