/* ============================================================
   Weight Goal Calculator — v1.0
   Scoped to #wgc-app · !important on all rules
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

#wgc-app { font-family:'DM Sans',sans-serif !important; max-width:560px !important; margin:0 auto !important; padding:0 !important; color:#0f172a !important; -webkit-font-smoothing:antialiased !important; line-height:1.5 !important; background:transparent !important; }
#wgc-app *, #wgc-app *::before, #wgc-app *::after { box-sizing:border-box !important; }
#wgc-app button { -webkit-appearance:none !important; appearance:none !important; text-shadow:none !important; text-decoration:none !important; cursor:pointer !important; font-family:'DM Sans',sans-serif !important; }
#wgc-app select { -webkit-appearance:none !important; appearance:none !important; }
#wgc-app input  { font-family:'DM Sans',sans-serif !important; }

/* Header */
#wgc-app .wgc-header { background:linear-gradient(135deg,#0d9488,#0f766e) !important; border-radius:18px 18px 0 0 !important; padding:22px 24px !important; display:flex !important; align-items:center !important; gap:14px !important; }
#wgc-app .wgc-header-icon { width:38px !important; height:38px !important; flex-shrink:0 !important; }
#wgc-app .wgc-title { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.55rem !important; font-weight:700 !important; font-style:italic !important; color:#fff !important; margin:0 0 2px !important; padding:0 !important; line-height:1.1 !important; background:none !important; border:none !important; display:block !important; text-transform:none !important; text-shadow:none !important; }
#wgc-app .wgc-subtitle { font-size:0.8rem !important; color:rgba(255,255,255,0.80) !important; margin:0 !important; padding:0 !important; display:block !important; font-weight:400 !important; }

/* Form */
#wgc-app .wgc-form { background:#fff !important; border:1px solid #e2e8f0 !important; border-top:none !important; border-radius:0 0 18px 18px !important; padding:22px 22px 24px !important; display:flex !important; flex-direction:column !important; gap:16px !important; }

/* Unit bar */
#wgc-app .wgc-unit-bar { display:flex !important; background:#f1f5f9 !important; border-radius:10px !important; padding:3px !important; gap:3px !important; border:1.5px solid #e2e8f0 !important; }
#wgc-app .wgc-unit-btn { flex:1 !important; padding:9px 12px !important; border:none !important; border-radius:7px !important; background:transparent !important; font-size:0.84rem !important; font-weight:600 !important; color:#64748b !important; transition:all 0.18s !important; box-shadow:none !important; outline:none !important; line-height:1.3 !important; display:block !important; }
#wgc-app .wgc-unit-btn:hover:not(.active) { background:rgba(13,148,136,0.08) !important; color:#0d9488 !important; }
#wgc-app .wgc-unit-btn.active { background:#0d9488 !important; color:#fff !important; box-shadow:0 2px 8px rgba(13,148,136,0.28) !important; }

/* Row */
#wgc-app .wgc-row { display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; }

/* Field */
#wgc-app .wgc-field { display:flex !important; flex-direction:column !important; gap:6px !important; }
#wgc-app .wgc-label { font-size:0.8rem !important; font-weight:600 !important; color:#475569 !important; margin:0 !important; padding:0 !important; background:none !important; border:none !important; text-transform:none !important; line-height:1.3 !important; display:block !important; }

/* Gender toggle */
#wgc-app .wgc-toggle { display:flex !important; background:#f1f5f9 !important; border-radius:10px !important; padding:3px !important; gap:3px !important; border:1.5px solid #e2e8f0 !important; }
#wgc-app .wgc-toggle-btn { flex:1 !important; padding:9px 10px !important; border:none !important; border-radius:7px !important; background:transparent !important; font-size:0.84rem !important; font-weight:600 !important; color:#64748b !important; transition:all 0.18s !important; box-shadow:none !important; outline:none !important; line-height:1.3 !important; }
#wgc-app .wgc-toggle-btn:hover:not(.active) { background:rgba(13,148,136,0.08) !important; color:#0d9488 !important; }
#wgc-app .wgc-toggle-btn.active { background:#0d9488 !important; color:#fff !important; box-shadow:0 2px 8px rgba(13,148,136,0.28) !important; }

