:root {
    /* --- COLOR CONTROL CENTER --- */
    --primary-color: #4e73df;    /* Main Blue */
    --accent-color: #f6c23e;     /* Warning/Gold */
    --dark-bg: #610303;          /* Dark Footer */
    --light-bg:  #DCE6E3;         /* Page Background */
    --header-height-big: 80px;   /* ~1.5cm */
    --header-height-small: 50px; /* ~0.5cm */
    --transition-speed: 0.4s;
}

body { background-color: var(--light-bg); font-family: 'Inter', sans-serif; }
    /* This handles the 1.5cm to 0.5cm scroll magic */
    #mainNav { height: 50px; transition: 0.4s; background: #FFFFFF!important; border-bottom: 12px solid #ddd; }
    #mainNav.scrolled { height: 50px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        


/* Icon vs Text logic */
.nav-link i { display: block; font-size: 1.5rem; transition: 0.3s; }
.nav-link span { display: none; font-weight: 600; }

.scrolled .nav-link i { display: none; }
.scrolled .nav-link span { display: block; }
header {
    will-change: transform;
    transform: translateZ(0);
}
/* Ad Holders */

.ad-slot { 
    background: #f8f9fa; 
    border: 2px dashed #dee2e6; 
    color: #adb5bd; 
    text-align: center; 
    padding: 20px; 
    border-radius: 10px; 
    margin: 20px 0; 
}

/* Footer */
.cool-footer {
    background-color: var(--dark-bg);
    color: white;
    padding: 60px 0 20px;
    margin-top: 50px;
}

/* Finn.no Style Hero */
    .hero-lite {
        background-color: #0063fb; /* Finn Blue */
        padding: 40px 0;
        text-align: center;
        color: white;
    }
    .search-container {
        max-width: 700px;
        margin: -30px auto 0; /* Floats search over the hero edge */
        background: white;
        padding: 8px;
        border-radius: 50px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .search-container input { border: none !important; box-shadow: none !important; }
    
    /* Category Icons Grid */
    .cat-icon-box {
        text-decoration: none;
        color: #333;
        transition: 0.2s;
        text-align: center;
        padding: 2px;
        display: block;
        background: #E0DADA; /* For Cats outside BG*/
       
        
    }
    .cat-icon-box:hover { 
        color: #0063fb; transform: 
        translateY(-4px); 
        justify-content: center;
        background: #E0DADA;
        border-radius: 3%;
        border: 1px solid #FF0000 !important;
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0.15) !important;
    }
    .cat-circle {
        width: 130px;
        height: 100%;
        background: #00CCFF;/* For box inside cats where image is  BG*/
        border-radius: 3%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1px;
        font-size: 1.0rem;
        border: 1px solid #d2d2d7 !important;
    }
    .cat-label {
        display: inline-block;
        margin-top: 5px;
        padding: 6px 12px;
        background: #E0DADA; /* For Cats text BG*/
        border-radius: 3px;
        font-size: 0.8rem;
        font-weight: 700;
        color: #212529; /* For Cats text */
        text-align: center;
        border: 1px solid #d2d2d7 !important;
    }

/* Apple Style Inputs */
.apple-input {
    background-color: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease-in-out;
}

.apple-input:focus {
    background-color: #ffffff !important;
    border-color: #0071e3 !important; /* Apple Blue */
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1) !important;
}

/* Custom Range Slider */
.custom-apple-range::-webkit-slider-runnable-track {
    background: #d2d2d7;
    height: 4px;
    border-radius: 2px;
}

.custom-apple-range::-webkit-slider-thumb {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: -6px; /* Center thumb on track */
}

/* Primary Button Apple Style */
.btn-dark {
    background-color: #1d1d1f !important; /* Apple Black */
    border: none !important;
    transition: opacity 0.2s;
}

.btn-dark:hover {
    opacity: 0.85;
}
/* --- MOBILE REWRITE --- */
@media (max-width: 576px) {
    /* mobile rules... */

    .search-container button {
        padding: 5px 15px !important;
        font-size: 14px !important;
    }
} 
/* ? CLOSE IT HERE */

/*Ads under in view page Starts here */
.ad-cardVIEW img {
    height: 80px !important; /* Smaller images for mobile */
    
}
.cardVIEW {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}
/*Ads under in view page Ends here */

 /* 2. Shrink the Ad Cards */
.ad-card {
    margin-bottom: 10px !important;
    border-radius:6px 6px 0 0; /*remember for image you must esit this card-img-to*/
}

