/* ── OMW Design System v2.8 ───────────────────────── */
:root{
  --omw-blue:var(--omw-blue); --omw-blue-lt:#eff6ff;
  --omw-green:#16a34a; --omw-green-lt:#f0fdf4;
  --omw-red:#dc2626;  --omw-red-lt:var(--omw-red-lt);
  --omw-amber:#d97706; --omw-amber-lt:#fffbeb;
  --omw-gray-50:var(--omw-gray-50); --omw-gray-100:var(--omw-gray-100); --omw-gray-200:var(--omw-gray-200);
  --omw-gray-400:var(--omw-gray-400); --omw-gray-500:var(--omw-gray-500); --omw-gray-600:var(--omw-gray-600);
  --omw-gray-700:var(--omw-gray-700); --omw-gray-900:var(--omw-gray-900);
  --omw-radius:6px; --omw-radius-lg:10px;
  --omw-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
}

/* icons */
.omw-icon{ display:inline-block; vertical-align:middle; flex-shrink:0; }

/* entity switcher */
.omw-switcher{ display:flex !important; gap:6px !important; flex-wrap:wrap !important; margin-bottom:14px !important; }
.omw-switcher-btn{
  background:#fff !important; border:1.5px solid #d1d5db !important; border-radius:20px !important;
  padding:5px 16px !important; font-size:12px !important; font-weight:600 !important; color:#374151 !important;
  cursor:pointer !important; transition:all .15s !important; white-space:nowrap !important;
  display:inline-block !important; line-height:1.4 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
}
.omw-switcher-btn:hover{ border-color:#006CFF !important; color:#006CFF !important; }
.omw-switcher-btn.active{
  background:#006CFF !important; border-color:#006CFF !important; color:#fff !important;
}

/* widget card */
.omw-widget-card{
  background:#fff; border:1px solid var(--omw-gray-200); border-radius:var(--omw-radius-lg);
  overflow:hidden; box-shadow:var(--omw-shadow); margin-bottom:16px;
}
.omw-widget-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--omw-gray-100);
  background:var(--omw-gray-50);
}
.omw-widget-head h3{ margin:0; font-size:14px; font-weight:600; color:var(--omw-gray-900); display:flex; align-items:center; gap:8px; }
.omw-widget-body{ padding:16px; }

