:root{
  --pink:#e7559a;
  --pink-dark:#cf3f84;
  --pink-soft:#fff0f7;
  --teal:#12a9b3;
  --teal-dark:#078e98;
  --teal-soft:#eafafa;
  --ink:#2e2c30;
  --muted:#747078;
  --line:#ece8eb;
  --bg:#fbfafb;
  --white:#fff;
  --shadow:0 18px 50px rgba(48,35,47,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#fff 0%,var(--bg) 65%,#fff 100%);color:var(--ink);font-family:"Quicksand",sans-serif;line-height:1.55}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,232,235,.9)}
.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:178px;height:auto;display:block}
.header-note{font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;background:var(--teal);border-radius:50%;box-shadow:0 0 0 5px var(--teal-soft)}
.page{padding:42px 0 70px}
.hero{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--teal);display:block}
.hero h1{font-size:clamp(30px,4vw,46px);line-height:1.08;margin:8px 0 10px;letter-spacing:-.035em}
.hero p{margin:0;color:var(--muted);max-width:650px}
.progress{display:flex;align-items:center;gap:10px;white-space:nowrap}
.progress i{display:block;width:32px;height:1px;background:#ddd}
.progress-step{display:flex;align-items:center;gap:7px;color:#aaa;font-size:12px;font-weight:700}
.progress-step b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f0eef0;color:#8c888e}
.progress-step.active{color:var(--pink)}
.progress-step.active b{background:var(--pink);color:white}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.main-column{min-width:0}
.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.section-card{padding:30px;margin-bottom:22px}
.section-heading{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.section-number{font-weight:900;color:white;background:linear-gradient(135deg,var(--pink),var(--teal));width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
.section-heading h2{font-size:22px;margin:0 0 4px;letter-spacing:-.02em}
.section-heading p{margin:0;color:var(--muted);font-size:13px}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.package-card{position:relative;border:1.5px solid var(--line);border-radius:18px;padding:20px;background:#fff;transition:.2s ease;cursor:pointer}
.package-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(48,35,47,.08)}
.package-card.selected{border-color:var(--pink);box-shadow:0 0 0 4px rgba(231,85,154,.10);background:linear-gradient(180deg,#fff,#fff8fc)}
.package-card.best::before{content:"BEST SELLER";position:absolute;right:12px;top:-11px;background:var(--pink);color:white;border-radius:999px;padding:4px 9px;font-size:9px;font-weight:900;letter-spacing:.08em}
.package-top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.package-card h3{margin:0;font-size:19px}
.package-price{font-size:23px;font-weight:900;color:var(--pink-dark);margin:10px 0 15px}
.package-features{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:#5d5860;font-size:12px}
.package-features li::before{content:"✓";color:var(--teal);font-weight:900;margin-right:7px}
.select-pill{margin-top:17px;border:1px solid var(--pink);color:var(--pink-dark);background:#fff;border-radius:10px;text-align:center;padding:9px;font-size:12px;font-weight:800}
.package-card.selected .select-pill{background:var(--pink);color:#fff}
.addon-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.addon-card{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;cursor:pointer;transition:.2s}
.addon-card.selected{border-color:var(--teal);background:var(--teal-soft)}
.addon-check{width:22px;height:22px;border:1.5px solid #d7d2d7;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;color:white;font-size:13px;font-weight:900}
.addon-card.selected .addon-check{background:var(--teal);border-color:var(--teal)}
.addon-copy{flex:1}.addon-copy strong{display:block;font-size:13px}.addon-copy span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.addon-price{font-size:13px;font-weight:900;color:var(--ink)}
.form-block{padding:2px 0}
.form-title{display:flex;gap:11px;align-items:center;margin-bottom:17px}
.mini-icon{width:34px;height:34px;border-radius:10px;background:var(--pink-soft);color:var(--pink-dark);display:grid;place-items:center;font-weight:900;font-size:13px}
.form-title h3{font-size:16px;margin:0}.form-title p{font-size:11px;color:var(--muted);margin:2px 0 0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
label{font-size:12px;font-weight:750;color:#504b51}
label span{color:var(--pink)}
input,textarea,select{width:100%;margin-top:7px;border:1px solid #ddd8dd;background:#fff;border-radius:11px;padding:11px 12px;color:var(--ink);outline:none;transition:.15s;font-size:13px}
input:focus,textarea:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,169,179,.1)}
textarea{resize:vertical}.full{grid-column:1/-1}
.sub-block{margin-top:18px;padding:17px;border-radius:15px;background:#faf8fa;border:1px dashed #e3dfe3}.sub-block h4{margin:0 0 13px;font-size:12px}
.divider{height:1px;background:var(--line);margin:28px 0}
.domain-input{display:flex;align-items:center;margin-top:7px}.domain-input input{margin:0;border-radius:11px 0 0 11px}.domain-input em{height:43px;display:flex;align-items:center;padding:0 10px;background:#f5f2f5;border:1px solid #ddd8dd;border-left:0;border-radius:0 11px 11px 0;color:#787279;font-style:normal;font-size:11px;white-space:nowrap}
.conditional-block{margin-top:28px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#fff8fc,#f2fcfc);border:1px solid #f0dce7}
.conditional-block h3{margin:0;font-size:16px}.conditional-block>p{margin:4px 0 17px;color:var(--muted);font-size:11px}
.option-row{display:flex;gap:9px;flex-wrap:wrap}.choice{border:1px solid #ded9de;background:white;border-radius:10px;padding:9px 12px;font-size:12px;cursor:pointer}.choice.active{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-dark);font-weight:800}
.submit-area{margin-top:30px;padding:22px;border-radius:18px;background:#2e2c30;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.submit-area h3{margin:0 0 3px;font-size:16px}.submit-area p{margin:0;color:#bcb8bd;font-size:11px}
.btn-primary,.btn-outline{border:0;border-radius:12px;padding:12px 18px;font-weight:850}.btn-primary{background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:white;box-shadow:0 8px 20px rgba(207,63,132,.22)}.btn-large{min-width:155px}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}
.summary-wrap{position:sticky;top:105px}
.summary-card{padding:22px}
.summary-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.summary-head h2{font-size:21px;margin:4px 0 0}.summary-badge{font-size:10px;background:var(--teal-soft);color:var(--teal-dark);padding:6px 9px;border-radius:999px;font-weight:900}
.summary-items{margin:20px 0 12px;display:grid;gap:12px}.summary-item{display:flex;justify-content:space-between;gap:10px;font-size:12px}.summary-item span:first-child{color:#5e5960}.summary-item strong{font-size:12px}.summary-item.addon{padding-left:12px;position:relative}.summary-item.addon::before{content:"+";position:absolute;left:0;color:var(--teal);font-weight:900}
.summary-empty{font-size:12px;color:#aaa;padding:15px 0}
.summary-total{border-top:1px dashed #ddd8dd;padding-top:15px;display:flex;align-items:center;justify-content:space-between}.summary-total span{font-size:13px;font-weight:800}.summary-total strong{font-size:22px;color:var(--pink-dark)}
.summary-info{margin-top:16px;padding:11px;border-radius:12px;background:#faf8fa;display:flex;gap:8px}.summary-info span{color:var(--teal)}.summary-info p{font-size:10px;color:var(--muted);margin:0}
.success-card{text-align:center;padding:55px 25px;margin-bottom:22px}.success-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto 17px;background:var(--teal-soft);color:var(--teal-dark);font-size:32px;font-weight:900}.success-card h2{font-size:30px;margin:7px 0}.success-card p{max-width:560px;margin:0 auto 22px;color:var(--muted);font-size:13px}
.site-footer{padding:35px 0 45px;border-top:1px solid var(--line);text-align:center;background:#fff}.site-footer img{width:145px}.site-footer p{font-size:10px;color:#888;margin:7px 0 0}
.hidden{display:none!important}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}.summary-wrap{position:relative;top:auto;order:-1}.summary-card{padding:18px}.summary-items{grid-template-columns:repeat(2,1fr)}.hero{align-items:start;flex-direction:column}.progress{width:100%;justify-content:space-between}.progress i{flex:1}
}
@media(max-width:640px){
  .container{width:min(100% - 22px,1180px)}.header-inner{height:68px}.brand img{width:145px}.header-note{display:none}.page{padding-top:25px}.hero h1{font-size:30px}.progress-step span{display:none}.progress-step b{width:27px;height:27px}.section-card{padding:20px;border-radius:18px}.package-grid,.addon-grid,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.package-card{padding:17px}.submit-area{align-items:stretch;flex-direction:column}.btn-large{width:100%}.summary-items{grid-template-columns:1fr}.domain-input em{font-size:9px;padding:0 7px}
}

/* =========================================================
   SAKIINAH V2 — PARALLAX + KEYFRAME MOTION
   ========================================================= */

body{overflow-x:hidden;position:relative}

.parallax-scene{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.site-header,.page,.site-footer{position:relative;z-index:1}

.parallax-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.28;
  will-change:transform;
}
.orb-pink{
  width:230px;height:230px;
  right:-90px;top:180px;
  background:radial-gradient(circle at 35% 35%,rgba(231,85,154,.45),rgba(231,85,154,0));
}
.orb-teal{
  width:280px;height:280px;
  left:-130px;top:620px;
  background:radial-gradient(circle at 60% 40%,rgba(18,169,179,.34),rgba(18,169,179,0));
}
.parallax-flower{
  position:absolute;
  font-family:"Quicksand",sans-serif;
  font-size:150px;
  line-height:1;
  opacity:.065;
  will-change:transform;
  user-select:none;
}
.flower-left{left:-35px;top:360px;color:var(--pink);transform:rotate(-18deg)}
.flower-right{right:-35px;top:1100px;color:var(--teal);transform:rotate(18deg)}

.reveal{
  opacity:0;
  will-change:transform,opacity;
}
.reveal.revealed{
  opacity:1;
  animation-duration:.72s;
  animation-timing-function:cubic-bezier(.2,.75,.25,1);
  animation-fill-mode:both;
}
.reveal-up.revealed{animation-name:revealUp}
.reveal-down.revealed{animation-name:revealDown}
.reveal-right.revealed{animation-name:revealRight}

@keyframes revealUp{
  from{opacity:0;transform:translate3d(0,28px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes revealDown{
  from{opacity:0;transform:translate3d(0,-22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes revealRight{
  from{opacity:0;transform:translate3d(24px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.hero .eyebrow{animation:brandPulse 3.8s ease-in-out infinite}
@keyframes brandPulse{
  0%,100%{opacity:.72;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}

.package-card{
  animation:cardFloatIn .55s cubic-bezier(.2,.75,.25,1) both;
}
.package-card:nth-child(2){animation-delay:.08s}
.package-card:nth-child(3){animation-delay:.16s}
@keyframes cardFloatIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.package-card.selected{
  animation:selectedGlow 1.8s ease-in-out infinite;
}
@keyframes selectedGlow{
  0%,100%{box-shadow:0 0 0 4px rgba(231,85,154,.08),0 10px 25px rgba(48,35,47,.04)}
  50%{box-shadow:0 0 0 7px rgba(231,85,154,.13),0 14px 30px rgba(48,35,47,.07)}
}

.addon-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.addon-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(48,35,47,.07);
}
.addon-check{
  transition:transform .2s ease,background .2s ease;
}
.addon-card.selected .addon-check{
  animation:checkPop .28s ease-out both;
}
@keyframes checkPop{
  0%{transform:scale(.7);opacity:.4}
  70%{transform:scale(1.16)}
  100%{transform:scale(1);opacity:1}
}

.btn-primary{
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-primary::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-80%;
  width:45%;
  height:160%;
  background:rgba(255,255,255,.25);
  transform:skewX(-18deg);
  animation:buttonShimmer 4.8s ease-in-out infinite;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(207,63,132,.28);
}
@keyframes buttonShimmer{
  0%,65%{left:-80%}
  100%{left:145%}
}

.summary-card{
  animation:summaryBreath 5s ease-in-out infinite;
}
@keyframes summaryBreath{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

.summary-total strong{
  display:inline-block;
  animation:priceIn .3s ease-out;
}
@keyframes priceIn{
  from{opacity:.35;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}

.conditional-block{
  animation:conditionalIn .42s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes conditionalIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.success-icon{
  animation:successPop .7s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes successPop{
  from{opacity:0;transform:scale(.45) rotate(-12deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
  .parallax-scene{display:none}
  .reveal{opacity:1!important;transform:none!important}
}

/* ===== Motion & Parallax ===== */
body{overflow-x:hidden}
.parallax-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.parallax-blob,.parallax-ring,.parallax-petal{position:absolute;will-change:transform}
.parallax-blob{filter:blur(1px);border-radius:50%;opacity:.32}
.blob-pink{width:360px;height:360px;left:-170px;top:18vh;background:radial-gradient(circle at 55% 45%,rgba(231,85,154,.18),rgba(231,85,154,0) 68%)}
.blob-teal{width:430px;height:430px;right:-210px;top:55vh;background:radial-gradient(circle at 45% 45%,rgba(18,169,179,.16),rgba(18,169,179,0) 68%)}
.parallax-ring{border:1px solid rgba(231,85,154,.13);border-radius:50%}
.ring-one{width:280px;height:280px;right:-130px;top:15vh}
.ring-two{width:190px;height:190px;left:-80px;top:72vh;border-color:rgba(18,169,179,.14)}
.parallax-petal{font-size:54px;color:rgba(231,85,154,.17);animation:floatPetal 7s ease-in-out infinite}
.petal-one{right:10%;top:29vh}.petal-two{left:8%;top:82vh;color:rgba(18,169,179,.17);animation-delay:-3s}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1)}
.reveal.is-visible{opacity:1;transform:none}
.package-card,.addon-card{animation:softFloatIn .65s both;animation-delay:calc(var(--i,0) * 70ms)}
.package-card:hover{transform:translateY(-5px) scale(1.008)}
.package-card.selected{animation:selectedPulse 2.6s ease-in-out infinite}
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:-40% auto -40% -25%;width:25%;background:rgba(255,255,255,.35);transform:skewX(-20deg);animation:buttonShine 3.5s ease-in-out infinite}
.summary-card{animation:summaryIn .8s .15s both}
.site-header{animation:headerDrop .65s cubic-bezier(.2,.75,.25,1) both}
.success-icon{animation:successPop .7s cubic-bezier(.17,.89,.32,1.28) both}
@keyframes softFloatIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes selectedPulse{0%,100%{box-shadow:0 0 0 4px rgba(231,85,154,.10)}50%{box-shadow:0 0 0 7px rgba(231,85,154,.045)}}
@keyframes buttonShine{0%,55%{left:-30%;opacity:0}65%{opacity:1}85%,100%{left:130%;opacity:0}}
@keyframes floatPetal{0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}50%{transform:translate3d(0,-16px,0) rotate(8deg)}}
@keyframes summaryIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes headerDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes successPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .parallax-scene{display:none}
}


/* ===== Mobile order flow ===== */
.mobile-continue{display:none;width:100%;margin-top:16px;min-height:48px}
.mobile-continue span{margin-left:6px}

@media (max-width: 767px){
  .layout{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  /* Flatten the desktop main column so mobile can control the exact flow:
     Paket -> Add-on -> Ringkasan -> Form */
  .main-column{display:contents}
  #packageSection{order:1}
  #addonSection{order:2}
  .summary-wrap{order:3;position:relative;top:auto;width:100%;}
  #formSection{order:4;display:none}
  #successCard{order:5}
  .mobile-continue{display:block}

  .summary-card{animation:mobileSummaryIn .55s cubic-bezier(.2,.75,.25,1) both}
  @keyframes mobileSummaryIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }

  body.mobile-form-open #formSection{display:block}
  body.mobile-form-open .mobile-continue{display:none}

  .site-header{position:sticky;top:0}
  .header-inner{height:64px}
  .brand img{width:142px;max-width:55vw}
  .page{padding-top:22px;padding-bottom:45px}
  .hero{gap:18px;margin-bottom:18px}
  .hero h1{font-size:29px}
  .hero p{font-size:13px;line-height:1.6}
  .progress{gap:6px}
  .progress i{min-width:18px;width:auto}
  .section-card{padding:18px;margin-bottom:0;border-radius:18px}
  .section-heading{gap:11px;margin-bottom:18px}
  .section-number{width:37px;height:37px;border-radius:11px}
  .section-heading h2{font-size:19px}
  .section-heading p{font-size:11px}

  .package-grid{grid-template-columns:1fr;gap:10px}
  .package-card{padding:16px;border-radius:16px}
  .package-card.best::before{right:10px;top:-9px;font-size:8px}
  .package-price{font-size:21px;margin:8px 0 11px}
  .package-features{grid-template-columns:1fr 1fr;gap:6px 12px;font-size:10.5px}
  .select-pill{margin-top:13px;padding:8px}

  .addon-grid{grid-template-columns:1fr;gap:9px}
  .addon-card{padding:13px;border-radius:14px}
  .addon-price{font-size:12px}

  .summary-card{padding:17px;border-radius:18px}
  .summary-head h2{font-size:19px}
  .summary-items{margin:15px 0 11px;gap:9px}
  .summary-total strong{font-size:21px}
  .summary-info{margin-top:13px}
  .summary-info p{font-size:10px}

  .form-grid{grid-template-columns:1fr;gap:12px}
  .full{grid-column:auto}
  .form-title{margin-bottom:13px}
  input,textarea,select{font-size:13px;min-height:45px}
  input::placeholder,textarea::placeholder{font-size:13px}
  textarea{min-height:95px}
  .domain-input em{font-size:9px}
  .submit-area{padding:17px;gap:14px}
  .submit-area .btn-large{min-height:48px}

  .conditional-block{padding:16px;border-radius:16px}
  .site-footer{padding:28px 0 35px}
}

@media (max-width: 390px){
  .container{width:calc(100% - 18px)}
  .hero h1{font-size:26px}
  .progress-step b{width:25px;height:25px;font-size:10px}
  .progress i{min-width:12px}
  .package-features{grid-template-columns:1fr}
  .domain-input em{padding:0 6px;font-size:8px}
}


/* ===== Revision: Quicksand + refined mobile form flow ===== */
html,body,button,input,textarea,select{font-family:"Quicksand",sans-serif}
.package-features{align-content:start}
.package-features li{line-height:1.45}
.mobile-edit-order{display:none;width:100%;margin-top:16px;min-height:46px}
.mobile-edit-order span{margin-right:6px}

@media (max-width:767px){
  body.mobile-form-open .hero,
  body.mobile-form-open #packageSection,
  body.mobile-form-open #addonSection{display:none!important}
  body.mobile-form-open .summary-wrap{order:1}
  body.mobile-form-open #formSection{order:2;display:block}
  body.mobile-form-open #successCard{order:3}
  body.mobile-form-open .mobile-edit-order{display:block}
  body.mobile-form-open .summary-card{animation:none}
  body.mobile-form-open .page{padding-top:16px}
  body.mobile-form-open .summary-wrap{scroll-margin-top:76px}
  .package-features{grid-template-columns:1fr;gap:7px;font-size:11px}
}

/* ===== Revision: attachments & additional event details ===== */
.file-field input[type="file"]{padding:8px;background:#fff;cursor:pointer}
.file-field input[type="file"]::file-selector-button{font-family:"Quicksand",sans-serif;border:0;border-radius:8px;background:var(--teal-soft);color:var(--teal);font-weight:700;padding:9px 12px;margin-right:10px;cursor:pointer}
.file-field small{display:block;margin-top:7px;color:var(--muted);font-size:10px;font-weight:500;line-height:1.5}

/* ===== Revision: visual theme selector ===== */
.theme-field{display:block}
.theme-field-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:13px}
.theme-field-head strong{display:block;font-size:12px;color:var(--text);font-weight:700}
.theme-field-head strong span{color:var(--pink)}
.theme-field-head small{display:block;margin-top:5px;color:var(--muted);font-size:10px;line-height:1.5;font-weight:500}
.theme-selected-text{flex:none;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:6px 10px;font-size:9px;font-weight:700}
.theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.theme-card{position:relative;display:block;cursor:pointer;border:1.5px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.theme-card:hover{transform:translateY(-2px);border-color:rgba(207,63,132,.35);box-shadow:0 10px 24px rgba(51,38,47,.08)}
.theme-card input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.theme-card:has(input:checked){border-color:var(--pink);box-shadow:0 0 0 3px rgba(207,63,132,.10)}
.theme-preview{position:relative;display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:18px 10px}
.theme-preview b,.theme-preview em,.theme-preview small{position:relative;z-index:2}
.theme-preview b{font-size:24px;line-height:1;font-weight:700}
.theme-preview em{margin:7px 0 5px;font-size:7px;letter-spacing:.18em;font-style:normal;font-weight:700}
.theme-preview small{font-size:7px;letter-spacing:.12em;font-weight:600}
.theme-preview-01{background:linear-gradient(145deg,#fff8fb,#f8e4ed);color:#9a456a}
.theme-preview-01::before,.theme-preview-01::after{content:"";position:absolute;width:75px;height:75px;border-radius:50%;background:radial-gradient(circle,rgba(207,63,132,.18),rgba(207,63,132,0) 68%)}
.theme-preview-01::before{left:-20px;top:-18px}.theme-preview-01::after{right:-25px;bottom:-25px}
.theme-flower{position:absolute;font-size:27px;color:rgba(168,82,118,.25);font-style:normal}.flower-a{left:13px;bottom:14px}.flower-b{right:13px;top:14px}
.theme-preview-02{background:#f7f2e8;color:#332d27}
.theme-preview-02::before{content:"";position:absolute;inset:10px;border:1px solid rgba(64,55,46,.24)}
.theme-preview-02 .theme-line{width:28px;height:1px;background:#72685e;margin-bottom:10px;position:relative;z-index:2}
.theme-preview-02 b{font-size:26px;font-weight:500;letter-spacing:.03em}
.theme-preview-03{background:linear-gradient(160deg,#eff5ed,#dce8d8);color:#36533c}
.theme-preview-03::before{content:"";position:absolute;width:86px;height:125px;border:1px solid rgba(54,83,60,.22);border-radius:50px 50px 8px 8px}
.theme-leaf{position:absolute;font-size:42px;color:rgba(62,101,68,.25);font-style:normal}.leaf-a{left:-4px;bottom:5px;transform:rotate(20deg)}.leaf-b{right:-4px;top:4px;transform:rotate(200deg)}
.theme-preview-04{background:linear-gradient(150deg,#17212b,#263747);color:#f1dfb8}
.theme-preview-04 .theme-arch{position:absolute;width:88px;height:120px;border:1px solid rgba(241,223,184,.45);border-radius:50px 50px 0 0}
.theme-preview-04 b{font-weight:500;letter-spacing:.07em}.theme-preview-04 small{color:#d9c89f}
.theme-preview-05{background:linear-gradient(155deg,#f7e1cf,#d99b79);color:#743f31}
.theme-preview-05 .theme-sun{position:absolute;width:65px;height:65px;border-radius:50%;background:rgba(255,239,215,.48);top:20px;right:22px}
.theme-preview-05::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-36px;height:78px;border-radius:50%;background:rgba(150,74,54,.13);transform:rotate(-4deg)}
.theme-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-top:1px solid var(--line)}
.theme-meta>span{min-width:0}.theme-meta b{display:block;font-size:10.5px;color:var(--text);font-weight:700}.theme-meta small{display:block;margin-top:2px;font-size:8.5px;color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-meta>i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#f6f4f5;color:transparent;font-size:10px;font-style:normal;font-weight:800;transition:.2s ease}
.theme-card:has(input:checked) .theme-meta>i{background:var(--pink);color:#fff}
.theme-card:has(input:focus-visible){outline:3px solid rgba(18,169,179,.25);outline-offset:2px}
@media(max-width:900px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.theme-field-head{align-items:flex-start}.theme-grid{grid-template-columns:1fr 1fr;gap:9px}.theme-preview{min-height:130px}.theme-preview b{font-size:21px}.theme-meta{padding:9px 10px}.theme-meta b{font-size:9.5px}.theme-meta small{font-size:7.8px}}
@media(max-width:390px){.theme-grid{grid-template-columns:1fr}.theme-preview{min-height:145px}}

/* Theme demo preview */
.theme-demo-btn{width:calc(100% - 20px);margin:0 10px 10px;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:9px;font-weight:700;cursor:pointer;transition:.2s ease}
.theme-demo-btn:hover{border-color:var(--pink);color:var(--pink);background:#fff8fb}
.theme-demo-modal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:18px}
.theme-demo-modal.is-open{display:grid}
.theme-demo-backdrop{position:absolute;inset:0;background:rgba(25,20,24,.62);backdrop-filter:blur(5px)}
.theme-demo-dialog{position:relative;z-index:1;width:min(520px,100%);max-height:92vh;overflow:auto;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:16px}
.theme-demo-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.theme-demo-head small{display:block;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.theme-demo-head h3{margin:3px 0 0;font-size:17px}
.theme-demo-close{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;font-family:inherit;font-size:22px;line-height:1;cursor:pointer;color:var(--text)}
.theme-demo-stage{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fafafa}
.theme-demo-stage .theme-preview{min-height:430px}
.theme-demo-stage .theme-preview b{font-size:46px}
.theme-demo-stage .theme-preview em{font-size:10px}.theme-demo-stage .theme-preview small{font-size:9px}
.theme-demo-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
body.theme-demo-open{overflow:hidden}
@media(max-width:560px){.theme-demo-modal{padding:10px}.theme-demo-dialog{border-radius:18px;padding:12px}.theme-demo-stage .theme-preview{min-height:58vh}.theme-demo-stage .theme-preview b{font-size:38px}.theme-demo-actions .btn{flex:1}}


/* ===== Revision: unified desktop + mobile order flow ===== */
.layout{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  align-items:start;
}
.main-column{display:contents}
#packageSection{order:1}
#addonSection{order:2}
.summary-wrap{order:3;position:relative;top:auto;width:100%}
#formSection{order:4;display:none}
#successCard{order:5}
.mobile-continue{display:block}

body.mobile-form-open .hero,
body.mobile-form-open #packageSection,
body.mobile-form-open #addonSection{display:none!important}
body.mobile-form-open .summary-wrap{order:1}
body.mobile-form-open #formSection{order:2;display:block}
body.mobile-form-open #successCard{order:3}
body.mobile-form-open .mobile-continue{display:none}
body.mobile-form-open .mobile-edit-order{display:block}
body.mobile-form-open .summary-wrap{scroll-margin-top:100px}

/* Keep the desktop version spacious while preserving the same sequence as mobile. */
@media (min-width:768px){
  .layout{max-width:980px;margin:0 auto}
  .summary-card{padding:24px 28px}
  .summary-items{grid-template-columns:1fr}
  body.mobile-form-open #formSection{display:block}
}

/* ===== Revision: portrait theme thumbnails for mobile screenshots ===== */
.theme-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
.theme-preview{
  width:100%;
  aspect-ratio:9 / 16;
  min-height:0;
  padding:18px 10px;
}
.theme-demo-stage{max-width:360px;margin:0 auto}
.theme-demo-stage .theme-preview{
  width:100%;
  aspect-ratio:9 / 16;
  min-height:0;
}
@media(max-width:1050px){.theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .theme-preview{aspect-ratio:9 / 16;min-height:0}
}
@media(max-width:390px){
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-preview{aspect-ratio:9 / 16;min-height:0}
}


/* ===== Revision: consistent mobile field text + theme pagination ===== */
input::placeholder,textarea::placeholder{font-family:"Quicksand",sans-serif;font-size:13px;color:#9b959c;opacity:1}
.theme-card.theme-page-hidden{display:none}
.theme-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.theme-page-info{font-size:10px;color:var(--muted);font-weight:600}
.theme-page-controls{display:flex;align-items:center;gap:6px}
.theme-page-numbers{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}
.theme-page-nav,.theme-page-number{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font-family:"Quicksand",sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:.18s ease}
.theme-page-nav{font-size:19px;line-height:1}
.theme-page-nav:hover:not(:disabled),.theme-page-number:hover{border-color:var(--pink);color:var(--pink);background:#fff8fb}
.theme-page-number.is-active{border-color:var(--pink);background:var(--pink);color:#fff;box-shadow:0 5px 12px rgba(207,63,132,.18)}
.theme-page-nav:disabled{opacity:.38;cursor:not-allowed}
.theme-page-ellipsis{min-width:22px;text-align:center;color:var(--muted);font-size:11px;font-weight:700}
@media(max-width:640px){
  .theme-pagination{align-items:stretch;flex-direction:column;gap:10px}
  .theme-page-info{text-align:center;font-size:10px}
  .theme-page-controls{justify-content:center}
  .theme-page-nav,.theme-page-number{min-width:32px;height:32px;padding:0 8px}
}


/* ===== Fix: form reveal state after unified order flow ===== */
body.mobile-form-open #formSection.reveal{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* ===== Revision 8: cleaner mobile heading + up to 3 digital gifts ===== */
.gift-manager-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.gift-manager-head>div{min-width:0}
.gift-manager-head>div>p{margin:4px 0 0;color:var(--muted);font-size:11px}
.gift-count{flex:0 0 auto;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);font-size:10px;font-weight:900;padding:6px 9px}
.gift-list{display:grid;gap:14px;margin-top:17px}
.gift-item{padding:16px;border:1px solid rgba(18,169,179,.16);border-radius:15px;background:rgba(255,255,255,.82)}
.gift-item-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.gift-item-head strong{font-size:13px;color:var(--ink)}
.gift-remove{border:0;background:transparent;color:var(--pink-dark);font-family:"Quicksand",sans-serif;font-size:10px;font-weight:800;padding:4px 0;cursor:pointer}
.gift-add-btn{margin-top:14px;width:100%;min-height:44px;border-style:dashed;color:var(--teal-dark)}
.gift-limit-note{display:block;margin-top:7px;text-align:center;color:var(--muted);font-size:9.5px}
.gift-add-btn[hidden]{display:none!important}

@media (max-width:767px){
  .hero{width:100%;gap:16px}
  .hero>div:first-child{width:100%;max-width:none}
  .hero .eyebrow{font-size:10px;line-height:1.3;letter-spacing:.14em;margin-bottom:8px}
  .hero h1{font-size:28px;line-height:1.18;letter-spacing:-.025em;margin:0 0 10px;max-width:100%;text-wrap:balance}
  .hero p{font-size:13px;line-height:1.7;max-width:100%;margin:0;text-align:left;text-wrap:pretty}
  .progress{margin-top:4px;gap:8px}
  .progress-step{flex:0 0 auto}
  .progress i{min-width:0;flex:1}
  .section-heading{align-items:flex-start;gap:12px}
  .section-heading>div:last-child{min-width:0;flex:1}
  .section-heading h2{font-size:19px;line-height:1.25;margin:1px 0 5px;letter-spacing:-.015em;text-wrap:balance}
  .section-heading p{font-size:11.5px;line-height:1.65;max-width:100%;text-align:left;text-wrap:pretty}
  .gift-manager-head{gap:10px}
  .gift-item{padding:14px}
  .gift-type-row .choice{flex:1;min-width:0;padding:9px 8px}
}

@media (max-width:390px){
  .hero h1{font-size:25px}
  .hero p{font-size:12.5px}
  .section-heading{gap:10px}
  .section-number{width:36px;height:36px}
  .section-heading h2{font-size:18px}
}


/* SweetAlert2 — Sakiinah */
.sakiinah-swal {
  font-family: "Quicksand", sans-serif !important;
  border-radius: 24px !important;
  padding: 24px !important;
}
.sakiinah-swal-title,
.sakiinah-swal-text,
.sakiinah-swal-button {
  font-family: "Quicksand", sans-serif !important;
}
.sakiinah-swal-title {
  color: #302d31 !important;
  font-weight: 700 !important;
}
.sakiinah-swal-text {
  color: #777177 !important;
}
.sakiinah-swal-button {
  border-radius: 999px !important;
  padding: 11px 24px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}


/* Revision 13: alert navigation target */
#packageSection{scroll-margin-top:96px}
@media(max-width:767px){#packageSection{scroll-margin-top:76px}}


/* Revision 17: mobile hero spacing */
@media (max-width:767px){
  .hero.reveal.reveal-down.revealed{
    padding:10px;
  }
}


/* Revision 18: keep progress visible until data is submitted */
body.mobile-form-open .hero{
  display:flex !important;
  padding-top:10px;
  padding-bottom:10px;
}
body.mobile-form-open .hero > div:first-child{
  display:none !important;
}
body.mobile-form-open .hero .progress{
  display:flex !important;
  width:100%;
  margin-top:0;
}

/* After successful submit, the progress is no longer needed. */
body.order-submitted .hero{
  display:none !important;
}


/* Revision 20: autosave, photo preview, review step */
.draft-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-4px 0 18px;
  padding:10px 12px;
  border:1px solid rgba(18,169,179,.16);
  border-radius:12px;
  background:rgba(18,169,179,.055);
  color:var(--muted);
  font-size:10.5px;
  font-weight:700;
}
.draft-status-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 4px rgba(18,169,179,.10);
}
.draft-status.is-saving .draft-status-dot{
  animation:draftPulse .8s ease-in-out infinite alternate;
}
@keyframes draftPulse{to{opacity:.35;transform:scale(.82)}}

.photo-preview{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:11px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.photo-preview[hidden]{display:none!important}
.photo-preview img{
  width:64px;
  height:80px;
  object-fit:cover;
  border-radius:10px;
  background:#f6f4f6;
}
.photo-preview-info{
  min-width:0;
  display:grid;
  gap:3px;
}
.photo-preview-info strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--ink);
}
.photo-preview-info span{
  font-size:9.5px;
  color:var(--muted);
}
.photo-remove{
  border:0;
  background:transparent;
  color:var(--pink-dark);
  font-family:"Quicksand",sans-serif;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.review-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.review-modal.is-open{display:flex}
.review-backdrop{
  position:absolute;
  inset:0;
  background:rgba(31,25,30,.55);
  backdrop-filter:blur(5px);
}
.review-dialog{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(88vh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 80px rgba(34,26,33,.22);
}
.review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 24px 18px;
  border-bottom:1px solid var(--line);
}
.review-head h2{
  margin:4px 0 5px;
  font-size:24px;
}
.review-head p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.review-close{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--text);
  font:700 22px/1 "Quicksand",sans-serif;
  cursor:pointer;
}
.review-content{
  overflow:auto;
  padding:20px 24px;
}
.review-section{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.review-section:first-child{padding-top:0}
.review-section:last-child{border-bottom:0}
.review-section h3{
  margin:0 0 11px;
  font-size:14px;
  color:var(--ink);
}
.review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
}
.review-row{
  display:grid;
  gap:2px;
}
.review-row.full{grid-column:1/-1}
.review-label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.review-value{
  overflow-wrap:anywhere;
  font-size:11.5px;
  font-weight:650;
  color:var(--ink);
}
.review-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--pink-soft);
}
.review-total span{font-size:11px;font-weight:700}
.review-total strong{font-size:17px;color:var(--pink-dark)}
.review-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px 22px;
  border-top:1px solid var(--line);
  background:#fff;
}
body.review-open{overflow:hidden}

@media(max-width:640px){
  .photo-preview{
    grid-template-columns:58px minmax(0,1fr);
  }
  .photo-preview img{width:58px;height:72px}
  .photo-remove{
    grid-column:2;
    justify-self:start;
    padding:0;
  }
  .review-modal{padding:8px}
  .review-dialog{
    max-height:92vh;
    border-radius:18px;
  }
  .review-head{padding:18px 16px 14px}
  .review-head h2{font-size:20px}
  .review-content{padding:16px}
  .review-grid{grid-template-columns:1fr;gap:9px}
  .review-row.full{grid-column:auto}
  .review-actions{
    padding:12px 16px 16px;
    flex-direction:column-reverse;
  }
  .review-actions .btn-outline,
  .review-actions .btn-primary{width:100%}
}


/* Revision 22: polished validation + submit state */
.field-error{
  display:block;
  margin-top:6px;
  color:#c93667;
  font-size:10px;
  font-weight:700;
  line-height:1.45;
}
input.is-invalid,select.is-invalid,textarea.is-invalid{
  border-color:#df5a83 !important;
  box-shadow:0 0 0 3px rgba(223,90,131,.10) !important;
  background:#fffafb !important;
}
input.is-valid,select.is-valid,textarea.is-valid{
  border-color:rgba(18,169,179,.38);
}
.btn-primary.is-sending{
  pointer-events:none;
  opacity:.72;
  cursor:wait;
}
.btn-primary.is-sending span{display:none}
.btn-primary.is-sending::after{
  content:"";
  width:14px;
  height:14px;
  margin-left:8px;
  display:inline-block;
  vertical-align:-2px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:sakiinahSpin .65s linear infinite;
}
@keyframes sakiinahSpin{to{transform:rotate(360deg)}}


/* Revision 23: optional attachment label */
.optional-label{
  color:var(--muted) !important;
  font-size:10px;
  font-weight:700;
}

.success-order-number{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:8px 0 20px;
  padding:10px 14px;
  border-radius:999px;
  background:var(--teal-soft);
  color:var(--teal-dark);
  font-size:11px;
  font-weight:700;
}
.success-order-number strong{font-size:12px;letter-spacing:.03em}


/* v4 database theme thumbnails */
.theme-preview.has-image{padding:0;background:#f4f1f3;overflow:hidden}
.theme-preview.has-image img{width:100%;height:100%;display:block;object-fit:cover}
.theme-empty{grid-column:1/-1;padding:28px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:11px}


/* =========================================================
   v6.4 — WhatsApp summary after successful order
   ========================================================= */
.success-next-step{
  width:min(520px,100%);
  margin:4px auto 18px;
  padding:13px 14px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  text-align:left;
  border:1px solid rgba(18,169,179,.18);
  border-radius:13px;
  background:rgba(18,169,179,.055);
}
.success-next-icon{
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.success-next-step strong{
  display:block;
  margin-bottom:3px;
  color:var(--ink);
}
.success-next-step p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:1.55;
}
.success-actions{
  width:min(520px,100%);
  margin:0 auto;
  display:grid;
  gap:9px;
}
.whatsapp-summary-btn{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
}
.whatsapp-mark{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.20);
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.02em;
}
.whatsapp-unavailable{
  width:min(520px,100%);
  margin:12px auto 0;
  padding:10px 12px;
  border-radius:10px;
  background:#fff7ef;
  color:#9a6a2a;
  font-size:10px;
  line-height:1.55;
}


/* =========================================================
   v6.6 — Frontend Dark Mode
   ========================================================= */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.theme-toggle{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  position:relative;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--white);
  color:var(--ink);
  transition:.18s ease;
}
.theme-toggle:hover{
  border-color:rgba(231,85,154,.28);
  background:var(--pink-soft);
}
.theme-toggle-sun,
.theme-toggle-moon{
  position:absolute;
  transition:.18s ease;
}
.theme-toggle-sun{opacity:0;transform:scale(.7) rotate(-25deg)}
.theme-toggle-moon{opacity:1;transform:scale(1)}
html[data-theme="dark"] .theme-toggle-sun{opacity:1;transform:scale(1) rotate(0)}
html[data-theme="dark"] .theme-toggle-moon{opacity:0;transform:scale(.7) rotate(25deg)}

html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f3edf1;
  --muted:#b9aeb6;
  --line:#3a3037;
  --bg:#171216;
  --white:#211a1f;
  --pink-soft:#3b1f2d;
  --teal-soft:#173337;
  --shadow:0 18px 50px rgba(0,0,0,.24);
}
html[data-theme="dark"] body{
  background:linear-gradient(180deg,#130f12 0%,#171216 65%,#130f12 100%);
}
html[data-theme="dark"] .site-header{
  background:rgba(25,19,23,.90);
  border-bottom-color:#362c33;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .package-card,
html[data-theme="dark"] .addon-card,
html[data-theme="dark"] .conditional-block,
html[data-theme="dark"] .review-dialog,
html[data-theme="dark"] .theme-demo-dialog,
html[data-theme="dark"] .photo-preview,
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .theme-card{
  background:#211a1f;
  border-color:#3a3037;
  color:var(--ink);
}
html[data-theme="dark"] .package-card.selected{
  background:linear-gradient(180deg,#241b21,#30202a);
}
html[data-theme="dark"] .select-pill,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .theme-toggle{
  background:#181216;
  color:var(--ink);
  border-color:#443740;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#877b83;
}
html[data-theme="dark"] .package-features,
html[data-theme="dark"] .summary-info p,
html[data-theme="dark"] .form-title p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] small,
html[data-theme="dark"] .review-value,
html[data-theme="dark"] .theme-meta small{
  color:var(--muted);
}
html[data-theme="dark"] .summary-item,
html[data-theme="dark"] .summary-total,
html[data-theme="dark"] .review-row,
html[data-theme="dark"] .theme-demo-head,
html[data-theme="dark"] .theme-demo-actions{
  border-color:#3a3037;
}
html[data-theme="dark"] .summary-info,
html[data-theme="dark"] .draft-status,
html[data-theme="dark"] .success-next-step{
  background:#18252a;
}
html[data-theme="dark"] .parallax-orb{
  opacity:.22;
}
html[data-theme="dark"] .theme-demo-backdrop,
html[data-theme="dark"] .review-backdrop{
  background:rgba(0,0,0,.74);
}
@media(max-width:680px){
  .header-actions{gap:7px}
  .header-note{display:none}
  .theme-toggle{width:38px;height:38px}
}


/* =========================================================
   v6.6 hotfix — Dark mode form labels
   ========================================================= */
html[data-theme="dark"] .form-grid label,
html[data-theme="dark"] .form-grid > label,
html[data-theme="dark"] .form-block label,
html[data-theme="dark"] .conditional-block label,
html[data-theme="dark"] .gift-fields label,
html[data-theme="dark"] .theme-field label{
  color:var(--ink) !important;
}

html[data-theme="dark"] .form-grid label > span:not(.optional-label),
html[data-theme="dark"] .form-block label > span:not(.optional-label){
  color:var(--pink) !important;
}

html[data-theme="dark"] .optional-label,
html[data-theme="dark"] .file-field small,
html[data-theme="dark"] label small{
  color:var(--muted) !important;
}


/* =========================================================
   v6.6 hotfix 2 — Dark mode summary + theme visibility
   ========================================================= */

/* Ringkasan total pesanan */
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .order-summary{
  color:var(--ink) !important;
}
html[data-theme="dark"] .summary-card *,
html[data-theme="dark"] .summary-box *,
html[data-theme="dark"] .order-summary *{
  border-color:#443740;
}
html[data-theme="dark"] .summary-card .summary-label,
html[data-theme="dark"] .summary-card .summary-name,
html[data-theme="dark"] .summary-card .summary-item,
html[data-theme="dark"] .summary-card .summary-item span,
html[data-theme="dark"] .summary-card .summary-item strong,
html[data-theme="dark"] .summary-card .summary-price,
html[data-theme="dark"] .summary-box .summary-label,
html[data-theme="dark"] .summary-box .summary-name,
html[data-theme="dark"] .summary-box .summary-item,
html[data-theme="dark"] .summary-box .summary-item span,
html[data-theme="dark"] .summary-box .summary-item strong{
  color:#f3edf1 !important;
}

/* Pilihan tema */
html[data-theme="dark"] .theme-card{
  color:var(--ink) !important;
}
html[data-theme="dark"] .theme-card .theme-name,
html[data-theme="dark"] .theme-card .theme-title,
html[data-theme="dark"] .theme-card strong{
  color:#f18ab8 !important;
}
html[data-theme="dark"] .theme-card .theme-description,
html[data-theme="dark"] .theme-card .theme-meta,
html[data-theme="dark"] .theme-card .theme-meta small,
html[data-theme="dark"] .theme-card p{
  color:#d0c4cc !important;
}

/* Tombol demo sebelumnya putih di atas background putih */
html[data-theme="dark"] .theme-card .demo-btn,
html[data-theme="dark"] .theme-card .btn-demo,
html[data-theme="dark"] .theme-card .theme-demo-btn,
html[data-theme="dark"] .theme-card button:not(.theme-select),
html[data-theme="dark"] .theme-card a.btn-outline{
  background:#2a2026 !important;
  color:#f3edf1 !important;
  border-color:#51414a !important;
}
html[data-theme="dark"] .theme-card .demo-btn:hover,
html[data-theme="dark"] .theme-card .btn-demo:hover,
html[data-theme="dark"] .theme-card .theme-demo-btn:hover,
html[data-theme="dark"] .theme-card a.btn-outline:hover{
  background:#3a1f2d !important;
  color:#f18ab8 !important;
  border-color:#63334a !important;
}

/* Radio/select circle tetap terlihat */
html[data-theme="dark"] .theme-card .select-pill,
html[data-theme="dark"] .theme-card .theme-radio{
  background:#181216 !important;
  border-color:#66535e !important;
}


/* =========================================================
   v6.6 hotfix 3 — Dark mode sub-block / Orangtua
   ========================================================= */
html[data-theme="dark"] .sub-block{
  background:#1b1519 !important;
  border-color:#443740 !important;
}

html[data-theme="dark"] .sub-block h4{
  color:#f3edf1 !important;
}

html[data-theme="dark"] .sub-block .form-grid label{
  color:#f3edf1 !important;
}

html[data-theme="dark"] .sub-block .form-grid label > span{
  color:var(--pink) !important;
}

html[data-theme="dark"] .sub-block input{
  background:#171216 !important;
  color:#f3edf1 !important;
  border-color:#54434d !important;
}

html[data-theme="dark"] .sub-block input::placeholder{
  color:#877b83 !important;
}