@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --c-primary:#1a1a2e;
  --c-secondary:#16213e;
  --c-accent:#0f3460;
  --c-gold:#f5c400;
  --c-gold-light:#fff8dc;
  --c-gold-gradient:linear-gradient(135deg, #f5c400, #e5b800);
  --c-bg:#f0efe9;
  --c-card-bg:#ffffff;
  --c-text:#1a1d23;
  --c-text-secondary:#5a5d63;
  --c-text-muted:#8a8d93;
  --c-border:#e8e8ec;
  --c-border-light:#f0f0f4;
  --c-green:#10b981;
  --c-blue:#3b82f6;
  --c-purple:#8b5cf6;
  --c-red:#ef4444;
  --c-orange:#f59e0b;
  --c-fresh:#10b981;
  
  --card-radius:12px;
  --card-shadow:0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --card-shadow-hover:0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.08);
  --card-shadow-raised:0 8px 24px rgba(0,0,0,0.1), 0 20px 48px rgba(0,0,0,0.06);
  --transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Inter','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.6;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ===== MODERN HEADER/BACKGROUND ===== */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:280px;
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
  z-index:-1;
}

body::after{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:280px;
  background:radial-gradient(circle at 20% 30%, rgba(245,196,0,0.08) 0%, transparent 60%);
  z-index:-1;
  pointer-events:none;
}

/* ===== TOOLBAR ===== */
.toolbar{
  max-width:210mm;
  margin:0 auto 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:16px 20px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  border:none;
  transition:var(--transition);
  font-family:inherit;
  text-transform:uppercase;
  letter-spacing:.5px;
  position:relative;
  overflow:hidden;
}

.btn-primary{
  background:var(--c-gold-gradient);
  color:var(--c-primary);
  box-shadow:0 4px 14px rgba(245,196,0,0.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(245,196,0,0.45);
}
.btn-primary:active{
  transform:translateY(0);
}
.btn-primary:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.btn-outline{
  background:rgba(255,255,255,0.1);
  color:#fff;
  border:1.5px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(8px);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.4);
  transform:translateY(-1px);
}

/* ===== VALIDATION ===== */
.req-star{color:#ef4444;font-weight:700;margin-left:2px}
.req-input{border-color:#fca5a5!important;background:#fff5f5!important}
.req-input:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,0.12)!important}
.validation-msg{
  font-size:.72rem;
  color:#fca5a5;
  margin-left:auto;
  display:none;
  font-weight:500;
  background:rgba(239,68,68,0.12);
  padding:6px 14px;
  border-radius:8px;
}
.validation-msg.show{display:inline}

/* ===== MODERN FORM ===== */
.edit-form{
  max-width:210mm;
  margin:0 auto 20px;
  background:var(--c-card-bg);
  border-radius:16px;
  box-shadow:var(--card-shadow-raised);
  padding:28px 30px;
  border:1px solid var(--c-border-light);
}

.edit-form h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--c-primary);
}

.dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--c-gold-gradient);
}

.section-label{
  font-size:.82rem;
  font-weight:700;
  color:var(--c-primary);
  margin:16px 0 10px;
  padding:8px 14px;
  background:linear-gradient(135deg, rgba(245,196,0,0.08), rgba(245,196,0,0.03));
  border-radius:8px;
  border-left:3px solid var(--c-gold);
  letter-spacing:.2px;
}

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.col{
  flex:1;
  min-width:160px;
}

.col label{
  display:block;
  font-size:.72rem;
  font-weight:600;
  color:var(--c-text-secondary);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.col input, .col select{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--c-border);
  border-radius:10px;
  font-size:.86rem;
  font-family:inherit;
  background:#fafafa;
  transition:var(--transition);
  outline:none;
  color:var(--c-text);
}

.col input:focus, .col select:focus{
  border-color:var(--c-gold);
  box-shadow:0 0 0 4px rgba(245,196,0,0.1);
  background:#fff;
}

.col input::placeholder{color:var(--c-text-muted)}

