.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 - the category dropdown picks which of the 3
        search types (Products/Companies/Buy Leads) the term searches
        against, so it has to stay visible and usable here too - hiding
        it left mobile visitors with no way to search Companies or Buy
        Leads from the header at all, always searching Products
        regardless of what they typed. Shrunk to fit next to the input
        and the compact icon submit button. */
     .s-select {
         padding: 0 8px;
         max-width: 96px;
         flex-shrink: 0;
     }

     .s-select select {
         width: 100%;
         font-size: 12px;
     }

     .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: 100%;
     }

     /* Product photo was pushing the card's text into a narrow column,
        truncating category names hard (e.g. "Agricultural ..."). One
        full-width card per row plus no photo gives the name and its
        sub-category list room to actually display. */
     .home_cat .opci-img {
         display: none;
     }

     .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%;
     }
 }