/* payments widget */
.omw-pay-section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--omw-gray-500); margin:0 0 10px; }
.omw-pay-sub-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--omw-gray-100);
}
.omw-pay-sub-row:last-child{ border-bottom:none; }
.omw-pay-sub-info{ flex:1; min-width:0; }
.omw-pay-sub-name{ font-weight:600; font-size:14px; color:var(--omw-gray-900); }
.omw-pay-sub-meta{ font-size:12px; color:var(--omw-gray-500); margin-top:2px; }
.omw-pay-sub-right{ text-align:right; flex-shrink:0; }
.omw-pay-sub-price{ font-weight:700; font-size:14px; color:var(--omw-gray-900); }
.omw-pay-sub-next{ font-size:11px; color:var(--omw-gray-400); margin-top:2px; }
.omw-pay-status{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:2px 7px; border-radius:10px;
  text-transform:uppercase; letter-spacing:.04em;
}
.omw-pay-status.active{ background:var(--omw-green-lt); color:var(--omw-green); }
.omw-pay-status.canceled{ background:var(--omw-red-lt); color:var(--omw-red); }
.omw-pay-status.past_due{ background:var(--omw-amber-lt); color:var(--omw-amber); }
.omw-pay-status.free{ background:#e0f2fe; color:#0369a1; }
.omw-pay-cancel-btn{
  margin-top:6px; font-size:11px; color:var(--omw-red); background:none;
  border:1px solid var(--omw-red); border-radius:4px; padding:2px 8px; cursor:pointer;
}
.omw-pay-cancel-btn:hover{ background:var(--omw-red-lt); }
.omw-pay-invoice-row{
  display:flex; align-items:center; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--omw-gray-100); font-size:13px;
}
.omw-pay-invoice-row:last-child{ border-bottom:none; }
.omw-pay-inv-date{ color:var(--omw-gray-600); width:90px; flex-shrink:0; }
.omw-pay-inv-amount{ font-weight:600; width:70px; flex-shrink:0; }
.omw-pay-inv-desc{ flex:1; color:var(--omw-gray-500); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.omw-pay-inv-pdf a{
  display:inline-flex; align-items:center; gap:4px; font-size:11px;
  color:var(--omw-blue); text-decoration:none; border:1px solid var(--omw-blue-lt);
  padding:2px 8px; border-radius:4px; white-space:nowrap;
}
.omw-pay-inv-pdf a:hover{ background:var(--omw-blue-lt); }
.omw-pay-empty{ padding:24px; text-align:center; color:var(--omw-gray-400); font-size:13px; }

/* ── OMW Widget base styles (v2.8, uses design tokens) ─────────────── */
.omw * { box-sizing:border-box; font-family:Lato,'Segoe UI',Roboto,Arial,sans-serif; }
.omw { padding:4px 0; color:var(--omw-gray-900); max-width:860px; }
.omw h3 { margin:0 0 12px; font-size:15px; font-weight:700; color:var(--omw-gray-900); display:flex; align-items:center; gap:8px; }
.omw .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Buttons — brand pill style */
.omw .btn { padding:10px 20px; margin-top:8px; border:0 !important; background:#006CFF !important; color:#fff !important; border-radius:25px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; text-decoration:none !important; transition:opacity .15s; }
.omw a.btn:hover, .omw a.btn:visited { color:#fff !important; text-decoration:none !important; }
.omw .btn:hover  { opacity:.88; }
.omw .btn.primary{ background:#1BDF1B !important; color:#fff !important; }
.omw .btn.danger { background:#FF0259 !important; color:#fff !important; }
.omw .btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.omw .btn-sm { padding:3px 10px !important; font-size:11px !important; border-radius:25px !important; margin-top:0 !important; }

/* Chip / badge */
.omw .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:25px; border:1px solid #e5e7eb; font-size:13px; }

/* Form controls */
.omw input, .omw select {
  padding:7px 10px; border:1px solid var(--omw-gray-200);
  border-radius:var(--omw-radius); font-size:13px; color:var(--omw-gray-900);
  background:#fff; outline:none; transition:border-color .15s;
}
.omw input:focus, .omw select:focus { border-color:var(--omw-blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }

/* Tables */
.omw table { width:100%; border-collapse:collapse; margin-top:8px; }
.omw th { font-size:11px; font-weight:700; color:var(--omw-gray-500); text-transform:uppercase; letter-spacing:.05em; padding:6px 8px; border-bottom:2px solid var(--omw-gray-200); background:var(--omw-gray-50); }
.omw td { padding:8px 8px; border-bottom:1px solid var(--omw-gray-100); font-size:13px; color:var(--omw-gray-700); }
.omw tr:last-child td { border-bottom:none; }
.omw tr:hover td { background:var(--omw-gray-50); }

/* Utility */
.omw .muted { color:var(--omw-gray-400); font-size:12px; }
.omw .right { margin-left:auto; }
.omw .list  { display:flex; flex-direction:column; gap:8px; margin:8px 0; }

/* Messages */
.omw .msg { font-size:13px; padding:8px 10px; border-radius:25px; margin-top:8px; }
.omw .msg.ok  { background:#ecfdf5; color:#065f46; }
.omw .msg.err { background:#fef2f2; color:#991b1b; }

/* Info grid (HostingOverview) */
.omw .info-grid { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.omw .info-row { display:flex; align-items:center; gap:12px; }
.omw .info-label { min-width:90px; font-size:13px; color:var(--omw-gray-500); flex-shrink:0; }
.omw .info-value { font-size:14px; font-weight:600; }
.omw .info-code { font-family:monospace; background:var(--omw-gray-100); padding:2px 6px; border-radius:4px; font-size:13px; }

/* Progress bars */
.omw .info-bar-wrap { flex:1; display:flex; flex-direction:column; gap:3px; }
.omw .info-bar { height:8px; border-radius:4px; transition:width .4s; min-width:2px; }
.omw .info-bar-label { font-size:12px; color:var(--omw-gray-500); }

/* SSL status dot */
.omw .ssl-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.omw .ssl-dot.ssl-active { background:var(--omw-green); box-shadow:0 0 0 3px var(--omw-green-lt); }
.omw .ssl-dot.ssl-inactive { background:#FF0259; box-shadow:0 0 0 3px #fee2e2; }
.omw .ssl-expiry { font-size:12px; color:var(--omw-gray-500); margin-left:6px; }
.omw .ssl-status-row { display:flex; align-items:center; gap:8px; padding:8px 0; flex-wrap:wrap; }

/* Address chip (ServerControl) */
.omw .addr-chip { font-family:monospace; font-size:13px; background:var(--omw-gray-100); border:1px solid var(--omw-gray-200); border-radius:25px; padding:4px 10px; }

/* Domain List & Website List */
.omw .website-cards { display:flex; flex-direction:column; gap:12px; }
.omw .website-card { border:1px solid var(--omw-gray-200); border-radius:8px; padding:12px 14px; background:#fafafa; }
.omw .website-card strong { display:block; margin-bottom:8px; font-size:14px; color:var(--omw-gray-900); }

/* Domain list */
.omw-domain-table { width:100%; border-collapse:collapse; }
.omw-domain-table th, .omw-domain-table td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--omw-gray-200); }
.chip-ok { color:var(--omw-green); font-size:12px; }

/* Website cards */
.omw .website-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.omw .website-card-header strong { font-size:15px; color:var(--omw-gray-900); }
.omw .site-info-grid { margin-bottom:4px; }
.omw .info-bar-wrap { flex:1; display:flex; align-items:center; gap:8px; }
.omw .info-bar { height:8px; border-radius:4px; min-width:2px; }
.omw .info-bar-label { font-size:12px; color:var(--omw-gray-500); white-space:nowrap; }

/* ── File Manager ──────────────────────────────────────────────────── */
.omw .fm-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.omw .fm-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:13px; flex:1; }
.omw .fm-crumb { cursor:pointer; color:var(--omw-blue); }
.omw .fm-crumb:hover { text-decoration:underline; }
.omw .fm-crumb-active { color:var(--omw-gray-700); cursor:default; font-weight:600; }
.omw .fm-sep { color:var(--omw-gray-400); }
.omw .fm-table { width:100%; border-collapse:collapse; font-size:13px; }
.omw .fm-table th, .omw .fm-table td { padding:6px 8px; text-align:left; border-bottom:1px solid var(--omw-gray-200); }
.omw .fm-table th { font-weight:600; color:var(--omw-gray-700); background:var(--omw-gray-50); }
.omw .fm-dir { cursor:pointer; color:var(--omw-blue); }
.omw .fm-dir:hover { text-decoration:underline; }
.omw .fm-size, .omw .fm-date { color:var(--omw-gray-500); white-space:nowrap; width:90px; }
.omw .fm-del { padding:2px 8px !important; font-size:12px !important; }
.omw .fm-acts { white-space:nowrap; width:1%; }
.omw .fm-act  { padding:2px 7px !important; font-size:12px !important; margin-top:0 !important; margin-right:2px; border-radius:5px !important; }

/* File editor modal */
.omw-fm-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9000; display:flex; align-items:center; justify-content:center; }
.omw-fm-modal   { background:#fff; border-radius:12px; width:min(90vw,800px); max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.omw-fm-mhead   { padding:12px 16px; border-bottom:1px solid var(--omw-gray-200); display:flex; align-items:center; justify-content:space-between; font-weight:600; font-size:14px; }
.omw-fm-mbody   { flex:1; overflow:auto; padding:16px; }
.omw-fm-mfoot   { padding:10px 16px; border-top:1px solid var(--omw-gray-200); display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.omw .fm-editor { width:100%; min-height:320px; font-family:monospace; font-size:13px; line-height:1.5; border:1px solid #d1d5db; border-radius:6px; padding:10px; resize:vertical; tab-size:2; }

/* ── DNS Manager ───────────────────────────────────────────────────── */
.omw .dns-add-panel { border:1px dashed #d1d5db; border-radius:8px; padding:12px 14px; margin-bottom:10px; background:var(--omw-gray-50); }
.omw .dns-field-lbl { font-size:12px; color:var(--omw-gray-500); white-space:nowrap; }
.omw .dns-list-header {
  display:grid; grid-template-columns:54px 100px 1fr 62px auto;
  gap:8px; padding:4px 4px 6px;
  font-size:11px; font-weight:600; color:var(--omw-gray-400); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:2px solid var(--omw-gray-200); margin-bottom:2px;
}
.omw .dns-row {
  display:grid; grid-template-columns:54px 100px 1fr 62px auto;
  gap:8px; align-items:center; padding:7px 4px;
  border-bottom:1px solid var(--omw-gray-100);
}
.omw .dns-row:hover  { background:#fafafa; }
.omw .dns-edit-row   { background:#f0f7ff !important; border-bottom:1px solid #bfdbfe; }
.omw .dns-edit-row:hover { background:#e8f0fe !important; }
/* DNS edit row inputs fill their grid cell */
.omw .dns-edit-row input, .omw .dns-edit-row select { padding:4px 6px; font-size:12px; width:100%; box-sizing:border-box; }
.omw .dns-badge {
  display:inline-block; min-width:44px; text-align:center;
  padding:2px 5px; border-radius:4px;
  font-size:11px; font-weight:700; font-family:monospace; white-space:nowrap;
}
.omw .dns-A    { background:#dbeafe; color:#1e40af; }
.omw .dns-AAAA { background:#ede9fe; color:#5b21b6; }
.omw .dns-CNAME{ background:#ccfbf1; color:#065f46; }
.omw .dns-MX   { background:#ffedd5; color:#9a3412; }
.omw .dns-TXT  { background:var(--omw-gray-100); color:var(--omw-gray-700); }
.omw .dns-NS   { background:var(--omw-green-lt); color:#14532d; }
.omw .dns-SRV  { background:#fef9c3; color:#713f12; }
.omw .dns-CAA  { background:#fce7f3; color:#831843; }
.omw .dns-SOA  { background:#e0e7ff; color:#3730a3; }
.omw .dns-PTR  { background:#f0fdf4; color:#166534; }
.omw .dns-OTHER{ background:var(--omw-gray-100); color:var(--omw-gray-500); }
.omw .dns-rec-name { font-family:monospace; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.omw .dns-rec-val  { font-family:monospace; font-size:12px; color:var(--omw-gray-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.omw .dns-rec-ttl  { font-size:11px; color:var(--omw-gray-400); white-space:nowrap; text-align:right; }
.omw .dns-actions  { display:flex; gap:4px; justify-content:flex-end; }


/* ── Product Configurator ─────────────────────────────────────────────────── */
.omw-cfg { max-width:880px; }

/* Step bar */
.omw-cfg-steps { display:flex; align-items:center; margin-bottom:28px; }
.omw-cfg-step  { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.omw-cfg-step-num {
  width:26px; height:26px; border-radius:50%; background:#e5e7eb; color:#6b7280;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.omw-cfg-step.active .omw-cfg-step-num { background:#006CFF; color:#fff; }
.omw-cfg-step.done   .omw-cfg-step-num { background:#16a34a; color:#fff; }
.omw-cfg-step-label  { font-size:13px; color:#9ca3af; font-weight:500; white-space:nowrap; }
.omw-cfg-step.active .omw-cfg-step-label { color:#006CFF; font-weight:700; }
.omw-cfg-step.done   .omw-cfg-step-label { color:#16a34a; }
.omw-cfg-step-line { flex:1; height:2px; background:#e5e7eb; margin:0 10px; min-width:20px; }
.omw-cfg-step-line.done { background:#16a34a; }

/* Headings */
.omw-cfg-heading { font-size:18px; font-weight:700; color:#111827; margin:0 0 5px; }
.omw-cfg-sub     { font-size:13px; color:#6b7280; margin:0 0 22px; }

/* Step 1 — product grid */
.omw-cfg-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .omw-cfg-product-grid { grid-template-columns:1fr; } }
.omw-cfg-product-card {
  border:1.5px solid #e5e7eb; border-radius:10px; padding:16px 18px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s; background:#fff;
}
.omw-cfg-product-card:hover {
  border-color:#006CFF; box-shadow:0 4px 14px rgba(0,108,255,.12); transform:translateY(-1px);
}
.omw-cfg-product-name-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.omw-cfg-product-icon { color:#006CFF; flex-shrink:0; }
.omw-cfg-product-name { font-size:15px; font-weight:700; color:#111827; }
.omw-cfg-product-desc { font-size:13px; color:#6b7280; line-height:1.5; }

/* Bundles wide card */
.omw-cfg-product-card--wide { grid-column: span 2; }
@media(max-width:480px){ .omw-cfg-product-card--wide { grid-column: span 1; } }
.omw-cfg-bundle-inner { display:flex; align-items:center; gap:24px; }
.omw-cfg-bundle-left  { flex:0 0 auto; max-width:220px; }
.omw-cfg-bundle-tiers { display:flex; gap:10px; flex:1; }
.omw-cfg-bundle-tier  {
  flex:1; border:1.5px solid #e5e7eb; border-radius:8px; padding:10px 12px;
  display:flex; flex-direction:column; gap:3px; background:#f9fafb;
}
.omw-cfg-product-card:hover .omw-cfg-bundle-tier { border-color:#d1d5db; }
.btr-name   { font-size:13px; font-weight:700; color:#111827; }
.btr-detail { font-size:11px; color:#6b7280; }
.btr-price  { font-size:13px; font-weight:700; color:#006CFF; margin-top:4px; }
@media(max-width:600px){ .omw-cfg-bundle-tiers { flex-direction:column; } .omw-cfg-bundle-inner { flex-direction:column; align-items:flex-start; } }


/* Step 2 — two-column layout */
.omw-cfg-body { display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start; }
@media(max-width:680px){ .omw-cfg-body { grid-template-columns:1fr; } }

/* Sliders */
.omw-cfg-slider-row { margin-bottom:20px; }
.omw-cfg-slider-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.omw-cfg-slider-label { font-size:13px; font-weight:600; color:#374151; }
.omw-cfg-slider-val   { font-size:15px; font-weight:700; color:#006CFF; }
.omw-cfg-slider {
  width:100%; accent-color:#006CFF; height:4px; border-radius:2px;
  outline:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.omw-cfg-ticks { display:flex; justify-content:space-between; margin-top:5px; }
.omw-cfg-tick  { font-size:10.5px; color:#9ca3af; }

/* Plan note badge (vserver) */
.omw-cfg-plan-note {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:10px 14px; margin:16px 0;
}
.pn-tier  { font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.pn-lite  { background:#dbeafe; color:#1e40af; }
.pn-cloud { background:#ede9fe; color:#5b21b6; }
.pn-name  { font-weight:700; color:#111827; font-size:13px; }
.pn-specs { font-size:12px; color:#6b7280; }

/* Options */
.omw-cfg-options-title {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; margin:20px 0 8px;
}
.omw-cfg-option-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f3f4f6; }
.omw-cfg-option-row:last-child { border-bottom:none; }
.omw-cfg-option-row label { font-size:13px; color:#374151; flex:1; font-weight:500; cursor:pointer; }
.omw-cfg-option-row .opt-detail { font-weight:400; color:#9ca3af; }
.omw-cfg-option-row .opt-price  { font-size:12px; color:#6b7280; white-space:nowrap; flex-shrink:0; }

/* Segmented control */
.omw-cfg-seg { display:flex; align-items:stretch; border:1.5px solid #e5e7eb; border-radius:8px; overflow:hidden; flex-shrink:0; }
.omw-cfg-seg-btn {
  padding:7px 18px; font-size:12px; font-weight:600; background:#fff; color:#374151;
  border:none; border-right:1px solid #e5e7eb; cursor:pointer; transition:background .15s,color .15s;
  border-radius:0 !important;
}
.omw-cfg-seg-btn:last-child { border-right:none; }
.omw-cfg-seg-btn.active { background:#006CFF; color:#fff; border-right-color:rgba(255,255,255,.15); }
.omw-cfg-seg-btn:hover:not(.active) { background:#f3f4f6; }

/* Toggle — knob via background-image (cross-browser; ::after unsupported on <input>) */
.omw-cfg-toggle {
  -webkit-appearance:none !important; appearance:none !important;
  width:36px !important; height:20px !important; border-radius:10px !important;
  background-color:#d1d5db !important;
  background-image:radial-gradient(circle 7px at center, #fff 100%, transparent 0) !important;
  background-size:20px 20px !important;
  background-position:0px center !important;
  background-repeat:no-repeat !important;
  cursor:pointer; flex-shrink:0; border:none !important; padding:0 !important;
  transition:background-color .2s, background-position .2s;
}
.omw-cfg-toggle:checked {
  background-color:#006CFF !important;
  background-position:16px center !important;
}

/* Hosting plan cards */
.omw-cfg-plan-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
@media(max-width:560px){ .omw-cfg-plan-cards { grid-template-columns:1fr; } }
.omw-cfg-plan-card {
  border:1.5px solid #e5e7eb; border-radius:10px; padding:14px 16px; cursor:pointer;
  text-align:center; transition:border-color .15s,box-shadow .15s; background:#fff;
}
.omw-cfg-plan-card:hover   { border-color:#006CFF; }
.omw-cfg-plan-card.selected{ border-color:#006CFF; box-shadow:0 0 0 3px rgba(0,108,255,.12); }
.cpc-name   { font-weight:700; font-size:14px; color:#111827; margin-bottom:6px; }
.cpc-detail { font-size:12px; color:#6b7280; margin-bottom:2px; }
.cpc-price  { font-size:13px; color:#6b7280; margin-top:10px; }
.cpc-price b{ font-size:20px; color:#006CFF; font-weight:700; margin-right:2px; }

/* Mail counter */
.omw-cfg-count-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.omw-cfg-counter { display:flex; align-items:center; gap:12px; }
.omw-cfg-count-btn {
  width:30px !important; height:30px !important; padding:0 !important;
  border-radius:50% !important; border:1.5px solid #d1d5db !important; background:#fff !important;
  cursor:pointer; display:flex !important; align-items:center; justify-content:center; color:#374151;
  flex-shrink:0; box-sizing:content-box !important;
  transition:border-color .15s,color .15s,background .15s;
}
.omw-cfg-count-btn:hover { border-color:#006CFF; color:#006CFF; background:#eff6ff; }
.omw-cfg-count-val { font-size:24px; font-weight:700; color:#111827; min-width:36px; text-align:center; }

/* Domain TLD grid */
.omw-cfg-tld-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px; margin-bottom:16px; }
.omw-cfg-tld-card {
  border:1.5px solid #e5e7eb; border-radius:10px; padding:10px 8px; cursor:pointer;
  text-align:center; transition:border-color .15s,box-shadow .15s; background:#fff;
}
.omw-cfg-tld-card:hover    { border-color:#006CFF; }
.omw-cfg-tld-card.selected { border-color:#006CFF; box-shadow:0 0 0 3px rgba(0,108,255,.12); }
.ctc-tld   { font-weight:700; font-size:15px; color:#111827; margin-bottom:4px; }
.ctc-price { font-size:11px; color:#6b7280; }
.ctc-price b{ display:block; font-size:16px; color:#006CFF; font-weight:700; }

/* Summary card (right column) */
.omw-cfg-card-summary {
  background:#fff; border:1.5px solid #e5e7eb; border-radius:10px;
  padding:18px 20px; position:sticky; top:20px;
}
.omw-cfg-card-summary .cs-plan  { font-size:14px; font-weight:700; color:#1e40af; margin-bottom:4px; }
.omw-cfg-card-summary .cs-specs { font-size:12px; color:#6b7280; margin-bottom:14px; line-height:1.7; white-space:pre-line; }
.omw-cfg-card-summary .cs-row   { display:flex; justify-content:space-between; font-size:13px; color:#374151; padding:5px 0; border-bottom:1px solid #f3f4f6; }
.omw-cfg-card-summary .cs-row.total {
  font-weight:700; color:#006CFF; font-size:15px;
  border-top:2px solid #dbeafe; border-bottom:none; padding-top:10px; margin-top:6px;
}
.omw-cfg-card-summary .cs-onetime { font-size:11px; color:#0369a1; text-align:right; margin-top:4px; }

/* Nav row */
.omw-cfg-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; padding-top:16px; border-top:1px solid #f3f4f6; }
.omw-cfg-btn-back {
  background:transparent; border:1.5px solid #d1d5db; color:#374151; border-radius:25px;
  padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; transition:border-color .15s,color .15s;
}
.omw-cfg-btn-back:hover { border-color:#6b7280; color:#111827; }

/* Receipt (step 3) */
.omw-cfg-receipt { background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; padding:24px; margin-top:16px; max-width:520px; }
.omw-cfg-receipt h3       { font-size:18px; font-weight:700; color:#111827; margin:0 0 5px; }
.omw-cfg-receipt .r-specs { font-size:13px; color:#6b7280; margin-bottom:20px; }
.omw-cfg-receipt .r-row   { display:flex; justify-content:space-between; font-size:14px; color:#374151; padding:8px 0; border-bottom:1px solid #f3f4f6; }
.omw-cfg-receipt .r-total { display:flex; justify-content:space-between; font-size:16px; font-weight:700; color:#006CFF; padding-top:14px; margin-top:8px; border-top:2px solid #dbeafe; }
.omw-cfg-receipt .r-onetime { text-align:right; font-size:12px; color:#6b7280; margin-top:8px; }

/* .omw .btn override for nav next/order inside configurator */
.omw-cfg .btn { margin-top:0; padding:9px 22px; }

/* Stripe note */
.omw-cfg-stripe-note { display:flex; align-items:center; gap:5px; font-size:11px; color:#888; justify-content:flex-end; padding:4px 2px 0; }
.omw-cfg-stripe-note svg { color:#635BFF; }

/* Domain availability check */
.omw-cfg-domain-row { margin-bottom:16px; }
.omw-cfg-domain-wrap { display:flex; align-items:stretch; background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.omw-cfg-domain-inp { border:none; outline:none; padding:10px 14px; font-size:14px; font-weight:500; flex:1; min-width:0; color:#111827; background:transparent; }
.omw-cfg-domain-badge { display:flex; align-items:center; padding:0 10px; font-size:13px; font-weight:700; color:#006CFF; border-left:1px solid #e5e7eb; white-space:nowrap; background:#f0f7ff; }
.omw-cfg-domain-check { border:none; border-left:2px solid rgba(255,255,255,.35); background:#006CFF !important; color:#fff; padding:0 20px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s; border-radius:0 !important; }
.omw-cfg-domain-check:hover { background:#0055cc; }
.omw-cfg-domain-check:disabled { opacity:.5; cursor:not-allowed; }
.omw-cfg-domain-avail { font-size:12px; color:#6b7280; margin-top:6px; padding:0 2px; min-height:18px; }
.omw-cfg-domain-avail.ok   { color:#16a34a; font-weight:600; }
.omw-cfg-domain-avail.taken{ color:#dc2626; font-weight:600; }

/* ============================================================
   Mail Manager — mailbox rows, create form, dialog
   ============================================================ */

/* Row for each mailbox — grid layout, clear hierarchy */
.omw-mbx-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--omw-gray-200);
  border-radius: var(--omw-radius-lg);
  background: #fff;
  margin-bottom: 8px;
}
.omw-mbx-row:hover { border-color: #d1d5db; }
.omw-mbx-meta { display: flex; flex-direction: column; min-width: 0; }
.omw-mbx-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 600; color: var(--omw-gray-900); word-break: break-all; }
.omw-mbx-usage { font-size: 12px; color: var(--omw-gray-500); margin-top: 2px; }
.omw-mbx-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.omw-mbx-actions .btn, .omw-mbx-actions .btn-sm { margin-top: 0 !important; }
.omw-mbx-actions .btn.icon-only { padding: 6px 10px !important; }
@media (max-width: 520px) {
  .omw-mbx-row { grid-template-columns: 1fr; }
  .omw-mbx-actions { justify-content: flex-start; }
}

/* Create form — inline row with helper text underneath */
.omw-mbx-create { border: 1px dashed var(--omw-gray-200); border-radius: var(--omw-radius-lg); padding: 12px; background: #fafbfc; margin-top: 8px; }
.omw-mbx-create-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.omw-mbx-local { display: inline-flex; align-items: stretch; background: #fff; border: 1px solid var(--omw-gray-200); border-radius: var(--omw-radius); overflow: hidden; }
.omw-mbx-local input { border: 0 !important; padding: 7px 10px !important; min-width: 100px; font-size: 13px; }
.omw-mbx-local input:focus { box-shadow: none !important; }
.omw-mbx-suffix { display: inline-flex; align-items: center; padding: 0 10px; background: var(--omw-gray-50); font-size: 13px; color: var(--omw-gray-500); border-left: 1px solid var(--omw-gray-200); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.omw-mbx-hint { font-size: 11px; color: var(--omw-gray-500); margin-top: 8px; padding-left: 2px; }
.omw-mbx-hint strong { color: var(--omw-gray-700); font-weight: 600; }

/* Dialog (reused across password change + delete confirm) */
.omw-dlg-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.omw-dlg { background: #fff; border-radius: var(--omw-radius-lg); width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,.15); overflow: hidden; }
.omw-dlg-head { padding: 16px 20px 8px; }
.omw-dlg-title { font-size: 15px; font-weight: 700; color: var(--omw-gray-900); margin: 0; }
.omw-dlg-desc { font-size: 13px; color: var(--omw-gray-500); margin: 4px 0 0; }
.omw-dlg-body { padding: 8px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.omw-dlg-body label { font-size: 12px; color: var(--omw-gray-500); font-weight: 600; }
.omw-dlg-body input { padding: 9px 12px !important; border-radius: var(--omw-radius) !important; font-size: 14px !important; }
.omw-dlg-hint { font-size: 11px; color: var(--omw-gray-500); }
.omw-dlg-err { font-size: 12px; color: var(--omw-red); background: var(--omw-red-lt); border-radius: 6px; padding: 6px 10px; display: none; }
.omw-dlg-err.show { display: block; }
.omw-dlg-actions { display: flex; gap: 8px; padding: 12px 20px 16px; justify-content: flex-end; border-top: 1px solid var(--omw-gray-100); background: var(--omw-gray-50); }
.omw-dlg-actions .btn, .omw-dlg-actions .btn-sm { margin-top: 0 !important; }
.omw-dlg-actions .btn.cancel { background: #fff !important; color: var(--omw-gray-700) !important; border: 1px solid var(--omw-gray-200) !important; }

/* Upsell CTA — shown in place of the create form when plan cap is reached */
.omw-mbx-upsell {
  border: 1px solid var(--omw-gray-200);
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%);
  border-radius: var(--omw-radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.omw-mbx-upsell-title { font-size: 15px; font-weight: 700; color: var(--omw-gray-900); }
.omw-mbx-upsell-desc  { font-size: 13px; color: var(--omw-gray-600); line-height: 1.5; }
.omw-mbx-upsell .btn { margin-top: 4px; }

/* Small inline throbber used in the "Setting up…" mailbox pill */
.omw-throb {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: omw-throb-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes omw-throb-spin { to { transform: rotate(360deg); } }