/* ===== TARIFF PLAN CARDS MODERN ===== */
.plan-block{
  background:#f8f8fc;
  border-radius:12px;
  padding:16px;
  margin:12px 0;
  border:1.5px solid var(--c-border);
  transition:var(--transition);
}
.plan-block:hover{
  border-color:rgba(245,196,0,0.3);
  box-shadow:0 2px 12px rgba(0,0,0,0.04);
}

.plan-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.plan-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:8px;
  background:var(--c-gold-gradient);
  color:var(--c-primary);
  font-size:.72rem;
  font-weight:800;
}

.btn-remove{
  width:30px;
  height:30px;
  border-radius:8px;
  border:1.5px solid #fee2e2;
  background:#fff5f5;
  color:#ef4444;
  font-size:.85rem;
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-remove:hover{
  background:#fee2e2;
  border-color:#ef4444;
}

.multi-select-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 8px;
  flex-wrap:wrap;
}

.btn-ms{
  padding:5px 14px;
  border-radius:20px;
  border:1.5px solid var(--c-border);
  background:#fff;
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  font-family:inherit;
}
.btn-ms:hover{
  border-color:var(--c-gold);
  background:var(--c-gold-light);
}
.btn-ms-sel-all{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
}
.btn-ms-sel-all:hover{
  background:var(--c-accent);
  border-color:var(--c-accent);
}

.selected-count{
  font-size:.7rem;
  color:var(--c-text-muted);
  font-weight:500;
}

.sum-toggle-row{
  margin:8px 0;
}

.sum-toggle-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:var(--c-text-secondary);
  cursor:pointer;
}

.sum-toggle-label input{
  width:16px;
  height:16px;
  accent-color:var(--c-gold);
  cursor:pointer;
}

/* ===== TARIFF GRID ===== */
.tariff-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  margin:10px 0;
}

.tariff-card{
  background:#fff;
  border-radius:12px;
  padding:16px;
  border:2px solid var(--c-border);
  cursor:pointer;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}

.tariff-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--c-border);
  transition:var(--transition);
}

.tariff-card:hover{
  border-color:rgba(245,196,0,0.3);
  box-shadow:var(--card-shadow-hover);
  transform:translateY(-2px);
}

.tariff-card.selected{
  border-color:var(--c-gold);
  box-shadow:0 0 0 4px rgba(245,196,0,0.08), var(--card-shadow-hover);
}
.tariff-card.selected::before{
  background:var(--c-gold-gradient);
}

.tc-select-hint{
  position:absolute;
  top:12px;right:12px;
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:700;
  border:2px solid var(--c-border);
  background:#fff;
  color:transparent;
  transition:var(--transition);
}

.tariff-card.selected .tc-select-hint{
  background:var(--c-gold);
  border-color:var(--c-gold);
  color:#fff;
}

.tc-label{
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--c-text-muted);
  margin-bottom:6px;
}

