/* ══════════════════════════════════════════════════════════════════
   Lucky Crystal Bracelet Analyzer — AstroPrasun.com
   Aesthetic: Warm Cream · Vedic Maroon · Gold Accents (Light Theme)
   ══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ── */
#lca-wrapper{--cream:#FDF6EC;--cream-deep:#F5EAD8;--cream-border:#E8D5B7;--parchment:#F0E2C8;--maroon:#8B1A1A;--maroon-deep:#6B1313;--maroon-light:#A52020;--gold:#C8920A;--gold-light:#E8B030;--gold-pale:#F5D98A;--gold-bg:#FEF8E7;--text-dark:#2C1810;--text-body:#4A3020;--text-muted:#7A5C40;--text-dim:#B09070;--white:#FFFFFF;--shadow-sm:0 2px 12px rgba(139,26,26,0.08);--shadow-md:0 6px 28px rgba(139,26,26,0.12);--shadow-lg:0 12px 48px rgba(139,26,26,0.16);--radius:14px;--radius-sm:9px}

/* ── Reset scoped to wrapper ── */
#lca-wrapper,#lca-wrapper *{box-sizing:border-box !important}
#lca-wrapper *{text-align:inherit}

/* ── Wrapper itself ── */
#lca-wrapper{
  display:block !important;
  font-family:'Inter',sans-serif !important;
  background:var(--white) !important;
  color:var(--text-body) !important;
  border:1px solid var(--cream-border) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow-lg) !important;
  width:100% !important;
  max-width:860px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
}

/* ══ HERO / FORM ══ */
#lca-wrapper #lca-hero{
  background:linear-gradient(160deg,var(--cream-deep) 0%,var(--parchment) 50%,var(--cream-deep) 100%) !important;
  border-bottom:2px solid var(--cream-border) !important;
  padding:52px 40px 60px !important;
  text-align:center !important;
  position:relative !important;
  overflow:hidden !important;
  width:100% !important;
}
#lca-wrapper #lca-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 15% 20%,rgba(200,146,10,0.08) 0%,transparent 40%),radial-gradient(circle at 85% 80%,rgba(139,26,26,0.06) 0%,transparent 40%);pointer-events:none}
#lca-wrapper #lca-hero::after{content:'✦ ✦ ✦';position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:10px;color:var(--gold);opacity:0.5}

#lca-wrapper .lca-hero-inner{
  position:relative !important;
  z-index:1 !important;
  max-width:600px !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  display:block !important;
}

#lca-wrapper .lca-icon{display:inline-block !important;margin-bottom:20px !important;font-size:48px !important;line-height:1 !important;filter:drop-shadow(0 2px 8px rgba(200,146,10,0.3));animation:lcaIconFloat 3.5s ease-in-out infinite}
@keyframes lcaIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

#lca-wrapper .lca-title{font-family:'Cinzel',serif !important;font-size:clamp(22px,4.5vw,36px) !important;font-weight:700 !important;color:var(--maroon) !important;line-height:1.2 !important;margin:0 0 14px !important;letter-spacing:0.5px !important;text-align:center !important;display:block !important}

#lca-wrapper .lca-subtitle{font-family:'Lora',serif !important;font-size:clamp(13px,2vw,16px) !important;color:var(--text-muted) !important;line-height:1.7 !important;margin:0 0 42px !important;text-align:center !important;display:block !important}

/* ── Form ── */
#lca-wrapper #lca-form{
  text-align:left !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
}

#lca-wrapper .lca-fields{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:20px !important;
  margin:0 0 20px !important;
  padding:0 !important;
  width:100% !important;
}

#lca-wrapper .lca-field-full{grid-column:1 / -1 !important}

#lca-wrapper .lca-field-group{display:flex !important;flex-direction:column !important;gap:7px !important;width:100% !important}
#lca-wrapper .lca-field-group label{font-size:13px !important;font-weight:600 !important;color:var(--text-dark) !important;letter-spacing:0.3px !important;text-align:left !important;display:block !important;margin:0 !important}
#lca-wrapper .lca-field-group label .req{color:var(--maroon) !important}
#lca-wrapper .lca-field-group input,
#lca-wrapper .lca-field-group select{
  width:100% !important;
  background:var(--white) !important;
  border:1.5px solid var(--cream-border) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--text-dark) !important;
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;
  padding:13px 16px !important;
  outline:none !important;
  transition:border-color 0.2s,box-shadow 0.2s !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  display:block !important;
  margin:0 !important;
  box-shadow:none !important;
}
#lca-wrapper .lca-field-group input::placeholder{color:var(--text-dim) !important}
#lca-wrapper .lca-field-group input:focus,
#lca-wrapper .lca-field-group select:focus{border-color:var(--maroon) !important;box-shadow:0 0 0 3px rgba(139,26,26,0.08) !important}
#lca-wrapper .lca-field-group select{
  cursor:pointer !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A5C40' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 16px center !important;
  padding-right:40px !important;
}

