/* ===== Goal Calculator — advisor tool layout ===== */

.gc-hero h1{color:var(--navy);font-size:clamp(32px,4vw,46px);margin:10px 0 12px;line-height:1.1}
.gc-hero p{color:var(--muted);max-width:720px;font-size:15px;line-height:1.6}
.gc-clear-btn{margin-top:20px}

.gc-tool{padding-bottom:80px}
.gc-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}

.gc-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-bottom:22px}
.gc-advisor-picker{background:var(--navy);padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.gc-advisor-picker label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:14px!important;color:#fff!important;font-size:14px!important;font-weight:700!important;white-space:nowrap}
.gc-select-wrap{position:relative;display:inline-flex}
.gc-advisor-picker select{
  font:600 14px 'DM Sans',sans-serif;color:var(--navy);
  border:1px solid rgba(32,41,93,.12);border-radius:12px;
  padding:13px 42px 13px 18px;background:#fff;cursor:pointer;min-width:250px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  transition:border-color .15s,box-shadow .15s;
}
.gc-advisor-picker select:hover{border-color:var(--teal)}
.gc-advisor-picker select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(93,193,159,.2)}
/* A real SVG layered on top of the select, not a CSS background-image --
   background-image chevrons on a select are unreliable across browsers
   once appearance:none is in play (this is a well-known cross-browser
   quirk, not specific to this one), so this sidesteps that entirely. */
.gc-select-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--navy);pointer-events:none}
.gc-advisor-picker .gc-hint{margin:0;color:#aab0cc;font-size:14px}
.gc-section h2{color:var(--navy);font-size:19px;margin:0 0 18px}
.gc-hint{color:var(--muted);font-size:14px;margin:8px 0 0}

.gc-grid{display:grid;gap:16px 18px}
.gc-grid-2{grid-template-columns:repeat(2,1fr)}
.gc-grid-3{grid-template-columns:repeat(3,1fr)}
.gc-grid-4{grid-template-columns:repeat(4,1fr)}

.gc-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--navy)}
.gc-form input[type="text"],
.gc-form input[type="number"],
.gc-form input[type="tel"],
.gc-form input[type="email"],
.gc-form select{
	font:500 14px 'DM Sans',sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:10px;
	padding:11px 13px;background:var(--soft);width:100%;box-sizing:border-box
}
.gc-form input:focus,.gc-form select:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff}

.gc-checkbox{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;font-size:14px!important;margin-bottom:16px}
.gc-checkbox input{width:auto}

.gc-goal-row{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px 46px 20px 20px;margin-bottom:14px}
.gc-remove-goal{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 6px rgba(32,41,93,.15)}
.gc-remove-goal:hover{background:var(--orange);color:#fff}

#gc-add-goal{margin-top:4px}

.gc-actions{display:flex;align-items:center;gap:16px;margin-top:8px}
.gc-status{color:var(--muted);font-size:14px}

/* ---- sidebar ---- */
/* No sticky/max-height/nested scroll here on purpose: a sticky panel
   taller than the viewport can't be scrolled into view (it stops moving
   once pinned), and an internal nested scrollbar was easy to miss and
   still ended up clipping content. Simplest reliable fix: this panel is
   a normal block that grows with its content, and the ordinary page
   scroll reveals all of it -- every goal, retirement, and the totals --
   no matter how many goals are added. */
.gc-sidebar{position:relative}
.gc-sidebar-inner{background:var(--navy);color:#fff;border-radius:var(--radius);padding:26px 24px}
.gc-sidebar h3{margin:0 0 16px;font-size:16px;color:#fff}
.gc-sidebar-goals,.gc-sidebar-retirement{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.gc-sidebar .gc-hint{color:#aab0cc}

.gc-sidebar-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px}
.gc-sidebar-card-retirement{border-color:var(--teal)}
.gc-sidebar-card-title{font-weight:700;font-size:14px;margin-bottom:8px;color:var(--teal)}
.gc-sidebar-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:3px 0;color:#dfe2f0}
.gc-sidebar-row strong{color:#fff;font-weight:700}
.gc-sidebar-divider{border-top:1px solid rgba(255,255,255,.14);margin:8px 0}
.gc-sidebar-row-gain strong{color:var(--teal)}

.gc-grand-total{border-top:1px solid rgba(255,255,255,.18);padding-top:16px;margin-top:4px;display:flex;flex-direction:column;gap:10px}
.gc-grand-total>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gc-grand-total span{font-size:14px;color:#aab0cc}
.gc-grand-total strong{font-size:18px;color:var(--teal)}

/* ---- preview modal ---- */
.gc-modal{position:fixed;inset:0;background:rgba(15,18,43,.72);z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px}
.gc-modal[hidden]{display:none}
.gc-modal-box{background:#fff;border-radius:20px;width:min(880px,100%);max-height:92vh;display:flex;flex-direction:column;padding:26px;position:relative}
.gc-modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:var(--soft);font-size:20px;cursor:pointer;z-index:2}
.gc-modal-box h2{color:var(--navy);margin:0 0 14px}
.gc-preview-frame-wrap{flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
#gc-preview-frame{width:100%;height:56vh;border:0;display:block}
.gc-send-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.gc-send-email{display:flex;gap:10px;flex:1;min-width:260px}
.gc-send-email input{flex:1;font:500 14px 'DM Sans',sans-serif;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--soft)}

@media(max-width:980px){
	.gc-layout{grid-template-columns:1fr}
	.gc-grid-4{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
	.gc-grid-3,.gc-grid-4{grid-template-columns:1fr}
	.gc-section{padding:20px}
	.gc-send-email{flex-direction:column}
}