.tc-name{
  font-size:.92rem;
  font-weight:700;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.support-tag{
  font-size:.58rem;
  font-weight:600;
  padding:2px 8px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.support-tag.refresh{background:#dbeafe;color:#1e40af}
.support-tag.refresh-plus{background:#ede9fe;color:#6d28d9}

.tc-variant{
  font-size:.78rem;
  color:var(--c-text-secondary);
  margin-bottom:8px;
  line-height:1.4;
}

.tc-price{
  font-size:1.15rem;
  font-weight:800;
  color:var(--c-primary);
  margin:6px 0 2px;
}
.tc-price small{
  font-size:.65rem;
  font-weight:500;
  color:var(--c-text-muted);
}

.tc-specs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:8px 0;
}
.tc-specs span{
  font-size:.65rem;
  padding:2px 8px;
  border-radius:6px;
  background:#f0f0f4;
  color:var(--c-text-secondary);
}

.variant-btns{
  display:flex;
  gap:4px;
  margin-top:8px;
  flex-wrap:wrap;
}
.variant-btns button{
  flex:1;
  padding:5px 6px;
  border-radius:8px;
  border:1.5px solid var(--c-border);
  background:#fff;
  font-size:.65rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  font-family:inherit;
  color:var(--c-text-secondary);
  min-width:0;
}
.variant-btns button.active{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
}
.variant-btns button:hover:not(.active){
  border-color:var(--c-gold);
}

/* ===== ADDON ITEMS ===== */
.group-label{
  font-size:.78rem;
  font-weight:700;
  color:var(--c-primary);
  margin:10px 0 6px;
  padding:6px 12px;
  background:linear-gradient(135deg, #f0f0f4, #f8f8fc);
  border-radius:8px;
}

.addon-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:8px;
}

.addon-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#fff;
  border:1.5px solid var(--c-border);
  border-radius:10px;
  cursor:pointer;
  transition:var(--transition);
}
.addon-item:hover{
  border-color:rgba(245,196,0,0.3);
  background:var(--c-gold-light);
}
.addon-item.checked{
  border-color:var(--c-gold);
  background:linear-gradient(135deg, rgba(245,196,0,0.05), rgba(245,196,0,0.02));
}

.addon-item input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:var(--c-gold);
  cursor:pointer;
  flex-shrink:0;
}

.addon-item input[type="number"]{
  width:60px;
  padding:5px 8px;
  border:1.5px solid var(--c-border);
  border-radius:8px;
  font-size:.78rem;
  text-align:center;
  font-family:inherit;
  outline:none;
}
.addon-item input[type="number"]:focus{
  border-color:var(--c-gold);
}

.ai-info{flex:1;min-width:0}
.ai-name{font-size:.78rem;font-weight:600;color:var(--c-text)}
.ai-desc{font-size:.65rem;color:var(--c-text-muted);margin-top:1px}

.ai-price{
  font-size:.78rem;
  font-weight:700;
  color:var(--c-primary);
  white-space:nowrap;
  padding:4px 10px;
  background:#f0f0f4;
  border-radius:6px;
}

.multi-items-wrapper{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  background:#f8f8fc;
  border-radius:8px;
  margin-top:4px;
}

.multi-sub{
  display:flex;
  align-items:center;
  gap:8px;
}
.multi-sub-add{justify-content:center}

.mi-num{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--c-gold-gradient);
  color:var(--c-primary);
  font-size:.65rem;
  font-weight:700;
  flex-shrink:0;
}

.mi-name-input, .mi-price-input{
  padding:6px 10px;
  border:1.5px solid var(--c-border);
  border-radius:8px;
  font-size:.75rem;
  font-family:inherit;
  outline:none;
  background:#fff;
}
.mi-name-input{flex:1}
.mi-price-input{width:80px;text-align:right}
.mi-name-input:focus, .mi-price-input:focus{
  border-color:var(--c-gold);
}

.mi-currency{
  font-size:.7rem;
  color:var(--c-text-muted);
  font-weight:500;
}