/* ── Info box ── */
#lca-wrapper .lca-info-box{background:var(--gold-bg) !important;border:1px solid var(--gold-pale) !important;border-radius:var(--radius-sm) !important;padding:13px 16px !important;font-size:13px !important;color:var(--text-body) !important;line-height:1.6 !important;display:flex !important;gap:10px !important;align-items:flex-start !important;text-align:left !important}
#lca-wrapper .lca-info-box .info-icon{background:var(--gold) !important;color:white !important;width:20px !important;height:20px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:11px !important;font-weight:700 !important;flex-shrink:0 !important;margin-top:1px !important}

/* ── Buttons ── */
#lca-wrapper .lca-btn-row{display:flex !important;flex-direction:column !important;gap:10px !important;margin:28px 0 0 !important;padding:0 !important;width:100% !important}

#lca-wrapper #lca-submit-btn{
  width:100% !important;padding:16px 28px !important;
  background:linear-gradient(135deg,var(--maroon-deep),var(--maroon),var(--maroon-light)) !important;
  border:none !important;border-radius:var(--radius-sm) !important;color:#fff !important;
  font-family:'Cinzel',serif !important;font-size:14px !important;font-weight:700 !important;
  letter-spacing:1.5px !important;text-transform:uppercase !important;cursor:pointer !important;
  transition:transform 0.18s,box-shadow 0.18s,opacity 0.18s !important;
  box-shadow:0 4px 20px rgba(139,26,26,0.35) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  margin:0 !important;
}
#lca-wrapper #lca-submit-btn:hover{transform:translateY(-2px) !important;box-shadow:0 8px 28px rgba(139,26,26,0.4) !important}
#lca-wrapper #lca-submit-btn:active{transform:translateY(0) !important}
#lca-wrapper #lca-submit-btn:disabled{opacity:0.65 !important;cursor:default !important;transform:none !important}

#lca-wrapper #lca-reset-btn{
  width:100% !important;padding:13px 28px !important;
  background:transparent !important;border:1.5px solid var(--cream-border) !important;
  border-radius:var(--radius-sm) !important;color:var(--text-muted) !important;
  font-family:'Inter',sans-serif !important;font-size:13px !important;font-weight:500 !important;
  letter-spacing:1px !important;text-transform:uppercase !important;cursor:pointer !important;
  transition:border-color 0.18s,color 0.18s !important;
  margin:0 !important;
}
#lca-wrapper #lca-reset-btn:hover{border-color:var(--maroon) !important;color:var(--maroon) !important}

#lca-wrapper .btn-loader{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important}
#lca-wrapper .spinner{width:18px !important;height:18px !important;border:2.5px solid rgba(255,255,255,0.3) !important;border-top-color:#fff !important;border-radius:50% !important;animation:lcaSpin 0.8s linear infinite !important}
@keyframes lcaSpin{to{transform:rotate(360deg)}}

#lca-wrapper .lca-error{margin-top:12px !important;background:#FFF0F0 !important;border:1px solid #FFCCCC !important;border-radius:8px !important;padding:10px 14px !important;color:#B00020 !important;font-size:13px !important;text-align:center !important}

/* ══ RESULTS ══ */
#lca-wrapper #lca-results{background:var(--cream) !important;width:100% !important;display:block !important}

#lca-wrapper .lca-section{
  padding:52px 40px !important;
  width:100% !important;
  display:block !important;
  text-align:center !important;
}
#lca-wrapper .lca-section:not(:last-child){border-bottom:1px solid var(--cream-border) !important}

/* Section headers */
#lca-wrapper .lca-section-header{text-align:center !important;margin:0 auto 40px !important;width:100% !important;display:block !important}
#lca-wrapper .section-icon{font-size:32px !important;display:block !important;margin:0 auto 12px !important;text-align:center !important;animation:lcaSectionPop 0.5s ease both}
@keyframes lcaSectionPop{from{transform:scale(0.6);opacity:0}to{transform:scale(1);opacity:1}}
#lca-wrapper .lca-section-header h2{font-family:'Cinzel',serif !important;font-size:clamp(20px,3.5vw,28px) !important;font-weight:700 !important;color:var(--maroon) !important;margin:0 0 10px !important;text-align:center !important}
#lca-wrapper .lca-section-header p{font-family:'Lora',serif !important;font-size:15px !important;color:var(--text-muted) !important;font-style:italic !important;text-align:center !important;margin:0 !important}

