/* style2.css - cleaned: only rules that are not already repeated in style.css */

#payModal{
  position:fixed;inset:0;z-index:10001;
  background:rgba(7,10,15,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .3s;
}

#payModal.on{display:flex;opacity:1}

.pay-card{
  width:min(480px,100%);background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);border-radius:24px;padding:36px 32px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 80px rgba(255,182,39,.06);
  animation:payRise .4s cubic-bezier(.2,.8,.2,1);
}

@keyframes payRise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

.pay-close{
  position:absolute;top:16px;inset-inline-end:16px;width:34px;height:34px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--txt2);font-size:1.3rem;
  cursor:pointer;transition:.2s;line-height:1;
}

.pay-close:hover{border-color:var(--red);color:var(--red)}

.pay-head{text-align:center;margin-bottom:26px}

.pay-ico{font-size:2.2rem;margin-bottom:10px}

.pay-head h3{font-family:'Cairo','Roboto',sans-serif;font-size:1.4rem;font-weight:700;margin-bottom:8px}

html[dir=ltr] .pay-head h3{font-family:'Roboto',sans-serif}

.pay-head p{color:var(--txt2);font-size:.92rem;line-height:1.6;max-width:340px;margin:0 auto}

html[dir=rtl] .pay-head p{font-size:1rem}

.pay-options{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}

.pay-opt{
  text-align:start;background:var(--panel2);border:2px solid var(--line);border-radius:16px;
  padding:18px 20px;cursor:pointer;transition:.25s;position:relative;width:100%;font-family:inherit;
}

.pay-opt:hover{border-color:var(--line2);transform:translateY(-2px)}

.pay-opt.featured{border-color:rgba(255,182,39,.4);background:rgba(255,182,39,.05)}

.pay-opt.featured:hover{border-color:var(--sun)}

.pay-opt-badge{
  position:absolute;top:-11px;inset-inline-end:18px;background:linear-gradient(135deg,var(--sun),var(--sun2));
  color:#0a0e14;font-size:.68rem;font-weight:700;padding:4px 12px;border-radius:14px;
}

.pay-opt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}

.pay-opt-name{font-size:1.05rem;font-weight:700;color:var(--txt)}

.pay-opt-price{font-family:'Roboto',sans-serif;font-size:1.7rem;font-weight:800;color:var(--sun);letter-spacing:-1px}

.pay-opt-per{font-size:.85rem;color:var(--txt2);font-weight:500;letter-spacing:0}

.pay-opt-desc{color:var(--txt2);font-size:.85rem}

html[dir=rtl] .pay-opt-name{font-size:1.15rem}

html[dir=rtl] .pay-opt-desc{font-size:.92rem}

.pay-secure{text-align:center;color:var(--muted);font-size:.8rem;margin-top:6px}

html[dir=rtl] .pay-secure{font-size:.88rem}

#wizardArea{
  display:none;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}

#wizardArea.wizard-visible{
  opacity:1;
  transform:translateY(0);
}

#printArea{
  display:none;
}

