/* -------------------------------------------------------------------
*  Shared Styles for the Application
* --------------------------------------------------------------------*/

/* =========================
   Reset and Base
   ========================= */
html {
    scroll-behavior: smooth;
}

body,
html {
    height: 100%;
    margin: 0;
}

body {
    overflow-y: auto;
    background-color: #fbfbfb;
}

.cursor-pointer {
    cursor: pointer;
}

/* section paddings */
.section-padding-one {
    /* padding: 50px 0 80px; */
    padding-top: 3rem;
    padding-bottom: 5.5rem;
}

.section-padding-two {
    padding-top: 40px;
    padding-bottom: 40px;
}

.section-padding-three {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* font sizes */
.fs-7 {
    font-size: 0.875rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

/* backgrounds */
.bg-one {
    background-image: url('/images/backgrounds/bg-auth-2.webp');
    background-repeat: repeat;
    background-size: clamp(150px, 10vw, 250px);
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}

.bg-one::before {
    content: "";
    position: absolute;
    inset: 0;
    min-height: inherit;
    background: linear-gradient(to bottom right,
            rgba(0, 152, 111, 0.85),
            rgba(0, 110, 82, 0.9));
    z-index: 0;
}

/* Gradient overlay for polish */
.overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0.9),
            rgba(240, 240, 240, 0.95));
    z-index: 0;
}

/* Ensure content sits above overlay */
.bg-one .container {
    z-index: 1;
    position: relative;
}

/* Mobile density tweak */
@media (max-width: 768px) {
    .bg-one {
        background-size: 120px 120px;
    }
}

/* =========================
   Bottom Tab Navigation (mobile only)
   ========================= */
/* .bottom-tab-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    /* below Bootstrap's offcanvas (1045) and its backdrop (1040) — so the drawer correctly overlays it */
/* padding-bottom: env(safe-area-inset-bottom, 0); */
/* clears gesture-nav bar on modern Android/iOS */
/* } */
*/
/* .bottom-tab-nav .bottom-tab-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.5rem 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    background: transparent;
    border: none;
    font-size: 0.65rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.bottom-tab-nav .bottom-tab-item i {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 2px;
}

.bottom-tab-nav .bottom-tab-item.active {
    color: #ffffff;
} */

/* Reserve space at the bottom of the page so content never sits behind
   the fixed tab bar. Applied to body since the footer (which used to
   naturally end the page) is hidden on mobile — without this, the last
   bit of every page's content would be covered by the tab bar. */
/* @media (max-width: 991.98px) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
    }
} */

/* =========================
   Social Colors Utilities
   ========================= */
.bg-facebook {
    background-color: #3b5998 !important;
}

.bg-twitter {
    background-color: #1da1f2 !important;
}

.bg-linkedin {
    background-color: #0077b5 !important;
}

.bg-instagram {
    background-color: #e4405f !important;
}

.bg-whatsapp {
    background-color: #25d366 !important;
}

.text-facebook {
    color: #3b5998 !important;
}

.text-twitter {
    color: #1da1f2 !important;
}

.text-linkedin {
    color: #0077b5 !important;
}

.text-instagram {
    color: #e4405f !important;
}

.text-whatsapp {
    color: #25d366 !important;
}

/* =========================
   Navbar
   ========================= */
.brand-logo-optimize {
    /*
       Generates an isolated alpha-channel glow around the image matrix vectors.
       This preserves the clarity of the dark blue text segments against .bg-theme-color-darker,
       while highlighting the mini-slogan text cleanly.
    */
    filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.2)) drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.2));
    transition: transform 0.2s ease-in-out;
}

.brand-logo-optimize:hover {
    transform: scale(1.015);
}

.shared-navbar-class {
    border-bottom: 1px solid #dee2e6;
}

.shared-navbar-class .navbar-nav .nav-link {
    color: #00FFB3;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.shared-navbar-class .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #00FFB3;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* hover: slide out (disappear) */
.shared-navbar-class .navbar-nav .nav-link:hover::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* active state: keep underline visible and highlight text */
.shared-navbar-class .navbar-nav .nav-link.active {
    color: #fff;
    font-weight: 600;
}

.shared-navbar-class .navbar-nav .nav-link.active::after {
    background-color: #fff;
    transform: scaleX(1);
}

.navbar-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* =========================
   Layout Architecture
   ========================= */
.main-container {
    height: calc(100vh - 60px);
    /* Total height minus navbar */
}

/* authentication */
.auth-card-1 {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

/* Left Sidebar (Form & Results) */
.sidebar {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    background-color: #f8f9fa;
}

/* Right Side (Map) */
.map-container {
    height: 100%;
    padding: 0;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}


/* =========================
   Adverts
   ========================= */
/* Smooth Hover Zoom Styling */
.ad-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

.ad-zoom-wrapper img {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform;
}

.ad-zoom-wrapper:hover img {
    transform: scale(1.06);
}

/* =========================
   Forms, Inputs, and Icons
   ========================= */
/* Floating Label Customization */
.form-floating>.form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
    border-radius: 12px;
    border: 2px solid #f1f3f5;
    font-weight: 500;
}

.form-floating>.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}

/* Input Icon Wrappers */
.input-group-text {
    background-color: transparent;
    border: none;
    padding-left: 0;
    color: #6c757d;
}

