:root {
    --c-yellow:   #FFD600;
    --c-yellow-h: #E8C200;
    --c-yellow-lt:#FFFBE6;
    --c-dark:     #1C1F3A;
    --c-dark2:    #252847;
    --c-red:      #CC1111;
    --c-surface:  #FFFFFF;
    --c-bg:       #F2F2F2;
    --c-border:   #C8C8C8;
    --c-border-d: #A0A0A0;
    --c-text:     #1A1A1A;
    --c-muted:    #606060;
    --c-success:  #1A7A3C;
    --c-error:    #CC1111;
    --c-econ:     #1A7A3C;
    --c-std:      #1C1F3A;
    --c-prem:     #8B5E00;
    --r: 2px;
    --sh: 0 2px 6px rgba(0,0,0,.15);
    --sh-md: 0 3px 12px rgba(0,0,0,.2);
    --font: 'Arial','Helvetica',sans-serif;
    --font-ui: 'Arial','Helvetica',sans-serif;
    --tr: .15s ease;
  }

  

  #window-calc{max-width:700px;margin:0 auto;padding:16px 12px 40px}

  .wc-head{
    background:var(--c-yellow);
    border-radius:0;
    padding:20px 22px 16px;
    border-bottom:4px solid var(--c-yellow-h);
    position:relative;
  }
  .wc-head__title{
    font-size:clamp(17px,4vw,23px);
    font-weight:700;
    color:var(--c-dark);
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1.2;
   	text-align: left;
	border: none;
  }
  .wc-head__title::after {
    display: none
  }
  .wc-head__sub{
    font-size:13px;
    color:rgba(0,0,0,.55);
    margin-top:5px;
    line-height:1.4;
  }

  .wc-prog{
    background:#111;
    padding:10px 22px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .wc-prog__meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:7px;
  }
  .wc-prog__cur{
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
  }
  .wc-prog__cur span{color:var(--c-yellow)}
  .wc-prog__name{
    font-size:12px;
    color:rgba(255,255,255,.5);
  }
  .wc-prog__dots{
    display:flex;
    gap:4px;
    padding-bottom:10px;
  }
  .wc-dot{
    flex:1;
    height:5px;
    border-radius:0;
    background:rgba(255,255,255,.15);
    transition:background .3s ease;
  }
  .wc-dot.done{background:rgba(255,214,0,.45); cursor: pointer;}
  .wc-dot[role="button"]{
  cursor:pointer;
}
  .wc-dot.done:hover{
  background:rgba(255,214,0,.7);
}
  .wc-dot.active{background:var(--c-yellow)}

  .wc-body{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-top:none;
    box-shadow:var(--sh-md);
  }

  .wc-step{
    display:none;
    padding:20px 20px 4px;
    animation:stepFwd .2s ease both;
  }
  .wc-step.active{display:block}
  .wc-step.back.active{animation-name:stepBck}

  @keyframes stepFwd{
    from{opacity:0;transform:translateX(16px)}
    to{opacity:1;transform:none}
  }
  @keyframes stepBck{
    from{opacity:0;transform:translateX(-16px)}
    to{opacity:1;transform:none}
  }

  .wc-step__h{
    font-size:17px;
    font-weight:700;
    color:var(--c-dark);
    margin-bottom:3px;
    border-left:4px solid var(--c-yellow);
    padding-left:10px;
  }
  .wc-step__s{
    font-size:13px;
    color:var(--c-muted);
    margin-bottom:16px;
    padding-left:14px;
    line-height:1.45;
  }

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

  .type-card{
    border:2px solid var(--c-border);
    border-radius:var(--r);
    padding:16px 8px 12px;
    text-align:center;
    cursor:pointer;
    transition:all var(--tr);
    background:var(--c-surface);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
  }
  .type-card:hover{
    border-color:var(--c-dark);
    box-shadow:var(--sh);
    background:#FAFAFA;
  }
  .type-card[aria-pressed="true"]{
    border-color:var(--c-yellow);
    border-width:2px;
    background:var(--c-yellow-lt);
    box-shadow:inset 0 0 0 1px var(--c-yellow);
  }
  .type-card__lbl{
    font-size:13px;
    font-weight:700;
    color:var(--c-text);
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  .type-card[aria-pressed="true"] .type-card__lbl{color:var(--c-dark)}
  .type-card__price{
    font-size:12px;
    font-weight:700;
    color:var(--c-muted);
    background:var(--c-bg);
    border-radius:0;
    padding:2px 8px;
    border:1px solid var(--c-border);
    transition:all var(--tr);
    white-space:nowrap;
  }
  .type-card[aria-pressed="true"] .type-card__price{
    background:var(--c-yellow);
    color:var(--c-dark);
    border-color:var(--c-yellow-h);
  }

  .size-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:8px;
  }
  .size-card{
    border:2px solid var(--c-border);
    border-radius:var(--r);
    padding:10px 8px;
    text-align:center;
    cursor:pointer;
    transition:all var(--tr);
    background:var(--c-surface);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    min-height:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .size-card:hover{
    border-color:var(--c-dark);
    box-shadow:var(--sh);
    background:#FAFAFA;
  }
  .size-card[aria-pressed="true"]{
    border-color:var(--c-yellow);
    border-width:2px;
    background:var(--c-yellow-lt);
    box-shadow:inset 0 0 0 1px var(--c-yellow);
  }
  .size-card__d{
    font-size:14px;
    font-weight:700;
    color:var(--c-text);
  }
  .size-card[aria-pressed="true"] .size-card__d{color:var(--c-dark)}
  .size-card__u{
    font-size:11px;
    color:var(--c-muted);
    margin-top:1px;
  }
  .size-card__meta{
    font-size:11px;
    color:var(--c-muted);
    line-height:1.35;
    margin-top:6px;
  }
  .size-card[aria-pressed="true"] .size-card__meta{color:var(--c-dark)}

  .prof-card{
    border:2px solid var(--c-border);
    border-radius:var(--r);
    padding:12px 14px;
    cursor:pointer;
    transition:all var(--tr);
    background:var(--c-surface);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
  }
  .prof-card:hover{
    border-color:var(--c-dark);
    box-shadow:var(--sh);
    background:#FAFAFA;
  }
  .prof-card__info{flex:1;min-width:0}
  .prof-card__name{
    font-size:14px;
    font-weight:700;
    color:var(--c-text);
    text-transform:uppercase;
    letter-spacing:.2px;
  }
  .prof-card__desc{
    font-size:12px;
    color:var(--c-muted);
    margin-top:2px;
    line-height:1.4;
  }
  .prof-card__price{
    font-size:15px;
    font-weight:700;
    color:var(--c-muted);
    white-space:nowrap;
    flex-shrink:0;
    background:var(--c-bg);
    border:1px solid var(--c-border);
    padding:4px 10px;
    border-radius:var(--r);
  }
  .prof-card.unavail{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
  }
  .prof-card.tier-econ[aria-pressed="true"]{
    border-color:var(--c-econ);
    background:#F0FFF6;
    box-shadow:inset 0 0 0 1px var(--c-econ);
  }
  .prof-card.tier-std[aria-pressed="true"]{
    border-color:var(--c-yellow);
    background:var(--c-yellow-lt);
    box-shadow:inset 0 0 0 1px var(--c-yellow);
  }
  .prof-card.tier-prem[aria-pressed="true"]{
    border-color:var(--c-prem);
    background:#FFF8EE;
    box-shadow:inset 0 0 0 1px var(--c-prem);
  }
  .prof-card.tier-econ[aria-pressed="true"] .prof-card__name{color:var(--c-econ)}
  .prof-card.tier-std[aria-pressed="true"] .prof-card__name{color:var(--c-dark)}
  .prof-card.tier-prem[aria-pressed="true"] .prof-card__name{color:var(--c-prem)}
  .prof-card.tier-econ[aria-pressed="true"] .prof-card__price{
    background:var(--c-econ);color:#fff;border-color:var(--c-econ)
  }
  .prof-card.tier-std[aria-pressed="true"] .prof-card__price{
    background:var(--c-yellow);color:var(--c-dark);border-color:var(--c-yellow-h)
  }
  .prof-card.tier-prem[aria-pressed="true"] .prof-card__price{
    background:var(--c-prem);color:#fff;border-color:var(--c-prem)
  }

  .prof-logo-wrap{
    height:32px;
    display:flex;
    align-items:center;
    margin-bottom:6px;
  }
  .prof-logo-wrap img{
    max-height:32px;
    max-width:120px;
    width:auto;
    object-fit:contain;
    object-position:left center;
    display:block;
  }

  .hw-card{
    border:2px solid var(--c-border);
    border-radius:var(--r);
    padding:14px;
    cursor:pointer;
    transition:all var(--tr);
    background:var(--c-surface);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .hw-card:hover{
    border-color:var(--c-dark);
    box-shadow:var(--sh);
    background:#FAFAFA;
  }
  .hw-card[aria-pressed="true"]{
    border-color:var(--c-yellow);
    background:var(--c-yellow-lt);
    box-shadow:inset 0 0 0 1px var(--c-yellow);
  }
  .hw-card__name{
    font-size:14px;
    font-weight:700;
    color:var(--c-text);
    text-transform:uppercase;
    letter-spacing:.2px;
  }
  .hw-card[aria-pressed="true"] .hw-card__name{color:var(--c-dark)}
  .hw-card__desc{
    font-size:12px;
    color:var(--c-muted);
    margin-top:4px;
    line-height:1.4;
    min-height:23px;
  }
  .hw-card__badge{
    display:inline-block;
    margin-top:8px;
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:0;
    background:var(--c-bg);
    color:var(--c-muted);
    border:1px solid var(--c-border);
  }
  .hw-card[aria-pressed="true"] .hw-card__badge{
    background:var(--c-yellow);
    color:var(--c-dark);
    border-color:var(--c-yellow-h);
  }

  .result-block{display:none}
  .result-panel{
    background:var(--c-dark);
    border-top:4px solid var(--c-yellow);
    padding:22px 22px 20px;
  }
  .result-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px;
    gap:16px;
    align-items:start;
  }
  .result__pre{
    font-size:11px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:rgba(255,255,255,.5);
    margin-bottom:6px;
  }
  .result__price{
    font-size:clamp(34px,8vw,52px);
    font-weight:700;
    color:var(--c-yellow);
    line-height:1;
  }
  .result-visual{
    background:#fff;
    border:1px solid rgba(255,255,255,.18);
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:140px;
  }
  .result-visual svg{
    width:100%;
    height:auto;
    max-width:150px;
  }
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:14px;
  }
  .chip{
    font-size:12px;
    font-weight:700;
    padding:3px 9px;
    background:rgba(255,214,0,.12);
    color:var(--c-yellow);
    border:1px solid rgba(255,214,0,.3);
    border-radius:0;
    display:flex;
    align-items:center;
    gap:4px;
  }
  .result__desc{
    font-size:13px;
    color:rgba(255,255,255,.75);
    margin-top:14px;
    line-height:1.65;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .result__note{
    font-size:11px;
    color:rgba(255,255,255,.35);
    margin-top:8px;
    font-style:italic;
  }

  .form-shell{
    padding:0 20px 22px;
    background:var(--c-surface);
  }
  .form-ttl{
    font-size:15px;
    font-weight:700;
    color:var(--c-surface);
    margin:0 -20px 0;
    background:var(--c-dark2);
    padding:12px 20px;
    border-bottom:3px solid var(--c-yellow);
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  .wc-form{display:grid;gap:10px;margin-top:14px}
  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .f-field{display:flex;flex-direction:column;gap:4px}
  .f-lbl{
    font-size:12px;
    font-weight:700;
    color:var(--c-text);
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  .wc-inp{
    width: auto;
    border:2px solid var(--c-border);
    border-radius:var(--r);
    padding:10px 12px;
    font-size:14px;
    font-family:var(--font-ui);
    color:var(--c-text);
    background:var(--c-surface);
    outline:none;
    transition:border-color var(--tr);
  }
  .wc-inp:focus{border-color:var(--c-dark)}
  .wc-inp.err{border-color:var(--c-error)}
  .wc-inp::placeholder{color:#B0B0B0}
  .f-err{
    font-size:11px;
    color:var(--c-error);
    font-weight:700;
    display:none;
  }
  .f-err.show{display:block}
  .chk-row{
    display:flex;
    align-items:flex-start;
    gap:9px;
    cursor:pointer;
    padding:2px 0;
  }
  .chk-row input{
    width:16px;
    height:16px;
    flex-shrink:0;
    accent-color:var(--c-dark);
    cursor:pointer;
    margin-top:2px;
  }
  .chk-txt{
    font-size:13px;
    color:var(--c-muted);
    line-height:1.5;
  }
  .chk-txt a{color:var(--c-dark);font-weight:700}
  .chk-err{
    font-size:11px;
    color:var(--c-error);
    font-weight:700;
    display:none;
  }
  .chk-err.show{display:block}

  .wc-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 20px 18px;
    gap:10px;
    border-top:1px solid var(--c-border);
    background:var(--c-bg);
  }
  .btn{
    border:none;
    border-radius:var(--r);
    font-size:14px;
    font-weight:700;
    font-family:var(--font-ui);
    cursor:pointer;
    transition:all var(--tr);
    padding:12px 24px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  .btn:disabled{
    opacity:.35;
    cursor:not-allowed;
    transform:none!important;
  }
  .btn:focus-visible{
    outline:3px solid var(--c-yellow);
    outline-offset:2px;
  }
  .btn-next{
    background:var(--c-yellow);
    color:var(--c-dark);
    flex:1;
    border:2px solid var(--c-yellow-h);
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    height:auto;
  }
  .btn-next:hover:not(:disabled){
    background:var(--c-yellow-h);
    box-shadow:0 3px 10px rgba(0,0,0,.25);
  }
  .btn-next:active:not(:disabled){
    transform:translateY(1px);
    box-shadow:none;
  }
  .btn-back{
    background:var(--c-surface);
    color:var(--c-dark);
    border:2px solid var(--c-border-d);
    flex-shrink:0;
    padding:10px 18px;
    height:auto;
  }
  .btn-back:hover{
    border-color:var(--c-dark);
    background:var(--c-bg);
  }
  .btn-submit{
    width:100%;
    background:var(--c-dark);
    color:var(--c-yellow);
    border:none;
    border-radius:var(--r);
    font-size:15px;
    font-weight:700;
    font-family:var(--font-ui);
    cursor:pointer;
    padding:14px 24px;
    transition:all var(--tr);
    text-transform:uppercase;
    letter-spacing:.4px;
    border:2px solid var(--c-dark);
    margin-top:6px;
  }
  .btn-submit:hover:not(:disabled){
    background:var(--c-dark2);
    border-color:var(--c-dark2);
  }
  .btn-submit:active:not(:disabled){transform:translateY(1px)}
  .btn-submit:disabled{
    opacity:.4;
    cursor:not-allowed;
    transform:none;
  }
  .btn-submit:focus-visible{
    outline:3px solid var(--c-yellow);
    outline-offset:2px;
  }

  .wc-success{
    text-align:center;
    padding:36px 20px;
    display:none;
    background:var(--c-surface);
  }
  .wc-success.show{
    display:block;
    animation:stepFwd .3s ease both;
  }
  .success-ico{
    width:56px;
    height:56px;
    background:var(--c-success);
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
  }
  .success-ttl{
    font-size:20px;
    font-weight:700;
    color:var(--c-text);
    margin-bottom:8px;
    text-transform:uppercase;
  }
  .success-txt{
    font-size:14px;
    color:var(--c-muted);
    line-height:1.6;
  }

  @media(max-width:640px){
    .result-top{grid-template-columns:1fr}
    .result-visual{order:-1}
  }
  @media(max-width:520px){
    .grid-4{grid-template-columns:1fr 1fr}
    .size-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
    .row-2{grid-template-columns:1fr}
    .wc-step,.form-shell{padding-left:14px;padding-right:14px}
    .wc-nav{padding-left:14px;padding-right:14px}
    .result-panel{padding:16px 14px}
    .btn{padding:11px 14px;font-size:13px}
    .btn-submit{font-size:14px}
    .wc-head,.wc-prog{padding-left:14px;padding-right:14px}
    .form-ttl{margin:0 -14px 0}
    .grid-2{grid-template-columns:1fr}
  }
  @media(max-width:360px){
    .grid-4{grid-template-columns:1fr}
  }

  :focus-visible{outline:3px solid var(--c-yellow);outline-offset:2px}