/* =====================================================================
   Khushi Photography — modern.css  (additive design layer)
   Loaded AFTER style.css and every page stylesheet. It only restyles
   existing classes; it never changes markup, IDs, state classes
   (d-none, active, step-active, step-done, show, is-valid ...) or
   anything the JavaScript depends on. Remove the <link> to roll back.
   ===================================================================== */
:root{
  --color-background:#08080a; --color-card:#111115; --color-secondary:#17171c;
  --color-border:#26262e; --color-foreground:#f6f4ef; --color-muted:#a7a7b1;
  --color-gold:#d4af37; --color-gold-light:#efd77f;
  --mx-grad:linear-gradient(120deg,#f6e3a1 0%,#d4af37 48%,#a9821b 100%);
  --mx-glass:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  --mx-line:rgba(255,255,255,.08);
  --mx-ease:cubic-bezier(.2,.8,.2,1);
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--color-background);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 8% -5%,rgba(212,175,55,.13),transparent 60%),
    radial-gradient(50vw 45vh at 100% 35%,rgba(120,90,200,.09),transparent 60%),
    radial-gradient(55vw 45vh at 30% 110%,rgba(212,175,55,.08),transparent 60%);
  animation:mxAmbient 22s ease-in-out infinite alternate}
@keyframes mxAmbient{to{transform:translate3d(2%,-2%,0) scale(1.08)}}
::selection{background:var(--color-gold);color:#111}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em}
.text-gradient{background:var(--mx-grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mxShine 7s linear infinite}
@keyframes mxShine{to{background-position:200% center}}
*{scrollbar-width:thin;scrollbar-color:#3a3a44 transparent}
.mx-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:2000;transform:scaleX(0);transform-origin:0 50%;background:var(--mx-grad);box-shadow:0 0 12px rgba(212,175,55,.6)}

/* ---------- Section headings ---------- */
.section-subtitle{display:inline-flex!important;align-items:center;gap:.9rem;font-weight:600;font-size:.78rem!important;letter-spacing:.32em!important}
.section-subtitle::before{content:"";width:34px;height:1px;background:var(--color-gold);opacity:.8}
.text-center .section-subtitle::after{content:"";width:34px;height:1px;background:var(--color-gold);opacity:.8}
.section-title{font-size:clamp(2.2rem,5.4vw,3.6rem)!important;line-height:1.05;font-weight:500}
.bg-dark{background:linear-gradient(180deg,#0d0d10,#0a0a0c)!important}
.hover-gold{transition:color .25s,transform .3s var(--mx-ease)}
.hover-gold:hover{color:var(--color-gold-light)!important}

/* ---------- Navbar (glass) ---------- */
.navbar{background:rgba(8,8,10,.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--mx-line)}
.navbar.scrolled{background:rgba(8,8,10,.86);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.navbar-brand{line-height:1.1}
.navbar-brand h5{font-family:var(--font-sans);font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin:.25rem 0 0;opacity:.75}
.navbar .nav-link{position:relative;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#cfcfd6!important;transition:color .25s}
.navbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--mx-grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--mx-ease)}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--color-gold-light)!important}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}
.navbar-toggler{border-radius:12px!important;padding:.5rem .65rem}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(212,175,55,.35)}

/* ---------- Buttons ---------- */
.btn-gold,.btn-elegant,.btn-gold-outline{position:relative;overflow:hidden;border-radius:999px!important;font-weight:700;letter-spacing:.12em;
  transition:transform .35s var(--mx-ease),box-shadow .35s,background .3s,color .3s,border-color .3s}
.btn-gold{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.75)}
.btn-gold:not(:disabled):not(.disabled):hover,.btn-gold:not(:disabled):not(.disabled):focus-visible{background:var(--mx-grad);border-color:transparent;color:#15120a;transform:translateY(-3px);box-shadow:0 14px 34px rgba(212,175,55,.35)}
.btn-gold.text-danger:hover{color:#8a1111!important}
.btn-gold::after,.btn-elegant::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-22deg);transition:left .8s var(--mx-ease)}
.btn-gold:not(:disabled):hover::after,.btn-elegant:hover::after{left:140%}
.btn-elegant{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-elegant:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);transform:translateY(-3px);color:#fff}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,.form-control:focus-visible{outline:2px solid var(--color-gold-light);outline-offset:3px}
.btn-gold:disabled,.btn-gold.disabled{filter:saturate(.5);opacity:.55}

