/*
   Lubna Butt Marriage Bureau - Premium Modern Design
   Yellow & Gold Theme with Glassmorphism & Animations
*/

/* ========== Google Fonts ========== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ========== Variables ========== */
:root {
    --primary:       #D4AF37;
    --primary-dark:  #B8860B;
    --primary-light: #FFD700;
    --secondary:     #FFF8DC;
    --gold-gradient: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #D4AF37 100%);
    --gold-gradient-v: linear-gradient(180deg, #FFD700 0%, #D4AF37 100%);
    --hero-gradient: linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(180,140,10,.35) 100%);
    --text-dark:  #1a1a1a;
    --text-mid:   #444;
    --text-light: #777;
    --white:      #ffffff;
    --off-white:  #ffffff;
    --border:     rgba(212,175,55,.2);
    --shadow-sm:  0 4px 12px rgba(0,0,0,.06);
    --shadow-md:  0 8px 30px rgba(0,0,0,.09);
    --shadow-gold: 0 8px 30px rgba(212,175,55,.25);
    --radius-sm:  10px;
    --radius-md:  18px;
    --radius-lg:  28px;
    --transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* ========== Reset ========== */
*,*::before,*::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body {
    margin:0; padding:0;
    font-family:'Outfit','Segoe UI',sans-serif;
    background:var(--off-white);
    color:var(--text-dark);
    line-height:1.6;
    overflow-x:hidden;
}
h1,h2,h3,h4 { margin:0 0 15px; font-weight:700; color:var(--text-dark); font-family:'Playfair Display', serif; }
a { text-decoration:none; color:var(--primary); transition:var(--transition); }
img { max-width:100%; height: auto; vertical-align: middle; }

/* Fluid Headings */
h1 { font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.2; }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }

/* ========== Keyframes — Subtle & Professional ========== */
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(20px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn      { from{opacity:0}                              to{opacity:1} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes shimmer     { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulse       { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
@keyframes spinRing    { to{transform:rotate(360deg)} }
@keyframes spinRingRev { to{transform:rotate(-360deg)} }
@keyframes floatUp     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes borderGlow  { 0%,100%{box-shadow:0 0 12px rgba(212,175,55,.25)} 50%{box-shadow:0 0 24px rgba(212,175,55,.45)} }
@keyframes navSlide    { from{opacity:0;transform:translateY(-100%)} to{opacity:1;transform:translateY(0)} }
@keyframes countUp     { from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} }

/* ========== Layout ========== */
.container { 
    width: 100%;
    max-width: 1240px; 
    margin: 0 auto; 
    padding: 0 min(5vw, 24px); 
}
.mt-20  { margin-top:20px; }
.mb-10  { margin-bottom:10px; }
.mb-20  { margin-bottom:20px; }
.text-center { text-align:center; }

/* Section headings */
.section-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem); 
    font-weight:900; text-align:center;
    background:linear-gradient(135deg,#B8860B,#FFD700,#D4AF37);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:12px;
}
.section-divider {
    width:70px; height:4px; margin:0 auto 18px;
    background:var(--gold-gradient); border-radius:4px;
}
.section-sub {
    text-align:center; color:var(--text-light);
    font-size:1.05rem; margin-bottom:50px; max-width:600px; margin-left:auto; margin-right:auto;
}
 
/* ========== Announcement Bar ========== */
.anno-bar {
    background: #1a1a1a;
    color: #ffffff;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    border-bottom: 2px solid var(--primary);
    z-index: 1001;
}
.anno-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.anno-bar a:hover { color: var(--primary); }
.anno-bar-close {
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #ffffff; cursor: pointer;
    font-size: 16px; opacity: 0.7; transition: var(--transition);
}
.anno-bar-close:hover { opacity: 1; color: var(--primary); }

@media(max-width: 768px) {
    .anno-bar { font-size: 0.8rem; padding: 8px 30px 8px 10px; }
    .anno-bar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .anno-bar .sep { display: none; }
}

/* ========== NAVBAR — Glassmorphism ========== */
.navbar {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 2px 20px rgba(212,175,55,.15), 0 1px 0 rgba(212,175,55,.1);
    height: 72px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(212,175,55,.12);
    animation: fadeInDown .6s cubic-bezier(.4,0,.2,1) both;
}
.navbar .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    width:100%;
}

/* Brand */
.navbar-brand { display:flex; align-items:center; gap:10px; flex-shrink: 0; }
.brand-logo { height:46px; width: auto; display:block; transition: var(--transition); }
.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    transition: var(--transition);
}

.brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    background: linear-gradient(135deg, #B8860B, #D4AF37, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.brand-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-mid);
    margin-top: -2px;
}

.navbar-brand:hover .brand-name {
    filter: brightness(1.2);
    transform: scale(1.02);
}

/* Nav links */
.nav-links {
    list-style:none; margin:0; padding:0;
    display:flex; gap:2px; align-items:center;
}
.nav-links li a {
    color:var(--text-mid);
    font-weight:500; font-size:14px;
    padding:8px 12px; border-radius:8px;
    display:inline-block;
    transition:var(--transition);
    position:relative;
    white-space: nowrap;
}
.nav-links li a::after {
    content:''; position:absolute; bottom:4px; left:50%; right:50%;
    height:2px; background:var(--gold-gradient);
    border-radius:2px; transition:var(--transition); opacity:0;
}
.nav-links li a:hover { color:var(--primary); background:rgba(212,175,55,.08); }
.nav-links li a:hover::after { left:14px; right:14px; opacity:1; }
.nav-links li a.active { color:var(--primary); background:rgba(212,175,55,.1); }
.nav-links li a.active::after { left:14px; right:14px; opacity:1; }

/* Nav Buttons */
.nav-btn.nav-btn-outline {
    border:1.5px solid var(--primary); padding:8px 20px;
    border-radius:10px; color:var(--primary) !important;
    font-weight:600; transition:var(--transition);
}
.nav-btn.nav-btn-outline:hover {
    background:var(--primary); color:var(--white) !important;
    box-shadow:var(--shadow-gold); transform:translateY(-1px);
}
.nav-btn.nav-btn-fill {
    background:var(--gold-gradient); padding:8px 20px;
    border-radius:10px; color:var(--white) !important;
    font-weight:700; box-shadow:0 4px 14px rgba(212,175,55,.35);
    transition:var(--transition);
}
.nav-btn.nav-btn-fill:hover {
    background:linear-gradient(135deg,#B8860B,#D4AF37);
    transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,175,55,.45);
}
.nav-admin { color:var(--primary) !important; font-weight:700 !important; }

/* Mobile toggle */
.mobile-menu-btn {
    display:none; background:none; border:none;
    font-size:24px; color:var(--primary); cursor:pointer;
    padding:8px; border-radius:8px;
    transition:var(--transition);
}
.mobile-menu-btn:hover { background:rgba(212,175,55,.1); }

/* Mobile nav */
@media(max-width:1100px){
    .navbar { height:auto; padding:10px 0; }
    .mobile-menu-btn { display:block; }
    .nav-links {
        position:absolute; top:100%; left:0; width:100%;
        background:rgba(255,255,255,.98);
        backdrop-filter:blur(25px);
        -webkit-backdrop-filter:blur(25px);
        flex-direction:column; align-items:center; gap:0;
        box-shadow:0 20px 40px rgba(0,0,0,0.1);
        border-radius:0 0 24px 24px;
        max-height:0; opacity:0; overflow:hidden;
        transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding:0; z-index:10000;
        border-top: 1px solid rgba(212,175,55,0.05);
    }
    .nav-links.active {
        display: flex !important;
        max-height: 90vh; 
        opacity: 1;
        padding: 15px 0 30px;
        border-top: 1px solid rgba(212,175,55,.12);
        overflow-y: auto;
        z-index: 10001; /* Ensure it's above everything */
    }
    .nav-links li { width:100%; text-align:center; }
    .nav-links li a { display:block; padding:16px; width:100%; border-radius:0; font-size: 16px; }
    .nav-links li a::after { display:none; }
    .nav-btn { margin:8px auto; display:inline-block; width:85%; max-width: 300px; }
}

