/* ============================================================
   Casvia Embed System
   - Embed mode (?embed=1): hide chrome, show only calculator
   - Embed modal: copy iframe code to embed on other sites
   ============================================================ */

/* ---------- Embed Mode ---------- */
body.embed-mode .site-header,
body.embed-mode .site-footer,
body.embed-mode .breadcrumb,
body.embed-mode .mobile-result-bar,
body.embed-mode .trust-bar,
body.embed-mode .section:not(.calculator-section):not(.result-section),
body.embed-mode .actions,
body.embed-mode .report-actions,
body.embed-mode .sticky-result,
body.embed-mode .page-intro,
body.embed-mode h1,
body.embed-mode .calculator-intro,
body.embed-mode .faq-section,
body.embed-mode .related-section,
body.embed-mode .sources-section,
body.embed-mode .methodology-section,
body.embed-mode .example-section,
body.embed-mode .how-it-works-section,
body.embed-mode .uk-specific-section,
body.embed-mode .what-next-section,
body.embed-mode .insight-card,
body.embed-mode .what-this-means {
  display: none !important;
}

body.embed-mode {
  background: var(--bg);
  padding: 0;
  margin: 0;
}

body.embed-mode main {
  padding: 0;
  max-width: 100%;
}

body.embed-mode .container {
  max-width: 100%;
  padding: 16px;
}

body.embed-mode .calculator-shell,
body.embed-mode .calculator-section {
  margin: 0;
  padding: 0;
}

body.embed-mode .result-card {
  margin-top: 12px;
}

