/* ===========================================================
   AMIRA — Luxury Jewellery Theme
   =========================================================== */
:root {
    --rose-gold: #a9747b;          /* muted mauve-rose, used as a quiet accent */
    --rose-gold-light: #e7cfd2;
    --champagne: #b8923f;          /* deeper, richer antique gold */
    --champagne-light: #e9d6a6;
    --ivory: #f7f1e7;              /* warm cream */
    --cream: #f3ebdd;
    --pearl: #fffdf9;
    --ink: #241b1e;               /* deep espresso-plum for crisp text */
    --ink-soft: #6a5c5f;
    --pink-soft: #f4ebe6;         /* neutral soft blush */
    --line: #ece2d6;             /* hairline borders */
    --gold-grad: linear-gradient(135deg, #e4c87a 0%, #c39a48 55%, #b8923f 100%);
    --rose-grad: linear-gradient(135deg, #e7cfd2 0%, #a9747b 100%);
    --dark-grad: linear-gradient(135deg, #221a1d 0%, #34272b 100%);
    --shadow-lux: 0 20px 55px rgba(60, 40, 30, 0.12);
    --shadow-soft: 0 8px 26px rgba(60, 40, 30, 0.07);
    --radius: 16px;
}

* { scroll-behavior: smooth; }

body {
    font-family: 'Jost', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--pearl);
    overflow-x: hidden;
}

h1, h2, h3, h4, .display-font {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    letter-spacing: .3px;
}

a { text-decoration: none; transition: all .3s ease; }

.text-gold { color: var(--champagne) !important; }
.text-rose { color: var(--rose-gold) !important; }
.text-muted-lux { color: var(--ink-soft) !important; }
.bg-ivory { background: var(--ivory) !important; }
.bg-dark-lux { background: var(--dark-grad) !important; color: var(--pearl); }

.gold-text {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-label {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .72rem;
    color: var(--champagne);
    font-weight: 600;
    font-family: 'Jost', sans-serif;
}
.section-title { color: var(--ink); }

.section-title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .2rem; }

/* ---------- Buttons ---------- */
.btn-lux {
    background: var(--gold-grad);
    background-size: 200% auto;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .85rem 2.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .82rem;
    box-shadow: var(--shadow-lux);
    transition: all .4s ease;
}
.btn-lux:hover { background-position: right center; transform: translateY(-3px); color: #fff; box-shadow: 0 22px 48px rgba(184,146,63,.34); }

.btn-outline-lux {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--champagne);
    border-radius: 50px;
    padding: .85rem 2.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .82rem;
    transition: all .35s ease;
}
.btn-outline-lux:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-3px); }