/* Name chip */
#lca-wrapper .lca-name-chip{display:inline-block !important;background:var(--gold-bg) !important;border:1px solid var(--gold-pale) !important;border-radius:6px !important;padding:3px 12px !important;font-weight:600 !important;color:var(--gold) !important;font-size:13px !important;margin:0 0 24px !important;font-family:'Cinzel',serif !important;letter-spacing:0.5px !important}

/* Numerology number cards */
#lca-wrapper .lca-num-cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  margin:0 auto 36px !important;
  padding:0 !important;
  width:100% !important;
  max-width:700px !important;
}
#lca-wrapper .lca-num-card{background:var(--white) !important;border:1.5px solid var(--cream-border) !important;border-radius:var(--radius) !important;padding:28px 16px 24px !important;text-align:center !important;box-shadow:var(--shadow-sm) !important;transition:transform 0.2s,box-shadow 0.2s !important;animation:lcaCardUp 0.5s ease both;width:100% !important}
@keyframes lcaCardUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
#lca-wrapper .lca-num-card:hover{transform:translateY(-4px) !important;box-shadow:var(--shadow-md) !important}
#lca-wrapper .num-value{font-family:'Cinzel',serif !important;font-size:52px !important;font-weight:700 !important;color:var(--maroon) !important;line-height:1 !important;display:block !important;margin:0 0 8px !important}
#lca-wrapper .num-label{font-size:10px !important;letter-spacing:2px !important;text-transform:uppercase !important;color:var(--text-muted) !important;font-weight:600 !important;display:block !important}
#lca-wrapper .num-desc{margin:10px 0 0 !important;font-size:13px !important;color:var(--text-muted) !important;font-family:'Lora',serif !important;font-style:italic !important;line-height:1.5 !important}

/* Lo Shu Grid */
#lca-wrapper .lca-loshu-wrap{
  background:var(--white) !important;border:1.5px solid var(--cream-border) !important;
  border-radius:var(--radius) !important;padding:28px 24px !important;
  text-align:center !important;box-shadow:var(--shadow-sm) !important;
  max-width:700px !important;margin:0 auto !important;width:100% !important;
  display:block !important;
}
#lca-wrapper .lca-loshu-title{font-family:'Cinzel',serif !important;font-size:14px !important;font-weight:600 !important;color:var(--maroon) !important;letter-spacing:1.5px !important;margin:0 0 22px !important;text-transform:uppercase !important;text-align:center !important;display:block !important}
#lca-wrapper .lca-loshu-grid{
  display:grid !important;
  grid-template-columns:repeat(3,80px) !important;
  gap:8px !important;
  margin:0 auto 20px !important;
  width:fit-content !important;
  justify-content:center !important;
}
#lca-wrapper .lo-cell{width:80px !important;height:80px !important;border-radius:10px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important;font-family:'Cinzel',serif !important;transition:transform 0.2s !important;cursor:default !important}
#lca-wrapper .lo-cell:hover{transform:scale(1.06) !important}
#lca-wrapper .lo-cell .lo-num{font-size:20px !important;font-weight:700 !important;line-height:1 !important;display:block !important}
#lca-wrapper .lo-cell .lo-count{font-size:9px !important;letter-spacing:1px !important;opacity:0.75 !important;text-transform:uppercase !important;display:block !important}
#lca-wrapper .lo-cell.present{background:var(--gold-bg) !important;border:1.5px solid var(--gold-pale) !important;color:var(--gold) !important}
#lca-wrapper .lo-cell.missing{background:#FFF5F5 !important;border:1.5px solid #FFCCCC !important;color:#CC4444 !important}
#lca-wrapper .lo-cell.strong{background:#F0FFF4 !important;border:1.5px solid #B8E8C4 !important;color:#2D7A47 !important}
#lca-wrapper .lca-loshu-legend{display:flex !important;justify-content:center !important;gap:20px !important;font-size:11px !important;color:var(--text-muted) !important;flex-wrap:wrap !important;font-weight:500 !important;margin:0 !important}
#lca-wrapper .legend-present::before{content:'■ ';color:var(--gold)}
#lca-wrapper .legend-missing::before{content:'■ ';color:#CC4444}
#lca-wrapper .legend-excess::before{content:'■ ';color:#2D7A47}