/* Input */
#wgc-app .wgc-inp-wrap { position:relative !important; }
#wgc-app .wgc-inp { width:100% !important; padding:11px 42px 11px 13px !important; border:1.5px solid #e2e8f0 !important; border-radius:10px !important; font-size:0.95rem !important; font-weight:600 !important; color:#0f172a !important; background:#f8fafc !important; outline:none !important; box-shadow:none !important; -moz-appearance:textfield !important; display:block !important; transition:border-color 0.18s !important; }
#wgc-app .wgc-inp::-webkit-inner-spin-button, #wgc-app .wgc-inp::-webkit-outer-spin-button { -webkit-appearance:none !important; margin:0 !important; }
#wgc-app .wgc-inp:focus { border-color:#0d9488 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(13,148,136,0.12) !important; outline:none !important; }
#wgc-app .wgc-inp-unit { position:absolute !important; right:12px !important; top:50% !important; transform:translateY(-50%) !important; font-size:0.72rem !important; font-weight:700 !important; color:#0d9488 !important; pointer-events:none !important; }

/* Imperial height: two dropdowns side by side */
#wgc-app .wgc-height-imperial { display:flex !important; gap:10px !important; }
#wgc-app .wgc-height-imperial .wgc-select-wrap { flex:1 !important; }

/* Select */
#wgc-app .wgc-select-wrap { position:relative !important; }
#wgc-app .wgc-select { width:100% !important; padding:11px 36px 11px 13px !important; border:1.5px solid #e2e8f0 !important; border-radius:10px !important; font-size:0.88rem !important; font-weight:500 !important; color:#0f172a !important; background:#f8fafc !important; outline:none !important; box-shadow:none !important; cursor:pointer !important; display:block !important; transition:border-color 0.18s !important; }
#wgc-app .wgc-select:focus { border-color:#0d9488 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(13,148,136,0.12) !important; outline:none !important; }
#wgc-app .wgc-chevron { position:absolute !important; right:10px !important; top:50% !important; transform:translateY(-50%) !important; width:15px !important; height:15px !important; color:#94a3b8 !important; pointer-events:none !important; }

/* Error */
#wgc-app .wgc-error { padding:10px 14px !important; background:#fef2f2 !important; border-left:3px solid #ef4444 !important; border-radius:0 8px 8px 0 !important; font-size:0.84rem !important; color:#991b1b !important; font-weight:500 !important; }

/* Submit */
#wgc-app .wgc-btn { width:100% !important; padding:14px !important; background:#0d9488 !important; border:none !important; border-radius:12px !important; font-size:1rem !important; font-weight:700 !important; color:#fff !important; box-shadow:0 4px 14px rgba(13,148,136,0.35) !important; transition:background 0.18s,transform 0.18s !important; outline:none !important; line-height:1.3 !important; letter-spacing:0.01em !important; display:block !important; }
#wgc-app .wgc-btn:hover { background:#0f766e !important; transform:translateY(-1px) !important; color:#fff !important; }
#wgc-app .wgc-btn:active { transform:translateY(0) !important; }

/* Result */
#wgc-app .wgc-result { margin-top:16px !important; display:flex !important; flex-direction:column !important; gap:16px !important; }

/* Banner */
#wgc-app .wgc-banner { background:linear-gradient(135deg,#0d9488,#0f766e) !important; border-radius:16px !important; padding:20px 22px !important; display:flex !important; align-items:center !important; gap:0 !important; box-shadow:0 6px 20px rgba(13,148,136,0.25) !important; }
#wgc-app .wgc-banner-bmi, #wgc-app .wgc-banner-tdee { display:flex !important; flex-direction:column !important; gap:2px !important; flex-shrink:0 !important; }
#wgc-app .wgc-banner-stats { flex:1 !important; display:flex !important; flex-direction:column !important; gap:8px !important; padding:0 20px !important; }
#wgc-app .wgc-banner-divider { width:1px !important; background:rgba(255,255,255,0.22) !important; align-self:stretch !important; margin:0 4px !important; flex-shrink:0 !important; }
#wgc-app .wgc-banner-label { font-size:0.62rem !important; font-weight:700 !important; color:rgba(255,255,255,0.68) !important; text-transform:uppercase !important; letter-spacing:0.08em !important; display:block !important; }
#wgc-app .wgc-banner-big { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:2.2rem !important; font-weight:700 !important; font-style:italic !important; color:#fff !important; display:block !important; line-height:1 !important; }
#wgc-app .wgc-banner-cat { font-size:0.72rem !important; color:rgba(255,255,255,0.75) !important; font-weight:600 !important; display:block !important; }
#wgc-app .wgc-bstat { display:flex !important; align-items:center !important; justify-content:space-between !important; }
#wgc-app .wgc-bstat-lbl { font-size:0.7rem !important; color:rgba(255,255,255,0.65) !important; font-weight:500 !important; }
#wgc-app .wgc-bstat-val { font-size:0.9rem !important; font-weight:700 !important; color:#fff !important; }