/* maps autocomplete element */
gmpx-place-autocomplete-element {
    width: 100%;
    display: block;
    --gmpx-font-family: 'Inter', sans-serif;
    --gmpx-menu-background: #ffffff;
}

/* =========================
   Buttons and Actions
   ========================= */
.btn-search {
    border-radius: 12px;
    padding: 14px;
    background: linear-gradient(45deg, #0d6efd, #004dc7);
    border: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-search:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}

.btn-search:disabled {
    background: #e9ecef;
    color: #adb5bd;
}

.location-btn-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.btn-location {
    border: 2px solid #e9ecef;
    background: #fff;
    color: #495057;
    border-radius: 12px;
    padding: 10px;
    transition: all 0.3s ease;
}

.btn-location:hover {
    background: #f8f9fa;
    border-color: #0d6efd;
    color: #0d6efd;
}

/* pulse icon */
.pulse-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #0d6efd;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 rgba(13, 110, 253, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* spin animation */
@keyframes spin-once {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-once {
    animation: spin-once 0.6s linear forwards;
}

/* =========================
   Cards, Providers, Brand
   ========================= */
.discovery-card {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.provider-card {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border-radius: 12px;
}

.provider-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
    border-color: #0d6efd !important;
}

/* Brand logo optimization */
.brand-logo-optimize {
    filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.15)) drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.15));
    transition: transform 0.2s ease-in-out;
}

.brand-logo-optimize:hover {
    transform: scale(1.02);
}

/* Custom complementary CTA */
.btn-theme-light-accent {
    background-color: #4CFFD9;
    border: 1px solid #4CFFD9;
    transition: all 0.2s ease-in-out;
}

.btn-theme-light-accent:hover {
    background-color: #00FFB3;
    border-color: #00FFB3;
    transform: translateY(-1px);
}

/* =========================
   Parallax, Glass, Overlays
   ========================= */
.parallax-features-section {
    background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=1400');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.parallax-brand-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 110, 82, 0.92), rgba(0, 152, 111, 0.88));
    z-index: 1;
}

/* Glassmorphism cards */
.glass-feature-card {
    background: rgba(255, 255, 255, 0.93) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.glass-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15) !important;
}

/* Dark glass highlight */
.glass-feature-card-highlight {
    background: rgba(0, 110, 82, 0.4) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(76, 255, 217, 0.25) !important;
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.glass-feature-card-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2) !important;
}

/* =========================
   Footer
   ========================= */
.footer-shared .extra-small-text {
    font-size: 0.825rem;
}

.footer-shared .fs-8 {
    font-size: 0.75rem !important;
}

.minimal-footer-links .transition-link {
    transition: color 0.2s ease-in-out;
}

.minimal-footer-links .transition-link:hover {
    color: #4CFFD9 !important;
}

.text-theme-color {
    color: #00FFB3;
}

/* =========================
   Responsive Adjustments
   (media queries grouped at end)
   ========================= */

/* 992 and up */
@media (min-width: 992px) {
    .shared-navbar-class .navbar-nav {
        gap: 1rem;
    }

    /* Locks the view wrapper to 100% viewport size without triggering global body bars */
    .app-viewport-wrapper {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Force the main split-grid to swallow exactly 100% of the remaining flex area */
    .main-container {
        flex: 1 1 0%;
        /* Forces layout calculation from 0 layout basis */
        min-height: 0;
        /* FIXES THE BLACK LINE BUG: Prevents content from inflating height */
        height: auto !important;
        overflow: hidden;
        /* Safely clips any unhandled child calculations */
    }

    /* Keeps your shared navbar cleanly bounded to its structural design metrics */
    .shared-navbar-class {
        height: 65px;
        flex: 0 0 auto;
    }

    /* Forces your shared footer to preserve its spatial real estate at the bottom */
    .footer-shared {
        flex: 0 0 auto;
    }
}

/* < 445 */
@media (max-width: 445px) {
    .agent-landing-nav .container {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.6rem;
    }

    .agent-landing-nav .brand-link {
        justify-content: center;
    }

    .agent-landing-nav .back-home-btn {
        width: 100%;
        justify-content: center;
    }

    .agent-landing-hero {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .agent-landing-hero .display-5 {
        font-size: 1.85rem;
        line-height: 1.2;
    }

    .agent-landing-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .agent-landing-hero .hero-actions a {
        width: 100%;
        justify-content: center;
    }

    .agent-landing-hero .hero-badges {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .agent-landing-hero .hero-image {
        max-height: 280px;
    }
}

/* <= 991 */
@media (max-width: 991px) {
    .navbar-logo {
        height: 40px;
    }
}

/* Mobile layout tweaks */
@media (max-width: 767.98px) {
    .main-container {
        height: auto;
    }

    .map-container {
        height: 40vh !important;
    }

    .sidebar {
        height: auto;
        max-height: calc(100vh - 40vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile fallback for parallax */
@media (max-width: 991.98px) {
    .parallax-features-section {
        background-attachment: scroll !important;
    }
}

@media(max-width:767px) {
    .section-padding-one {
        padding-bottom: 8rem;
    }
}

@media(max-width:396px) {
    .section-padding-one {
        padding-bottom: 10rem;
    }
}