.ad-card img {
    height: 200px !important; /* Smaller images for mobile */
}

.ad-card .card-body {
    padding: 8px !important;
    
}

.ad-card h6 {
    font-size: 13px !important;
    height: 38px; /* Limits title to 2 lines */
    overflow: hidden;
}

.ad-card .badge {
    font-size: 11px !important;
    z-index: 20;
}

/* 3. The Search Bar (Finn.no Mobile Style) */
.search-container {
    margin-top: -20px !important;
    width: 95% !important;
    border-radius: 10px !important;
}

.search-container button {
    padding: 5px 15px !important;
    font-size: 14px !important;
}
.ad-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}



/* Hover effect for Desktop */
@media (min-width: 992px) 
{
    .ad-card:hover 
    {
        transform: translateY(-0px);
        box-shadow: 0 12px 25px rgba(220,38,38,.35) !important;
    }
}

/* Fix for mobile text size */
@media (max-width: 576px)
{
    .ad-card .card-title 
    { 
        font-size: 0.85rem !important; 
    }
    .ad-card .badge 
    { 
        font-size: 0.75rem !important; 
    }
    .ad-card img 
    { 
        height: 130px !important; 
    }
}

.xsmall 
{ 
    font-size: 0.75rem; 
}


#adsResults 
{
    transition: opacity 0.3s ease-in-out;
}

/* Finn.no style: Slightly scale the cards when they load */
@keyframes fadeInUp 
{
    from 
    { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to 
    { 
        opacity: 1; transform: 
        translateY(0);
    }
}

#adsResults .col-md-4 
{
    animation: fadeInUp 0.4s ease forwards;
}
/* Responsive Banner */
.banner-holder img 
{
    transition: all 0.4s ease;
    max-width: 100%;
}

/* When the navbar shrinks on scroll */
.scrolled .banner-holder img 
{
    max-height: 50px; /* Slimmer banner on scroll */
}

/* Mobile specific: Hide banner inside navbar if screen is too small */
@media (max-width: 768px) 
{
    .banner-holder 
    {
        display: none !important; /* On phones, we hide the navbar banner to save space */
    }
}


.ad-premium 
{ 
    border: 1px solid #f4c430 !important; 
    box-shadow: 0 0 0 2px rgba(244,196,48,.15);
    border-radius: 10px; 
}
.ad-medium  
{ 
    border: 1px solid #0d6efd !important; 
    box-shadow: 0 0 0 2px rgba(13,110,253,.10); 
}

/* For view */
.ad-main-img
{
    height: 520px;
    object-fit: contain;
    background: #0b0f14;
}
@media (max-width: 768px)
{
    .ad-main-img{ height: 360px; }
}
.ad-thumbs{ scrollbar-width: thin; }
.ad-thumb
{
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0;
    background: transparent;
    flex: 0 0 auto;
    cursor: pointer;
}
.ad-thumb img
{
    width: 86px;
    height: 64px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}
.ad-thumb.is-active
{
    border-color: #0d6efd;
}


.ad-cat_slot 
{ 
    background: #f8f9fa; 
    border: 2px ; color: #adb5bd; 
    text-align: center; 
    padding: 20px; 
    border-radius: 10px; 
    margin: 20px 0; 
}


/* Whole list: max height in cm */
.seller-ads-list
{
    max-height: 6cm;     /* change this */
    overflow: auto;
}

/* Each row */
.seller-ad-row
{
    display:flex;
    gap:12px;
    padding:10px 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
    color: inherit;
}

.seller-ad-row:last-child
{ 
    border-bottom: 0; 
}

/* 20% image */
.seller-ad-img
{
    flex: 0 0 20%;
    max-width: 20%;
    height: 62px;        /* adjust if needed */
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}

.seller-ad-img img
{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}

/* 80% text */
.seller-ad-text
{
    flex: 1 1 80%;
    min-width: 0;
    text-align: left;
}

.seller-ad-title
{
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-ad-desc
{
    color:#6c757d;
    font-size: .9rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Featured 2 in frist roe bigger images */
.ad-cardtop img{
  height: 180px;
  object-fit: cover;
  border-radius: 1px 6px 0 0;
  
}

/* Featured Deals bigger images */
.feature-card img{
  height: 220px;
  object-fit: cover;
  border-radius: 0 6px 6px  0;
  
}
/* When the image's card is hovered */
/* Smooth hover zoom */
/* Container */
.zoom{
  position: relative;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Image */
.zoom img{
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1),
              filter 0.45s ease;
  transform: scale(1);
}

/* Hover effect */
.zoom:hover{
  transform: translateY(-3px);
}

.zoom:hover img{
  transform: scale(1.08);
  filter: saturate(1.05);
}
*/*END for premium left side*/

/* Smooth hover zoom */
.card-img-top {
  transition: transform .35s ease;
    height:180px; 
    object-fit:cover; 
    border-radius:6px 6px 0 0;
  
}

/* Zoom image on card hover */
.card:hover .card-img-top {
  transform: scale(1.1);
  
}




/* ======= MATCH THE MOCK LOOK ======= */


.mock-hero{
  background:
    linear-gradient(180deg, rgba(13,110,253,.22) 0%, rgba(13,110,253,.06) 40%, rgba(243,246,255,1) 100%);
  padding: 28px 0 18px;
}

.mock-panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 22px;
}

.mock-title{
  font-weight: 900;
  letter-spacing: -.02em;
  color:#0b2a55;
}

.mock-sub{
  color: rgba(11,42,85,.75);
}

.mock-search{
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 14px;
  overflow:hidden;
}

.mock-search .row{ margin:0; }
.mock-search .col, .mock-search [class^="col-"]{ padding:0; }

.mock-search .form-select,
.mock-search .form-control{
  border:0;
  border-right:1px solid rgba(0,0,0,.10);
  height: 48px;
  border-radius:0;
}
.mock-search .form-control{ border-right:0; }

.btn-orange{
  background:#f07a1a;
  border-color:#f07a1a;
  color:#fff;
  height: 48px;
  font-weight: 800;
  border-radius: 0;
}
.btn-orange:hover{ background:#e36f14; border-color:#e36f14; }

.mock-cats{
  margin-top: 16px;
}
.mock-cat-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 14px;
  text-align:center;
  transition:.18s ease;
  height: 100%;
}
.mock-cat-card:hover{ transform: translateY(-2px); }
.mock-cat-card img{
  width: 88px;
  height: 70px;
  object-fit: contain;
}
.mock-cat-card .label{
  margin-top: 10px;
  font-weight: 800;
  color:#0b2a55;
}

.mock-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  overflow:hidden;
}
.mock-box-header{
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(255,255,255,1));
  border-bottom:1px solid rgba(0,0,0,.06);
  font-weight: 900;
  color:#0b2a55;
}
.mock-box-body{ padding: 12px; }

