/* ═══════════════════════════════════════════════════════════════
   TDOT IMMIGRATION — CALCULATOR SHARED STYLES
   Luxury navy/gold aesthetic matching main site design
   ═══════════════════════════════════════════════════════════════ */

/* ── CALCULATOR HUB PAGE ── */
.calc-hub{background:var(--white);padding:100px 0;position:relative}
.calc-hub-group{margin-bottom:76px}
.calc-hub-group:last-child{margin-bottom:0}

/* Category label header */
.calc-hub-label{display:flex;flex-direction:column;gap:7px;margin-bottom:34px;padding-bottom:20px;border-bottom:1px solid var(--border);position:relative}
.calc-hub-label::after{content:'';position:absolute;left:0;bottom:-1px;width:60px;height:2px;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.calc-hub-tag{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3vw,32px);font-weight:700;color:var(--navy);line-height:1.1}
.calc-hub-label p{font-size:13px;color:#9a948c;letter-spacing:.14em;text-transform:normal;font-weight:500}

/* Grid */
.calc-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

/* Card */
.calc-card{background:#FFF;border:1px solid var(--border);padding:34px 30px 28px;text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(29,29,27,.03);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease}
.calc-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:linear-gradient(180deg,var(--gold2),var(--gold));transition:height .45s ease}
.calc-card::after{content:'';position:absolute;top:-50px;right:-50px;width:140px;height:140px;background:radial-gradient(circle,rgba(201,168,76,.13),transparent 70%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.calc-card:hover{transform:translateY(-6px);border-color:rgba(201,168,76,.55);box-shadow:0 20px 50px rgba(29,29,27,.13)}
.calc-card:hover::before{height:100%}
.calc-card:hover::after{opacity:1}
.calc-card-icon{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;font-size:27px;background:radial-gradient(circle at 32% 28%,#fff,var(--cream2));border:1px solid rgba(201,168,76,.32);box-shadow:inset 0 1px 3px rgba(255,255,255,.9),0 5px 14px rgba(29,29,27,.07);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease;position:relative;z-index:1}
.calc-card:hover .calc-card-icon{transform:scale(1.08) rotate(-4deg);border-color:var(--gold)}
.calc-card h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;color:var(--navy);margin-bottom:9px;line-height:1.25;position:relative;z-index:1}
.calc-card p{font-size:13px;color:#827c74;line-height:1.65;flex:1;margin-bottom:22px;position:relative;z-index:1}
.calc-card-cta{font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:8px;margin-top:auto;position:relative;z-index:1}
.calc-card-cta::after{content:'→';font-size:14px;transition:transform .3s ease}
.calc-card:hover .calc-card-cta{color:var(--red2)}
.calc-card:hover .calc-card-cta::after{transform:translateX(5px)}

/* ── CALCULATOR PAGE LAYOUT ── */
.calc-page{background:var(--white);padding:70px 0 90px}
.calc-layout{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.calc-form{background:#fff;border:1px solid var(--border);border-radius:5px;padding:44px 44px 40px;box-shadow:0 4px 30px rgba(29,29,27,.06)}
.calc-results{position:sticky;top:120px;border-radius:6px;overflow:hidden;box-shadow:0 12px 44px rgba(29,29,27,.14)}

/* ── FORM SECTIONS / STEPS ── */
.calc-section{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.calc-section:last-of-type{border-bottom:none;margin-bottom:0}
.calc-section-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:var(--navy);margin-bottom:6px;display:flex;align-items:center;gap:13px}
.calc-section-num{width:36px;height:36px;background:linear-gradient(145deg,#2c2c2a,var(--navy));color:var(--gold);border:1px solid rgba(201,168,76,.35);border-radius:50%;font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(29,29,27,.18),inset 0 1px 0 rgba(255,255,255,.06)}
.calc-section-desc{font-size:13px;color:#999;margin-bottom:24px;padding-left:49px}

/* ── FORM FIELDS ── */
.calc-field{margin-bottom:20px}
.calc-field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:.02em}
.calc-field label small{font-weight:400;color:#aaa;margin-left:4px}
.calc-field select,
.calc-field input[type="number"],
.calc-field input[type="date"],
.calc-field input[type="text"]{width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:4px;background:#fafaf9;font-family:'Outfit',sans-serif;font-size:14px;color:var(--navy);outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.calc-field select:hover,
.calc-field input[type="number"]:hover,
.calc-field input[type="date"]:hover,
.calc-field input[type="text"]:hover{border-color:rgba(201,168,76,.5);background:#fff}
.calc-field select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.calc-field select:focus,
.calc-field input:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,168,76,.14)}
.calc-field .calc-hint{font-size:11px;color:#bbb;margin-top:4px;line-height:1.4}

/* ── RADIO / TOGGLE GROUPS ── */
.calc-toggle{display:flex;gap:0;border:1px solid var(--border);overflow:hidden}
.calc-toggle label{flex:1;padding:11px 16px;font-size:13px;font-weight:500;color:#888;text-align:center;cursor:pointer;transition:all .2s;border-right:1px solid var(--border);background:#fafaf9}
.calc-toggle label:last-child{border-right:none}
.calc-toggle input{display:none}
.calc-toggle input:checked+label,
.calc-toggle label.active{background:var(--navy);color:var(--white);font-weight:600}

.calc-radio-group{display:flex;flex-direction:column;gap:8px}
.calc-radio{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);cursor:pointer;transition:all .2s;background:#fafaf9}
.calc-radio:hover{border-color:var(--gold)}
.calc-radio input{display:none}
.calc-radio .radio-dot{width:16px;height:16px;border:2px solid #ccc;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.calc-radio .radio-dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .2s}
.calc-radio input:checked~.radio-dot{border-color:var(--gold)}
.calc-radio input:checked~.radio-dot::after{transform:scale(1)}
.calc-radio input:checked~.radio-label{color:var(--navy);font-weight:600}
.calc-radio .radio-label{font-size:13px;color:#777;transition:color .2s}
.calc-radio .radio-pts{margin-left:auto;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.05em}

.calc-check-group{display:flex;flex-direction:column;gap:8px}
.calc-check{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--border);cursor:pointer;transition:all .2s;background:#fafaf9;font-size:13px;color:#555;line-height:1.5}
.calc-check:hover{border-color:var(--gold)}
.calc-check input[type="checkbox"]{flex-shrink:0;margin-top:3px;accent-color:var(--gold);width:15px;height:15px;cursor:pointer}
.calc-check-pts{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.05em;padding-left:8px}

/* ── TWO-COLUMN FIELD GRID ── */
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── CALCULATE BUTTON ── */
.calc-submit{width:100%;padding:17px;background:var(--red);color:var(--white);font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:none;border-radius:4px;cursor:pointer;transition:all .3s;margin-top:24px}
.calc-submit:hover{background:#a00000;transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,0,0,.25)}

/* ── RESULTS PANEL ── */
.calc-result-panel{background:linear-gradient(165deg,#26261f 0%,var(--navy) 60%);padding:36px 28px 34px;color:var(--white);margin-bottom:2px;border-top:3px solid var(--gold);position:relative;overflow:hidden}
.calc-result-panel::after{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;background:radial-gradient(circle,rgba(201,168,76,.14),transparent 70%);pointer-events:none}
.calc-result-label{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;position:relative}
.calc-result-score{font-family:'Cormorant Garamond',serif;font-size:76px;font-weight:700;line-height:1;color:var(--gold);margin-bottom:4px;position:relative;text-shadow:0 4px 30px rgba(201,168,76,.3)}
.calc-result-max{font-size:13px;color:rgba(255,255,255,.35);position:relative}

/* Pass / Fail badge */
.calc-badge{display:inline-block;padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.calc-badge.pass{background:rgba(34,197,94,.15);color:#22c55e}
.calc-badge.fail{background:#1d1d1b;color:#ef4444}

/* Score Breakdown */
.calc-breakdown{background:#1d1d1b;padding:28px}
.calc-breakdown h4{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--white);margin-bottom:16px}
.calc-breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.calc-breakdown-row:last-child{border-bottom:none}
.calc-breakdown-row span:first-child{color:rgba(255,255,255,.55)}
.calc-breakdown-row span:last-child{color:var(--gold);font-weight:700;font-size:15px}

/* Score bar */
.calc-bar-wrap{margin-top:16px}
.calc-bar-label{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.35);margin-bottom:6px}
.calc-bar{height:6px;background:rgba(255,255,255,.08);overflow:hidden}
.calc-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),#d4a843);transition:width 1s ease;width:0}

/* Result CTA */
.calc-result-cta{background:var(--red);padding:24px;text-align:center;margin-top:2px}
.calc-result-cta p{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:14px;line-height:1.5}
.calc-result-cta a{display:block;background:var(--white);color:var(--red);padding:13px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:3px;transition:background .2s,transform .2s}
.calc-result-cta a:hover{background:#f5f5f5;transform:translateY(-1px)}

/* Disclaimer */
.calc-disclaimer{background:#f8f7f5;padding:20px;margin-top:2px;font-size:11px;color:#aaa;line-height:1.6}

/* ── INFO / TIP BOXES ── */
.calc-info{background:#f8f7f5;border-left:3px solid var(--gold);padding:16px 18px;margin:16px 0;font-size:13px;color:#666;line-height:1.6}
.calc-info strong{color:var(--navy);display:block;margin-bottom:4px;font-size:12px;letter-spacing:.05em;text-transform:uppercase}

/* ── CITIZENSHIP TIMELINE ── */
.cit-timeline{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.cit-period{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;padding:16px;background:#fafaf9;border:1px solid var(--border)}
.cit-period .calc-field{margin-bottom:0}
.cit-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1px dashed var(--border);font-size:13px;color:#999;cursor:pointer;transition:all .2s;background:transparent;width:100%;font-family:'Outfit',sans-serif}
.cit-add-btn:hover{border-color:var(--gold);color:var(--gold)}
.cit-remove{width:32px;height:32px;border:1px solid var(--border);background:transparent;color:#ccc;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.cit-remove:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.05)}
.cit-progress{margin-top:20px}
.cit-progress-label{display:flex;justify-content:space-between;font-size:13px;color:#848f9e;font-weight:600;margin-bottom:8px}
.cit-progress-bar{height:12px;background:#eee;overflow:hidden;position:relative}
.cit-progress-fill{height:100%;background:linear-gradient(90deg,var(--red) 0%,var(--gold) 100%);transition:width .8s ease}
.cit-progress-mark{position:absolute;top:0;height:100%;width:2px;background:#1d1d1b;}

/* ── LANGUAGE GRID ── */
.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lang-grid .calc-field label{font-size:11px;text-align:center}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .calc-layout{grid-template-columns:1fr}
  .calc-results{position:static;display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .calc-result-cta{grid-column:1/-1}
}
@media(max-width:768px){
  .calc-hub{padding:60px 0}
  .calc-hub-grid{grid-template-columns:1fr}
  .calc-page{padding:48px 0 70px}
  .calc-form{padding:30px 22px 28px}
  .calc-row{grid-template-columns:1fr}
  .lang-grid{grid-template-columns:1fr 1fr}
  .calc-results{grid-template-columns:1fr}
  .calc-result-score{font-size:60px}
  .cit-period{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .calc-toggle{flex-direction:column}
  .calc-toggle label{border-right:none;border-bottom:1px solid var(--border)}
  .calc-toggle label:last-child{border-bottom:none}
  .lang-grid{grid-template-columns:1fr}
}