/* ---------- Navbar ---------- */
.navbar-amira {
    background: linear-gradient(180deg, #2a2024 0%, #221a1d 100%);
    background-color: rgba(34, 26, 29, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(184, 146, 63, .35);
    box-shadow: 0 2px 24px rgba(20, 14, 16, .25);
    transition: all .4s ease;
    z-index: 1030;
}
.navbar-amira.scrolled { background-color: rgba(28, 21, 23, .97); box-shadow: 0 10px 34px rgba(20, 14, 16, .35); }
.navbar-brand-amira { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 700; letter-spacing: 4px; }
.navbar-amira .navbar-toggler { color: var(--champagne-light); }
.navbar-amira .nav-link { color: rgba(247, 241, 231, .82); font-weight: 500; font-size: .9rem; letter-spacing: .5px; position: relative; margin: 0 .4rem; }
.navbar-amira .nav-link:hover, .navbar-amira .nav-link.active { color: var(--champagne-light); }
.navbar-amira .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--gold-grad); transition: width .3s ease; }
.navbar-amira .nav-link:hover::after, .navbar-amira .nav-link.active::after { width: 100%; }
.nav-icon-btn { font-size: 1.2rem; color: rgba(247, 241, 231, .85); position: relative; margin-left: .15rem; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; }
.nav-icon-btn:hover { color: var(--champagne-light); background: rgba(184, 146, 63, .18); }
.nav-icon-btn.dropdown-toggle::after { display: none; }
.navbar-amira .nav-link.dropdown-toggle::after { vertical-align: middle; margin-left: .25rem; }
.nav-badge { position: absolute; top: 2px; right: 0; background: var(--gold-grad); color: #221a1d; font-weight: 600; font-size: .6rem; line-height: 1; padding: 2px 5px; border-radius: 50px; min-width: 16px; text-align: center; }
/* search field inside the dark header */
.navbar-amira .input-group .form-control { background: rgba(255, 255, 255, .08); border: 1px solid rgba(247, 241, 231, .22); color: #f7f1e7; }
.navbar-amira .input-group .form-control::placeholder { color: rgba(247, 241, 231, .55); }
.navbar-amira .input-group .form-control:focus { background: rgba(255, 255, 255, .14); border-color: var(--champagne); box-shadow: none; color: #fff; }
.navbar-amira .input-group .btn { border: 1px solid rgba(247, 241, 231, .22); border-left: none; color: var(--champagne-light); background: transparent; }
.navbar-amira .input-group .btn:hover { background: rgba(184, 146, 63, .2); color: #fff; }

/* ---------- Hero ---------- */
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(900px 600px at 85% 15%, rgba(184,146,63,.10), transparent 60%),
        radial-gradient(800px 600px at 12% 85%, rgba(169,116,123,.10), transparent 55%),
        linear-gradient(160deg, var(--pearl) 0%, var(--ivory) 55%, var(--cream) 100%);
}
/* Hero background image (crisp, full, responsive desktop/mobile) */
.hero-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; display: block; }
.hero-bg-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Optional dark overlay (per-banner toggle) so text stays readable on photos */
.hero-overlay { position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg, rgba(26,18,20,.62) 0%, rgba(26,18,20,.30) 45%, rgba(26,18,20,.08) 100%); }
.hero-content { position: relative; z-index: 3; }
/* When an overlay is present, lighten hero text for contrast */
.hero-overlay ~ .hero-content .hero-sub { color: rgba(255,255,255,.92); }

/* ---------- Hero slider (dynamic, multi-banner) ---------- */
.hero-slider { display: block; align-items: initial; padding: 0; min-height: 0; }
.hero-swiper { width: 100%; height: 100vh; }
.hero-swiper .swiper-slide { height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-swiper .hero-content { width: 100%; }
.hero-pagination { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 8px; }
.hero-swiper .swiper-pagination-bullet { background: rgba(255,255,255,.55); opacity: 1; width: 10px; height: 10px; transition: all .3s; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--gold-grad); width: 28px; border-radius: 6px; }
@media (max-width: 768px) {
    .hero-swiper, .hero-swiper .swiper-slide { height: 88vh; }
}
.hero-title { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; }
.hero-sub { font-size: clamp(1rem, 2vw, 1.4rem); color: var(--ink-soft); max-width: 540px; }

/* floating sparkles */
.sparkle { position: absolute; border-radius: 50%; background: radial-gradient(circle, #fff, var(--champagne)); box-shadow: 0 0 14px var(--champagne-light); opacity: .8; animation: float 7s ease-in-out infinite; z-index: 2; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-28px) rotate(180deg); } }
@keyframes twinkle { 0%,100% { opacity:.2; transform: scale(.7);} 50% { opacity:1; transform: scale(1.2);} }
.twinkle { animation: twinkle 3s ease-in-out infinite; }

/* ---------- Product Card 3D ---------- */
.product-card {
    background: var(--pearl);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
    position: relative;
    height: 100%;
}
.product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lux); }
.product-thumb { position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--ivory); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.product-card:hover .product-thumb img { transform: scale(1.08); }
.product-badge { position: absolute; top: 12px; left: 12px; background: rgba(36,27,30,.82); color: #fff; font-size: .64rem; padding: 4px 11px; border-radius: 50px; letter-spacing: .8px; text-transform: uppercase; z-index: 2; backdrop-filter: blur(4px); }
.product-badge.sale { background: var(--gold-grad); color: #2a2024; font-weight: 600; }
.wish-btn { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: var(--ink); border: none; z-index: 3; transition: all .3s; }
.wish-btn:hover, .wish-btn.active { background: var(--rose-gold); color: #fff; }
.product-body { padding: 1rem 1.1rem 1.2rem; }
.product-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--rose-gold); }
.product-name { font-family: 'Jost', sans-serif; font-size: .98rem; font-weight: 500; margin: .3rem 0; color: var(--ink); display: block; }
.product-name:hover { color: var(--rose-gold); }
.price-now { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.price-old { text-decoration: line-through; color: #b3a9ac; font-size: .85rem; margin-left: 6px; }
.quick-add { position: absolute; bottom: -50px; left: 0; right: 0; background: var(--dark-grad); color: #fff; text-align: center; padding: .7rem; font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; transition: bottom .4s ease; border: none; width: 100%; }
.product-thumb:hover .quick-add { bottom: 0; }
.stars { color: var(--champagne); font-size: .8rem; }

/* ---------- Category card ---------- */
.cat-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; display: block; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.cat-card:hover img { transform: scale(1.1); }
.cat-card::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(26,20,22,.7), transparent 60%); }
.cat-card .cat-label { position: absolute; bottom: 16px; left: 18px; z-index: 2; color: #fff; }
.cat-card .cat-label h5 { font-family:'Cormorant Garamond',serif; font-size: 1.5rem; margin: 0; }

/* ---------- Glass card ---------- */
.glass {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--radius);
}

/* ---------- Sections ---------- */
section { position: relative; }
.py-section { padding: 5rem 0; }
.divider-lux { width: 70px; height: 2px; background: var(--gold-grad); margin: 1rem auto; }

/* Brand story / parallax */
.parallax { background-attachment: fixed; background-size: cover; background-position: center; }

/* bridal banner */
.bridal-banner { border-radius: var(--radius); overflow: hidden; position: relative; min-height: 420px; display:flex; align-items:center; }
.bridal-banner::before { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(26,20,22,.65), transparent); }

/* why choose */
.why-item { text-align: center; padding: 1.5rem; }
.why-icon { width: 74px; height: 74px; border-radius: 50%; background: rgba(184,146,63,.12); border: 1px solid rgba(184,146,63,.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.6rem; color: var(--champagne); }

/* reviews */
.review-card { background: var(--pearl); border-radius: var(--radius); padding: 2rem; border:1px solid var(--line); box-shadow: var(--shadow-soft); height: 100%; }

/* instagram gallery */
.insta-item { aspect-ratio:1/1; overflow:hidden; border-radius:12px; position:relative; }
.insta-item img { width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.insta-item:hover img { transform: scale(1.12); }
.insta-item::after { content:'\f16d'; font-family:'bootstrap-icons'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(36,27,30,.45); color:var(--champagne-light); font-size:1.6rem; opacity:0; transition:.3s; }
.insta-item:hover::after { opacity:1; }

/* newsletter */
.newsletter { background: var(--dark-grad); color: var(--pearl); border-radius: var(--radius); }
.newsletter .form-control { border-radius: 50px; padding: .85rem 1.4rem; border: none; }

/* footer */
.footer-amira { background: var(--ink); color: #cdbfc3; padding-top: 4rem; }
.footer-amira a { color: #cdbfc3; }
.footer-amira a:hover { color: var(--champagne); }
.footer-amira h6 { color: #fff; letter-spacing: 1px; text-transform: uppercase; font-size: .85rem; font-family:'Jost',sans-serif; margin-bottom: 1.2rem; }
.social-ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.social-ic:hover { background: var(--gold-grad); border-color: transparent; }

/* ---------- Product detail ---------- */
.pd-main-img { border-radius: var(--radius); overflow: hidden; background: var(--ivory); }
.pd-main-img img { width: 100%; cursor: zoom-in; transition: transform .4s; }
.pd-thumb { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.pd-thumb.active { border-color: var(--champagne); }
.qty-box { display: inline-flex; align-items: center; border: 1px solid #e3d7da; border-radius: 50px; overflow: hidden; }
.qty-box button { border: none; background: transparent; padding: .5rem 1rem; font-size: 1.1rem; }
.qty-box input { border: none; width: 50px; text-align: center; }

/* ---------- Filters ---------- */
.filter-card { background:var(--pearl); border:1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 1.4rem; }

/* ---------- Forms / Auth ---------- */
.auth-wrap { min-height: 100vh; display:flex; align-items:center; background:
    radial-gradient(700px 500px at 78% 25%, rgba(184,146,63,.12), transparent 60%),
    linear-gradient(160deg, var(--pearl), var(--ivory) 60%, var(--cream)); }
.auth-card { background:var(--pearl); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lux); padding: 2.6rem; }
.form-control:focus, .form-select:focus { border-color: var(--champagne); box-shadow: 0 0 0 .2rem rgba(184,146,63,.16); }
.form-control, .form-select { border-radius: 12px; padding: .7rem 1rem; border-color: var(--line); }

/* badges */
.badge-soft { background: rgba(184,146,63,.14); color: var(--champagne); font-weight: 500; }

/* utilities */
.hover-lift { transition: transform .3s ease; }
.hover-lift:hover { transform: translateY(-5px); }
.rounded-lux { border-radius: var(--radius); }
.shadow-lux { box-shadow: var(--shadow-lux); }

/* AOS fallback (if AOS not loaded, show content) */
[data-aos]:not(.aos-animate) { opacity: 1; }

/* spinner */
.amira-loader { position: fixed; inset: 0; background: var(--ivory); z-index: 9999; display:flex; align-items:center; justify-content:center; transition: opacity .6s; animation: amiraLoaderOut .5s ease 1.4s forwards; }
.amira-loader.hide { opacity:0; pointer-events:none; }
@keyframes amiraLoaderOut { to { opacity: 0; visibility: hidden; } }
.loader-mark { font-family:'Cormorant Garamond',serif; font-size:2.4rem; letter-spacing:6px; }

@media (max-width: 768px) {
    .py-section { padding: 3rem 0; }
    .parallax { background-attachment: scroll; }
    .hero { min-height: 90vh; text-align: center; }
    .hero-sub { margin-left:auto; margin-right:auto; }
}