/* ================================================================
   NERDY FRAMES — MODAL DESIGN SYSTEM
   Loaded last; overridden by per-modal inline <style> ID selectors
   where needed. Use .nf-modal scope for global rules.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --nf-black:#111111;
  --nf-white:#ffffff;
  --nf-grey-light:#f5f5f5;
  --nf-grey-mid:#dcdcdc;
  --nf-grey-dark:#888888;
  --nf-gold:#c9a96e;
  --nf-gold-bg:#fffbf4;
  --nf-font-display:'Cormorant Garamond',serif;
  --nf-font-body:'Jost',sans-serif;
}

/* ── Modal frame ── */
.nf-modal .modal-dialog{margin:0!important;width:100%!important;max-width:100%!important;height:100%!important;transform:none!important;}
.nf-modal .modal-content{border-radius:0!important;border:none!important;min-height:100vh!important;width:100%!important;display:flex;flex-direction:column;font-family:var(--nf-font-body);overflow:hidden;background:var(--nf-white);}
.nf-modal.in .modal-dialog{transform:none!important;}

/* ── Header bar — BIGGER ── */
.nf-modal-header{background:var(--nf-black);color:var(--nf-white);padding:22px 22px 18px;flex-shrink:0;}
@media(min-width:640px){.nf-modal-header{padding:28px 36px 22px;}}
.nf-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;}
.nf-modal-title{font-family:var(--nf-font-display)!important;font-size:2rem!important;font-weight:500!important;letter-spacing:0.03em!important;margin:0 auto!important;color:var(--nf-white)!important;line-height:1.05!important;text-align:center!important;position:absolute!important;left:50%!important;transform:translateX(-50%)!important;white-space:nowrap!important;}
@media(min-width:480px){.nf-modal-title{font-size:2.5rem!important;}}
.nf-modal-close{background:none!important;border:none!important;color:var(--nf-gold)!important;font-size:2.8rem!important;line-height:1!important;cursor:pointer!important;padding:0 4px!important;opacity:1!important;}

/* ── Step indicator ── */
.nf-steps{display:flex;align-items:center;justify-content:center;margin-top:4px;}
.nf-step{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.35);font-size:0.95rem;font-family:var(--nf-font-body);text-transform:uppercase;letter-spacing:0.09em;font-weight:500;}
.nf-step.active{color:var(--nf-white);}
.nf-step.done{color:var(--nf-gold);}
.nf-step-num{width:34px;height:34px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:0.88rem;font-weight:600;flex-shrink:0;}
.nf-step.active .nf-step-num,.nf-step.done .nf-step-num{background:var(--nf-gold);border-color:var(--nf-gold);color:var(--nf-black);}
.nf-step-label{display:inline;}
.nf-step-sep{width:28px;height:2px;background:rgba(255,255,255,0.2);margin:0 8px;flex-shrink:0;}

/* ── Body ── */
.nf-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:28px 20px 48px;background:var(--nf-white);}
@media(min-width:640px){.nf-modal-body{padding:36px 44px 60px;max-width:740px;margin-left:auto;margin-right:auto;}}

/* ── Section titles ── */
.nf-section-title{font-family:var(--nf-font-display)!important;font-size:2.8rem!important;font-weight:500!important;color:var(--nf-black)!important;margin:0 0 14px!important;line-height:1.05!important;}
@media(min-width:480px){.nf-section-title{font-size:3rem!important;}}
.nf-section-subtitle{font-size:1.35rem!important;color:var(--nf-grey-dark)!important;margin:0 0 30px!important;line-height:1.65!important;}
.nf-notice{background:#fffdf4;border:1.5px solid #e8d5a0;border-radius:8px;padding:16px 20px;font-size:1rem;color:#7a6020;margin-bottom:22px;line-height:1.6;}

/* ── Lens type cards ── */
.nf-lens-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.nf-lens-grid{grid-template-columns:1fr 1fr;gap:16px;}}
.nf-lens-card{border:2px solid var(--nf-grey-mid);background:var(--nf-grey-light);border-radius:12px;padding:26px 24px;cursor:pointer;transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;position:relative;}
.nf-lens-card:active,.nf-lens-card:hover{border-color:var(--nf-gold);background:var(--nf-gold-bg);box-shadow:0 2px 16px rgba(201,169,110,0.18);}
.nf-lens-card-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:12px;}
.nf-lens-card-name{font-size:1.3rem;font-weight:600;color:var(--nf-black);line-height:1.2;}
.nf-lens-card-price{font-size:1.35rem;font-weight:700;color:var(--nf-gold);white-space:nowrap;flex-shrink:0;}
.nf-lens-card-desc{font-size:1.02rem;color:var(--nf-grey-dark);line-height:1.6;margin:0;}
.nf-lens-card .btn{display:none!important;}