/* ---------- Hero (carousel-driven, DB content) ---------- */
.hero-section{min-height:560px;border-radius:0 0 36px 36px}
.hero-section::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;z-index:5;pointer-events:none;background:linear-gradient(to top,var(--color-background),transparent)}
.carousel-item.active .hero-image{animation:mxKen 10s ease-out both}
@keyframes mxKen{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.carousel-item.active .hero-subtitle{animation:mxUp .9s .1s var(--mx-ease) both}
.carousel-item.active .hero-title{animation:mxUp 1s .25s var(--mx-ease) both}
.carousel-item.active .hero-description{animation:mxUp 1s .45s var(--mx-ease) both}
.carousel-item.active .hero-content .d-flex{animation:mxUp 1s .65s var(--mx-ease) both}
@keyframes mxUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.hero-title{text-shadow:0 8px 40px rgba(0,0,0,.55);letter-spacing:-.02em}
.hero-description{max-width:46ch;font-size:clamp(1rem,1.6vw,1.2rem);color:#d9d9df}
.hero-subtitle{font-weight:700}
.scroll-line{transform-origin:top;animation:mxScroll 2.2s var(--mx-ease) infinite}
@keyframes mxScroll{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ---------- Portfolio ---------- */
.portfolio-item{border-radius:20px!important;box-shadow:0 18px 50px rgba(0,0,0,.45);transition:box-shadow .5s,border-color .4s;border:1px solid transparent}
.portfolio-item:hover{box-shadow:0 28px 70px rgba(0,0,0,.65),0 0 0 1px rgba(212,175,55,.45)}
.portfolio-item img,.portfolio-item video{transition:transform 1.1s var(--mx-ease),filter .6s!important}
.portfolio-item:hover img,.portfolio-item:hover video{transform:scale(1.08)!important;filter:saturate(1.1)}
.filter-pill,.filter-btn{border-radius:999px!important;font-size:.8rem;font-weight:600;letter-spacing:.1em;transition:all .35s var(--mx-ease)!important}
.filter-pill:hover,.filter-btn:hover{transform:translateY(-2px)}
.filter-pill.active,.filter-btn.active{box-shadow:0 10px 28px rgba(212,175,55,.3)}

/* ---------- Cards ---------- */
.card-dark,.service-card,.payment-card,.contact-card,.success-card,.otp-card,.tracking-card,.dashboard-nav-card,
.dashboard-section,.download-card,.video-card,.booking-summary,.processing-card,.payment-terms,.timeline-item{
  border-radius:22px!important;border:1px solid var(--mx-line)!important;
  background-image:var(--mx-glass);background-color:var(--color-card);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transition:border-color .4s,box-shadow .5s,background-image .4s}
.service-card:hover,.contact-card:hover,.dashboard-nav-card:hover,.download-card:hover,.video-card:hover,.card-dark:hover{
  border-color:rgba(212,175,55,.5)!important;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(212,175,55,.08);
  background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(212,175,55,.13),transparent 45%),var(--mx-glass)}
.service-card .service-icon,.service-icon{width:3.6rem;height:3.6rem;border-radius:18px;background:linear-gradient(145deg,rgba(212,175,55,.22),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.35);box-shadow:inset 0 0 20px rgba(212,175,55,.12);transition:transform .5s var(--mx-ease),box-shadow .4s}
.service-card:hover .service-icon{transform:translateY(-4px) rotate(-6deg) scale(1.06);box-shadow:0 12px 30px rgba(212,175,55,.3)}
.service-title{font-size:1.5rem;margin-bottom:.6rem}
.booking-service-card,.photo-service-card{border-radius:18px!important;transition:transform .4s var(--mx-ease),box-shadow .4s,background .3s,border-color .3s}
.photo-service-card{overflow:hidden}
.photo-service-card:hover,.booking-service-card:hover{box-shadow:0 18px 44px rgba(0,0,0,.5)}
.price-final{font-family:var(--font-serif)}
.promo-badge,.discount-badge,.status-badge,.delivery-status,.payment-status{border-radius:999px;letter-spacing:.04em;font-weight:700}
.reference-number,.reference-box{border-radius:16px;border:1px dashed rgba(212,175,55,.5);background:rgba(212,175,55,.06);letter-spacing:.12em}

/* ---------- Forms (focus states only; validation colours untouched) ---------- */
.form-control,.form-select,.form-control-dark,textarea.form-control,.otp-input,.tracking-input{border-radius:14px!important;
  transition:border-color .3s,box-shadow .3s,background .3s,transform .3s var(--mx-ease)}
.form-control:not(.is-invalid):not(.is-valid):focus,.form-select:not(.is-invalid):not(.is-valid):focus,.form-control-dark:not(.is-invalid):not(.is-valid):focus{
  border-color:var(--color-gold)!important;box-shadow:0 0 0 4px rgba(212,175,55,.18)!important;background-color:#1b1b21;transform:translateY(-1px)}
.form-label,.form-label-muted{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.input-group-text{border-radius:14px 0 0 14px!important}
.input-group>.form-control{border-radius:0 14px 14px 0!important}
.form-check-input:checked{background-color:var(--color-gold);border-color:var(--color-gold)}

/* ---------- Booking wizard (geometry untouched) ---------- */
.step-circle{transition:transform .4s var(--mx-ease),box-shadow .4s,background .3s}
.step-active{box-shadow:0 0 0 6px rgba(212,175,55,.18),0 10px 30px rgba(212,175,55,.35)}
.step-track-active{box-shadow:0 0 14px rgba(212,175,55,.6)}
#step-1,#step-2,#step-3{animation:mxStep .7s var(--mx-ease) both}
#step-2.d-none,#step-3.d-none{animation:none}
@keyframes mxStep{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Page headers ---------- */
.about-page-header,.contact-page-header,.gallery-header{position:relative}
.stat-value{font-family:var(--font-serif);background:var(--mx-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
.team-member-photo{border-radius:50%;box-shadow:0 0 0 3px var(--color-background),0 0 0 5px rgba(212,175,55,.6),0 20px 50px rgba(0,0,0,.5)}
.contact-map,.map-container{border-radius:22px;overflow:hidden;border:1px solid var(--mx-line)}
.gallery-item{box-shadow:0 14px 40px rgba(0,0,0,.4)}
.otp-input{letter-spacing:.5em;text-align:center;font-weight:700}

/* ---------- Footer ---------- */
footer.border-top{position:relative;border-color:var(--mx-line)!important;background:linear-gradient(180deg,transparent,rgba(212,175,55,.04));margin-top:2rem}
footer.border-top::before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--color-gold),transparent)}
footer a.hover-gold:hover{transform:translateX(5px)}
footer h6{color:var(--color-gold-light);font-weight:700}
.whatsapp-float{box-shadow:0 10px 30px rgba(37,211,102,.45);animation:mxPulse 2.6s infinite}
@keyframes mxPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.mx-top{position:fixed;right:22px;bottom:96px;width:46px;height:46px;border-radius:50%;border:1px solid var(--mx-line);background:rgba(17,17,21,.88);backdrop-filter:blur(10px);color:var(--color-gold-light);z-index:998;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:.4s var(--mx-ease)}
.mx-top.show{opacity:1;visibility:visible;transform:none}
.mx-top:hover{background:var(--color-gold);color:#111}

/* ---------- SweetAlert2 + modals ---------- */
.swal2-popup{background:#141418!important;color:var(--color-foreground)!important;border:1px solid var(--mx-line);border-radius:24px!important;box-shadow:0 40px 100px rgba(0,0,0,.7)!important;font-family:var(--font-sans)}
.swal2-title,.swal2-html-container{color:var(--color-foreground)!important}
.swal2-confirm{background:var(--mx-grad)!important;color:#15120a!important;border-radius:999px!important;font-weight:700!important;padding:.7em 2em!important}
.modal-content{border-radius:24px;border:1px solid var(--mx-line);background:#141418}

/* ---------- Scroll reveal (classes added by modern.js) ---------- */
.mx-js .mx-reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--mx-ease),transform .9s var(--mx-ease);transition-delay:calc(var(--mx-d,0)*90ms)}
.mx-js .mx-reveal.mx-in{opacity:1;transform:none}
.mx-cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;background:radial-gradient(rgba(212,175,55,.09),transparent 62%)}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .navbar-collapse{margin-top:.8rem;padding:1rem 1.2rem;border-radius:20px;background:rgba(14,14,18,.96);border:1px solid var(--mx-line)}
  .navbar .nav-link::after{display:none}
  .navbar .nav-link{padding:.8rem 0;font-size:.9rem}
}
@media (max-width:767.98px){
  body::before{animation:none}
  .hero-section{border-radius:0 0 24px 24px}
  .hero-content .d-flex{flex-direction:column;align-items:stretch}
  .hero-content .d-flex .btn{width:100%;text-align:center}
  .portfolio-item,.card-dark,.service-card{border-radius:16px!important}
  .mx-top{right:14px;bottom:88px}
  .section-subtitle::before,.text-center .section-subtitle::after{width:20px}
}
@media (hover:none){
  .btn-gold:hover,.btn-elegant:hover{transform:none}
  .mx-cursor{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mx-js .mx-reveal{opacity:1;transform:none}
}
/* Stop continuous background animation */
body::before {
    animation: none !important;
}
/* Avoid expensive navbar blur during scrolling */
.navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Keep WhatsApp fixed and independent */
.whatsapp-float {
    position: fixed !important;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    animation: none !important;
    transform: none;
}
/* Reduce expensive blur on mobile */
@media (max-width: 767.98px) {
    .navbar,
    .btn-elegant,
    .mx-top {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .mx-cursor {
        display: none !important;
    }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================
   MOBILE OVERFLOW FIX
   Prevent unwanted horizontal scrollbar
   while preserving vertical scrolling
   ========================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 767.98px) {
    main,
    .page-content-wrapper,
    .hero-section,
    #heroCarousel,
    #heroCarousel .carousel-inner,
    #heroCarousel .carousel-item {
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-section {
        width: 100%;
        overflow: hidden;
    }

    .hero-bg,
    .hero-bg picture,
    .hero-bg img,
    .hero-image {
        max-width: 100%;
    }

    .hero-bg img,
    .hero-image {
        width: 100%;
        object-fit: cover;
    }

    .hero-content {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Prevent decorative cursor effects from causing overflow */
    .mx-cursor {
        display: none !important;
    }
}