@media print{
  @page{
    size:A4;
    margin:12mm;
  }

  html,
  body{
    background:#fff!important;
    color:#000!important;
    margin:0!important;
    padding:0!important;
    width:100%!important;
    min-height:auto!important;
    overflow:visible!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  body *{
    visibility:hidden!important;
  }

  #printArea,
  #printArea *{
    visibility:visible!important;
  }

  #printArea{
    display:block!important;
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    min-height:auto!important;
    background:#fff!important;
    color:#000!important;
    padding:0!important;
    margin:0!important;
    z-index:999999!important;
    font-family:'Cairo','Roboto',sans-serif!important;
    direction:inherit!important;
  }

  #wizardArea,
  header,
  footer,
  nav,
  .bg-grain,
  #payModal,
  #view3dModal,
  #loadingOverlay,
  .btns,
  .print-btn,
  .btn-3d,
  .pay-card,
  .v3d-top{
    display:none!important;
  }

  .print-header{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    margin:0 0 18px 0!important;
    padding:0 0 12px 0!important;
    border-bottom:2px solid #ffb627!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .print-logo{
    width:44px!important;
    height:44px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#ffb627,#ff7b00)!important;
    display:grid!important;
    place-items:center!important;
    flex-shrink:0!important;
  }

  .print-title{
    font-size:16pt!important;
    font-weight:800!important;
    color:#0a0e14!important;
    line-height:1.2!important;
  }

  .print-sub{
    font-size:10pt!important;
    color:#555!important;
    margin-top:2px!important;
  }

  .print-summary{
    display:block!important;
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:8px!important;
    padding:10px 14px!important;
    margin-bottom:18px!important;
    font-size:10pt!important;
    color:#333!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  #printResults{
    display:block!important;
    width:100%!important;
    color:#000!important;
  }

  .result-hero{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:10px!important;
    margin:0 0 18px 0!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .hero-card{
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:12px!important;
    box-shadow:none!important;
    transform:none!important;
    overflow:hidden!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .hero-card::before,
  .rcard::after{
    display:none!important;
  }

  .hero-card .hc-icon{
    font-size:14pt!important;
    margin-bottom:4px!important;
  }

  .hero-card .hc-label{
    color:#555!important;
    font-size:9pt!important;
  }

  .hero-card .hc-value{
    font-size:18pt!important;
    color:#ff7b00!important;
    line-height:1.2!important;
  }

  .hero-card.green .hc-value{color:#1ba672!important;}
  .hero-card.purple .hc-value{color:#6f4bd8!important;}

  .hero-card .hc-unit,
  .hero-card .hc-sub{
    color:#666!important;
    font-size:8pt!important;
  }

  .chart-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:12px 0!important;
  }

  .chart-box{
    background:#fff!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:10px!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .chart-box h4{
    color:#111!important;
    font-size:10pt!important;
    margin-bottom:8px!important;
  }

  .chart-legend,
  .legend-row,
  .legend-val{
    color:#333!important;
    font-size:8pt!important;
  }

  .result-section{
    margin-bottom:18px!important;
    break-inside:auto!important;
  }

  .result-section > h3{
    color:#0a0e14!important;
    font-size:13pt!important;
    margin:14px 0 10px 0!important;
    padding-bottom:8px!important;
    border-bottom:1px solid #ddd!important;
    break-after:avoid!important;
    page-break-after:avoid!important;
  }

  .result-section > h3 .num{
    width:24px!important;
    height:24px!important;
    border-radius:7px!important;
    background:#ffb627!important;
    color:#0a0e14!important;
    font-size:9pt!important;
  }

  .cards{
    display:grid!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
  }

  .rcard{
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:12px!important;
    box-shadow:none!important;
    transform:none!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .rcard .rl{
    color:#555!important;
    font-size:9pt!important;
  }

  .rcard .rv{
    color:#0a0e14!important;
    font-size:17pt!important;
    line-height:1.2!important;
  }

  .rcard .ru,
  .rcard .rsub{
    color:#666!important;
    font-size:8pt!important;
  }

  .tilt-wrap,
  .string-vis,
  .sld,
  .tbl-wrap,
  .note{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }

  .tilt-wrap{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:10px!important;
  }

  .tilt-diagram{
    background:#fff!important;
  }

  .tilt-main-val{
    color:#ff7b00!important;
  }

  .tilt-main-lbl,
  .ts-lbl{
    color:#555!important;
  }

  .tilt-season{
    background:#fff!important;
    border:1px solid #ddd!important;
  }

  .ts-val{
    color:#111!important;
  }

  .string-vis{
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:12px!important;
    overflow:visible!important;
  }

  .string-row{
    min-width:0!important;
    flex-wrap:wrap!important;
  }

  .string-label{
    color:#555!important;
  }

  .pv-panel{
    background:#1a3a5c!important;
    border-color:#4ea8ff!important;
  }

  .pv-link{
    color:#ff7b00!important;
  }

  .tbl-wrap{
    border:1px solid #ddd!important;
    border-radius:8px!important;
    overflow:visible!important;
  }

  table{
    min-width:0!important;
    width:100%!important;
    border-collapse:collapse!important;
  }

  th{
    background:#f0f0f0!important;
    color:#333!important;
    font-size:9pt!important;
    padding:7px 8px!important;
    border:1px solid #ddd!important;
  }

  td{
    color:#333!important;
    font-size:9pt!important;
    padding:7px 8px!important;
    border:1px solid #ddd!important;
  }

  .spec-pill{
    background:#fff!important;
    border:1px solid #ddd!important;
    color:#ff7b00!important;
    font-size:8pt!important;
  }

  .sld{
    background:#f8f9fa!important;
    border:1px solid #ddd!important;
    border-radius:10px!important;
    padding:8px!important;
  }

  .sld svg,
  .chart-svg,
  .tilt-diagram svg{
    max-width:100%!important;
    height:auto!important;
  }

  .note{
    display:flex!important;
    background:#f0f4ff!important;
    border:1px solid #c0d0f0!important;
    color:#333!important;
    border-radius:8px!important;
    padding:10px!important;
    font-size:9pt!important;
  }

  .note.warn{
    background:#fff8e6!important;
    border-color:#ffe0a0!important;
    color:#7a5000!important;
  }

  a{
    color:#000!important;
    text-decoration:none!important;
  }
}