/* =========================================================
   T-FIBER TARIFF — stylesheet
   Reuses existing design tokens from style.css (--navy, --orange,
   --grey-bg, --font-head, --font-body, .btn, .container, etc.) —
   no new color/font variables introduced. Shared by the home-page
   section (#tariff-home) and the dedicated page (#tariff-page).
   ========================================================= */

/* =================== SHARED: TABS =================== */
.tariff-tabs{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:36px;
}
.tariff-tab{
  background:var(--white); border:1px solid var(--grey-line); color:var(--text);
  font-family:var(--font-head); font-size:.85rem; font-weight:600;
  padding:12px 22px; border-radius:30px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tariff-tab:hover{ transform:translateY(-2px); border-color:var(--orange); }
.tariff-tab:focus-visible{ outline:3px solid var(--sky, #4FC3F7); outline-offset:2px; }
.tariff-tab.is-active{
  background:var(--orange); border-color:var(--orange-dark); color:var(--white);
  box-shadow:0 8px 18px rgba(0,29,87,.25);
}

/* =================== SHARED: CARDS =================== */
.tariff-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.tariff-card{
  position:relative;
  background:var(--white); border:1px solid var(--grey-line); border-radius:14px;
  padding:26px 22px 22px; text-align:left;
  box-shadow:0 6px 18px rgba(11,42,74,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  opacity:0; transform:translateY(14px);
}
.tariff-card.tariff-card-in{ animation:tariffCardIn .5s ease forwards; }
@keyframes tariffCardIn{ to{ opacity:1; transform:translateY(0); } }
.tariff-card:hover, .tariff-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 34px rgba(11,42,74,.14);
  border-color:rgba(247,148,29,.4);
  outline:none;
}
.tariff-card.is-popular{
  border-color:var(--orange);
  box-shadow:0 10px 26px rgba(247,148,29,.18);
}
.tariff-badge{
  position:absolute; top:-12px; left:22px;
  background:var(--orange); color:var(--white);
  font-family:var(--font-head); font-size:.68rem; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; padding:5px 14px; border-radius:20px;
  box-shadow:0 4px 10px rgba(247,148,29,.35);
}

.tariff-card-bandwidth{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed var(--grey-line);
}
.tariff-card-bandwidth strong{
  font-family:var(--font-head); color:#0D9488; font-size:1.9rem; font-weight:800; line-height:1;
}
.tariff-fup{
  font-size:.7rem; font-weight:700; color:#178040; background:rgba(30,158,74,.1);
  padding:4px 10px; border-radius:12px; white-space:nowrap;
}
.tariff-fup-none{ color:var(--text-light); background:var(--grey-bg); }

.tariff-price-block{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.tariff-price-row{ display:flex; flex-direction:column; }
.tariff-price{ font-family:Arial, Helvetica, sans-serif; font-size:1.35rem; font-weight:800; color:var(--navy); }
.tariff-price-row-ofc .tariff-price{ font-size:1.05rem; color:var(--text); }
.tariff-price-label{ font-size:.7rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }

.tariff-note-tag{
  display:inline-block; font-size:.68rem; font-weight:700; color:var(--orange-dark);
  background:rgba(237,28,36,.08); padding:3px 9px; border-radius:10px; margin-bottom:12px;
}

.tariff-compare-check{
  display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-light);
  border-top:1px solid var(--grey-line); padding-top:12px; margin-top:4px; cursor:pointer;
}
.tariff-compare-check input{ accent-color:var(--orange); }

.tariff-empty{ grid-column:1/-1; text-align:center; color:var(--text-light); padding:40px 0; }

/* =================== HOME PAGE SECTION =================== */
.tariff-section{ background:var(--grey-bg); padding:30px 0; }
.tariff-section .section-heading{ flex-direction:column; gap:10px; margin-bottom:14px; }
.tariff-section .section-heading h2{ white-space:normal; }
.tariff-section-sub{
  text-align:center; color:var(--text-light); max-width:520px; margin:0 auto 40px; font-size:.98rem;
}
.tariff-viewall-btn{
  display:block; margin:34px auto 0;
  background:var(--white); border:2px solid var(--navy); color:var(--navy);
  font-family:var(--font-head); font-weight:700; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.4px; padding:13px 30px; border-radius:4px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.tariff-viewall-btn:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }
.tariff-home-footer{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:26px; font-size:.88rem; color:var(--text-light);
}
.tariff-home-footer a{ color:var(--steel); font-weight:700; }
.tariff-home-footer a:hover{ color:var(--orange); }

/* =================== DEDICATED PAGE =================== */
.tariff-page-hero{
  background:linear-gradient(135deg, #04366c 10%, #381860 50%, #2b0342 60%), url('../images/bg_what_we_offer.png');
  padding:24px 0 20px; color:var(--white); text-align:center;
}
.tariff-page-hero h1{
  font-family:var(--font-head); font-size:1.9rem; font-weight:700; margin:0 0 10px;
}
.tariff-page-hero p{ color:#D7E2ED; max-width:620px; margin:0 auto; line-height:1.6; }

.tariff-page-body{ background:var(--white); padding:25px 0 80px; }

.tariff-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--grey-line);
}
.tariff-toolbar-left{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex:1; min-width:220px; }
.tariff-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.tariff-filter-chip{
  background:var(--white); border:1px solid var(--grey-line); color:var(--text-light);
  font-size:.78rem; font-weight:600; padding:7px 14px; border-radius:20px; cursor:pointer;
  transition:all .15s ease;
}
.tariff-filter-chip:hover{ border-color:var(--orange); }
.tariff-filter-chip.is-active{ background:var(--orange); border-color:var(--orange); color:var(--white); }

.tariff-toolbar-right{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.tariff-search-wrap{ position:relative; }
.tariff-search-wrap i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:.8rem; }
.tariff-search-wrap input{
  font-family:var(--font-body); font-size:.85rem; padding:9px 12px 9px 32px;
  border:1px solid var(--grey-line); border-radius:20px; width:180px;
  transition:border-color .15s ease, box-shadow .15s ease, width .2s ease;
}
.tariff-search-wrap input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,148,29,.15); width:220px; }

.tariff-sort-wrap select{
  font-family:var(--font-body); font-size:.85rem; color:var(--text);
  border:1px solid var(--grey-line); border-radius:20px; padding:9px 14px; background:var(--white);
  cursor:pointer;
}
.tariff-sort-wrap select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(247,148,29,.15); }

