/* =========================================================
   Sree Shiv Alankar Mandir — shared stylesheet
   Premium jewellery edition (readable, bright, elegant)
   ========================================================= */

:root{
  --black:#08080a;
  --charcoal:#1a1a1d;
  --charcoal-2:#25242a;
  --red-deep:#4a0a12;
  --red-mid:#7a1020;
  --red-bright:#a81830;
  --gold:#f0c850;
  --white:#ffffff;
  --cream:#f5e6b8;
  --text-dim:#e0dcd4;
  --radius:10px;
  --font-display:'Playfair Display', serif;
  --font-body:'Poppins', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:#08080a; }
img{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; user-drag:none; max-width:100%; height:auto;
}
body{
  margin:0; background:transparent; color:var(--white);
  font-family:var(--font-body); line-height:1.6;
  padding-top:8px; padding-bottom:8px; overflow-x:hidden; width:100%;
}
body:not(.fm-menu-open){ overflow-y:auto !important; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:var(--font-body); }
.hidden{ display:none !important; }

/* ---------- shining red bars ---------- */
.shine-bar{
  position:fixed; left:0; right:0; height:7px; z-index:80;
  overflow:hidden; background:var(--red-deep);
  box-shadow:0 0 14px 2px rgba(200,30,60,.6);
}
.shine-bar::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:200%;
  background:linear-gradient(90deg,var(--red-deep),var(--red-bright) 45%,var(--gold) 50%,var(--red-bright) 55%,var(--red-deep));
  background-size:50% 100%; background-repeat:repeat-x;
  animation:shineSlide 3.2s linear infinite;
  will-change:transform;
}
.shine-bar-top{ top:0; }
.shine-bar-bottom{ bottom:0; }
@keyframes shineSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   SHOP BANNER — Premium, non-sticky, warm rich maroon
   ========================================================= */
.shop-banner{
  position:relative;
  overflow:hidden;
  margin-top:7px;
  padding:clamp(22px, 4.5vw, 36px) clamp(18px, 4vw, 34px);
  text-align:left;
  background:linear-gradient(135deg, #5a0a12 0%, #7a1020 50%, #4a0a12 100%);
  border-bottom:2px solid rgba(240, 200, 80, .75);
  box-shadow:0 4px 26px rgba(240, 200, 80, .15), 0 2px 18px rgba(0,0,0,.5);
}
.shop-banner::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:200%;
  background:linear-gradient(150deg, rgba(120,20,40,.5), rgba(160,40,60,.35) 45%, rgba(200,80,100,.25) 60%, rgba(120,20,40,.5));
  animation:bannerShift 8s ease-in-out infinite;
  will-change:transform;
  opacity:.4;
  pointer-events:none;
}
@keyframes bannerShift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-50%); } }

.shop-banner h1{
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: 1.15;
  margin: 0;
  letter-spacing: .8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #f0c850;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .85),
    0 0 22px rgba(240, 200, 80, .6),
    0 0 44px rgba(240, 200, 80, .35);
}

.shop-name-h1{
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  line-height: 1.15;
  margin: 0;
  padding: 0;
  letter-spacing: .8px;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* Bright gold gradient across letters */
  background: linear-gradient(
    180deg,
    #fff8d4 0%,
    #ffe680 18%,
    #f5c850 42%,
    #e0a828 62%,
    #c98a10 82%,
    #a06a00 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Deep glow behind the letters */
  filter:
    drop-shadow(0 1px 0 rgba(120, 70, 0, .85))
    drop-shadow(0 2px 4px rgba(0, 0, 0, .55))
    drop-shadow(0 0 14px rgba(255, 200, 80, .55))
    drop-shadow(0 0 28px rgba(255, 180, 50, .35));
}

/* Shine sweep layer — smooth slow sweep across letters */
.shop-name-h1::before{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, .55) 46%,
    rgba(255, 255, 255, .95) 50%,
    rgba(255, 255, 255, .55) 54%,
    transparent 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shopNameShine 6s linear infinite;
}

@keyframes shopNameShine{
  0%   { background-position: 200% 0; }   /* start: off-screen right */
  70%  { background-position: -200% 0; }  /* end: off-screen left */
  100% { background-position: -200% 0; }  /* pause */
}
.shop-banner .tagline{
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  font-size: clamp(.85rem, 2.7vw, 1rem);
  line-height: 1.5;
  padding: 0;
  letter-spacing: .3px;
  color: #f5e6b8;
  opacity: .95;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

/* ---------- search ---------- */
.search-section{ display:flex; justify-content:center; padding:clamp(12px, 3vw, 22px) 14px 0; }
#searchForm{
  display:flex; width:100%; max-width:520px;
  border:1.5px solid var(--red-mid); border-radius:999px;
  background:var(--charcoal); overflow:hidden;
  transition:box-shadow .25s ease;
}
#searchForm:focus-within{ box-shadow:0 0 0 3px rgba(168,24,48,.4); }
#searchInput{
  flex:1; min-width:0; border:none; background:transparent; color:var(--white);
  padding:clamp(9px, 2.5vw, 12px) clamp(12px, 3vw, 18px);
  font-size:clamp(.85rem, 2.7vw, .98rem); outline:none;
}
#searchForm button{
  border:none; background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  color:var(--white); padding:0 clamp(12px, 3.5vw, 18px); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:filter .2s ease;
}
#searchForm button:hover{ filter:brightness(1.15); }
#searchForm button svg{
  width:clamp(20px, 5.5vw, 24px); height:clamp(20px, 5.5vw, 24px);
  display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ---------- hero slider 16:9 ---------- */
.hero-slider-section{ padding:clamp(14px, 3vw, 26px) 14px 6px; display:flex; justify-content:center; }
.hero-slider{
  position:relative; width:100%; max-width:1080px;
  aspect-ratio:16 / 9; border-radius:14px; overflow:hidden;
  border:2px solid var(--red-mid);
  box-shadow:0 0 26px rgba(168,24,48,.3), 0 10px 30px rgba(0,0,0,.55);
  background:var(--charcoal);
}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out;
  background-size:cover; background-position:center;
  background-color:#0a0a0a; overflow:hidden;
}
.hero-slide img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
.hero-slide.active{ opacity:1; }
.slider-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); text-align:center;
  font-size:clamp(.82rem, 2.6vw, 1rem); padding:14px;
}

/* ---------- categories ---------- */
.category-section{ padding:clamp(14px, 3vw, 22px) 14px 0; }
.category-chips{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
  max-width:1080px; margin:0 auto; -webkit-overflow-scrolling:touch;
}
.category-chips::-webkit-scrollbar{ height:5px; }
.chip{
  flex:0 0 auto;
  padding:clamp(7px, 2vw, 9px) clamp(13px, 3.5vw, 18px);
  border-radius:999px;
  border:1.5px solid var(--red-mid); background:transparent; color:var(--white);
  cursor:pointer; font-size:clamp(.8rem, 2.5vw, .92rem);
  white-space:nowrap; transition:background .2s,color .2s; font-weight:500;
}
.chip.active, .chip:hover{ background:var(--red-mid); color:var(--white); }