body.embed-mode::after {
  content: "Calculator by Casvia.uk — Free UK financial calculators";
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-soft);
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.embed-btn { position: relative; }
.embed-btn .embed-icon { display:inline-block; margin-right:4px; font-size:1rem; line-height:1; }
.embed-modal-overlay { position:fixed; inset:0; background:rgba(14,46,43,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; animation:embedFadeIn .2s ease; }
.embed-modal-overlay.active { display:flex; }
@keyframes embedFadeIn { from{opacity:0} to{opacity:1} }
.embed-modal { background:var(--surface); border-radius:var(--radius); padding:28px; max-width:600px; width:100%; box-shadow:0 24px 64px rgba(14,46,43,.25); position:relative; animation:embedSlideUp .25s ease; }
@keyframes embedSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
.embed-modal-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:none; background:var(--surface-2); color:var(--ink-soft); font-size:1.4rem; line-height:1; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s; }
.embed-modal-close:hover { background:var(--line); color:var(--ink); }
.embed-modal h3 { margin:0 0 8px; font-size:1.3rem; color:var(--ink); padding-right:40px; }
.embed-modal p { margin:0 0 20px; color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.embed-code-block { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:16px; position:relative; }
.embed-code-block pre { margin:0; font-family:'SF Mono','Consolas','Monaco',monospace; font-size:.78rem; line-height:1.6; white-space:pre-wrap; word-break:break-all; color:var(--ink); max-height:140px; overflow-y:auto; padding-right:70px; }
.embed-copy-btn { position:absolute; top:10px; right:10px; padding:6px 14px; font-size:.78rem; font-weight:600; background:var(--brand); color:#fff; border:none; border-radius:8px; cursor:pointer; transition:background .15s,transform .1s; }
.embed-copy-btn:hover { background:#0d5f58; }
.embed-copy-btn:active { transform:scale(.97); }
.embed-copy-btn.copied { background:var(--ok); }
.embed-preview-note { font-size:.82rem; color:var(--ink-soft); margin-bottom:16px; padding:10px 14px; background:var(--note-info-bg); border-radius:8px; border-left:3px solid var(--info-ink); }
.embed-powered-by { text-align:center; font-size:.8rem; color:var(--ink-soft); margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.embed-powered-by a { color:var(--brand); text-decoration:none; font-weight:600; }
.embed-powered-by a:hover { text-decoration:underline; }
@media (max-width:480px){ .embed-modal{padding:20px}.embed-modal h3{font-size:1.15rem}.embed-code-block pre{font-size:.72rem;max-height:120px} }
:root[data-theme="dark"] .embed-modal-overlay { background:rgba(0,0,0,.65); }
:root[data-theme="dark"] .embed-code-block { background:var(--bg); }
:root[data-theme="dark"] .embed-modal-close { background:var(--surface-2); }

/* P2-11 · Dividend Tax institutional research-tool skin. */
body:has(.calc-shell[data-calc="dividend-tax"]) { background:#f4f8fa; color:#16242e; }
body:has(.calc-shell[data-calc="dividend-tax"]) .site-header { background:#0a2238; border-bottom:1px solid rgba(255,255,255,.12); box-shadow:none; }
body:has(.calc-shell[data-calc="dividend-tax"]) .site-header .logo,
body:has(.calc-shell[data-calc="dividend-tax"]) .site-header .nav a { color:#f7fbfc; }
body:has(.calc-shell[data-calc="dividend-tax"]) .site-header .nav a:hover { color:#9ee4dc; }
body:has(.calc-shell[data-calc="dividend-tax"]) .site-header .nav a[href="/calculators/"] { border:1px solid rgba(255,255,255,.28); border-radius:4px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .hero { background:#0a2238; color:#fff; padding:54px 0 46px !important; }
body:has(.calc-shell[data-calc="dividend-tax"]) .hero .container::before { content:"Tax & Investing / Research Tool"; display:block; margin:0 0 12px; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:700; color:#76d5cb; }
body:has(.calc-shell[data-calc="dividend-tax"]) .hero .breadcrumb { display:none; }
body:has(.calc-shell[data-calc="dividend-tax"]) .hero h1 { font-size:clamp(2.25rem,5vw,4.25rem)!important; line-height:.99; letter-spacing:-.045em; margin:0 0 18px; max-width:900px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .hero .sub { max-width:760px; color:#c6d4dc; font-size:1.05rem; }
body:has(.calc-shell[data-calc="dividend-tax"]) .live-wrap { display:none; }
body:has(.calc-shell[data-calc="dividend-tax"]) .calc-shell { box-shadow:none; border:1px solid #d9e3e8; border-radius:6px; background:#fff; margin-top:34px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .calc-panel.inputs { background:#f8fbfc; border-right:1px solid #d9e3e8; }
body:has(.calc-shell[data-calc="dividend-tax"]) .calc-panel.results { background:#fff; }
body:has(.calc-shell[data-calc="dividend-tax"]) .result-head .label,
body:has(.calc-shell[data-calc="dividend-tax"]) .growth-share { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; }
body:has(.calc-shell[data-calc="dividend-tax"]) .fv { font-size:clamp(2.7rem,6vw,4.7rem); letter-spacing:-.05em; color:#0a2238; font-variant-numeric:tabular-nums; }
body:has(.calc-shell[data-calc="dividend-tax"]) .result-insight { margin:14px 0 18px; padding:18px 20px; background:#0a2238; color:#d9e7ed; border-radius:4px; min-height:54px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .result-insight::before { content:"Research view"; display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; color:#76d5cb; }
body:has(.calc-shell[data-calc="dividend-tax"]) .split { border-top:1px solid #d9e3e8; }
body:has(.calc-shell[data-calc="dividend-tax"]) .split-row { border-bottom:1px solid #e7eef1; padding:12px 0; }
body:has(.calc-shell[data-calc="dividend-tax"]) .status-note.warn { border-left:3px solid #16a394; border-radius:4px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .src-foot { border-left:3px solid #16a394; background:#fff; padding:14px 16px; color:#526773; }
body:has(.calc-shell[data-calc="dividend-tax"]) .page { border:1px solid #d9e3e8; background:#fff; border-radius:5px; box-shadow:none; padding:30px; }
body:has(.calc-shell[data-calc="dividend-tax"]) .page > h2:first-child::before { content:"Methodology, allowances & official context"; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:#0b6b62; }
body:has(.calc-shell[data-calc="dividend-tax"]) .site-footer { background:#0a2238; }
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) { background:#081722; color:#dbe7ec; }
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .calc-shell,
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .calc-panel.results,
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .page,
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .src-foot { background:#0f2736; border-color:#284252; }
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .calc-panel.inputs { background:#0b202d; border-color:#284252; }
[data-theme="dark"] body:has(.calc-shell[data-calc="dividend-tax"]) .fv { color:#f2f8fa; }
@media(max-width:900px){ body:has(.calc-shell[data-calc="dividend-tax"]) .calc-panel.inputs{border-right:0;border-bottom:1px solid #d9e3e8} }
@media(max-width:640px){ body:has(.calc-shell[data-calc="dividend-tax"]) .hero{padding:38px 0 34px!important} body:has(.calc-shell[data-calc="dividend-tax"]) .hero h1{font-size:2.35rem!important} body:has(.calc-shell[data-calc="dividend-tax"]) .page{padding:22px} }

/* P2-12 · Student Loan institutional research-tool skin. */
body:has(.calc-shell[data-calc="student-loan"]) { background:#f4f8fa; color:#16242e; }
body:has(.calc-shell[data-calc="student-loan"]) .site-header { background:#0a2238; border-bottom:1px solid rgba(255,255,255,.12); box-shadow:none; }
body:has(.calc-shell[data-calc="student-loan"]) .site-header .logo,
body:has(.calc-shell[data-calc="student-loan"]) .site-header .nav a { color:#f7fbfc; }
body:has(.calc-shell[data-calc="student-loan"]) .site-header .nav a:hover { color:#9ee4dc; }
body:has(.calc-shell[data-calc="student-loan"]) .site-header .nav a[href="/calculators/"] { border:1px solid rgba(255,255,255,.28); border-radius:4px; }
body:has(.calc-shell[data-calc="student-loan"]) .hero { background:#0a2238; color:#fff; padding:54px 0 46px !important; }
body:has(.calc-shell[data-calc="student-loan"]) .hero .container::before { content:"Tax & Education / Planning Tool"; display:block; margin:0 0 12px; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:700; color:#76d5cb; }
body:has(.calc-shell[data-calc="student-loan"]) .hero .breadcrumb { display:none; }
body:has(.calc-shell[data-calc="student-loan"]) .hero h1 { font-size:clamp(2.25rem,5vw,4.25rem)!important; line-height:.99; letter-spacing:-.045em; margin:0 0 18px; max-width:920px; }
body:has(.calc-shell[data-calc="student-loan"]) .hero .sub { max-width:780px; color:#c6d4dc; font-size:1.05rem; }
body:has(.calc-shell[data-calc="student-loan"]) .live-wrap { display:none; }
body:has(.calc-shell[data-calc="student-loan"]) .calc-shell { box-shadow:none; border:1px solid #d9e3e8; border-radius:6px; background:#fff; margin-top:34px; }
body:has(.calc-shell[data-calc="student-loan"]) .calc-panel.inputs { background:#f8fbfc; border-right:1px solid #d9e3e8; }
body:has(.calc-shell[data-calc="student-loan"]) .calc-panel.results { background:#fff; }
body:has(.calc-shell[data-calc="student-loan"]) .result-head .label,
body:has(.calc-shell[data-calc="student-loan"]) .growth-share { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; }
body:has(.calc-shell[data-calc="student-loan"]) .fv { font-size:clamp(2.7rem,6vw,4.7rem); letter-spacing:-.05em; color:#0a2238; font-variant-numeric:tabular-nums; }
body:has(.calc-shell[data-calc="student-loan"]) .result-insight { margin:14px 0 18px; padding:18px 20px; background:#0a2238; color:#d9e7ed; border-radius:4px; min-height:54px; }
body:has(.calc-shell[data-calc="student-loan"]) .result-insight::before { content:"Research view"; display:block; margin-bottom:6px; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; color:#76d5cb; }
body:has(.calc-shell[data-calc="student-loan"]) .split { border-top:1px solid #d9e3e8; }
body:has(.calc-shell[data-calc="student-loan"]) .split-row { border-bottom:1px solid #e7eef1; padding:12px 0; }
body:has(.calc-shell[data-calc="student-loan"]) .btn-group { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
body:has(.calc-shell[data-calc="student-loan"]) .sl-plan { min-height:42px; border:1px solid #cfdce2; background:#fff; color:#27404e; border-radius:4px; font-weight:700; cursor:pointer; }
body:has(.calc-shell[data-calc="student-loan"]) .sl-plan.active { background:#0a2238; color:#fff; border-color:#0a2238; }
body:has(.calc-shell[data-calc="student-loan"]) .src-foot { border-left:3px solid #16a394; background:#fff; padding:14px 16px; color:#526773; }
body:has(.calc-shell[data-calc="student-loan"]) .page { border:1px solid #d9e3e8; background:#fff; border-radius:5px; box-shadow:none; padding:30px; }
body:has(.calc-shell[data-calc="student-loan"]) .page > h2:first-child::before { content:"Repayment methodology & plan rules"; display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:#0b6b62; }
body:has(.calc-shell[data-calc="student-loan"]) .site-footer { background:#0a2238; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) { background:#081722; color:#dbe7ec; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .calc-shell,
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .calc-panel.results,
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .page,
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .src-foot { background:#0f2736; border-color:#284252; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .calc-panel.inputs { background:#0b202d; border-color:#284252; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .fv { color:#f2f8fa; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .sl-plan { background:#102b39; color:#dbe7ec; border-color:#35505f; }
[data-theme="dark"] body:has(.calc-shell[data-calc="student-loan"]) .sl-plan.active { background:#16a394; border-color:#16a394; color:#07161d; }
@media(max-width:900px){ body:has(.calc-shell[data-calc="student-loan"]) .calc-panel.inputs{border-right:0;border-bottom:1px solid #d9e3e8} }
@media(max-width:640px){ body:has(.calc-shell[data-calc="student-loan"]) .hero{padding:38px 0 34px!important} body:has(.calc-shell[data-calc="student-loan"]) .hero h1{font-size:2.3rem!important} body:has(.calc-shell[data-calc="student-loan"]) .page{padding:22px} body:has(.calc-shell[data-calc="student-loan"]) .btn-group{grid-template-columns:1fr} }

/* Restore the original mobile always-on calculation result display.
   Several v2 skins hid .live-wrap; on phones this must stay pinned below
   the sticky header so users can see the live result while editing inputs. */
@media (max-width: 860px) {
  body:not(.embed-mode) .live-wrap {
    display: block !important;
    position: sticky;
    top: 56px;
    z-index: 19;
  }
}