/* ========== Standard Hero Banners ========== */
.hero-section, .home-hero, .about-hero, .contact-hero, .search-hero, .plans-hero {
    min-height: clamp(350px, 60vh, 520px);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center; position: relative; overflow: hidden;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5)), url('../images/banner.jpg') center/cover no-repeat;
}
.hero-section::after, .home-hero::after, .about-hero::after, .contact-hero::after, .search-hero::after, .plans-hero::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0;
    height:80px;
    background:linear-gradient(to top, var(--off-white), transparent);
}
.hero-title, .home-hero h1, .about-hero h1, .contact-hero h1, .search-hero h1, .plans-hero h1 {
    font-size: clamp(2.2rem, 8vw, 4rem); 
    font-weight: 900; color: #ffffff;
    margin-bottom: 15px; line-height: 1.1;
    text-shadow: 0 4px 25px rgba(0,0,0,0.6);
    position: relative; z-index: 2;
    font-family: 'Playfair Display', serif;
    max-width: 900px;
}
.hero-subtitle, .home-hero p, .about-hero p, .contact-hero p, .search-hero p, .plans-hero p {
    font-size: clamp(1rem, 2.5vw, 1.25rem); 
    color: #ffffff; font-weight: 500;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    position: relative; z-index: 2;
    max-width: 700px;
    opacity: 0.95;
}

/* Backgrounds for specific heroes */
.home-hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(120,50,10,0.45)), url('../images/hero_banner_red.jpg') center/cover no-repeat; }
.about-hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(180,140,20,0.4)), url('../images/about_hero.jpg') center/cover no-repeat; }
.contact-hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(180,140,10,0.45)), url('../images/contact_hero.jpg') center/cover no-repeat; }
.search-hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(100,30,0,0.45)), url('../images/search_banner.jpg') center/cover no-repeat; }
.plans-hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(80,30,0,0.45)), url('../images/plans_banner.jpg') center/cover no-repeat; }
.login-hero { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url('../images/login_hero.png') center/cover no-repeat !important; }
.register-hero { background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url('../images/register_hero.png') center/cover no-repeat !important; }

/* ========== Cards ========== */
.card {
    background:var(--white);
    border-radius:var(--radius-md);
    padding:30px;
    box-shadow:var(--shadow-md);
    border:1px solid rgba(212,175,55,.1);
    margin-bottom:20px;
    transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow-gold); transform:translateY(-4px); }

.auth-card {
    background:var(--white); border-radius:var(--radius-md);
    padding:40px; box-shadow:var(--shadow-md);
    max-width:480px; margin:0 auto 40px;
    border:1px solid rgba(212,175,55,.12);
    position: relative;
    z-index: 5;
}