.chip.chip-brand{
  background:linear-gradient(120deg, var(--red-deep), var(--red-bright));
  border-color:var(--gold);
  color:var(--white); font-weight:700;
  box-shadow:0 0 12px rgba(240,200,80,.4);
}
.chip.chip-brand.active{
  background:var(--gold); color:#1a1400;
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(240,200,80,.7);
}
.chip.chip-brand:hover{
  background:linear-gradient(120deg, #5a0a12, #c8203a);
  color:var(--white);
  box-shadow:0 0 18px rgba(240,200,80,.65);
}

/* ---------- hero intro ---------- */
.hero-intro{ max-width:1080px; margin:0 auto; padding:clamp(18px, 4vw, 28px) 14px 4px; }
.hero-intro .eyebrow{ display:block; color:var(--gold); font-size:clamp(.76rem, 2.4vw, .86rem); letter-spacing:.4px; margin-bottom:6px; font-weight:600; }
.hero-intro h2{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(1.25rem, 4.8vw, 2.3rem);
  color:var(--white); margin:0 0 12px; line-height:1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.hero-intro p{
  color:var(--text-dim);
  font-size:clamp(.88rem, 2.8vw, 1rem);
  max-width:640px;
  margin:0;
  line-height:1.7;
}

/* ---------- products + posters ---------- */
.products-section{ padding:clamp(18px, 4vw, 30px) 14px; max-width:1080px; margin:0 auto; }
.section-title{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(1.2rem, 4vw, 1.6rem);
  color:var(--gold); margin:0 0 14px;
  border-left:4px solid var(--red-bright); padding-left:12px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:clamp(10px, 3vw, 18px);
}
.product-card{
  background:var(--charcoal); border:1.5px solid var(--red-mid); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:border-color .2s, box-shadow .2s;
  display:flex; flex-direction:column; box-shadow:0 0 10px rgba(168,24,48,.15);
}
.product-card:hover, .product-card:active{ border-color:var(--red-bright); box-shadow:0 0 16px rgba(168,24,48,.35); }
.product-img-wrap{
  position:relative; width:100%; height:clamp(120px, 32vw, 150px);
  overflow:hidden; background:#0a0a0a;
}
.product-img-wrap img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.product-info{ display:flex; flex-direction:column; border-top:1px solid rgba(168,24,48,.18); }
.product-card h3{
  font-size:clamp(.85rem, 2.6vw, 1rem); margin:8px 10px 4px;
  font-family:var(--font-body); font-weight:600; word-wrap:break-word;
  color:var(--white); line-height:1.35;
}
.product-card .brand-tag{
  margin:0 10px 4px; font-size:.74rem; color:var(--gold);
  opacity:.9; letter-spacing:.3px; text-transform:uppercase;
  font-weight:600;
}
.product-card .price{ margin:0 10px 10px; color:var(--gold); font-weight:700; font-size:clamp(.9rem, 2.7vw, 1.05rem); }
.product-card .out-tag{ margin:0 10px 8px; color:#ff9090; font-size:clamp(.72rem, 2.2vw, .84rem); font-weight:500; }
.product-card .in-stock-tag{ margin:0 10px 8px; color:#6ee88a; font-size:clamp(.72rem, 2.2vw, .84rem); font-weight:500; }
.empty-msg{ color:var(--text-dim); font-size:clamp(.85rem, 2.7vw, .98rem); }

/* ---------- POSTER CARD ---------- */
.poster-card{
  grid-column:1 / -1; position:relative; width:100%; aspect-ratio:16 / 9;
  border-radius:14px; overflow:hidden;
  border:2px solid var(--gold);
  box-shadow:0 0 26px rgba(240,200,80,.4), 0 10px 30px rgba(0,0,0,.55);
  background:var(--charcoal); margin:8px 0;
}
.poster-media{ position:absolute; inset:0; background:#0a0a0a; }
.poster-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease-in-out;
  background-size:cover; background-position:center;
  background-color:#0a0a0a;
  display:flex; align-items:center; justify-content:center;
}
.poster-slide img{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; }
.poster-slide.active{ opacity:1; }
.poster-media video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.poster-link{ display:block; width:100%; height:100%; position:absolute; inset:0; z-index:2; }

/* ---------- wishlist ---------- */
.wishlist-btn{
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,.6); border:1.5px solid rgba(255,255,255,.35);
  color:var(--white); font-size:1.05rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.wishlist-btn:hover{ transform:scale(1.12); }
.wishlist-btn.active{ background:rgba(168,24,48,.75); border-color:var(--red-bright); animation:wishPop .28s ease; }
@keyframes wishPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.32); } 100%{ transform:scale(1); } }
.chip.wishlist-chip{ border-color:var(--gold); color:var(--gold); }
.chip.wishlist-chip.active{ background:var(--gold); color:#1a1400; border-color:var(--gold); }
.modal-wishlist-btn{
  position:static; width:auto; height:auto; border-radius:999px;
  padding:10px 20px; margin:2px 0 12px; display:inline-flex; align-items:center; gap:8px;
  background:none; border:1.5px solid var(--red-mid); color:var(--white);
  font-size:.9rem; font-weight:600;
}
.modal-wishlist-btn.active{ background:linear-gradient(120deg,var(--red-deep),var(--red-bright)); border-color:var(--red-bright); }

/* ---------- about / privacy / terms / developer ---------- */
.about-section{ max-width:1080px; margin:0 auto; padding:clamp(24px, 5vw, 48px) 16px; }
.about-block{ margin-bottom:clamp(20px, 3.5vw, 32px); }
.about-block:last-child{ margin-bottom:0; }
.about-block h2{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(1.2rem, 3.8vw, 1.6rem);
  color:var(--gold); margin:0 0 12px;
  border-left:4px solid var(--red-bright); padding-left:12px; letter-spacing:.3px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.about-block p{
  color:var(--text-dim); font-size:clamp(.9rem, 2.8vw, 1.02rem);
  line-height:1.8; margin:0;
}
.about-block p a{ color:var(--gold); text-decoration:underline; font-weight:600; }
.about-block p a:hover{ color:#ffe680; }
.about-block ul{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px 20px;
}
.about-block ul li{
  color:var(--text-dim); font-size:clamp(.9rem, 2.8vw, 1.02rem);
  line-height:1.7; padding-left:22px; position:relative;
}
.about-block ul li::before{ content:"💎"; position:absolute; left:0; top:0; color:var(--gold); font-size:.9em; line-height:1.8; }
.about-block strong{ color:var(--white); font-weight:700; }
.about-updated{ color: var(--gold); font-size: clamp(.8rem, 2.5vw, .9rem); margin-bottom: 16px !important; opacity: .9; letter-spacing:.3px; font-weight:500; }

/* ---------- ABOUT CTA ---------- */
.about-cta{ max-width:760px; margin:0 auto; padding:clamp(24px, 5vw, 44px) 18px; text-align:center; }
.about-cta-title{
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(1.25rem, 4.2vw, 1.7rem);
  color:var(--gold); margin:0 0 12px; letter-spacing:.3px;
  text-shadow:0 0 16px rgba(240,200,80,.5);
}
.about-cta-text{ color:var(--text-dim); font-size:clamp(.9rem, 2.8vw, 1.02rem); line-height:1.8; margin:0 auto 20px; max-width:600px; }

/* ---------- SEO Expand ---------- */
.seo-expand{
  max-width:900px; margin:16px auto 8px; padding:0;
  background:var(--charcoal);
  border:1px solid #2c2b2e; border-left:4px solid var(--gold);
  border-radius:10px; overflow:hidden;
  transition:box-shadow .2s ease;
}
.seo-expand:hover{ box-shadow:0 0 12px rgba(240,200,80,.2); }
.seo-expand summary{
  cursor:pointer; padding:14px clamp(16px, 4vw, 22px);
  color:var(--gold);
  font-family:var(--font-display); font-style:italic; font-weight:700;
  font-size:clamp(.92rem, 2.9vw, 1.08rem);
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; user-select:none; letter-spacing:.3px;
}
.seo-expand summary::-webkit-details-marker{ display:none; }
.seo-expand summary::after{
  content:"▼"; font-size:.7em; color:var(--gold);
  transition:transform .25s ease; flex:0 0 auto;
}
.seo-expand[open] summary::after{ transform:rotate(180deg); }
.seo-expand-body{
  padding:0 clamp(16px, 4vw, 22px) clamp(14px, 3vw, 20px);
  border-top:1px solid rgba(240,200,80,.15);
  animation:seoExpandFade .3s ease;
}
.seo-expand-body p{
  color:var(--text-dim); font-size:clamp(.85rem, 2.6vw, .95rem);
  line-height:1.75; margin:0 0 12px;
}
.seo-expand-body p:last-child{ margin-bottom:0; }
.seo-expand-body .seo-address{
  color:var(--gold); font-weight:600;
  font-size:clamp(.8rem, 2.5vw, .88rem);
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(240,200,80,.2);
  letter-spacing:.2px;
}
@keyframes seoExpandFade{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:480px){
  .seo-expand{ margin:12px 12px 6px; }
  .seo-expand summary{ padding:12px 14px; font-size:.9rem; }
  .seo-expand-body{ padding:0 14px 14px; }
}

/* ---------- back button ---------- */
.about-back-wrap{ max-width:1080px; margin:0 auto; padding:clamp(16px, 3vw, 24px) 18px 0; }
.about-back-btn{
  display:inline-block; padding:9px 20px; border-radius:999px;
  border:1.5px solid var(--red-mid); color:var(--white);
  font-size:clamp(.82rem, 2.5vw, .9rem); font-weight:600;
  background:rgba(0,0,0,.25);
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.about-back-btn:hover{ background:var(--red-mid); border-color:var(--red-bright); transform:translateX(-3px); }

/* ---------- contact ---------- */
.contact-section{ text-align:center; padding:clamp(20px, 4vw, 40px) 16px clamp(30px, 5vw, 50px); }
.contact-section #contactAddress{ color:var(--white); font-size:clamp(.92rem, 2.9vw, 1.06rem); margin:0 0 8px; font-weight:500; }
.contact-timing{ color:var(--gold); font-weight:600; font-size:clamp(.9rem, 2.8vw, 1.02rem); margin:6px 0 12px; }
.contact-maps{ margin:14px 0 0; }
.contact-maps a{
  display:inline-block; padding:12px 26px; border-radius:999px;
  background:linear-gradient(120deg,var(--red-deep),var(--red-bright));
  color:var(--white); font-weight:600; font-size:clamp(.88rem, 2.7vw, .98rem);
  box-shadow:0 0 14px rgba(168,24,48,.45);
  transition:transform .15s ease, box-shadow .25s ease;
}
.contact-maps a:hover{ transform:translateY(-2px); box-shadow:0 0 22px rgba(168,24,48,.7); }
.contact-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.contact-btn{
  display:inline-block; padding:12px 24px; border-radius:999px;
  background:linear-gradient(120deg,var(--red-deep),var(--red-bright));
  color:var(--white); font-weight:600; box-shadow:0 0 14px rgba(168,24,48,.4);
  transition:transform .15s ease;
}
.contact-btn:hover{ transform:translateY(-2px); }
.contact-btn.whatsapp{ background:linear-gradient(120deg,#0d5c2e,#1fbf59); box-shadow:0 0 14px rgba(31,191,89,.4); }

/* ---------- product modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:200; display:flex; align-items:center; justify-content:center; padding:14px; }
.modal-box{
  background:var(--charcoal); border:1.5px solid var(--red-mid); border-radius:14px;
  max-width:760px; width:100%; max-height:88vh; overflow-y:auto; position:relative;
  padding:clamp(14px, 3vw, 20px);
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:680px){ .modal-box{ grid-template-columns:1fr; } }
.modal-close{ position:absolute; top:10px; right:12px; background:none; border:none; color:var(--white); font-size:1.3rem; cursor:pointer; z-index:2; }
.modal-img-wrap{ position:relative; width:100%; height:clamp(200px, 45vw, 260px); border-radius:10px; overflow:hidden; background:#0a0a0a; }
.modal-img-wrap img#modalMainImage{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.modal-thumbs{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.modal-thumbs img{ width:54px; height:54px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.modal-thumbs img.active-thumb{ border-color:var(--red-bright); }
.modal-video-wrap{ margin-top:10px; }
.modal-video-wrap video{ width:100%; border-radius:10px; }
.modal-info h3{ font-family:var(--font-display); color:var(--gold); font-size:clamp(1.2rem, 4vw, 1.5rem); margin:0 0 6px; }
.modal-info .price{ color:var(--gold); font-weight:700; }

/* ---------- footer ---------- */
.site-footer{
  position:relative; overflow:hidden; margin-top:10px;
  padding:clamp(28px, 5vw, 44px) 16px clamp(20px, 4vw, 26px);
  text-align:center;
  background:linear-gradient(150deg, #3a0810, #5a0a12 50%, #3a0810);
  border-top:2px solid var(--gold);
}
.site-footer h3{
  font-family:var(--font-display); font-style:italic; font-weight:800;
  font-size:clamp(1.35rem, 4.2vw, 1.8rem);
  color:var(--white); margin:0 0 6px;
  text-shadow:0 0 18px rgba(240,200,80,.6);
  word-wrap:break-word;
}
.site-footer .footer-tagline{ color:var(--white); opacity:.95; margin:0 0 10px; font-size:clamp(.85rem, 2.7vw, 1rem); font-weight:500; }
.site-footer .footer-seo-line{ color:var(--gold); opacity:.9; font-size:clamp(.78rem, 2.5vw, .88rem); margin:0 0 12px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.6; font-style:italic; }
.site-footer .footer-address{ color:var(--white); opacity:.9; font-size:clamp(.8rem, 2.5vw, .9rem); margin:0 0 20px; }
.social-links{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.social-links a{ display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--white); text-decoration:none; transition:transform .15s ease; }
.social-links a:hover{ transform:translateY(-2px); }
.social-icon-circle{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.4); border:1.5px solid var(--gold);
}
.social-links svg{ width:24px; height:24px; }
.social-label{ font-size:.74rem; color:var(--text-dim); max-width:80px; text-align:center; line-height:1.2; font-weight:500; }
.site-footer .footer-links{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:6px 10px; margin:6px 0 4px;
  font-size:clamp(.8rem, 2.5vw, .9rem);
}
.site-footer .footer-links a{ color:var(--white); opacity:.9; text-decoration:underline; text-underline-offset:3px; transition:color .2s ease, opacity .2s ease; }
.site-footer .footer-links a:hover{ color:var(--gold); opacity:1; }
.site-footer .footer-links span{ color:var(--white); opacity:.5; }
.site-footer .copyright{
  color:var(--white); opacity:.9; font-size:clamp(.75rem, 2.4vw, .85rem);
  margin:0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.25);
  line-height:1.7; letter-spacing:.2px;
}

/* =========================================================
   DEVELOPER NAME — SHIMMER
   ========================================================= */
.credit-name{
  display:inline-block; position:relative;
  background:linear-gradient(90deg, #8a6a10 0%, #f0c850 15%, #fff8c4 30%, #f0c850 45%, #c8991f 60%, #f0c850 75%, #8a6a10 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800; letter-spacing:.5px;
  animation:goldShimmer 6s ease-in-out infinite;
  text-decoration:none !important;
  transition:filter .35s ease;
  will-change:background-position; z-index:1;
}
.credit-name:hover{ filter:drop-shadow(0 0 10px rgba(240,200,80,.9)); }
@keyframes goldShimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:-250% 50%; } }
.shimmer-name{
  display:inline-block; position:relative;
  background:linear-gradient(90deg, #8a6a10 0%, #f0c850 15%, #fff8c4 30%, #f0c850 45%, #c8991f 60%, #f0c850 75%, #8a6a10 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:goldShimmer 6s ease-in-out infinite;
  will-change:background-position;
}

/* =========================================================
   NAME SPARKS
   ========================================================= */
.spark-host{ position:relative !important; display:inline-block; overflow:visible !important; }
.name-spark{
  position:absolute; pointer-events:none; z-index:5;
  will-change:transform, opacity;
  animation:sparkFly ease-out forwards;
  -webkit-text-fill-color: initial !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
}
.name-spark-dot{
  border-radius:50%;
  background:var(--spark-color, #f0c850);
  box-shadow:0 0 4px var(--spark-color, #f0c850), 0 0 10px var(--spark-color, #f0c850), 0 0 18px var(--spark-color, #f0c850);
}
.name-spark-star{
  background:var(--spark-color, #f0c850);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter:drop-shadow(0 0 3px var(--spark-color, #f0c850)) drop-shadow(0 0 7px var(--spark-color, #f0c850)) drop-shadow(0 0 12px var(--spark-color, #f0c850));
}
.name-spark-diamond{
  background:var(--spark-color, #f0c850);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter:drop-shadow(0 0 3px var(--spark-color, #f0c850)) drop-shadow(0 0 7px var(--spark-color, #f0c850));
}
@keyframes sparkFly{
  0%{ transform:translate(0, 0) scale(0) rotate(0deg); opacity:0; }
  12%{ transform:translate(calc(var(--dx, 0) * 0.12), calc(var(--dy, 0) * 0.12)) scale(1.25) rotate(calc(var(--rotate, 0deg) * 0.12)); opacity:1; }
  30%{ transform:translate(calc(var(--dx, 0) * 0.3), calc(var(--dy, 0) * 0.3)) scale(1) rotate(calc(var(--rotate, 0deg) * 0.3)); opacity:1; }
  70%{ transform:translate(calc(var(--dx, 0) * 0.7), calc(var(--dy, 0) * 0.7)) scale(0.85) rotate(calc(var(--rotate, 0deg) * 0.7)); opacity:0.85; }
  100%{ transform:translate(var(--dx, 0), var(--dy, 0)) scale(0.05) rotate(var(--rotate, 0deg)); opacity:0; }
}

/* =========================================================
   ADMIN PANEL
   ========================================================= */
.admin-body{ background:var(--black); position:relative; overflow-x:hidden; }
.admin-blob{ position:fixed; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0; pointer-events:none; }
.blob1{ width:340px; height:340px; background:var(--red-mid); top:-100px; left:-100px; }
.blob2{ width:300px; height:300px; background:var(--gold); bottom:-100px; right:-100px; opacity:.2; }
.admin-login-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px 20px; position:relative; }
.login-card{
  position:relative; z-index:1; width:100%; max-width:380px;
  background:var(--charcoal); border:1.5px solid var(--red-mid); border-radius:16px;
  padding:clamp(24px, 5vw, 32px) clamp(20px, 4vw, 28px);
  box-shadow:0 0 30px rgba(168,24,48,.25);
}
.login-title{ font-family:var(--font-display); font-size:clamp(1.6rem, 5vw, 2rem); text-align:center; margin:0 0 6px; color:var(--white); }
.login-title span{ color:var(--red-bright); }
.login-sub{ text-align:center; color:var(--text-dim); font-size:.85rem; margin:0 0 22px; }
#loginForm label{ display:block; font-size:.85rem; color:var(--text-dim); margin:14px 0 6px; }
#loginForm input{ width:100%; padding:11px 14px; border-radius:8px; border:1px solid #3a393c; background:var(--charcoal-2); color:var(--white); outline:none; }
#loginForm input:focus{ border-color:var(--red-bright); }
#loginForm button{ width:100%; margin-top:20px; padding:12px; border:none; border-radius:8px; cursor:pointer; background:linear-gradient(120deg,var(--red-deep),var(--red-bright)); color:var(--white); font-weight:600; }
.login-error{ color:#ff7373; min-height:20px; margin-top:10px; font-size:.85rem; text-align:center; }

.dashboard{ display:flex; min-height:100vh; position:relative; z-index:1; }
.dashboard-sidebar{ width:220px; flex:0 0 220px; background:var(--charcoal); border-right:1.5px solid var(--red-deep); padding:22px 16px; display:flex; flex-direction:column; gap:6px; }
.dash-logo{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 18px; }
.dash-logo span{ color:var(--red-bright); }
.tab-btn{ text-align:left; background:none; border:none; color:var(--text-dim); padding:11px 12px; border-radius:8px; cursor:pointer; font-size:.92rem; }
.tab-btn.active, .tab-btn:hover{ background:var(--red-deep); color:var(--white); }
.logout-btn{ margin-top:auto; padding:10px; border:1px solid var(--red-mid); background:none; color:var(--white); border-radius:8px; cursor:pointer; }
.dashboard-content{ flex:1; padding:28px; padding-bottom:56px; overflow-y:auto; max-height:100vh; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.hint-text{ color:var(--text-dim); font-size:.85rem; margin:-6px 0 16px; }

.admin-form{ background:var(--charcoal); border:1px solid #2c2b2e; border-radius:12px; padding:20px; max-width:520px; margin-bottom:26px; }
.admin-form label{ display:block; font-size:.85rem; color:var(--text-dim); margin:12px 0 6px; }
.admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password],
.admin-form select, .admin-form textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid #3a393c; background:var(--charcoal-2); color:var(--white);
}
.admin-form input[type=file]{ width:100%; color:var(--text-dim); margin-top:4px; }
.edit-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.edit-thumbs .thumb-wrap{ position:relative; width:56px; height:56px; }
.edit-thumbs .thumb-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.edit-thumbs .thumb-wrap button{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:#ff3b3b; color:#fff; border:none; font-size:.7rem; cursor:pointer; line-height:1; }
.stock-check{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.stock-check input{ width:auto; }
.form-btn-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.admin-form button, .secondary-btn{ padding:11px 20px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.admin-form button[type=submit]{ background:linear-gradient(120deg,var(--red-deep),var(--red-bright)); color:var(--white); }
.secondary-btn{ background:none; border:1px solid var(--red-mid); color:var(--white); }
.upload-status{ min-height:18px; color:var(--gold); font-size:.83rem; }

.admin-list{ display:flex; flex-direction:column; gap:10px; max-width:760px; }
.admin-product-filter-bar{ display:flex; flex-direction:column; gap:10px; max-width:760px; margin-bottom:16px; }
.admin-search-input{ width:100%; padding:11px 16px; border-radius:999px; border:1.5px solid var(--red-mid); background:var(--charcoal-2); color:var(--white); outline:none; font-size:.92rem; }
.admin-search-input:focus{ border-color:var(--red-bright); box-shadow:0 0 0 3px rgba(168,24,48,.3); }
.category-chips.admin-category-chips{ max-width:none; margin:0; padding-bottom:2px; }
.admin-item{ background:var(--charcoal); border:1px solid #2c2b2e; border-radius:10px; padding:14px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.admin-item img, .admin-item video{ width:52px; height:52px; object-fit:cover; border-radius:6px; }
.admin-item .item-main{ flex:1; min-width:140px; }
.admin-item .item-main strong{ display:block; }
.admin-item .item-main small{ color:var(--text-dim); }
.admin-item .item-actions{ display:flex; gap:8px; }
.admin-item .item-actions button{ padding:7px 14px; border-radius:6px; border:1px solid var(--red-mid); background:none; color:var(--white); cursor:pointer; font-size:.8rem; }
.admin-item .item-actions button.danger{ border-color:#ff4444; color:#ff9090; }
.admin-item button[disabled]{ opacity:.35; cursor:not-allowed; }

.page-editor .about-toggle-wrap{ background:var(--charcoal); border:1px solid #2c2b2e; border-radius:12px; padding:14px 18px; margin-bottom:18px; max-width:520px; }
.page-editor .about-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; color:var(--white); font-size:.92rem; }
.page-editor .about-toggle input{ width:18px; height:18px; accent-color:var(--red-bright); cursor:pointer; }
.page-editor .about-subheading{ font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--white); margin:22px 0 10px; padding-left:10px; border-left:3px solid var(--red-bright); }
.page-editor .admin-list{ margin-top:12px; }
.page-editor textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #3a393c; background:var(--charcoal-2); color:var(--white); font-family:var(--font-body); font-size:.92rem; line-height:1.5; resize:vertical; }

#aboutLoadDefaults, #privacyLoadDefaults, #termsLoadDefaults, #developerLoadDefaults{
  background: linear-gradient(120deg, #8a6a10, var(--gold)); color: #1a1400; border: none; font-weight: 700;
}

.dev-credit{
  position:fixed; left:0; right:0; bottom:7px; z-index:60;
  text-align:center; padding:5px 10px; font-size:.75rem;
  color:var(--text-dim); background:rgba(0,0,0,.65);
}

/* =========================================================
   SECURITY ALERT (used only on Rate Us abuse)
   ========================================================= */
.security-alert{ position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; background:#8a1018; animation:alertPulse .55s infinite alternate; box-shadow:inset 0 0 120px rgba(255,20,20,.6); }
@keyframes alertPulse{ from{ background:#4a0508; } to{ background:#c02838; } }
.security-alert .skull{ font-size:clamp(4rem, 15vw, 7rem); animation:skullPulse .7s infinite alternate; filter:drop-shadow(0 0 34px #ff2222); }
@keyframes skullPulse{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
.security-alert .alert-title{ color:#fff; font-family:var(--font-display); font-size:clamp(1.4rem, 5vw, 2.2rem); margin:18px 0 6px; text-shadow:0 0 18px #ff0000, 0 0 34px #ff0000; }
.security-alert .alert-sub{ color:#ffdede; font-weight:600; letter-spacing:.5px; margin:0; font-size:clamp(.9rem, 3vw, 1.1rem); }
.security-alert .alert-sub2{ color:#ffbdbd; margin:6px 0 0; font-size:clamp(.78rem, 2.5vw, .9rem); }

/* =========================================================
   RATE US
   ========================================================= */
.rateus-section{ padding:16px 14px 6px; max-width:560px; margin:0 auto; text-align:center; }
.rateus-back{ display:inline-block; margin-bottom:14px; color:var(--gold); font-weight:600; }
.rateus-total{ margin-bottom:20px !important; }
.rateus-form{ text-align:left; margin:0 auto 30px; }
.star-picker{ display:flex; gap:8px; font-size:clamp(2rem, 8vw, 2.6rem); cursor:pointer; margin:4px 0 4px; justify-content:center; }
.star-picker span{ color:#3d3d40; transition:color .15s, transform .12s; }
.star-picker span.selected{ color:var(--gold); text-shadow:0 0 14px rgba(240,200,80,.6); }
.star-picker span:hover{ transform:scale(1.18); }
.rateus-notice{ background:var(--charcoal); border:1px solid var(--red-mid); border-radius:var(--radius); padding:22px 18px; text-align:center; color:var(--white); font-weight:600; max-width:520px; margin:0 auto 30px; }
.rateus-list-section{ padding:10px 14px 60px; max-width:640px; margin:0 auto; }
.review-card{ background:var(--charcoal); border:1px solid #2c2b2e; border-radius:var(--radius); padding:18px; margin-bottom:14px; text-align:left; }
.review-card .review-stars{ color:var(--gold); font-size:1.15rem; letter-spacing:2px; display:block; }
.review-card .review-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin:6px 0 2px; }
.review-card .review-desc{ color:var(--text-dim); font-size:.95rem; margin:4px 0 0; line-height:1.7; }
.review-card .review-date{ color:#9a9690; font-size:.78rem; margin-top:10px; }
.review-card .owner-reply{ margin-top:12px; padding:10px 12px; background:rgba(240,200,80,.08); border-left:3px solid var(--gold); border-radius:0 6px 6px 0; font-size:.88rem; line-height:1.6; }
.review-card .owner-reply strong{ color:var(--gold); }
.rateus-celebrate{ position:fixed; inset:0; z-index:999; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at center, #201f22 0%, #0b0b0d 100%); }
.rateus-celebrate-card{ position:relative; z-index:2; text-align:center; padding:44px 28px; background:linear-gradient(160deg, #201f22, #17171a); border:2px solid var(--gold); border-radius:16px; box-shadow:0 0 46px rgba(240,200,80,.4); max-width:420px; margin:0 20px; }
.rateus-celebrate-card p{ font-family:var(--font-display); font-size:clamp(1.2rem, 4.2vw, 1.55rem); color:var(--gold); text-shadow:0 0 16px rgba(240,200,80,.55); margin:0; line-height:1.4; }
.rateus-fall-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.fall-particle{ position:absolute; top:-40px; font-size:1.7rem; animation:fallDown linear forwards; }
@keyframes fallDown{ to{ transform:translateY(112vh) rotate(360deg); opacity:.15; } }

/* =========================================================
   FLOATING MAIN BUTTONS
   ========================================================= */
.fm-main-btn{
  position:fixed; z-index:600;
  width:62px; height:62px; border-radius:50%;
  border:2px solid var(--gold);
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  color:#fff; cursor:grab; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:900; font-size:.95rem; letter-spacing:.3px;
  box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 24px rgba(168,24,48,.6), inset 0 0 12px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s, box-shadow .3s;
  touch-action:none; user-select:none; -webkit-user-select:none;
  overflow:visible;
}
.fm-main-btn:hover{ box-shadow:0 6px 26px rgba(0,0,0,.6), 0 0 34px rgba(168,24,48,.8); }
.fm-main-btn:active{ cursor:grabbing; }
.fm-main-btn.fm-dragging{ cursor:grabbing; transition:none; transform:scale(1.08); box-shadow:0 10px 30px rgba(0,0,0,.65), 0 0 40px rgba(168,24,48,.9); }

.fm-main-label{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding: 2px 4px; box-sizing:border-box;
  text-align:center; line-height:1.05;
  word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
  font-weight:900; letter-spacing:0;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;
}

body.fm-menu-open .fm-main-btn{ opacity:0; pointer-events:none; transform:scale(.4); }
body.detail-open .fm-main-btn{ opacity:0; pointer-events:none; transform:scale(0.4); }

.fm-btn-pos-br{ right:22px; bottom:24px; }
.fm-btn-pos-bl{ right:22px; bottom:100px; }
.fm-btn-pos-tr{ right:22px; bottom:176px; }

.fm-main-icon{
  display:flex; align-items:center; justify-content:center;
  width:clamp(1.7rem, 5.5vw, 2.1rem);
  height:clamp(1.7rem, 5.5vw, 2.1rem);
  pointer-events:none;
}
.fm-main-icon svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

/* =========================================================
   OVERLAY
   ========================================================= */
.fm-overlay{ position:fixed; inset:0; z-index:700; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.15); padding:20px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.fm-overlay.open{ opacity:1; pointer-events:auto; }
.fm-overlay-center{ display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; max-width:100%; }
.fm-orbit-container{ position:relative; width:min(380px, 88vw); height:min(380px, 88vw); display:flex; align-items:center; justify-content:center; }

.fm-center-hub{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(118px, 28vw); height:min(118px, 28vw); border-radius:50%;
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  color:#fff; border:2.5px solid var(--gold);
  cursor:pointer; padding:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; z-index:5; font-family:inherit;
  box-shadow:0 0 44px rgba(168,24,48,.8), 0 0 90px rgba(168,24,48,.4), inset 0 0 20px rgba(0,0,0,.45);
  animation:fmHubPulse 2.6s ease-in-out infinite;
  transition:transform .2s ease;
  overflow:hidden;
}
.fm-center-hub:active{ transform:translate(-50%,-50%) scale(.94); }
.fm-hub-brand{
  font-family:var(--font-display); font-weight:900;
  font-size:1.55rem; letter-spacing:.5px;
  color:#fff; line-height:1.05; text-align:center;
  word-break:break-word; overflow-wrap:anywhere; max-width:100%;
  text-shadow:0 0 10px rgba(255,255,255,.3);
}
.fm-hub-hint{
  font-size:clamp(.6rem, 1.8vw, .7rem); font-weight:700;
  color:#f5e6b8; letter-spacing:.4px;
  line-height:1.1;
  text-align:center; max-width:100%;
}
@keyframes fmHubPulse{
  0%,100%{ box-shadow:0 0 44px rgba(168,24,48,.8), 0 0 90px rgba(168,24,48,.4), inset 0 0 20px rgba(0,0,0,.45); }
  50%{ box-shadow:0 0 62px rgba(168,24,48,1), 0 0 130px rgba(168,24,48,.6), inset 0 0 20px rgba(0,0,0,.45); }
}

.fm-orbit-ring{ position:absolute; inset:0; pointer-events:none; animation:fmSpin 26s linear infinite; transform-origin:center center; will-change:transform; }
.fm-orbit-container:hover .fm-orbit-ring{ animation-play-state:paused; }
.fm-orbit-container:hover .fm-orbit-counter{ animation-play-state:paused; }
@keyframes fmSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.fm-orbit-item{
  position:absolute; left:50%; top:50%;
  width:min(76px, 18vw); height:min(76px, 18vw);
  margin:calc(min(76px, 18vw) / -2) 0 0 calc(min(76px, 18vw) / -2);
  display:flex; align-items:center; justify-content:center;
  transform:translate(0, 0) scale(0.15);
  opacity:0; pointer-events:none;
  transition:transform .9s cubic-bezier(.22, 1, .36, 1), opacity .65s cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--delay-close, 0ms);
  will-change:transform, opacity;
  backface-visibility:hidden; transform-origin:center center;
}
.fm-overlay.open .fm-orbit-item{
  transform:translate(var(--x), var(--y)) scale(1);
  opacity:1; pointer-events:auto;
  transition-delay: var(--delay-open, 0ms);
}
.fm-orbit-counter{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:fmSpinReverse 26s linear infinite;
  transform-origin:center center; will-change:transform;
}
@keyframes fmSpinReverse{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }

.fm-orbit-icon-btn{
  position:relative;
  width:min(60px, 14vw); height:min(60px, 14vw);
  border-radius:50%; border:none; cursor:pointer; padding:0;
  background:radial-gradient(circle at 30% 30%, #26262c 0%, #101013 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.6), 0 0 14px rgba(168,24,48,.4);
  transition:transform .2s ease, box-shadow .25s ease;
}
.fm-orbit-icon-btn::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg, #f0c850 0deg, #a81830 90deg, #7a1020 180deg, #a81830 270deg, #f0c850 360deg);
  z-index:-1; animation:fmRingSpin 4s linear infinite; opacity:.9;
}
.fm-orbit-icon-btn::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px dashed rgba(240,200,80,.5); pointer-events:none;
}
.fm-orbit-icon-btn:hover{ transform:scale(1.1); box-shadow:0 8px 24px rgba(0,0,0,.75), 0 0 30px rgba(168,24,48,.9); }
@keyframes fmRingSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.fm-orbit-icon-btn.fm-orbit-cat-btn,
.fm-orbit-icon-btn.fm-orbit-brand-btn{
  background:radial-gradient(circle at 30% 25%, #c8203a 0%, #7a1020 55%, #4a0a12 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.6), 0 0 16px rgba(168,24,48,.6), inset 0 0 12px rgba(255,220,200,.25);
}
.fm-orbit-icon-btn.fm-orbit-cat-btn::before,
.fm-orbit-icon-btn.fm-orbit-brand-btn::before{
  background:conic-gradient(from 0deg, #fff8c4 0deg, #a81830 90deg, #7a1020 180deg, #a81830 270deg, #fff8c4 360deg);
  opacity:1;
}
.fm-orbit-icon-btn.fm-orbit-cat-btn .fm-orbit-catname,
.fm-orbit-icon-btn.fm-orbit-brand-btn .fm-orbit-catname{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 0 6px rgba(245,230,184,.6);
  font-weight:800;
}

.fm-orbit-emoji{ font-size:clamp(1.1rem, 3.4vw, 1.45rem); line-height:1; filter:drop-shadow(0 0 6px rgba(255,255,255,.3)); pointer-events:none; }
.fm-orbit-svg{ display:flex; align-items:center; justify-content:center; width:clamp(1.4rem, 4.2vw, 1.85rem); height:clamp(1.4rem, 4.2vw, 1.85rem); pointer-events:none; }
.fm-orbit-svg svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(240,200,80,.4)); }

.fm-orbit-label{
  font-size:clamp(.6rem, 2vw, .74rem); font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, #4a0a12, #7a1020);
  border:1px solid rgba(240,200,80,.8);
  padding:3px clamp(7px, 2vw, 12px);
  border-radius:999px; white-space:nowrap;
  max-width:110px; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; letter-spacing:.3px;
  box-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 10px rgba(168,24,48,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.fm-orbit-catname{
  display:flex; align-items:center; justify-content:center;
  width:86%; max-width:86%; height:auto;
  font-family:var(--font-body);
  font-size:clamp(.55rem, 1.8vw, .68rem);
  font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:.3px; line-height:1.05;
  text-align:center; word-break:break-word;
  overflow:hidden; text-overflow:ellipsis; padding:0 2px;
  text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 6px rgba(245,230,184,.4);
  pointer-events:none;
}
.fm-empty-msg{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--text-dim); font-size:.9rem;
  text-align:center; padding:0 30px; line-height:1.5;
}
.fm-preview-icon{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex:0 0 44px;
}
.fm-preview-svg{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; }
.fm-preview-svg svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.btn-badge{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:8px;
  background:linear-gradient(120deg,var(--red-deep),var(--red-bright));
  color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; vertical-align:middle;
}
.mb-slot{ background:var(--charcoal-2); border:1px solid #2c2b2e; border-radius:10px; padding:14px 16px 16px; margin-bottom:14px; }
.mb-slot .about-subheading{ margin-top:0; margin-bottom:10px; font-size:1rem; }
.mb-slot label{ display:block; font-size:.85rem; color:var(--text-dim); margin:10px 0 6px; }
.mb-slot input[type=text]{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #3a393c; background:var(--charcoal); color:var(--white); }
.mb-slot .stock-check{ margin-top:0; margin-bottom:6px; }

@media (max-width:820px){
  .dashboard{ flex-direction:column; }
  .dashboard-sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1.5px solid var(--red-deep); }
  .dash-logo{ width:100%; }
  .logout-btn{ margin-top:0; }
}
@media (max-width:480px){
  .fm-btn-pos-br{ right:14px; bottom:16px; }
  .fm-btn-pos-bl{ right:14px; bottom:88px; }
  .fm-btn-pos-tr{ right:14px; bottom:160px; }
}
@media (max-width:360px){
  .product-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
  .shop-banner h1, .shop-name-h1{ font-size:1.5rem; }
  .shop-banner .tagline{ font-size:.78rem; }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* =========================================================
   SKELETON LOADER
   ========================================================= */
.skeleton-card{
  background:var(--charcoal);
  border:1.5px solid #2a2a2e;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.skeleton-img{
  width:100%;
  height:clamp(120px, 32vw, 150px);
  background:linear-gradient(90deg, #1a1a1d 0%, #2a2a30 50%, #1a1a1d 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-info{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid rgba(168,24,48,.1);
}
.skeleton-line{
  height:10px;
  border-radius:5px;
  background:linear-gradient(90deg, #1a1a1d 0%, #2a2a30 50%, #1a1a1d 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-line-title{ width:80%; height:12px; }
.skeleton-line-price{ width:45%; height:14px; }
.skeleton-line-stock{ width:55%; height:10px; animation-delay:0.1s; }

@keyframes skeletonShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* =========================================================
   PRODUCT DETAIL PAGE (SPA)
   ========================================================= */
body.detail-open{ background:var(--black); }

#productDetailPage{
  transition:opacity .25s ease;
}

.detail-container{
  max-width:1080px;
  margin:0 auto;
  padding:clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px) clamp(40px, 6vw, 60px);
}

.detail-top-bar{
  margin-bottom:clamp(12px, 2.5vw, 18px);
}

.detail-back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  border-radius:999px;
  border:1.5px solid var(--red-mid);
  background:rgba(0,0,0,.35);
  color:var(--white);
  font-weight:600;
  font-size:clamp(.85rem, 2.5vw, .95rem);
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
}
.detail-back-btn:hover{
  background:var(--red-mid);
  border-color:var(--red-bright);
  transform:translateX(-3px);
}

.detail-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px, 4vw, 32px);
  margin-bottom:clamp(30px, 5vw, 50px);
}
@media (max-width:680px){
  .detail-layout{ grid-template-columns:1fr; }
}

.detail-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.detail-main-img{
  position:relative;
  width:100%;
  height:clamp(260px, 50vw, 380px);
  border-radius:14px;
  overflow:hidden;
  background:#0a0a0a;
  border:1.5px solid var(--red-mid);
}
.detail-main-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.detail-thumbs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.detail-thumbs img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color .15s;
}
.detail-thumbs img.active-thumb{ border-color:var(--red-bright); }
.detail-thumbs img:hover{ border-color:var(--gold); }

.detail-video-wrap{
  margin-top:6px;
  border-radius:12px;
  overflow:hidden;
  border:1.5px solid var(--red-mid);
}
.detail-video-wrap video{ width:100%; display:block; }

.detail-info{
  display:flex;
  flex-direction:column;
  gap:clamp(10px, 2vw, 14px);
}

.detail-brand{
  display:inline-block;
  align-self:flex-start;
  color:var(--gold);
  font-size:clamp(.75rem, 2.3vw, .85rem);
  letter-spacing:.5px;
  text-transform:uppercase;
  font-weight:700;
  padding:3px 10px;
  border:1px solid rgba(240,200,80,.45);
  border-radius:999px;
  background:rgba(240,200,80,.08);
}

.detail-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.4rem, 4.6vw, 2.1rem);
  color:var(--white);
  margin:0;
  line-height:1.2;
}

.detail-price{
  font-family:var(--font-display);
  color:var(--gold);
  font-weight:800;
  font-size:clamp(1.5rem, 5.2vw, 2rem);
  margin:0;
  text-shadow:0 0 14px rgba(240,200,80,.5);
}

.detail-stock{
  font-size:clamp(.88rem, 2.6vw, .98rem);
  font-weight:600;
  margin:0;
}
.detail-in{ color:#6ee88a; }
.detail-out{ color:#ff9090; }

.detail-desc{
  color:var(--text-dim);
  font-size:clamp(.9rem, 2.8vw, 1.02rem);
  line-height:1.75;
  margin:6px 0 10px;
}

.detail-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}

.detail-wa-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  background:linear-gradient(120deg, #0d5c2e, #1fbf59);
  color:#fff;
  font-weight:700;
  font-size:clamp(.92rem, 2.8vw, 1.02rem);
  text-align:center;
  box-shadow:0 0 18px rgba(31,191,89,.45), inset 0 0 10px rgba(0,0,0,.2);
  transition:transform .15s, box-shadow .25s;
}
.detail-wa-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 26px rgba(31,191,89,.7), inset 0 0 10px rgba(0,0,0,.2);
}

.detail-wish-btn{
  padding:12px 22px;
  border-radius:999px;
  background:none;
  border:1.5px solid var(--red-mid);
  color:var(--white);
  font-weight:600;
  font-size:clamp(.88rem, 2.6vw, .98rem);
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.detail-wish-btn:hover{
  border-color:var(--red-bright);
  background:rgba(168,24,48,.2);
}
.detail-wish-btn.active{
  background:linear-gradient(120deg, var(--red-deep), var(--red-bright));
  border-color:var(--red-bright);
}

.similar-section{
  padding-top:clamp(18px, 3vw, 28px);
  border-top:1px solid rgba(168,24,48,.2);
}

.similar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:clamp(10px, 3vw, 18px);
  margin-top:14px;
}

.similar-card{ cursor:pointer; }

@media (max-width:480px){
  .detail-main-img{ height:clamp(220px, 55vw, 300px); }
  .detail-thumbs img{ width:52px; height:52px; }
  .similar-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); }
}

/* =========================================================
   MOBILE PERFORMANCE
   ========================================================= */
@media (max-width:768px){
  .name-spark,
  .fm-orbit-ring, .fm-orbit-counter,
  .credit-name, .shimmer-name{
    will-change:auto;
  }
  .shine-bar::before, .shop-banner::before{ will-change:transform; }

  .fm-center-hub{ animation-duration:4s; }
  .fm-orbit-icon-btn::before{ animation-duration:6s; }
  .fm-orbit-ring{ animation-duration:40s; }
  .fm-orbit-counter{ animation-duration:40s; }
  .shine-bar::before{ animation-duration:5s; }
  .shop-banner::before{ animation-duration:10s; }
  .credit-name, .shimmer-name{ animation-duration:8s; }

  button, a, .chip, .product-card, .wishlist-btn{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
}

@media (prefers-reduced-motion:reduce){
  .shine-bar::before, .shop-banner::before{ animation:none !important; }
  .fm-center-hub, .fm-orbit-icon-btn::before, .fm-orbit-ring, .fm-orbit-counter{ animation:none !important; }
  .fm-orbit-item{ transition:none !important; }
  .fm-main-btn{ transition:none !important; }
  .credit-name, .shimmer-name{ animation:none !important; }
  .name-spark{ animation:none !important; display:none !important; }
  .skeleton-img, .skeleton-line{ animation:none !important; }
  #productDetailPage{ transition:none !important; }
}

/* =========================================================
   VIDEO SUPPORT — Banner + Poster
   ========================================================= */
.hero-slide video,
.poster-media video,
.hero-video,
.poster-video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}

.hero-slide video::-webkit-media-controls,
.hero-slide video::-webkit-media-controls-enclosure,
.poster-media video::-webkit-media-controls,
.poster-media video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.poster-video::-webkit-media-controls,
.poster-video::-webkit-media-controls-enclosure{
  display:none !important;
  -webkit-appearance:none;
}

.slide-mute-btn,
.poster-mute-btn{
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  border:1.5px solid rgba(255,255,255,.4);
  color:#fff;
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:transform .15s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.slide-mute-btn:hover,
.poster-mute-btn:hover{
  transform:scale(1.1);
  background:rgba(0,0,0,.8);
}
.slide-mute-btn:active,
.poster-mute-btn:active{
  transform:scale(.95);
}

.slide-mute-btn.sound-on,
.poster-mute-btn.sound-on{
  background:rgba(168,24,48,.75);
  border-color:var(--gold);
}

.hero-slider::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hero-slide.hero-slide-video{
  display:flex;
  align-items:center;
  justify-content:center;
}

.poster-card{
  position:relative;
}
.poster-media{
  position:relative;
}

.hero-slider,
.poster-card,
.hero-slide,
.poster-media{
  touch-action:pan-y;
}

.hero-slider *,
.poster-card *{
  -webkit-user-select:none;
  user-select:none;
}

.hero-slide,
.poster-slide{
  transition:opacity 1.2s ease-in-out, transform .2s ease-out;
}

/* =========================================================
   DOTS INDICATOR
   ========================================================= */
.poster-dots{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  align-items:center;
  z-index:4;
  padding:5px 10px;
  background:rgba(0,0,0,.5);
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:auto;
}
.poster-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:all .25s ease;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.poster-dot.active{
  width:18px;
  background:var(--gold);
  box-shadow:0 0 8px rgba(240,200,80,.8);
}
.poster-dot:hover{
  background:rgba(255,255,255,.85);
}

.hero-dots{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  align-items:center;
  z-index:5;
  padding:5px 10px;
  background:rgba(0,0,0,.5);
  border-radius:999px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.hero-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:all .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-dot.active{
  width:20px;
  background:var(--gold);
  box-shadow:0 0 10px rgba(240,200,80,.8);
}
.hero-dot:hover{
  background:rgba(255,255,255,.9);
}

@media (max-width:480px){
  .poster-dots{ bottom:8px; padding:4px 8px; gap:5px; }
  .poster-dot{ width:5px; height:5px; }
  .poster-dot.active{ width:14px; }
  .hero-dots{ bottom:8px; padding:4px 8px; gap:5px; }
  .hero-dot{ width:6px; height:6px; }
  .hero-dot.active{ width:16px; }
}

/* =========================================================
   ABOUT MORE — Collapsible
   ========================================================= */
.about-more{
  max-width:600px;
  margin:16px auto 20px;
  padding:0;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(240,200,80,.35);
  border-radius:10px;
  overflow:hidden;
  text-align:left;
}
.about-more summary{
  cursor:pointer;
  padding:12px 18px;
  color:var(--gold);
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(.9rem, 2.7vw, 1.02rem);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
  letter-spacing:.3px;
}
.about-more summary::-webkit-details-marker{ display:none; }
.about-more summary::after{
  content:"▼";
  font-size:.7em;
  color:var(--gold);
  transition:transform .25s ease;
  flex:0 0 auto;
}
.about-more[open] summary::after{ transform:rotate(180deg); }
.about-more-body{
  padding:0 18px 16px;
  border-top:1px solid rgba(240,200,80,.15);
  animation:aboutMoreFade .3s ease;
}
.about-more-body p{
  color:var(--text-dim);
  font-size:clamp(.85rem, 2.6vw, .96rem);
  line-height:1.75;
  margin:0 0 12px;
}
.about-more-body p:last-child{ margin-bottom:0; }
.about-more-body ul{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:6px 16px;
}
.about-more-body ul li{
  color:var(--text-dim);
  font-size:clamp(.82rem, 2.5vw, .94rem);
  line-height:1.6;
  padding-left:20px;
  position:relative;
}
.about-more-body ul li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--gold);
  font-weight:700;
  font-size:.95em;
}
.about-more-address{
  color:var(--gold) !important;
  font-weight:600;
  font-size:clamp(.8rem, 2.5vw, .88rem) !important;
  margin-top:14px !important;
  padding-top:12px;
  border-top:1px solid rgba(240,200,80,.2);
}
.about-more-address a{
  color:var(--gold);
  text-decoration:underline;
  font-weight:600;
}
.about-more-address a:hover{
  color:#ffe680;
}
@keyframes aboutMoreFade{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   ABOUT DEVELOPER
   ========================================================= */
.about-more-body ul li strong {
  color: #f0c850;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(240, 200, 80, 0.5);
}
.about-more-body ul li a.dev-link,
.about-more-body ul li a.dev-link:visited {
  color: #5dd4ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color .2s ease;
}
.about-more-body ul li a.dev-link:hover {
  color: #8fe2ff;
  text-shadow: 0 0 10px rgba(93, 212, 255, 0.7);
}
.about-more-body ul li strong:not(:first-child) {
  color: #ffe680;
  font-weight: 700;
}

@media (max-width:480px){
  .about-more{ margin:14px auto 16px; }
  .about-more summary{ padding:11px 14px; font-size:.88rem; }
  .about-more-body{ padding:0 14px 14px; }
  .about-more-body ul{ grid-template-columns:1fr; }
   }
/* =========================================================
   RATE CALCULATOR — Floating button + Premium overlay
   ========================================================= */

/* ---------- Floating "Rate" button ---------- */
.rc-fab{
  position:fixed;
  left:22px;
  bottom:24px;
  z-index:600;
  width:62px;
  height:62px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  color:#fff;
  cursor:grab;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-weight:900;
  font-size:.9rem;
  letter-spacing:.3px;
  box-shadow:0 6px 20px rgba(0,0,0,.55), 0 0 24px rgba(240,200,80,.55), inset 0 0 12px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s, box-shadow .3s;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  overflow:visible;
}
.rc-fab:hover{
  box-shadow:0 6px 26px rgba(0,0,0,.6), 0 0 34px rgba(240,200,80,.85);
}
.rc-fab:active{ cursor:grabbing; }
.rc-fab.rc-dragging{
  cursor:grabbing;
  transition:none;
  transform:scale(1.08);
  box-shadow:0 10px 30px rgba(0,0,0,.65), 0 0 40px rgba(240,200,80,.95);
}
.rc-fab-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  pointer-events:none;
}
body.fm-menu-open .rc-fab,
body.detail-open .rc-fab,
body.rc-open .rc-fab{
  opacity:0;
  pointer-events:none;
  transform:scale(.4);
}

/* ---------- Overlay ---------- */
.rc-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:#000000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  overflow-y:auto;
}
.rc-overlay.open{
  opacity:1;
  pointer-events:auto;
}

/* ---------- Card ---------- */
.rc-card{
  position:relative;
  width:100%;
  max-width:480px;
  max-height:92vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#0f0f13;
  border:1.5px solid #2a2a2e;
  border-radius:16px;
  box-shadow:0 0 40px rgba(0,0,0,.6), 0 0 60px rgba(240,200,80,.15);
  transform:translateY(40px);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.rc-overlay.open .rc-card{
  transform:translateY(0);
  opacity:1;
}
.rc-card::-webkit-scrollbar{ width:6px; }
.rc-card::-webkit-scrollbar-thumb{ background:#3a3a3e; border-radius:3px; }
.rc-card::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Header ---------- */
.rc-header{
  position:sticky;
  top:0;
  z-index:5;
  background:#0f0f13;
  border-bottom:1px solid #2a2a2e;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:16px 16px 0 0;
}
.rc-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:1.1rem;
  color:var(--gold);
  margin:0;
  letter-spacing:.3px;
}
.rc-title-icon{ font-size:1.2rem; }
.rc-close{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#2a2a2e;
  border:1px solid #3a3a3e;
  color:#fff;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .2s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.rc-close:hover{ background:#a81830; border-color:var(--red-bright); }
.rc-close:active{ transform:scale(.92); }

/* ---------- Body ---------- */
.rc-body{ padding:16px 18px 22px; }

/* ---------- Notice banner ---------- */
.rc-notice{
  display:flex;
  gap:10px;
  background:rgba(240,200,80,.08);
  border:1px solid rgba(240,200,80,.35);
  border-left:4px solid var(--gold);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
}
.rc-notice-icon{ font-size:1.1rem; flex:0 0 auto; line-height:1.3; }
.rc-notice-text{
  font-size:.82rem;
  line-height:1.55;
  color:#e8d6a8;
  margin:0;
  font-style:normal;
}

/* ---------- Metal tabs ---------- */
.rc-metal-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:16px;
}
.rc-metal-tab{
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid #2a2a2e;
  background:#17171a;
  color:#a8a8b0;
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.rc-metal-tab:hover{ border-color:#3a3a3e; color:#fff; }
.rc-metal-tab.active{
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  border-color:var(--gold);
  color:#fff;
  box-shadow:0 0 14px rgba(240,200,80,.4);
}
.rc-metal-icon{ font-size:1.05rem; }

/* ---------- Fields ---------- */
.rc-field-label{
  display:block;
  font-size:.82rem;
  color:#a8a8b0;
  margin:0 0 6px;
  font-weight:500;
  letter-spacing:.3px;
}
.rc-select,
.rc-input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid #2a2a2e;
  background:#17171a;
  color:#fff;
  font-family:var(--font-body);
  font-size:.95rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  margin-bottom:14px;
}
.rc-select:focus,
.rc-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(240,200,80,.2);
}
.rc-select option{ background:#1a1a1d; color:#fff; }
.rc-input::placeholder{ color:#5a5a60; }

/* ---------- Breakdown ---------- */
.rc-breakdown{
  background:#17171a;
  border:1px solid #2a2a2e;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:14px;
}
.rc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:7px 0;
  font-size:.88rem;
}
.rc-row-label{
  color:#a8a8b0;
  font-weight:500;
  font-style:normal;
}
.rc-row-val{
  color:#fff;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.rc-row-sub{
  border-top:1px dashed #2e2d32;
  border-bottom:1px dashed #2e2d32;
  padding:10px 0;
  margin:4px 0;
}
.rc-row-sub .rc-row-label{
  color:#e8d6a8;
  font-weight:600;
}
.rc-row-sub .rc-row-val{
  color:var(--gold);
  font-weight:700;
}

/* ---------- Total ---------- */
.rc-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--red-deep),var(--red-bright));
  border:1.5px solid var(--gold);
  box-shadow:0 0 20px rgba(240,200,80,.35), inset 0 0 12px rgba(0,0,0,.35);
  margin-bottom:12px;
}
.rc-total-label{
  color:#f5e6b8;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.3px;
}
.rc-total-val{
  color:#fff;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.2rem, 4.5vw, 1.5rem);
  text-shadow:0 0 10px rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums;
}

/* ---------- Footnote ---------- */
.rc-footnote{
  font-size:.76rem;
  color:#8a8680;
  text-align:center;
  margin:0;
  line-height:1.5;
  font-style:italic;
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .rc-fab{
    left:14px;
    bottom:16px;
    width:56px;
    height:56px;
    font-size:.82rem;
  }
  .rc-overlay{ padding:0; align-items:flex-end; }
  .rc-card{
    max-height:94vh;
    border-radius:18px 18px 0 0;
    max-width:100%;
    transform:translateY(100%);
  }
  .rc-overlay.open .rc-card{ transform:translateY(0); }
  .rc-header{ border-radius:18px 18px 0 0; padding:14px 16px; }
  .rc-title{ font-size:1rem; }
  .rc-body{ padding:14px 14px 22px; }
  .rc-notice-text{ font-size:.78rem; }
  .rc-metal-tab{ padding:10px 12px; font-size:.86rem; }
  .rc-select, .rc-input{ padding:11px 12px; font-size:.92rem; }
  .rc-row{ font-size:.84rem; }
  .rc-total{ padding:14px 16px; }
  .rc-total-val{ font-size:1.15rem; }
}

@media (max-width:360px){
  .rc-total-label{ font-size:.85rem; }
  .rc-total-val{ font-size:1.05rem; }
  .rc-title{ font-size:.92rem; }
  .rc-row{ font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce){
  .rc-fab, .rc-overlay, .rc-card, .rc-close, .rc-metal-tab{
    transition:none !important;
  }
}
/* =========================================================
   MAIN BUTTONS — Skeleton loading state
   ========================================================= */
.fm-main-btn.fm-loading{
  pointer-events:none;
}
.fm-main-btn.fm-loading .fm-main-label{
  display:block;
  width:55%;
  height:10px;
  border-radius:5px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.10) 100%
  );
  background-size:200% 100%;
  animation:fmBtnShimmer 1.4s ease-in-out infinite;
  text-indent:-9999px;
  overflow:hidden;
  padding:0;
}
@keyframes fmBtnShimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}