/* =============================================================
   Sodis Pricing Table — Stylesheet  v1.0.0
   ============================================================= */

:root {
  --row-odd:      #f9f9f9;
  --row-even:     #ffffff;
  --border-color: #E0E0E0;
  --radius:       14px;
  --col-param:    300px;
  --col-plan:     140px;
  --transition:   .18s ease;
}

.pricing-section { max-width: 1280px; margin: 0 auto; }
.pricing-section h2 { text-align: center; margin-bottom: 32px; }

.pricing-switches { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.switch-group { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 20px; min-width: 260px; }
.switch-title { font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-soft); margin-bottom: 10px; }
.switch-options { display: flex; gap: 0; }
.switch-option { position: relative; flex: 1; }
.switch-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-option label { display: block; padding: 8px 12px; border: 1.5px solid var(--accent); font-size: 13px !important; font-weight: 600; text-align: center; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; background: var(--white); color: var(--text-soft); }
.switch-option:first-child label { border-radius: 8px 0 0 8px; }
.switch-option:last-child label { border-radius: 0 8px 8px 0; margin-left: -1.5px; }
.switch-option input:checked + label { background: var(--accent); color: var(--black); border-color: var(--accent); z-index: 1; }

.pricing-panel { display: none; }
.pricing-panel.is-active { display: block; }

.pricing-scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: 0 4px 32px rgba(0,0,0,.08); }

.pricing-grid { display: grid; grid-template-columns: var(--col-param) repeat(7, minmax(var(--col-plan), 1fr)); min-width: 1060px; background: var(--white); border-radius: var(--radius); overflow: hidden; }

.grid-header { display: contents; }
.hcell { background: var(--black); color: var(--white); font-size: 13px !important; font-weight: 700; text-align: center; padding: 16px 10px; position: sticky; top: 0; z-index: 4; letter-spacing: .3px; }
.hcell.param-head { text-align: left; padding-left: 18px; position: sticky; left: 0; z-index: 6; }

.grid-row { display: contents; }
.grid-row:nth-child(even) .dcell:not(.param-cell):not(.price-cell) { background: var(--row-odd); }
.dcell { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 10px; font-size: 15px !important; border-top: 1px solid var(--border-color); background: var(--row-even); transition: background var(--transition); }

.dcell.param-cell { background: var(--accent) !important; color: var(--black); font-weight: 700; font-size: 14px !important; text-align: left; justify-content: flex-start; padding: 14px 14px 14px 18px; gap: 6px; line-height: 1.3; position: sticky; left: 0; z-index: 3; border-right: 2px solid rgba(0,0,0,.08); }

.grid-row.price-row .dcell { background: var(--text-soft) !important; color: var(--white); border-top: none; }
.grid-row.price-row .dcell.param-cell { background: var(--text-soft) !important; color: var(--white); }
.grid-row.price-row .dcell.price-cell { background: var(--accent) !important; color: var(--black); }
.grid-row.price-row .dcell.price-cell strong { font-size: 17px !important; font-weight: 800; white-space: nowrap; }
.grid-row.price-row .dcell.val-cell { font-size: 13px !important; font-style: italic; opacity: .85; }

.check-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--accent); border-radius: 50%; color: var(--white); font-size: 12px !important; font-weight: 900; flex-shrink: 0; }
.dash { color: #ccc; font-size: 18px !important; }
.on-request { font-size: 12px !important; color: var(--text-soft); font-style: italic; }
.grid-row.price-row .on-request { color: rgba(255,255,255,.75); }
.dedicated { font-size: 12px !important; color: var(--text-soft); font-style: italic; text-align: center; }

.info-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.25); background: rgba(255,255,255,.85); color: var(--black); font-size: 10px !important; font-weight: 700; cursor: pointer; pointer-events: auto; line-height: 1; transition: background var(--transition), border-color var(--transition); }
.info-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

#sodis-tooltip { position: fixed; z-index: 99999; max-width: 340px; min-width: 220px; padding: 10px 14px; border-radius: 10px; background: var(--black); color: var(--white); font-size: 13px !important; line-height: 1.4; box-shadow: 0 8px 28px rgba(0,0,0,.22); pointer-events: none; white-space: normal; display: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
#sodis-tooltip.visible { opacity: 1; transform: translateY(0); }

@media (hover: none) and (pointer: coarse) {
  .info-btn { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  #sodis-tooltip { max-width: calc(100vw - 24px); min-width: 200px; }
}
@media (max-width: 1620px) {
  .dcell.param-cell, .hcell.param-head { position: static; }
  :root { --col-param: 200px; --col-plan: 110px; }
}