/* =====================================================================
   DesalTech — Undercounter page (tabs + editable content)
   ===================================================================== */
.uc-section{padding:10px 0 70px;background:#fff;}
.uc-tabs-wrap{max-width:1180px;margin:0 auto;padding:0 16px;}

/* ---------- Tab bar ---------- */
.uc-tabbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:#fff;border:1px solid #e6ebf2;border-radius:16px;padding:8px;box-shadow:0 6px 22px rgba(23,43,77,.06);margin-bottom:26px;position:sticky;top:0;z-index:30;}
.uc-tabpanel{scroll-margin-top:90px;}
.uc-tab{flex:1 1 auto;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:#3c4a60;font-weight:700;font-size:.92rem;padding:12px 14px;border-radius:11px;cursor:pointer;transition:all .18s ease;font-family:inherit;}
.uc-tab i{font-size:.95rem;opacity:.85;}
.uc-tab:hover{background:#eef5fd;color:#004d9a;}
.uc-tab.active{background:linear-gradient(135deg,#004d9a,#1c86e0);color:#fff;box-shadow:0 6px 16px rgba(0,77,154,.32);}
.uc-tab.active i{opacity:1;}

/* ---------- Panels ---------- */
.uc-tabpanel{animation:ucFade .35s ease both;}
.uc-tabpanel[hidden]{display:none;}
@keyframes ucFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.uc-panel-inner{background:#fff;border:1px solid #e9edf3;border-radius:18px;padding:30px;box-shadow:0 10px 30px rgba(23,43,77,.06);}
.uc-panel-title{text-align:center;font-weight:800;font-size:1.5rem;color:#0f1b2d;margin:0 0 18px;letter-spacing:-.01em;}
.uc-panel-intro{color:#3c4a60;font-size:1rem;line-height:1.75;margin-bottom:20px;}

/* ---------- Videos (responsive 16:9) ---------- */
.uc-videos{display:grid;grid-template-columns:1fr;gap:22px;margin:8px 0 26px;}
.uc-videos:has(.uc-video:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));}
.uc-video{margin:0;}
.uc-video figcaption{font-weight:700;color:#0f1b2d;font-size:.95rem;margin-bottom:8px;text-align:center;}
.uc-video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#0b0b0d;box-shadow:0 8px 24px rgba(15,27,45,.14);}
.uc-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Body content (generic) ---------- */
.uc-panel-body{color:#37475e;font-size:.98rem;line-height:1.7;}
.uc-panel-body h4{font-weight:800;color:#0f1b2d;font-size:1.08rem;margin:26px 0 12px;padding-left:12px;border-left:4px solid #1c86e0;line-height:1.3;}
.uc-panel-body h4:first-child{margin-top:0;}
.uc-panel-body h3{font-weight:800;color:#0f1b2d;margin:22px 0 10px;}
.uc-panel-body p{margin:0 0 12px;}
.uc-panel-body a{color:#004d9a;font-weight:600;}
.uc-panel-body a:hover{text-decoration:underline;}
.uc-panel-body img{max-width:100%;height:auto;}
.uc-panel-body ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px;}
.uc-panel-body ul li{position:relative;padding-left:26px;color:#37475e;}
.uc-panel-body ul li::before{content:"";position:absolute;left:4px;top:4px;width:6px;height:11px;border:solid #1c86e0;border-width:0 2px 2px 0;transform:rotate(45deg);}
.uc-panel-body ul ul{margin:8px 0 0;}
.uc-panel-body em{color:#6b7a90;}

/* Grids */
.uc-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.uc-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}

/* Tables */
.uc-panel-body table.uc-table{width:100%;border-collapse:collapse;border:1px solid #e6ebf2;border-radius:12px;overflow:hidden;font-size:.9rem;background:#fff;}
.uc-panel-body table.uc-table thead th{background:#0f1b2d;color:#fff;text-align:left;padding:11px 14px;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;}
.uc-panel-body table.uc-table td{padding:9px 14px;border-top:1px solid #eef2f7;color:#41506a;}
.uc-panel-body table.uc-table tbody tr:nth-child(even){background:#f8fafc;}
.uc-panel-body table.uc-table .uc-num,.uc-panel-body table.uc-table th.uc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

.uc-panel-body table.uc-spec-table{width:100%;border-collapse:collapse;border:1px solid #e6ebf2;border-radius:12px;overflow:hidden;background:#fff;}
.uc-panel-body table.uc-spec-table th{width:38%;text-align:left;background:#f4f7fb;color:#0f1b2d;font-weight:700;padding:12px 16px;border-top:1px solid #eef2f7;vertical-align:top;}
.uc-panel-body table.uc-spec-table td{padding:12px 16px;border-top:1px solid #eef2f7;color:#41506a;vertical-align:top;}
.uc-panel-body table.uc-spec-table tr:first-child th,.uc-panel-body table.uc-spec-table tr:first-child td{border-top:0;}
.uc-note{margin-top:14px;color:#6b7a90;font-size:.86rem;font-style:italic;}

/* Cards (filters / stages) */
.uc-card{border:1px solid #e6ebf2;border-radius:16px;padding:20px;background:#fff;transition:box-shadow .2s ease,transform .2s ease;text-align:center;}
.uc-card:hover{box-shadow:0 12px 28px rgba(23,43,77,.12);transform:translateY(-2px);}
.uc-card-media{display:flex;align-items:center;justify-content:center;height:180px;margin-bottom:14px;}
.uc-card-media img{max-height:100%;max-width:100%;object-fit:contain;}
.uc-card h4{font-size:1rem;font-weight:700;margin:0;padding:0;border:0;text-align:center;color:#0f1b2d;}
.uc-card h4 a{color:#0f1b2d;}
.uc-card-h{display:grid;grid-template-columns:150px 1fr;gap:18px;text-align:left;align-items:start;}
.uc-card-h .uc-card-media{height:auto;margin:0;}
.uc-card-h .uc-card-media img{max-height:150px;}
.uc-card-body h4{text-align:left;margin-bottom:8px;}
.uc-card-body p{font-size:.9rem;color:#41506a;}
.uc-card-body ul{margin-top:8px;}
.uc-card-body ul li{font-size:.86rem;}

/* Media row (image + text) */
.uc-media-row{display:grid;grid-template-columns:38% 1fr;gap:30px;align-items:center;margin-bottom:10px;}
.uc-media-row img{border-radius:20px;width:100%;height:auto;}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .uc-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .uc-videos:has(.uc-video:nth-child(2)){grid-template-columns:1fr;}
  .uc-media-row{grid-template-columns:1fr;}
  .uc-media-row img{max-width:420px;margin:0 auto;}
}
@media (max-width:640px){
  .uc-tabbar{position:static;top:auto;}
  .uc-tab{min-width:calc(50% - 8px);font-size:.85rem;padding:11px 8px;}
  .uc-panel-inner{padding:18px;border-radius:14px;}
  .uc-panel-title{font-size:1.25rem;}
  .uc-grid-2,.uc-grid-3{grid-template-columns:1fr;}
  .uc-card-h{grid-template-columns:1fr;text-align:center;}
  .uc-card-h .uc-card-media img{max-height:150px;}
  .uc-card-body h4{text-align:center;}
  .uc-panel-body{overflow-wrap:anywhere;}
  .uc-panel-body table.uc-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  .uc-panel-body table.uc-table thead th{position:sticky;top:0;}

  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child){
    display:block;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
    white-space:normal;
    font-size:.92rem;
  }
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) thead{display:none;}
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) tbody{
    display:grid;
    gap:8px;
  }
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e4eaf2;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(15,27,45,.04);
  }
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) tbody tr:nth-child(even){background:#fff;}
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) td{
    padding:0;
    border:0;
    min-width:0;
  }
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) td:first-child{
    font-weight:600;
    line-height:1.35;
    color:#243449;
  }
  .uc-panel-body table.uc-table:has(thead th:nth-child(2):last-child) td.uc-num{
    justify-self:end;
    min-width:64px;
    padding:5px 10px;
    border-radius:999px;
    background:#eaf4ff;
    color:#004d9a;
    font-size:.8rem;
    font-weight:800;
    text-align:center;
    box-shadow:inset 0 0 0 1px #d7eaff;
  }

  .uc-panel-body table.uc-spec-table{
    display:block;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .uc-panel-body table.uc-spec-table tbody{
    display:grid;
    gap:8px;
  }
  .uc-panel-body table.uc-spec-table tr{
    display:grid;
    grid-template-columns:1fr;
    overflow:hidden;
    background:#fff;
    border:1px solid #e4eaf2;
    border-radius:12px;
  }
  .uc-panel-body table.uc-spec-table th{
    width:auto;
    padding:8px 12px;
    border:0;
    background:#f2f6fb;
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#5a6b82;
  }
  .uc-panel-body table.uc-spec-table td{
    padding:10px 12px;
    border-top:1px solid #e8eef5;
    line-height:1.5;
  }
  .uc-panel-body table.uc-spec-table tr:first-child th,
  .uc-panel-body table.uc-spec-table tr:first-child td{border-top:0;}
}