/* ── Option cards ── */
.nf-option-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.nf-option-card{border:2px solid var(--nf-grey-mid);background:var(--nf-grey-light);border-radius:12px;padding:30px 28px;cursor:pointer;transition:border-color 0.15s,background 0.15s;width:100%;display:block;min-height:130px;}
.nf-option-card:active,.nf-option-card:hover{border-color:var(--nf-gold);background:var(--nf-gold-bg);}
.selected-lens-addon .nf-option-card,.selected-lens-addon.nf-option-card{border-color:var(--nf-gold)!important;background:var(--nf-gold-bg)!important;box-shadow:0 0 0 1px var(--nf-gold)!important;}
.nf-option-card-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:12px;}
.nf-option-card-name{font-size:1.55rem;font-weight:700;color:var(--nf-black);line-height:1.2;}
.nf-option-card-price{font-size:1.5rem;font-weight:700;color:var(--nf-gold);white-space:nowrap;flex-shrink:0;}
.nf-option-card-desc{font-size:1.15rem;color:var(--nf-grey-dark);line-height:1.65;margin:4px 0 0;}
.nf-option-card .btn{display:none!important;}

/* ── Prescription fields ── */
.nf-rx-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px;}
/* OD/OS stacked full-width — each eye block gets full container width */
.nf-rx-eye{background:var(--nf-grey-light);border:2px solid var(--nf-grey-mid);border-radius:10px;padding:20px 18px;}
.nf-rx-eye-title{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--nf-grey-dark);font-weight:600;margin-bottom:12px;display:block;}
.nf-rx-eye-title strong{color:var(--nf-black);font-size:1rem;}
.nf-rx-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.nf-rx-field>label{font-size:1rem!important;text-transform:uppercase!important;letter-spacing:0.1em!important;color:var(--nf-grey-dark)!important;display:block!important;margin-bottom:10px!important;font-weight:600!important;}
.nf-rx-field select,.nf-pd-select{width:100%!important;border:2px solid var(--nf-grey-mid)!important;background:var(--nf-white)!important;border-radius:8px!important;padding:18px 12px!important;font-size:1.2rem!important;font-family:var(--nf-font-body)!important;color:var(--nf-black)!important;-webkit-appearance:auto!important;appearance:auto!important;min-height:64px!important;}
.nf-rx-field select:focus,.nf-pd-select:focus{border-color:var(--nf-gold)!important;outline:none!important;box-shadow:0 0 0 3px rgba(201,169,110,0.15)!important;}

/* ── PD section ── */
.nf-pd-section{background:var(--nf-grey-light);border:2px solid var(--nf-grey-mid);border-radius:10px;padding:20px 18px;margin-top:16px;}
.nf-pd-title{font-size:1rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--nf-grey-dark);font-weight:600;margin-bottom:16px;display:block;}
.nf-pd-inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:14px;}
.nf-pd-dual{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.nf-pd-dual-field>label{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--nf-grey-dark);display:block;margin-bottom:8px;font-weight:600;}
.nf-pd-toggle{font-size:1.15rem;color:var(--nf-gold);text-decoration:underline;cursor:pointer;display:block;margin-top:14px;font-weight:500;}
.nf-pd-link{font-size:1.1rem;color:var(--nf-grey-dark);display:block;margin-top:10px;}
.nf-pd-link a{color:var(--nf-gold);}