/* Crystal Cards */
#lca-wrapper .lca-crystals-section{background:var(--white) !important}
#lca-wrapper .lca-crystal-cards{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;
  gap:20px !important;
  margin:0 auto !important;
  width:100% !important;
  padding:0 !important;
}
#lca-wrapper .lca-crystal-card{background:var(--cream) !important;border:1.5px solid var(--cream-border) !important;border-radius:var(--radius) !important;overflow:hidden !important;box-shadow:var(--shadow-sm) !important;transition:transform 0.22s,box-shadow 0.22s !important;animation:lcaCardUp 0.5s ease both;display:block !important}
#lca-wrapper .lca-crystal-card:hover{transform:translateY(-5px) !important;box-shadow:var(--shadow-md) !important}
#lca-wrapper .crystal-card-top{height:110px !important;display:flex !important;align-items:center !important;justify-content:center !important;position:relative !important;width:100% !important}
#lca-wrapper .crystal-emoji{font-size:48px !important;position:relative !important;z-index:1 !important;animation:lcaFloatEmoji 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.12))}
@keyframes lcaFloatEmoji{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#lca-wrapper .crystal-card-badge{position:absolute !important;top:10px !important;left:10px !important;font-size:9px !important;letter-spacing:1px !important;text-transform:uppercase !important;font-weight:700 !important;color:#fff !important;background:var(--maroon) !important;padding:4px 10px !important;border-radius:20px !important;z-index:2 !important}
#lca-wrapper .crystal-card-body{padding:20px 18px !important;text-align:left !important}
#lca-wrapper .crystal-name{font-family:'Cinzel',serif !important;font-size:17px !important;font-weight:600 !important;color:var(--text-dark) !important;margin:0 0 8px !important;display:block !important}
#lca-wrapper .crystal-meaning{font-family:'Lora',serif !important;font-size:13px !important;color:var(--text-muted) !important;line-height:1.6 !important;margin:0 0 14px !important;font-style:italic !important}
#lca-wrapper .crystal-meta{display:flex !important;flex-wrap:wrap !important;gap:6px !important;margin:0 !important}
#lca-wrapper .crystal-tag{font-size:10px !important;letter-spacing:0.5px !important;padding:4px 10px !important;border-radius:20px !important;font-weight:500 !important;display:inline-block !important;margin:0 !important}
#lca-wrapper .crystal-tag.chakra{background:var(--gold-bg) !important;border:1px solid var(--gold-pale) !important;color:var(--gold) !important}
#lca-wrapper .crystal-tag.reason{background:#F5F0FF !important;border:1px solid #D8CCEE !important;color:#6B4B9A !important}

/* Bracelet section */
#lca-wrapper .lca-bracelet-section{background:linear-gradient(160deg,var(--cream-deep),var(--parchment)) !important;border-top:1px solid var(--cream-border) !important;border-bottom:1px solid var(--cream-border) !important}
#lca-wrapper .lca-bracelet-visual{display:flex !important;justify-content:center !important;align-items:center !important;flex-wrap:wrap !important;margin:0 auto 28px !important;max-width:520px !important;width:100% !important}
#lca-wrapper .bracelet-bead{width:52px !important;height:52px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:22px !important;margin:5px !important;box-shadow:0 4px 14px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5) !important;animation:lcaBeadPop 0.4s ease both;border:2px solid rgba(255,255,255,0.7) !important;transition:transform 0.2s !important;cursor:default !important}
#lca-wrapper .bracelet-bead:hover{transform:scale(1.15) !important}
@keyframes lcaBeadPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
#lca-wrapper .bracelet-connector{width:16px !important;height:3px !important;background:linear-gradient(90deg,var(--cream-border),var(--gold-pale),var(--cream-border)) !important;border-radius:2px !important;margin:0 -3px !important;align-self:center !important}
#lca-wrapper .lca-bracelet-name{text-align:center !important;font-family:'Cinzel',serif !important;font-size:clamp(15px,2.8vw,20px) !important;font-weight:700 !important;color:var(--maroon) !important;margin:0 0 14px !important;letter-spacing:0.5px !important;display:block !important}
#lca-wrapper .lca-bracelet-desc{text-align:center !important;font-family:'Lora',serif !important;font-size:15px !important;color:var(--text-muted) !important;line-height:1.8 !important;max-width:580px !important;margin:0 auto !important;font-style:italic !important}

/* CTA */
#lca-wrapper .lca-cta-section{background:var(--white) !important;text-align:center !important}
#lca-wrapper .lca-cta-box{background:linear-gradient(135deg,var(--cream-deep),var(--parchment)) !important;border:1.5px solid var(--cream-border) !important;border-radius:18px !important;padding:48px 28px !important;max-width:640px !important;margin:0 auto 36px !important;width:100% !important;display:block !important}
#lca-wrapper .cta-header-icon{font-size:36px !important;margin:0 0 16px !important;display:block !important;text-align:center !important}
#lca-wrapper .lca-cta-box h2{font-family:'Cinzel',serif !important;font-size:clamp(20px,3.5vw,28px) !important;color:var(--maroon) !important;margin:0 0 14px !important;text-align:center !important}
#lca-wrapper .lca-cta-box>p{font-family:'Lora',serif !important;font-size:15px !important;color:var(--text-muted) !important;line-height:1.7 !important;margin:0 0 24px !important;font-style:italic !important;text-align:center !important}
#lca-wrapper .lca-cta-badges{display:flex !important;justify-content:center !important;gap:10px !important;flex-wrap:wrap !important;margin:0 0 32px !important;padding:0 !important}
#lca-wrapper .lca-cta-badges span{font-size:12px !important;font-weight:600 !important;padding:6px 14px !important;background:var(--white) !important;border:1.5px solid var(--cream-border) !important;border-radius:20px !important;color:var(--text-body) !important;display:inline-block !important;margin:0 !important}
#lca-wrapper .lca-cta-buttons{display:flex !important;gap:14px !important;justify-content:center !important;flex-wrap:wrap !important;margin:0 0 18px !important;padding:0 !important}
#lca-wrapper .cta-btn{display:inline-flex !important;align-items:center !important;gap:10px !important;padding:15px 28px !important;border-radius:var(--radius-sm) !important;font-family:'Cinzel',serif !important;font-size:13px !important;font-weight:700 !important;letter-spacing:0.5px !important;text-decoration:none !important;transition:transform 0.18s,opacity 0.18s !important;cursor:pointer !important;border:none !important;margin:0 !important}
#lca-wrapper .cta-btn:hover{transform:translateY(-2px) !important;opacity:0.9 !important}
#lca-wrapper .cta-whatsapp{background:#25D366 !important;color:#fff !important;box-shadow:0 4px 18px rgba(37,211,102,0.28) !important}
#lca-wrapper .cta-order{background:linear-gradient(135deg,var(--maroon-deep),var(--maroon)) !important;color:#fff !important;box-shadow:0 4px 18px rgba(139,26,26,0.3) !important}
#lca-wrapper .cta-price{font-size:14px !important;color:var(--text-muted) !important;margin:0 !important;text-align:center !important}
#lca-wrapper .cta-price strong{color:var(--maroon) !important;font-weight:700 !important}

#lca-wrapper .lca-ornament{text-align:center !important;color:var(--gold) !important;font-size:18px !important;letter-spacing:14px !important;margin:4px 0 36px !important;opacity:0.6 !important;display:block !important}
#lca-wrapper .lca-retry-wrap{text-align:center !important}
#lca-wrapper .lca-retry-btn{background:none !important;border:1.5px solid var(--cream-border) !important;border-radius:var(--radius-sm) !important;color:var(--text-muted) !important;font-family:'Inter',sans-serif !important;font-size:12px !important;font-weight:500 !important;letter-spacing:0.5px !important;padding:11px 22px !important;cursor:pointer !important;transition:border-color 0.2s,color 0.2s !important;text-transform:uppercase !important}
#lca-wrapper .lca-retry-btn:hover{border-color:var(--maroon) !important;color:var(--maroon) !important}

#lca-wrapper .lca-fade-in{animation:lcaFadeUp 0.55s ease both}
@keyframes lcaFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ══ RESPONSIVE ══ */
@media(max-width:640px){
  #lca-wrapper .lca-fields{grid-template-columns:1fr !important}
  #lca-wrapper .lca-field-full{grid-column:1 !important}
  #lca-wrapper #lca-hero{padding:36px 20px 48px !important}
  #lca-wrapper .lca-section{padding:40px 20px !important}
  #lca-wrapper .lca-cta-box{padding:32px 18px !important}
  #lca-wrapper .lca-cta-buttons{flex-direction:column !important;align-items:center !important}
  #lca-wrapper .cta-btn{width:100% !important;justify-content:center !important}
  #lca-wrapper .bracelet-bead{width:44px !important;height:44px !important;font-size:18px !important}
  #lca-wrapper .lca-num-cards{grid-template-columns:1fr !important}
  #lca-wrapper .lca-loshu-grid{grid-template-columns:repeat(3,70px) !important}
  #lca-wrapper .lo-cell{width:70px !important;height:70px !important}
}