.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert-primary{
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.d-none{
    display: none;
}
.not-found{
    color: red;
    text-align: center;
}

.active{
    font-weight: bold !important;
    color: #03c !important;
}

.banner-wrapper img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/*
 * Flash message toast (moved from inline <style> in layouts/app.blade.php)
 */
.flash-message {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    z-index: 99999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    animation: slideIn .3s ease;
}

.flash-success {
    background: #28a745;
}

.flash-error {
    background: #dc3545;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Form validation states (moved from inline <style> in partials/footer.blade.php)
 */
input.is-invalid {
    border: 1px solid red !important;
}

textarea.is-invalid {
    border: 1px solid red !important;
}

select.is-invalid {
    border: 1px solid red !important;
}

div.is-invalid {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #e55353 !important;
}

input[type=checkbox].is-invalid {
    outline: 2px solid #c00;
}

/*
 * Header
 */
 /* ── Help Dropdown Wrapper ── */
 .help-dropdown {
     position: relative;
     list-style: none;
 }

 .help-dropdown .tlinks-wrap>a {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     color: #fff;
     font-size: 13px;
     gap: 2px;
 }

 .help-dropdown .tlinks-wrap>a figure {
     margin: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ── Dropdown Menu ── */
 .help-dropdown-menu {
     display: none;
     position: absolute;
     top: calc(100% + 12px);
     right: 50%;
     transform: translateX(50%);
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
     min-width: 210px;
     width: max-content;
     list-style: none;
     padding: 0 !important;
     margin: 0 !important;
     z-index: 9999;
     overflow: visible;
 }

 .help-dropdown:hover .help-dropdown-menu {
     display: block;
 }

 /* ── Arrow ── */
 .help-dropdown-menu::before {
     content: '';
     position: absolute;
     top: -9px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 9px solid transparent;
     border-right: 9px solid transparent;
     border-bottom: 9px solid #e0e0e0;
 }

 .help-dropdown-menu::after {
     content: '';
     position: absolute;
     top: -7px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-bottom: 8px solid #fff;
 }

 /* ── List Items ── */
 .help-dropdown-menu>li {
     padding: 0 !important;
     margin: 0 !important;
     width: 100% !important;
     display: block !important;
     list-style: none !important;
 }

 .help-dropdown-menu>li+li {
     border-top: 1px solid #f0f0f0 !important;
     margin: 0 !important;
 }

 /* ── Menu Links ── */
 .help-dropdown-menu>li>a,
 .help-dropdown-menu li a {
     display: block !important;
     width: 100% !important;
     padding: 10px 12px !important;
     font-size: 13px !important;
     color: #333 !important;
     text-decoration: none !important;
     white-space: nowrap !important;
     box-sizing: border-box !important;
     transition: background 0.12s, color 0.12s;
     border-radius: 0 !important;
     background: transparent !important;
     float: none !important;
     line-height: normal !important;
     text-align: left !important;
 }

 .help-dropdown-menu>li>a:hover,
 .help-dropdown-menu li a:hover {
     background: #f7f7f7 !important;
     color: #f47920 !important;
 }

 .help-dropdown-menu>li:first-child>a {
     border-radius: 6px 6px 0 0 !important;
 }
/* ── Contact Info Group ── */
/* ── Contact Info Group ── */
.help-dropdown-menu>li.contact-info-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #fff8f0 !important;
    border-top: 1px solid #f0f0f0 !important;
    border-radius: 0 0 6px 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Phone icon */
.help-dropdown-menu>li.contact-info-group .contact-phone-icon {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    background: #fff !important;
    border: 1.5px solid #ddd !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
}

.help-dropdown-menu>li.contact-info-group .contact-phone-icon svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* Numbers */
.help-dropdown-menu>li.contact-info-group .contact-numbers {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.help-dropdown-menu>li.contact-info-group .contact-numbers a {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    font-size: 12.5px !important;
    color: #555 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    background: transparent !important;
    border-radius: 0 !important;
    float: none !important;
}

.help-dropdown-menu>li.contact-info-group .contact-numbers a:hover {
    color: #f47920 !important;
    background: transparent !important;
}
 /* ════════════════════════════
   RESPONSIVE — Tablet
════════════════════════════ */
 @media (max-width: 991px) {
     .help-dropdown-menu {
         right: 0 !important;
         left: auto !important;
         transform: none !important;
     }

     .help-dropdown-menu::before {
         left: auto !important;
         right: 14px !important;
         transform: none !important;
     }

     .help-dropdown-menu::after {
         left: auto !important;
         right: 15px !important;
         transform: none !important;
     }
 }

 /* ════════════════════════════
   RESPONSIVE — Mobile
════════════════════════════ */
 @media (max-width: 575px) {
     .help-dropdown-menu {
         position: fixed !important;
         top: auto !important;
         bottom: 0 !important;
         left: 0 !important;
         right: 0 !important;
         width: 100% !important;
         min-width: unset !important;
         transform: none !important;
         border-radius: 14px 14px 0 0 !important;
         box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15) !important;
         overflow: hidden !important;
     }

     .help-dropdown-menu::before,
     .help-dropdown-menu::after {
         display: none !important;
     }

     .help-dropdown-menu>li:first-child::before {
         content: '';
         display: block;
         width: 36px;
         height: 4px;
         background: #ddd;
         border-radius: 2px;
         margin: 10px auto 6px;
     }

     .help-dropdown-menu>li>a,
     .help-dropdown-menu li a {
         padding: 13px 16px !important;
         font-size: 14px !important;
     }

     .help-dropdown-menu>li:first-child>a {
         border-radius: 0 !important;
     }

     .contact-info-group {
         padding: 12px 16px !important;
         border-radius: 0 !important;
     }

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

     .contact-phone-icon {
         width: 34px !important;
         height: 34px !important;
         min-width: 34px !important;
     }

     .contact-phone-icon svg {
         width: 16px !important;
         height: 16px !important;
     }
 }

 /* ════════════════════════════
   RESPONSIVE — Site Header / Category Bar
   (.hed_sec = logo + search + top links, .full-nav = category quick-links row)
════════════════════════════ */
 @media (max-width: 991px) {
     .container {
         padding: 0 15px;
     }

     .hed_sec {
         flex-wrap: wrap;
         row-gap: 12px;
     }

     .logo {
         width: 190px;
     }

     .sb-wrap {
         margin: 0 20px;
         min-width: 0;
         flex-shrink: 1;
     }

     .tlinks {
         flex-wrap: wrap;
         justify-content: flex-end;
         row-gap: 8px;
     }

     .tlinks li:not(:last-child) {
         margin-right: 18px;
     }

     .tlinks .top-btn {
         padding: 8px 16px;
         font-size: 13px;
     }

     .full-nav {
         flex-wrap: nowrap;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .full-nav::-webkit-scrollbar {
         display: none;
     }

     .full-nav .nav-item {
         white-space: nowrap;
     }

     .slider {
         height: 500px;
     }

     .trending_categories {
         margin-top: -220px;
     }

     .tc-list .tcl-iteam {
         width: 25%;
     }

     .opc {
         flex-wrap: wrap;
     }

     .home_cat {
         width: 100%;
     }

     .cat_men_image {
         display: none;
     }

     .category_02>* {
         width: 33.33%;
     }

     .sitemap_list li {
         width: 33.33%;
     }

     .clind_logo_list li {
         width: 25%;
     }

     .find_cunt_list,
     .find_cunt_list2 {
         flex-wrap: wrap;
     }

     .find_cunt_list li,
     .find_cunt_list2 li {
         width: 20%;
         margin-bottom: 15px;
     }

     .fn-sec .fnav>li {
         flex: 0 0 33.33%;
         max-width: 33.33%;
         box-sizing: border-box;
         margin-right: 0;
         padding-right: 15px;
         border-right: none;
         margin-bottom: 25px;
     }

     .fn-sec .q-link {
         width: 100%;
     }

     .fn-sec .fnav>li.f_nav {
         flex: 0 0 100%;
         max-width: 100%;
         width: 100%;
     }

     .eih-footer .copy_right .eihf {
         flex-direction: column;
         gap: 8px;
         text-align: center;
     }
 }

 /* ════════════════════════════
   RESPONSIVE — Mobile
════════════════════════════ */
 @media (max-width: 575px) {
     /* Compact app-style mobile header: hamburger+logo+icons on one row,
        unified search pill below. "Post Buy Requirement" is hidden here -
        still reachable via the footer link and the sign-in dropdown prompt. */
     .menu_icon {
         order: 1;
     }

     .logo {
         order: 2;
         width: 150px;
         margin-right: auto;
     }

     .tl-r {
         order: 3;
     }

     .sb-wrap {
         order: 4;
         flex-basis: 100%;
         width: 100%;
         margin: 12px 0 0;
     }

     .tlinks {
         flex-wrap: wrap;
         justify-content: flex-end;
         align-items: center;
         row-gap: 8px;
     }

     .tlinks-wrap>a :nth-child(2) {
         display: none;
     }

     .tlinks-wrap a figure {
         transform: scale(0.85);
         margin: 0;
     }

     .tlinks li:not(:last-child) {
         margin-right: 18px;
     }

     /* "Post Buy Requirement" is the last item in .tlinks - hide it from
        the mobile header entirely. */
     .tlinks li:last-child {
         display: none;
     }

     /* Unified search pill - hide the (single-option, decorative) category
        dropdown and turn the submit button into a compact icon button. */
     .s-select {
         display: none;
     }

     .sinput {
         padding-left: 16px;
     }

     .sbutton {
         background: transparent;
         padding: 4px;
     }

     .sbutton button {
         width: 34px;
         height: 34px;
         padding: 0;
         border-radius: 50%;
         font-size: 0;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .sbutton button:before {
         content: '\f002';
         font-family: FontAwesome;
         font-size: 14px;
         color: #fff;
     }

     .slider {
         height: 300px;
     }

     .trending_categories {
         margin-top: -110px;
     }

     .page_title h1,
     .page_title h2 {
         font-size: 20px;
     }

     .tc-list .tcl-iteam {
         width: 50%;
     }

     .tc-list .tcl-iteam .tc-img {
         width: 100px;
         height: 100px;
     }

     .tc-list .tcl-iteam .tc-img img {
         max-width: 100px;
         max-height: 100px;
     }

     .home_cat>li {
         width: 50%;
     }

     .category_02>* {
         width: 50%;
     }

     .sitemap_list {
         margin: 0;
     }

     .sitemap_list li {
         width: 50%;
     }

     .clind_logo_list li {
         width: 33.33%;
     }

     .clind_logo_list li a {
         height: 100px;
     }

     .clind_logo_list li a img {
         max-width: 90px;
         max-height: 90px;
     }

     .find_cunt_list li,
     .find_cunt_list2 li {
         width: 33.33%;
     }

     .find_cunt_list li a,
     .find_cunt_list2 li a {
         width: 100px;
         height: 100px;
     }

     .find_cunt_list li a img {
         height: 36px;
         width: 36px;
     }

     .find_cunt_list2 li a img {
         height: 30px;
         width: 46px;
     }

     .find_cunt_list li a span,
     .find_cunt_list2 li a span {
         font-size: 12px;
         margin-top: 10px;
     }

     ._testi_box {
         padding: 25px 15px;
         margin: 10px 5px;
     }

     .contact_info {
         margin-left: 0;
         margin-right: 0;
     }

     .contact_info li {
         width: 100%;
     }

     .contact_info li ._inner {
         padding: 20px;
         min-height: 0;
     }

     .fn-sec .fnav>li:not(.f_nav) {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .fn-sec .fnav>li.f_nav {
         flex: 0 0 100%;
         max-width: 100%;
         width: 100%;
     }

     .fn-sec .f_nav .app_store {
         margin-top: 15px;
     }

     .fn-sec .f_nav .app_store li {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         column-gap: 12px;
         row-gap: 10px;
     }

     .fn-sec .f_nav .app_store li a.apple,
     .fn-sec .f_nav .app_store li a.google {
         margin-bottom: 0;
     }

     .fn-sec .f_nav .app_store li p {
         flex-basis: 100%;
         margin: 0 0 4px;
     }
 }

 /* ════════════════════════════
   RESPONSIVE — Category subcategory grid (.categ_list .cat_box) and
   country/region chip lists (.find_cunt_list / .find_cunt_list2)

   .cat_box has no mobile override anywhere, so its desktop 33.33% width
   (homepage.css) squeezes 3 cards per row into a column too narrow for
   the title + subcategory links, wrapping them into unreadable slivers.

   .find_cunt_list(2) is `display:flex` with the default nowrap + shrink,
   holding fixed 130-155px-wide chips - with more than a handful of
   countries/regions the chips get force-shrunk and overflow their own
   flex cell, which reads as chips overlapping each other.
════════════════════════════ */
 @media (max-width: 991px) {
     .categ_list .cat_box {
         width: 50%;
     }

     .find_cunt_list,
     .find_cunt_list2 {
         flex-wrap: nowrap;
         justify-content: flex-start;
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
     }

     .find_cunt_list::-webkit-scrollbar,
     .find_cunt_list2::-webkit-scrollbar {
         display: none;
     }

     .find_cunt_list li,
     .find_cunt_list2 li {
         width: auto;
         flex: 0 0 auto;
     }
 }

 @media (max-width: 575px) {
     .categ_list .cat_box {
         width: 100%;
     }
 }