/*
 * ============================================================
 *  FindItTnT — Phase 2 Brand & Layout CSS
 *  Prepared by: Claude (AI-generated — review before uploading)
 *  Note to Uma: Please review every section carefully before
 *  applying to the live site. Test on a staging/dev copy first
 *  if possible. Each section is labelled for easy reference.
 * ============================================================
 *
 *  HOW TO APPLY IN FLYNAX:
 *  Admin Panel → Templates → [Your Active Template] → Custom CSS
 *  Paste the entire contents of this file and Save.
 * ============================================================
 *
 *  BRAND COLORS
 *  Navy   : #0A2540  (header, nav, primary buttons)
 *  Gold   : #F59E0B  (CTA buttons, active tabs, highlights)
 *  Teal   : #1D9E75  (success states, badges, verified icons)
 *  Sky    : #E8F4FF  (light backgrounds, info areas)
 *  White  : #FFFFFF  (cards, form fields)
 *  Off-white: #F8F6F2 (page background)
 * ============================================================
 */


/* ============================================================
   1. PAGE BACKGROUND
   ============================================================ */

   /* 18-06-2026 */
.main-menu .menu a.active {
    background: #f59e0b24;
    color: #F59E0B !important;
    box-shadow: none !important;
}
.main-menu .menu .menu-content a{padding: 14px 8px !important;}
.category-menu__button{background: #ffffff17 !important; border: 1px solid rgba(232, 244, 255, .2) !important;} 
.smart-search .smart-search__input{background: #ffffff17 !important; border: 1px solid rgba(232, 244, 255, .2) !important;}
.add-property{background: #F59E0B !important;}
.field-bound-box-text-pic > li {
    padding: 16px;
    background: #fff;
    margin: 5px;
    border: 1px solid rgba(10,37,64,.17) !important;
    border-radius: 10px;
    
}
.no-sidebar section.content_block{
    padding-top: 0px;
}
body.home-page.no-sidebar aside.top > section:first-child:before{content: inherit;}
body.home-page.no-sidebar section.content_block > h3{color: #000;}
:root {
    
    --button-color: #F59E0B !important;
    --button-hover-color: #F59E0B !important;}
    .horizontal-search{background: #fff; padding: 12px; margin-bottom: 20px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;}
    .search_tab_area select {
           background: #ffffff17 !important; 
           border: 1px solid rgba(10,37,64,.17) !important;
           box-shadow: none !important;
           color: #0A2540;
    }
    .search_tab_area  input{
           background: #ffffff17 !important; 
           border: 1px solid rgba(10,37,64,.17) !important;
    }
    .search_tab_area .select2-selection--single{
           background: #ffffff17 !important; 
           border: 1px solid rgba(10,37,64,.17) !important;
           box-shadow: none !important;
            color: #0A2540;
    }
    
    .header-tabs .tabs {
    padding: 10px;
    justify-content: left !important;
     border: solid #fff !important;
border-width: 2px 2px 0 2px !important;
     border-top-left-radius: 16px; border-top-right-radius: 16px;

    }
    .search_tab_area .search-form-cell > div > span{color: #0A2540 !important; text-transform: uppercase;}
    .header-tabs ul.tabs > li.active > a {
    box-shadow: 0 -2px 0 var(--button-color) inset !important;
}
    .header-tabs .tabs li a {
    
    font-size: 14px !important;
    }
    .header-tabs .tabs li.more {
    
    background: #ffffff17 !important; 
           border: 1px solid rgba(232, 244, 255, .2) !important;
    }
    .no-sidebar section.content_block{padding-bottom: 0px !important;}
    /* .horizontal-search {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(10,37,64,.13);
    overflow: hidden;
} */
/* 18-06-2026 */
/* 19-06-2026 */
/* .categories-box__slide .categories-box__item{background: #fff !important;  border: 1px solid rgba(10,37,64,.17) !important; padding: 16px !important; margin: 5px !important; border-radius: 10px;} */
/* 19-06-2026 */

body {
    background-color: #F8F6F2 !important;
}


/* ============================================================
   2. HEADER & TOP NAVIGATION BAR
   ============================================================ */
#header,
.header,
header,
.top-bar,
#top-bar {
    background-color: #0A2540 !important;
    border-bottom: 2px solid #F59E0B !important;
}

/* Logo text color */
#logo a,
.logo a,
#header .logo {
    color: #FFFFFF !important;
}

/* Nav links */
#header nav a,
#header .nav a,
.top-bar a,
header nav a {
    color: rgba(232, 244, 255, 0.85) !important;
    text-decoration: none !important;
}

#header nav a:hover,
.top-bar a:hover,
header nav a:hover {
    color: #F59E0B !important;
}


/* ============================================================
   3. SEARCH TABS (Real Estate / Jobs / Electronics etc.)
   ============================================================ */

/* Tab container */
.quick-search-tabs,
.search-tabs,
.tabs-nav,
#quick-search .nav-tabs {
    background-color: #0A2540 !important;
    border-bottom: 2px solid #F59E0B !important;
}

/* Individual tab */
.quick-search-tabs li a,
.search-tabs li a,
.tabs-nav li a,
#quick-search .nav-tabs li a {
    color: rgba(232, 244, 255, 0.75) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    transition: color 0.2s ease !important;
}

/* Tab hover */
.quick-search-tabs li a:hover,
.search-tabs li a:hover,
#quick-search .nav-tabs li a:hover {
    color: #F59E0B !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Active / selected tab */
.quick-search-tabs li.active a,
.search-tabs li.active a,
.tabs-nav li.active a,
#quick-search .nav-tabs li.active a,
.quick-search-tabs li a.active,
.search-tabs li a.active {
    color: #F59E0B !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 3px solid #F59E0B !important;
    font-weight: 500 !important;
}


/* ============================================================
   4. SEARCH FORM / FILTER PANEL
   ============================================================ */

/* Search form container */
.quick-search-form,
#quick-search .tab-content,
.search-form-wrap {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px !important;
}

/* Form labels */
.quick-search-form label,
.search-form-wrap label {
    font-size: 12px !important;
    color: #5a6a7a !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
}

/* Input fields and select dropdowns */
.quick-search-form input[type="text"],
.quick-search-form input[type="number"],
.quick-search-form select,
.search-form-wrap input,
.search-form-wrap select {
    background-color: #F8F6F2 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.2) !important;
    border-radius: 6px !important;
    color: #0A2540 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    width: 100% !important;
}

.quick-search-form input:focus,
.quick-search-form select:focus,
.search-form-wrap input:focus,
.search-form-wrap select:focus {
    border-color: #0A2540 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(10, 37, 64, 0.12) !important;
}

/* Disabled / greyed-out fields */
.quick-search-form input:disabled,
.quick-search-form select:disabled,
.search-form-wrap input:disabled,
.search-form-wrap select:disabled {
    background-color: #e9e9e9 !important;
    color: #aaa !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}


/* ============================================================
   5. SALE / RENT TOGGLE BUTTONS
   ============================================================ */

/* Button group container */
.property-for-btns,
.sale-rent-toggle,
.btn-group.sale-rent {
    display: flex !important;
    gap: 6px !important;
}

/* Default (unselected) state */
.property-for-btns .btn,
.sale-rent-toggle .btn,
.btn-group.sale-rent .btn {
    background-color: #F8F6F2 !important;
    color: #0A2540 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.25) !important;
    border-radius: 6px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* Active/selected button */
.property-for-btns .btn.active,
.sale-rent-toggle .btn.active,
.btn-group.sale-rent .btn.active,
.property-for-btns .btn-primary,
.sale-rent-toggle .btn-primary {
    background-color: #0A2540 !important;
    color: #FFFFFF !important;
    border-color: #0A2540 !important;
}

.property-for-btns .btn:hover,
.sale-rent-toggle .btn:hover {
    background-color: #E8F4FF !important;
    border-color: #0A2540 !important;
}


/* ============================================================
   6. SEARCH / SUBMIT BUTTONS
   ============================================================ */
.btn-search,
.search-submit,
button[type="submit"],
input[type="submit"],
.quick-search-form .btn-primary,
.search-form-wrap .btn-primary {
    background-color: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.btn-search:hover,
.search-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: #D97706 !important;
}


/* ============================================================
   7. POST AD / CTA BUTTONS (sitewide)
   ============================================================ */
.btn-post-ad,
.post-ad-btn,
a.btn-primary,
.btn.btn-primary:not(.sale-rent-toggle .btn):not(.property-for-btns .btn) {
    background-color: #F59E0B !important;
    color: #0A2540 !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease !important;
}

.btn-post-ad:hover,
a.btn-primary:hover {
    background-color: #D97706 !important;
    color: #0A2540 !important;
}

/* Secondary / outline buttons */
.btn-default,
.btn.btn-default,
a.btn-default {
    background-color: #FFFFFF !important;
    color: #0A2540 !important;
    border: 0.5px solid rgba(10, 37, 64, 0.3) !important;
    border-radius: 6px !important;
}

.btn-default:hover,
a.btn-default:hover {
    background-color: #E8F4FF !important;
}


/* ============================================================
   8. HOMEPAGE CATEGORY GRID (icons + labels)
   ============================================================ */
.category-box,
.cat-box,
.categories-grid .item,
.homepage-categories .category-item {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.12) !important;
    border-radius: 10px !important;
    text-align: center !important;
    padding: 16px 10px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.category-box:hover,
.cat-box:hover,
.categories-grid .item:hover,
.homepage-categories .category-item:hover {
    border-color: #F59E0B !important;
    box-shadow: 0 2px 8px rgba(10, 37, 64, 0.1) !important;
}

/* Category icon */
.category-box .icon,
.cat-box .icon,
.categories-grid .item .icon,
.category-box i,
.cat-box i {
    font-size: 28px !important;
    color: #0A2540 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Category label */
.category-box .title,
.cat-box .title,
.category-box span,
.categories-grid .item .title {
    font-size: 12px !important;
    color: #0A2540 !important;
    font-weight: 500 !important;
    display: block !important;
}


/* ============================================================
   9. LISTING CARDS (grid view)
   ============================================================ */
.listing-card,
.ad-box,
.listing-item,
.listings-grid .item {
    background-color: #FFFFFF !important;
    border: 0.5px solid rgba(10, 37, 64, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease !important;
}

.listing-card:hover,
.ad-box:hover,
.listing-item:hover {
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.1) !important;
}

/* Listing card image */
.listing-card .photo,
.ad-box .photo,
.listing-item .thumb {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Listing card body */
.listing-card .info,
.ad-box .info,
.listing-item .details {
    padding: 10px 12px !important;
}

/* Title */
.listing-card .title a,
.ad-box .title a,
.listing-item .title a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0A2540 !important;
    text-decoration: none !important;
}

.listing-card .title a:hover,
.ad-box .title a:hover {
    color: #F59E0B !important;
}

/* Price */
.listing-card .price,
.ad-box .price,
.listing-item .price {
    color: #0A2540 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 4px 0 !important;
}

/* Location */
.listing-card .location,
.ad-box .location,
.listing-item .location {
    font-size: 12px !important;
    color: #5a6a7a !important;
}

/* Category badge on card */
.listing-card .category-badge,
.ad-box .category,
.listing-item .cat-tag {
    display: inline-block !important;
    background-color: #E8F4FF !important;
    color: #0A2540 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
}


/* ============================================================
   10. HERO / BANNER SECTION (top of homepage)
   ============================================================ */
.homepage-banner,
.hero-section,
.main-banner,
#banner {
    background-color: #0A2540 !important;
    padding: 32px 20px !important;
    text-align: center !important;
}

.homepage-banner h1,
.hero-section h1,
.main-banner h1,
#banner h1 {
    color: #E8F4FF !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.homepage-banner p,
.hero-section p,
.main-banner p,
#banner p {
    color: rgba(232, 244, 255, 0.7) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}


/* ============================================================
   11. FOOTER
   ============================================================ */
#footer,
footer,
.footer {
    background-color: #0A2540 !important;
    color: rgba(232, 244, 255, 0.75) !important;
    border-top: 3px solid #F59E0B !important;
    padding: 24px 20px !important;
}
.page-footer .footer-menu-title{
    color: #F59E0B !important;
    text-transform: uppercase !important;
  
}

.footer-data a{color: #fff !important;}
.footer-data .icons a svg{fill: #fff !important;}
#footer a,
footer a,
.footer a {
    color: rgba(232, 244, 255, 0.75) !important;
    text-decoration: none !important;
}

#footer a:hover,
footer a:hover,
.footer a:hover {
    color: #F59E0B !important;
}

#footer .footer-title,
footer .footer-title,
.footer-section-title {
    color: #F59E0B !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 10px !important;
}


/* ============================================================
   12. VERIFIED / SUCCESS BADGES (Teal)
   ============================================================ */
.badge-verified,
.verified-badge,
.badge-success,
.label-success {
    background-color: #1D9E75 !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}


/* ============================================================
   13. MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 768px) {

    /* Stack search filters vertically on mobile */
    .quick-search-form .row,
    .search-form-wrap .row {
        flex-direction: column !important;
    }

    .quick-search-form .col,
    .quick-search-form [class*="col-"],
    .search-form-wrap [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px 0 !important;
    }

    /* Full-width inputs on mobile */
    .quick-search-form input,
    .quick-search-form select,
    .search-form-wrap input,
    .search-form-wrap select {
        width: 100% !important;
    }

    /* Full-width search button */
    .btn-search,
    .search-submit {
        width: 100% !important;
        margin-top: 8px !important;
    }

    /* Two-column category grid on mobile */
    .categories-grid,
    .homepage-categories {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Single column listing grid on small screens */
    .listings-grid {
        grid-template-columns: 1fr !important;
    }

    /* Nav links hidden on mobile (rely on Flynax's own mobile menu) */
    #header nav,
    header nav {
        display: none !important;
    }

    /* Hero text sizing */
    .homepage-banner h1,
    .hero-section h1 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .category-box,
    .cat-box {
        padding: 12px 6px !important;
    }

    .category-box .title,
    .cat-box .title {
        font-size: 11px !important;
    }
}


/* ============================================================
   14. BREADCRUMBS & PAGE TITLES
   ============================================================ */
.breadcrumb,
.breadcrumbs {
    background-color: #E8F4FF !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.breadcrumb a,
.breadcrumbs a {
    color: #0A2540 !important;
}

.breadcrumb .active,
.breadcrumbs .current {
    color: #5a6a7a !important;
}

.page-title h1,
.page-heading h1 {
    color: #0A2540 !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    border-bottom: 2px solid #F59E0B !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}


/* ============================================================
   END OF FINDITTNT PHASE 2 CSS
   Version: 1.0  |  Generated: June 2026
   Review all selectors against your live Flynax template
   before uploading. Some selectors may need adjustment
   depending on your exact Flynax theme and version.
   ============================================================ */