.tariff-view-toggle{ display:flex; border:1px solid var(--grey-line); border-radius:20px; overflow:hidden; }
.tariff-view-toggle button{
  background:var(--white); border:none; color:var(--text-light); font-size:.8rem; font-weight:600;
  padding:9px 16px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.tariff-view-toggle button.is-active{ background:var(--navy); color:var(--white); }

.tariff-results-count{ font-size:.8rem; color:var(--text-light); margin-bottom:18px; }

/* Detailed table */
.tariff-table-wrap{ overflow-x:auto; border:1px solid var(--grey-line); border-radius:10px; }
.tariff-table{ width:100%; border-collapse:collapse; min-width:520px; }
.tariff-table thead th{
  position:sticky; top:0; z-index:2;
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--white); background:var(--navy); padding:14px 16px;
}
.tariff-table tbody td{ padding:12px 16px; border-bottom:1px solid var(--grey-line); font-size:.9rem; color:var(--text); }
.tariff-table tbody tr:nth-child(even){ background:var(--grey-bg); }
.tariff-table tbody tr:hover{ background:rgba(247,148,29,.06); }
.tariff-table-note{ color:var(--text-light); font-size:.78rem; }

/* Compare bar (sticky footer) */
.tariff-compare-bar[hidden]{ display:none; }
.tariff-compare-bar{
  position:sticky; bottom:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--navy); color:var(--white); padding:14px 20px; border-radius:12px 12px 0 0;
  margin-top:30px; box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
.tariff-compare-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tariff-compare-chip{ background:rgba(255,255,255,.12); padding:5px 12px; border-radius:14px; font-size:.78rem; }
.tariff-compare-open{
  background:var(--orange); color:var(--white); border:none; font-family:var(--font-head);
  font-weight:700; font-size:.82rem; padding:10px 20px; border-radius:20px; cursor:pointer;
  transition:background .15s ease;
}
.tariff-compare-open:hover:not(:disabled){ background:var(--orange-dark); }
.tariff-compare-open:disabled{ opacity:.5; cursor:not-allowed; }

/* Compare modal */
.tariff-compare-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(7,27,48,.65); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.tariff-compare-modal[hidden]{ display:none; }
.tariff-compare-modal-panel{
  background:var(--white); border-radius:14px; max-width:900px; width:100%;
  max-height:80vh; overflow-y:auto; padding:28px;
  animation:tariffModalIn .25s ease forwards;
}
@keyframes tariffModalIn{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.tariff-compare-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.tariff-compare-modal-head h3{ font-family:var(--font-head); color:var(--navy); margin:0; font-size:1.2rem; }
.tariff-compare-modal-close{
  background:var(--grey-bg); border:none; width:34px; height:34px; border-radius:50%;
  color:var(--text); font-size:1rem; cursor:pointer;
}
.tariff-compare-modal-close:hover{ background:var(--grey-line); }
.tariff-compare-table{ width:100%; border-collapse:collapse; }
.tariff-compare-table th, .tariff-compare-table td{ padding:12px 14px; border-bottom:1px solid var(--grey-line); text-align:left; font-size:.88rem; }
.tariff-compare-table thead th{ color:var(--navy); font-family:var(--font-head); background:var(--grey-bg); }
.tariff-compare-table td:first-child, .tariff-compare-table th:first-child{ font-weight:700; color:var(--text); }

/* Footnote */
.tariff-footnote-block{
  margin-top:36px; padding:16px 20px; background:var(--grey-bg); border-left:4px solid var(--orange);
  border-radius:0 8px 8px 0; font-size:.8rem; color:var(--text-light); line-height:1.6;
}
.tariff-footnote-block strong{ color:var(--text); display:block; margin-bottom:4px; font-family:var(--font-head); font-size:.82rem; }

@media (prefers-reduced-motion: reduce){
  .tariff-card{ animation:none !important; opacity:1; transform:none; }
  .tariff-compare-modal-panel{ animation:none; }
}

/* =================== RESPONSIVE =================== */
@media (max-width:1180px){
  .tariff-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:900px){
  .tariff-grid{ grid-template-columns:repeat(2, 1fr); }
  .tariff-tabs{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .tariff-tab{ flex-shrink:0; }
  .tariff-toolbar{ flex-direction:column; align-items:stretch; }
  .tariff-toolbar-right{ justify-content:space-between; }
  .tariff-search-wrap input{ width:100%; }
  .tariff-search-wrap input:focus{ width:100%; }
}
@media (max-width:640px){
  .tariff-section{ padding:60px 0; }
  .tariff-grid{ grid-template-columns:1fr; }
  .tariff-card-bandwidth strong{ font-size:1.6rem; }
  .tariff-compare-bar{ flex-direction:column; align-items:stretch; }
  .tariff-compare-open{ width:100%; }
}
@media (max-width:400px){
  .tariff-tab{ padding:10px 16px; font-size:.78rem; }
}