/* ── Price footer — EXPANDED ── */
.nf-price-footer{background:var(--nf-black);color:var(--nf-white);padding:26px 20px 22px;flex-shrink:0;}
@media(min-width:640px){.nf-price-footer{padding:24px 36px;}}
.nf-price-footer-inner{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:740px;margin:0 auto;}
.nf-price-breakdown{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;font-size:1.1rem;color:rgba(255,255,255,0.65);line-height:1.8;margin-bottom:0;}
.nf-pb-row{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.nf-pb-label{color:rgba(255,255,255,0.45);}
.nf-pb-val{color:var(--nf-white);font-weight:500;}
.nf-pb-plus{color:rgba(255,255,255,0.3);margin:0 2px;}
.nf-pb-addon-active .nf-pb-label{color:var(--nf-gold);opacity:0.8;}
.nf-pb-addon-active .nf-pb-val{color:var(--nf-gold);}
.nf-price-total-row{display:flex;align-items:center;justify-content:center;gap:12px;border-top:1px solid rgba(255,255,255,0.15);padding-top:12px;width:100%;}
.nf-price-total-label{font-size:1.05rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.5);display:inline;}
.nf-price-subtotal{font-family:var(--nf-font-display)!important;font-size:3rem!important;font-weight:600!important;color:var(--nf-gold)!important;white-space:nowrap!important;line-height:1!important;padding-bottom:2px!important;}

/* ── Legacy total aliases ── */
.nf-total-label{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.45);display:block;margin-bottom:4px;}
.nf-total-val{font-family:var(--nf-font-display)!important;font-size:2.8rem!important;font-weight:600!important;color:var(--nf-gold)!important;line-height:1.2!important;white-space:nowrap!important;padding-bottom:2px!important;}
.nf-breakdown{font-size:0.95rem;color:rgba(255,255,255,0.6);line-height:1.9;margin-bottom:8px;}
.nf-breakdown span{display:block;}
.nf-breakdown .nf-bval{color:var(--nf-white);font-weight:500;}

/* ── Buttons — BIG ── */
.nf-btn-row{display:flex!important;gap:14px!important;align-items:center!important;padding:20px 20px!important;background:var(--nf-white)!important;border-top:1px solid var(--nf-grey-mid)!important;flex-shrink:0!important;}
@media(min-width:640px){.nf-btn-row{padding:22px 36px!important;}}
.nf-btn{font-family:var(--nf-font-body)!important;font-size:1.15rem!important;font-weight:600!important;letter-spacing:0.03em!important;padding:22px 28px!important;border-radius:10px!important;border:none!important;cursor:pointer!important;transition:opacity 0.15s!important;flex:1!important;text-align:center!important;line-height:1!important;min-height:70px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.nf-btn-primary{background:var(--nf-black)!important;color:var(--nf-white)!important;}
.nf-btn-primary:hover{opacity:0.82!important;}
.nf-btn-gold{background:var(--nf-gold)!important;color:var(--nf-black)!important;font-size:1.2rem!important;font-weight:700!important;}
.nf-btn-gold:hover{opacity:0.88!important;}
.nf-btn-outline{background:transparent!important;color:var(--nf-black)!important;border:2px solid var(--nf-grey-mid)!important;flex:0 0 auto!important;padding:22px 26px!important;min-width:110px!important;}
.nf-btn-outline:hover{border-color:var(--nf-black)!important;}

/* ── Readers power grid ── */
.nf-power-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(min-width:480px){.nf-power-grid{grid-template-columns:repeat(6,1fr);}}
.nf-power-btn{border:2px solid var(--nf-grey-mid);background:var(--nf-grey-light);border-radius:8px;padding:20px 6px;text-align:center;cursor:pointer;font-size:1.15rem;font-family:var(--nf-font-body);color:var(--nf-black);transition:border-color 0.15s,background 0.15s;font-weight:500;}
.nf-power-btn.selected,.nf-power-btn:hover{border-color:var(--nf-gold);background:var(--nf-gold-bg);}

/* ── Misc ── */
.nf-modal .single_try_on_home_button.button.btn_clk{display:none!important;}
.nf-modal .modal-body.form_calculator,.nf-modal .lenses_selection_wrap{padding:0!important;}
.nf-modal .modal-footer.cylpagef{padding:0!important;border:none!important;display:block!important;}