.auth-intro-card {
    background: var(--white);
    padding: clamp(25px, 5vw, 40px);
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 45px rgba(212,175,55, 0.12);
    margin: -70px auto 40px;
    position: relative;
    z-index: 10;
    text-align: center;
    border: 1px solid rgba(212,175,55, 0.15);
    max-width: 800px;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-intro-card h2 { color: var(--text-dark); font-weight: 800; margin-bottom: 12px; }
.auth-intro-card p { color: var(--text-mid); font-size: 1.05rem; margin: 0 auto; max-width: 600px; }

/* ========== Search Box ========== */
.search-box-container {
    background:var(--white); padding: clamp(20px, 4vw, 40px);
    border-radius:var(--radius-md);
    box-shadow:0 15px 50px rgba(212,175,55,.18);
    margin-top: -60px; margin-bottom: 50px;
    border:1px solid rgba(212,175,55,0.15);
    position:relative;
    animation:fadeInUp .6s ease both;
    width: 100%;
}
.search-box-container.static-box { margin-top:0; box-shadow:var(--shadow-sm); padding:25px; }

/* Search form */
.search-form { display:flex; flex-wrap:wrap; gap:15px; align-items:flex-end; }
.search-form label { display:block; margin-bottom:8px; font-weight:600; color:var(--text-dark); font-size:.9rem; }
.form-group { flex:1 1 150px; min-width:140px; }
.form-group:first-child,.form-group:nth-last-child(2) { flex:2 1 200px; }

/* Inputs */
.form-control {
    width:100%; height:50px; padding:0 16px;
    border:1.5px solid #e5e5e5; border-radius:10px;
    font-size:1rem; color:var(--text-dark);
    background:#fff; transition:var(--transition);
    font-family:'Outfit',sans-serif;
}
.form-control:focus {
    border-color:var(--primary); outline:none;
    box-shadow:0 0 0 3px rgba(212,175,55,.18);
}
textarea.form-control { height:auto; padding:14px; }
.form-group-btn { flex:0 0 auto; }
.btn-search {
    background:var(--gold-gradient); color:var(--white);
    border:none; padding:0 32px; border-radius:12px;
    font-size:16px; font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    height:52px; width:100%; transition:var(--transition);
    box-shadow:0 4px 16px rgba(212,175,55,.35);
}
.btn-search:hover { background:linear-gradient(135deg,#B8860B,#D4AF37); transform:translateY(-2px); box-shadow:0 8px 24px rgba(212,175,55,.45); }

/* ========== Profile Cards ========== */
.profile-img-container {
    width:100%; height:250px; background:#f0f0f0;
    border-radius:10px; overflow:hidden; position:relative; margin-bottom:15px;
}
.profile-img-container img { width:100%; height:100%; object-fit:cover; }
.blur-effect  { filter:blur(10px); transform:scale(1.1); }
.locked-overlay {
    position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; background:rgba(255,255,255,.2); z-index:2;
}
.locked-overlay i {
    background:rgba(255,255,255,.9); padding:15px;
    border-radius:50%; box-shadow:var(--shadow-sm);
}

.profile-card {
    background:var(--white); border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm); overflow:hidden;
    transition:var(--transition); border:1px solid rgba(212,175,55,.1);
    display:flex; flex-direction:column;
}
.profile-card:hover {
    transform:translateY(-6px); box-shadow:var(--shadow-gold);
    border-color:var(--primary);
}
.profile-card.is-premium { border:1.5px solid var(--primary-light); box-shadow:0 5px 20px rgba(255,215,0,.18); }

.premium-verification-badge {
    position:absolute; top:10px; right:10px;
    background:var(--gold-gradient); color:#fff;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(253,185,49,.4);
    z-index:10; font-size:14px; border:2px solid #fff;
}
.premium-border { border:2px solid var(--primary-light) !important; }

.btn-card-footer {
    display:block; width:100%; padding:18px;
    background:var(--gold-gradient); color:var(--white);
    text-align:center; font-weight:700; font-size:1rem;
    text-decoration:none; transition:var(--transition);
    letter-spacing:.3px;
}
.btn-card-footer:hover { background:linear-gradient(135deg,#B8860B,#D4AF37); color:var(--white); }

/* Info grid */
.profiles-grid { 
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); 
    gap: 28px; 
}

.info-grid { 
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 0 18px; 
    width:100%; 
}
.info-item {
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid #f5f5f5; padding:10px 0; font-size:.88rem;
}
.info-label { font-weight:600; color:#666; display:flex; align-items:center; gap:7px; }
.info-label i { color:var(--primary); width:16px; text-align:center; }
.info-value { font-weight:600; color:var(--text-dark); }

.details-table { width:100%; border-collapse:collapse; }
.details-table th { text-align:left; padding:14px 0; color:var(--text-dark); font-weight:600; border-bottom:1px solid #f0f0f0; width:35%; }
.details-table td { padding:14px 0; border-bottom:1px solid #f0f0f0; color:#555; text-align:right; font-weight:500; }
.details-table tr:last-child th, .details-table tr:last-child td { border-bottom:none; }

/* ========== Stats Strip ========== */
.stats-strip {
    background:linear-gradient(135deg,#B8860B 0%,#D4AF37 40%,#FFD700 70%,#D4AF37 100%);
    padding:50px 0; margin:60px 0;
    position:relative; overflow:hidden;
}
.stats-strip::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.15),transparent 60%);
}
.stat-box { animation:countUp .6s ease both; }

/* ========== Footer ========== */
footer {
    background:linear-gradient(135deg,#111 0%,#1e1a0e 60%,#1a1500 100%);
    color:#ccc; padding:70px 0 30px; margin-top:80px;
    position:relative;
}
footer::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--gold-gradient);
}
footer h3 { color:#fff; font-size:1.15rem; margin-bottom:24px; font-weight:700; }
footer p  { line-height:1.75; margin-bottom:20px; color:#bbb; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col ul li { margin-bottom:11px; }
.footer-col ul li a { color:#bbb; transition:var(--transition); }
.footer-col ul li a:hover { color:var(--primary); padding-left:6px; }
.social-links { margin-top:20px; display:flex; gap:12px; }
.social-links a {
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#ccc; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
    transition:var(--transition); border:1px solid rgba(255,255,255,.08);
}
.social-links a:hover { color:var(--primary); border-color:var(--primary); background:rgba(212,175,55,.15); transform:translateY(-3px); }
.contact-info li  { display:flex !important; align-items:flex-start !important; gap:12px; margin-bottom:14px !important; }
.contact-info i   { color:var(--primary); min-width:20px; text-align:center; margin-top:4px; }
.contact-info span,.contact-info a { color:#ccc !important; text-decoration:none !important; line-height:1.4; font-weight:500; }
.contact-info a:hover { color:var(--primary) !important; }
@media(max-width:768px){ footer{text-align:center;} .social-links{justify-content:center;} .contact-info li{justify-content:center;} }

/* WhatsApp float */
.whatsapp-float {
    position:fixed; bottom:28px; right:28px;
    background:#25d366; color:#fff;
    width:62px; height:62px; border-radius:50%;
    text-align:center; font-size:30px; line-height:62px;
    box-shadow:0 4px 20px rgba(37,211,102,.45); z-index:999;
    transition:var(--transition);
    animation:pulse 2.5s ease infinite;
}
.whatsapp-float:hover { background:#20ba5a; transform:scale(1.12); color:#fff; }

/* ========== Responsive Helpers ========== */
@media(max-width:1100px){
    .hero-title  { font-size: clamp(2rem, 7vw, 3rem); }
}
@media(max-width:768px){
    .search-form { display:grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
    .form-group  { margin-bottom:0; flex:auto !important; min-width:0; }
    .form-group-btn label { display: none; }
    .btn-search { width: 100%; margin-top: 10px; height: 48px; font-size: 15px; border-radius: 10px; }
    .info-grid   { gap:0; }
    .info-item   { flex-direction:column; align-items:flex-start; gap:4px; }
    .section-title { margin-bottom: 25px; }
}
@media(max-width:480px){
    .container   { padding: 0 15px; }
    .search-box-container { margin-top: -40px; padding: 25px 15px; }
    .auth-card   { padding: 25px 18px !important; margin: 20px auto !important; width: 100%; }
    .form-control{ font-size:16px; width:100% !important; max-width:100%; }
    .profile-img-container{ height:240px; }
}

/* Extra Large Screens */
@media(min-width: 2000px) {
    .container { max-width: 1600px; }
    :root { font-size: 18px; }
}

/* ========== Misc Utilities ========== */
.bio-popup { background:#fff; padding:16px 20px; border-radius:14px; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.04); transition:var(--transition); margin-bottom:28px; }
.bio-popup:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.bio-popup label { display:block; font-weight:700; color:var(--primary); margin-bottom:10px; font-size:.95rem; }
.bio-popup textarea { border:1px solid #e0e0e0 !important; padding:12px !important; border-radius:10px; background:#fafafa !important; width:100%; outline:none; font-family:inherit; font-size:1rem; color:#444; transition:var(--transition); }
.bio-popup textarea:focus { border-color:var(--primary) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(212,175,55,.12) !important; }
.btn-gap  { margin-right:14px; margin-bottom:10px; }
.btn-cancel { background:#f1f3f5 !important; color:#495057 !important; border:none; font-weight:600; border-radius:12px; transition:var(--transition); display:inline-flex; align-items:center; justify-content:center; height:52px; }
.btn-cancel:hover { background:#e9ecef !important; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
@media(max-width:480px){ .btn-gap{margin-right:0;margin-bottom:14px;width:100%;display:block;} .btn-cancel{width:100% !important;display:flex !important;margin-left:0 !important;text-align:center;} }

/* Location city links hover */
.city-link { text-decoration:none; color:var(--text-dark); display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:14px; transition:var(--transition); }
.city-link:hover { background:rgba(212,175,55,.1); color:var(--primary); transform:translateY(-4px); }
.city-link i { font-size:36px; color:var(--primary); }
.city-link div { font-weight:700; font-size:.88rem; }