/* Healthy range note */
#wgc-app .wgc-healthy-note { display:flex !important; align-items:center !important; gap:8px !important; padding:11px 14px !important; background:#f0fdfa !important; border:1px solid #99f6e4 !important; border-radius:10px !important; font-size:0.8rem !important; color:#0f766e !important; font-weight:500 !important; }
#wgc-app .wgc-healthy-note svg { color:#0d9488 !important; flex-shrink:0 !important; }

/* Plans heading */
#wgc-app .wgc-plans-heading { font-size:0.78rem !important; font-weight:700 !important; color:#475569 !important; text-transform:uppercase !important; letter-spacing:0.08em !important; margin:0 !important; padding:0 !important; display:block !important; }

/* Plan cards */
#wgc-app .wgc-plans { display:flex !important; flex-direction:column !important; gap:10px !important; }

#wgc-app .wgc-plan-card { background:#fff !important; border:1.5px solid #e2e8f0 !important; border-radius:14px !important; padding:14px 16px !important; display:grid !important; grid-template-columns:1fr auto !important; grid-template-rows:auto auto !important; gap:4px 16px !important; align-items:center !important; transition:border-color 0.18s !important; animation:wgcCardIn 0.4s ease both !important; }
#wgc-app .wgc-plan-card:nth-child(1) { animation-delay:0.04s !important; }
#wgc-app .wgc-plan-card:nth-child(2) { animation-delay:0.09s !important; border-color:#0d9488 !important; background:#f0fdfa !important; }
#wgc-app .wgc-plan-card:nth-child(3) { animation-delay:0.14s !important; }
#wgc-app .wgc-plan-card:nth-child(4) { animation-delay:0.19s !important; }
#wgc-app .wgc-plan-card:hover { border-color:#0d9488 !important; }
@keyframes wgcCardIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

#wgc-app .wgc-plan-name { font-size:0.9rem !important; font-weight:700 !important; color:#0f172a !important; display:block !important; }
#wgc-app .wgc-plan-card:nth-child(2) .wgc-plan-name { color:#0d9488 !important; }
#wgc-app .wgc-plan-desc { font-size:0.74rem !important; color:#94a3b8 !important; display:block !important; }

#wgc-app .wgc-plan-right { text-align:right !important; grid-row:span 2 !important; }
#wgc-app .wgc-plan-cal { font-family:'Cormorant Garamond',Georgia,serif !important; font-size:1.35rem !important; font-weight:700 !important; font-style:italic !important; color:#0d9488 !important; display:block !important; line-height:1 !important; }
#wgc-app .wgc-plan-cal-lbl { font-size:0.62rem !important; color:#94a3b8 !important; font-weight:600 !important; display:block !important; }

#wgc-app .wgc-plan-timeline { grid-column:1 / -1 !important; margin-top:6px !important; padding-top:8px !important; border-top:1px solid #f1f5f9 !important; display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; }
#wgc-app .wgc-plan-tag { font-size:0.72rem !important; font-weight:600 !important; padding:3px 10px !important; border-radius:20px !important; display:inline-block !important; }
#wgc-app .wgc-plan-tag--time { background:#f0fdfa !important; color:#0d9488 !important; }
#wgc-app .wgc-plan-tag--date { background:#f1f5f9 !important; color:#64748b !important; }

/* Disclaimer */
#wgc-app .wgc-disclaimer { font-size:0.72rem !important; color:#94a3b8 !important; line-height:1.5 !important; margin:0 !important; padding:0 !important; display:block !important; }

/* Recalculate */
#wgc-app .wgc-recalc { background:transparent !important; border:1.5px solid #e2e8f0 !important; border-radius:8px !important; padding:9px 18px !important; font-size:0.84rem !important; font-weight:600 !important; color:#64748b !important; transition:all 0.18s !important; box-shadow:none !important; outline:none !important; line-height:1.3 !important; display:inline-block !important; }
#wgc-app .wgc-recalc:hover { border-color:#0d9488 !important; color:#0d9488 !important; background:#f0fdfa !important; }

/* Responsive */
@media screen and (max-width:480px) {
  #wgc-app .wgc-form    { padding:18px 16px 20px !important; }
  #wgc-app .wgc-header  { padding:18px 16px !important; border-radius:14px 14px 0 0 !important; }
  #wgc-app .wgc-title   { font-size:1.3rem !important; }
  #wgc-app .wgc-row     { grid-template-columns:1fr !important; }
  #wgc-app .wgc-banner  { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
  #wgc-app .wgc-banner-divider { width:100% !important; height:1px !important; margin:0 !important; }
  #wgc-app .wgc-banner-stats   { padding:0 !important; width:100% !important; }
  #wgc-app .wgc-banner-big     { font-size:1.8rem !important; }
}