/* ============================
   Part 3 — Footer / Mobile Nav / Responsive
   File: assets/css/style-ui.css
   ============================ */

/* Footer */
.site-footer{ background:var(--color-secondary); color:#eee; padding:30px 20px; text-align:center; margin-top:40px; }
.footer-links a{ color:#fff; padding:0 10px; }
.footer-links a:hover{ color:var(--color-primary); }
.footer-bottom{ margin-top:12px; }
.footer-bottom p{ border-top:1px solid rgba(255,255,255,0.12); margin-top:12px; padding-top:12px; }

/* Mobile bottom nav (hidden on desktop) */
.mobile-bottom-nav{ display:none; }
@media (max-width:768px){
  .mobile-bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; height:55px; background:#fff; box-shadow:0 -2px 10px rgba(0,0,0,0.06); z-index:1500; border-top:1px solid var(--color-border);
  }
  .mobile-bottom-nav .nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.72rem; color:#777; text-decoration:none; padding-top:4px; }
  .mobile-bottom-nav .nav-icon{ font-size:1.4rem; margin-bottom:2px; }
  .mobile-bottom-nav .nav-item.active{ color:var(--color-primary); }
  body.has-mobile-nav{ padding-bottom:55px; } /* enable via JS on mobile */
}

/* Responsive tweaks */
@media (max-width:900px){
  .header-search{ max-width:100%; margin:0 10px; }
}

/* Mobile layout <768 */
@media (max-width:768px){
  .header-inner{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding:8px 12px; }
  .site-branding{ order:1; width:100%; display:flex; justify-content:center; }
  .header-location{ order:2; margin-left:auto; }
  .menu-toggle{ display:block; order:3; }
  .header-search{ order:4; width:100%; margin-top:6px; }
  .main-navigation{ display:none; order:5; width:100%; position:absolute; top:56px; left:0; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:14px 20px; z-index:999; }
  .main-navigation.nav-open{ display:block; }
  .main-menu{ flex-direction:column; gap:0; }
  .main-menu li{ border-bottom:1px solid var(--color-border); }
  .main-menu li:last-child{ border-bottom:none; }
  .main-menu a{ padding:12px 8px; display:block; width:100%; }
}

/* Small utilities */
.center { text-align:center; }
.flex { display:flex; align-items:center; }
.mt-1{ margin-top:8px; }
.p-2{ padding:8px; }

/* End of UI CSS */

    .results-grid { display: grid; gap: 5px; }
    .business-card { transition: transform 0.2s; margin-bottom: 5px; border-radius: 15px; }
    .business-card:hover { transform: translateY(-3px); }
    .business-card.is-paid { border: 2px solid #FF5722; background: #FFFBF9; }
    .no-results { text-align: center; padding: 40px; color: #999; border: 1px dashed #ccc; border-radius: 10px; }
    
    /* Animation for smooth loading */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .blinkit-card { animation: fadeIn 0.5s ease-in-out; }

/* Wrapper already has relative positioning in your theme most likely, 
   but just in case add this */
.location-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Spinner Style */
.jbb-loader {
    position: absolute;
    right: 40px; /* Input-oda clear button (X) pakkathula */
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1A237E; /* Unga Blue Color */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 5;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Location Clear Button - Alignment Fix */
.location-clear {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%); /* Vertical centering */
    background: none;
    border: none;
    font-size: 22px; /* Correct size for 'X' */
    line-height: 1;  /* Prevents 'cross' look */
    color: #999;
    cursor: pointer;
    display: none;
    z-index: 10;
    padding: 0;
    margin: 0;
}

#location-loader {
    right: 15px; /* Spinner-um 'X' button-um ore edathula swap aagum */
}