.btn-sm{
  padding:4px 12px;
  border-radius:6px;
  border:1.5px solid var(--c-border);
  font-size:.68rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  font-family:inherit;
}
.btn-sm-add{
  background:var(--c-gold-light);
  border-color:#e0cf80;
  color:#6d5e00;
}
.btn-sm-add:hover{background:#fff9e6}
.btn-sm-danger{
  background:#fff5f5;
  border-color:#fee2e2;
  color:#ef4444;
}
.btn-sm-danger:hover{background:#fee2e2}

/* ===== PDF PAGE ===== */
.a4-wrapper{
  max-width:210mm;
  margin:0 auto;
  padding:0 0 40px;
}

.a4-page{
  max-width:210mm;
  background:#fff;
  margin:0 auto;
  box-shadow:var(--card-shadow-raised);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:297mm;
}

.top-bar{
  background:var(--c-gold);
  padding:18px 28px;
  border-bottom:4px solid var(--c-primary);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.brand{display:flex;align-items:center;gap:10px}

.logo-1c{
  display:flex;align-items:center;
  font-weight:900;font-size:1.6rem;
  color:#fff;
  letter-spacing:-1px;
}
.logo-num{
  background:var(--c-gold);
  color:var(--c-primary);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;
  margin-right:2px;
  font-size:1.15rem;
}

.logo-divider{
  width:1px;
  height:24px;
  background:rgba(255,255,255,0.2);
}

.logo-fresh{
  font-weight:800;
  font-size:1.2rem;
  color:var(--c-gold);
  letter-spacing:1px;
}

.top-bar-info{
  text-align:right;
  color:rgba(0,0,0,0.6);
  font-size:.72rem;
  line-height:1.6;
}
.top-bar-info strong{
  color:#1a1a2e;
  font-size:.82rem;
}

.page-content{
  padding:24px 28px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.section{margin-bottom:16px}

.section-title{
  font-size:.85rem;
  font-weight:700;
  color:var(--c-primary);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:2px solid var(--c-gold);
  display:inline-block;
}

/* PDF Tables */
.tariff-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.78rem;
}
.tariff-table th{
  background:#f0f0f4;
  padding:8px 12px;
  text-align:left;
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--c-text-secondary);
}
.tariff-table th:first-child{border-radius:8px 0 0 0}
.tariff-table th:last-child{border-radius:0 8px 0 0}
.tariff-table td{
  padding:8px 12px;
  border-bottom:1px solid var(--c-border-light);
  vertical-align:top;
}
.tariff-table tr:last-child td{border-bottom:none}

.field-label{
  font-size:.65rem;
  font-weight:600;
  color:var(--c-text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.field-value{
  font-size:.82rem;
  font-weight:500;
  color:var(--c-text);
}

/* Total Block */
/* Изменено: фон как в шапке */
.total-block{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  margin-top:auto;
  background:var(--c-gold);
  border-radius:10px;
  color:var(--c-primary);
  page-break-inside:avoid;
  break-inside:avoid;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.total-label{
  font-size:.7rem;
  font-weight:500;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.5px;
  min-width:0;
}
.total-month{
  font-size:.78rem;
  font-weight:400;
  opacity:.85;
  margin-top:2px;
}
/* Изменено: тёмный цвет на жёлтом фоне */
.total-value{
  font-size:1.4rem;
  font-weight:800;
  color:var(--c-primary);
  min-width:0;
  flex-shrink:1;
  text-align:right;
  white-space:nowrap;
}

/* Comparison Legend */
.comparison-legend{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.comparison-legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.65rem;
  color:var(--c-text-secondary);
}
.comparison-legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.comparison-legend-dot.standard{background:#e4e5e8;border:1.5px solid #cdced3}
.comparison-legend-dot.refresh{background:#dbeafe;border:1.5px solid #93c5fd}
.comparison-legend-dot.refresh-plus{background:#ede9fe;border:1.5px solid #c4b5fd}

/* Bottstrap extra */
.badge{
  display:inline-block;
  white-space:nowrap;
  padding:3px 10px;
  border-radius:20px;
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.badge-yellow{background:var(--c-gold-light);color:#6d5e00}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-purple{background:#ede9fe;color:#6d28d9}

/* ===== PRINT STYLES ===== */
@media print{
  @page{size:A4;margin:8mm}
  body{background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;font-size:10pt}
  body::before,body::after{display:none!important}
  .a4-wrapper{max-width:100%;padding:0;margin:0}
  .a4-page{
    max-width:100%;
    display:block;
    box-shadow:none!important;
    border-radius:0!important;
    margin:0;
    page-break-after:auto;
    min-height:auto;
  }
  .toolbar,.edit-form,.no-print,#offer_link_box{display:none!important}
  .total-spacer{display:none!important}
  .top-bar{background:#f5c400!important;border-bottom:3px solid #1a1a2e!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .page-content{display:block!important;padding:15px 22px!important}
  .total-block{display:flex!important;justify-content:space-between!important;align-items:center!important;width:100%!important;margin:10px 0 0 0!important;page-break-inside:avoid!important;break-inside:avoid!important;background:#f5c400!important;color:#1a1a2e!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .logo-num{background:#f5c400!important;-webkit-print-color-adjust:exact!important}
  .logo-fresh{color:#f5c400!important;-webkit-print-color-adjust:exact!important}
  .section-title{border-bottom:2px solid #f5c400!important;-webkit-print-color-adjust:exact!important}
  .tariff-card.selected{border-color:#f5c400!important}
  .total-value{color:#1a1a2e!important;-webkit-print-color-adjust:exact!important}
  .tariff-table th{background:#f0f0f4!important;-webkit-print-color-adjust:exact!important}
}