.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 768px){
  .feature-grid{ grid-template-columns: 1fr; }
}

.feature-mini{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
.feature-mini img{
  width:100%;
  height:120px;
  object-fit:cover;
}
.feature-mini .p{
  padding:10px;
}
.feature-mini .t{
  font-weight:900;
  font-size:.92rem;
  color:#0b2a55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feature-mini .price{
  font-weight:900;
  color:#d85c00;
}
.feature-mini .loc{
  font-size:.82rem;
  color:#6c7a90;
}

.latest-list .rowitem{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.latest-list .rowitem:last-child{ border-bottom:0; }
.latest-list img{
  width:54px;
  height:40px;
  object-fit:cover;
  border-radius: 8px;
  border:1px solid rgba(0,0,0,.10);
}
.latest-list .t{
  font-weight:900;
  font-size:.92rem;
  color:#0b2a55;
  margin:0;
  line-height:1.15;
}
.latest-list .loc{
  font-size:.82rem;
  color:#6c7a90;
}

.mock-benefits{
  margin-top: 16px;
}
.benefit{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px;
  text-align:center;
  height:100%;
}
.benefit .icon{
  font-size: 28px;
  color:#0d6efd;
}
.benefit .h{
  font-weight: 900;
  margin-top: 8px;
  color:#0b2a55;
}
.benefit .d{
  font-size:.9rem;
  color:#6c7a90;
}



/* Make sure the image stays behind badges when it scales */
.ad-cardtop .position-relative{
  position: relative;
  overflow: hidden;
}

/* Keep ALL badges above the image */
.ad-cardtop .badge{
  z-index: 20;
}

/* Force image to be under overlays */
.ad-cardtop .card-img-top{
  position: relative;
  z-index: 1;
  transition: transform .35s ease;
}

/* Zoom image on hover */
.ad-cardtop:hover .card-img-top{
  transform: scale(1.1);
}