/* ─── DESIGN TOKENS ─── */
:root {
    /* Static colors */
    --bg:       #F0F4F8;
    --surface:  #FFFFFF;
    --surface2: #F8FAFC;
    --navy:     #080E1C;
    /*--navy:     #0D1F3C;*/
    --navy2:    #1E3A5F;
    --ink:      #0D1F3C;
    --ink2:     #2C3E5F;
    --ink3:     #64748B;
    --ink4:     #A8BBCE;
    --border:   #DDE5EE;
    --border2:  #C4D2E0;
    --amber:    #D97706;
    --amber-bg: #FFFBEB;

    --midnight: #080E1C;
    --electric: #2563EB;
    --vapor:    #4B9EFF;
    --ice:      #EBF5FF;
    --nice-gray:rgb(229, 235, 241);

    --r:        12px;
    --r-sm:     8px;
    --r-lg:     18px;
    --shadow-sm:0 1px 4px rgba(13,31,60,.07);
    --shadow:   0 4px 20px rgba(13,31,60,.09);
    --shadow-lg:0 8px 40px rgba(13,31,60,.13);
    --ui:       "Outfit", sans-serif; /*'Outfit', system-ui, sans-serif;*/
    --mono:     'IBM Plex Mono', monospace;
  
    /* ── Per-category accent — updated by JS on every tab switch ── */
    --cat:      #1D72E8;   /* active accent color    */
    --cat-bg:   #E8F1FD;   /* very light tint         */
    --cat-mid:  #93BAF9;   /* border / mid tone       */
    --cat-dark: #1555C0;   /* darker shade for text   */
    --cat-badge-bg: #ECFDF5;
    --cat-badge-border: #6EE7B7;
    --cat-badge-text: #047857;
  }
  
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--ui);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;}
  h1{ padding-bottom: 10px; font-size: 2rem; text-transform: uppercase;}
  h2{font-size:1.3rem;padding-top:20px;padding-bottom:10px;}
  header {background: var(--midnight); position: sticky; top:0;border-bottom: 0px solid var(--border);z-index: 500;}
  header nav{background: none !important;}
  [id] {
    scroll-margin-top: 80px;
}
  /* ─── NAV ─── */
  #branding {height: 45px; border-bottom: 0px solid #e2e5ed;}
  /*nav{background:var(--navy);position:sticky;top:0;z-index:200;}*/
  nav{position:sticky;top:0;z-index:200;}
  .nav-wrap{max-width:900px;margin:0 auto;padding:0 16px;height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .logo{font-size:17px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-0.4px;white-space:nowrap;flex-shrink:0; display: flex;}
  .logo .dot{color:#3B88F5;transition:color .3s;}
  .logo span{margin: auto; font-size: 14px;}
  .trust-bar{display:flex;align-items:center;gap:6px;overflow:hidden;}
  .trust-pill{font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.5);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px;}
  .trust-pill .dsep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.2);}
  @media(max-width:420px){.trust-pill:not(:first-child){display:none;}}
  .nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .lang-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);border-radius:5px;padding:3px 8px;font-family:var(--ui);font-size:11px;font-weight:700;color:rgba(255,255,255,0.5);cursor:pointer;transition:all .15s;}
  .lang-btn.active{background:var(--cat);border-color:var(--cat);color:#fff;}
  .lang-btn:hover:not(.active){color:#fff;border-color:rgba(255,255,255,0.4);}
  .menu-btn{
   background: var(--electric);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   padding: 6px 13px;
   border-radius: 6px;
   border: 0;
   cursor: pointer;
}
caption{text-transform: capitalize;}
  
  /* ─── CAT STRIP ─── */
  /*.cat-strip-outer{background:var(--navy2);border-bottom:1px solid rgba(255,255,255,0.07);position:sticky;top:52px;z-index:190;}*/
   .cat-strip-outer{border-bottom:1px solid rgba(255,255,255,0.07); background-color: rgb(229, 235, 241);}
   .cat-strip-outer .cat-btn,.cat-strip-outer .cat-btn.active{color: #40546a;}
  .cat-strip{max-width:900px;margin:0 auto;padding:0 16px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .cat-strip::-webkit-scrollbar{display:none;}
  .cat-btn{background:none;border:none;border-bottom:1px solid transparent;padding:15px 10px;font-family:var(--ui);font-size:12px;font-weight:500;color:rgba(255,255,255,0.45);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px;transition:color .15s,border-color .15s;flex-shrink:0;}
  .cat-btn .ci{font-size:11px;line-height:1;}
  .cat-btn.active{color:#fff;border-bottom-color:var(--cat);}
  .cat-btn:hover:not(.active){color:var(--midnight);}
  
  /* ─── MAIN ─── */
  main{/*max-width:900px;margin:0 auto;*/padding:20px 0px 56px;}
  .content{max-width:900px;margin:0 auto;}
  .panel{display:none;}.panel.active{display:block;}
  
  /* ─── CONVERTER CARD ─── */
  .banner-title{font-size: 14px; color: #a1a1a1; text-transform: uppercase; padding-left: 2px; position: relative; top: 10px;}
  .converter{margin-top: 10px; background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow:hidden;margin-bottom:16px;transition:box-shadow .2s;}
  .conv-header{background:var(--surface2);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;transition:background .2s;}
  .conv-cat-label{font-size:13px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:7px;}
  .conv-cat-label .cat-icon{font-size:16px;}
  .conv-accuracy-badge{display:flex;align-items:center;gap:4px;background:var(--cat-badge-bg);border:1px solid var(--cat-badge-border);border-radius:20px;padding:3px 10px;font-size:10.5px;font-weight:700;color:var(--cat-badge-text);letter-spacing:0.2px;transition:all .2s;}
  .conv-body{padding:20px 20px 16px;}
  .field-block{margin-bottom:4px;}
  .field-label-row{display:flex;align-items:center;justify-content:space-between;margin: 5px 0 0 10px;}
  .field-lbl{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink4);}
  .field-lbl.result-lbl{color:var(--cat);transition:color .2s;}
  .field-clear{background:none;border:none;font-size:11px;font-weight:600;color:var(--ink4);cursor:pointer;padding:2px 6px;border-radius:4px;font-family:var(--ui);transition:all .15s;}
  .field-clear:hover{background:var(--bg);color:var(--ink3);}
  .field-row{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:border-color .15s,box-shadow .15s;}
  .field-row:focus-within{border-color:var(--cat);box-shadow:0 0 0 3px color-mix(in srgb, var(--cat) 15%, transparent);}
  .field-row.is-result{background:var(--cat-bg);border-color:var(--cat-mid);transition:background .2s,border-color .2s;}
  .field-row.is-result:focus-within{border-color:var(--cat);}
  .unit-sel{border:none;border-right:1.5px solid var(--border);background:var(--surface2);color:var(--ink2);font-family:var(--ui);font-size:12px;font-weight:700;padding:0 10px;min-width:112px;max-width:210px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%2364748B' d='M5.5 7.5L1 2.5h9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;}
  .is-result .unit-sel{background-color:var(--cat-bg);border-right-color:var(--cat-mid);color:var(--cat-dark);}
  .unit-sel:focus{outline:none;}
  .num-input{border:none;background:transparent;font-family:var(--mono);font-size:26px;font-weight:500;color:var(--ink);padding:16px 16px;flex:1;min-width:0;letter-spacing:-0.5px;}
  .num-input:focus{outline:none;}
  .num-input::placeholder{color:var(--ink4);font-weight:400;font-size:22px;}
  .num-input.is-result{color:var(--cat);transition:color .2s;}
  .currency-variation{display: inline-block; background-color: var(--bg); padding: 5px 15px; border-radius: 10px;}
  .formula-col1,.formula-col2{display: flex;gap: 8px;font-size: 12px; align-items: center;}
  .formula-col1{padding-right: 10px;}
  .formula-col2{color: var(--ink3); font-family: var(--mono); font-size: 11px; }
  .swap-row{
      display:flex;
      align-items:center;
      gap:0; 
      padding:0;
   }
  .swap-line{
      flex:1;
      height:0;
      background:var(--border);
   }
  .swap-btn{
      width:50px;
      height:50px;
      border-radius:50%;
      border:1.5px solid var(--border2);
      background:var(--surface2);
      color:var(--ink3);
      font-size:25px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
      transition:transform .3s cubic-bezier(.34,1.56,.64,1),
      background .15s,border-color .15s,color .15s;
      
      position: absolute;
      left: calc(50% - 25px);
      margin-top: 17px;
   }
  .swap-btn:hover{transform:rotate(180deg);background:var(--cat-bg);border-color:var(--cat-mid);color:var(--cat);}

  .formula-row{border-top:1px solid var(--border);padding:11px 20px;display:flex;align-items:center;gap:8px; height: 100px;}
  .formula-icon{width:22px;height:22px;border-radius:6px;background:var(--amber-bg);border:1px solid #FDE68A;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
  .formula-text{font-family:var(--mono);font-size:12px;color:var(--ink3);line-height:1.4;}
  .formula-text strong{color:var(--amber);font-weight:600;}
  .arrow-formula{font-size: 19px;line-height: 0;padding: 0 5px;color: var(--midnight);}

  /* ─── CONVERTER MAIN ─── */
  .cat-btn-main-menu.active{
      /*background-color: #0D1F3C;*/
      background-color: var(--cat-dark) !important;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 2px 2px 2px rgb(0,0,0,0.5);
      z-index: 2;
      border-bottom: none !important;
      min-width: 120px;
  }
   .cat-btn-main-menu{
      background-color: #dbe2e9;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      color: #40546a;
      padding: 20px 10px;
      flex: 1 1 0px;
      min-width: 120px;

  }
   .cat-btn-main-menu .ci{
      padding-left: 10px;
      /*background-color: rgba(255, 255, 255, 0.27);
      border-radius: 50%;
      border: 1px solid #a1a1a1;*/
   }

  .cat-strip-main-page{
   padding: 10px 0 0 0!important;
  }
  .main-page-panels .converter{
   border-radius: 5px;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
   z-index: 5;
   border: 0;
   margin-top: 0;
  }

  .main-page-panels .converter .conv-header{
      background-color: var(--cat-dark);
      padding: 2px;
  }
.td{
   display: block;
   color: #a1a1a1;
   font-size: 11px;
   list-style: none;
}
.td li {
    display: inline;
    text-transform: capitalize;
   }
.td li:nth-of-type(n + 2) {
  &::before {
    content: ", ";
  }
}
.td li:last-child {
  &::after {
    content: "...";
  }
}

  
  /* ─── DID YOU KNOW ─── */
  .dyk-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cat);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;cursor:pointer;user-select:none;transition:border-left-color .2s,box-shadow .2s; min-height: 115px;}
  .dyk-card:hover{box-shadow:var(--shadow);}
  .dyk-left{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
  .dyk-bulb{width:34px;height:34px;border-radius:10px;background:var(--cat-bg);border:1px solid var(--cat-mid);display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .2s,border-color .2s;}
  .dyk-counter{font-size:9.5px;font-weight:700;letter-spacing:0.5px;color:var(--ink4);text-align:center;}
  .dyk-right{flex:1;min-width:0;}
  .dyk-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--cat);margin-bottom:4px;transition:color .2s;}
  .dyk-text{font-size:13.5px;color:var(--ink2);line-height:1.55;}
  .dyk-text strong{font-weight:700;color:var(--ink);}
  .dyk-tap-hint{font-size:10.5px;color:var(--ink4);margin-top:6px;font-weight:500;}
  
  /* ─── AD SLOT ─── */
  .ad-slot{position:relative;margin-bottom:20px;}
  .ad-label{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink4);text-align:center;margin-bottom:4px;display:block;}
  .ad-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:90px;}
  .ad-placeholder{width:100%;padding:18px;text-align:center;font-size:12px;color:var(--ink4);font-family:var(--ui);}
  
  /* ─── AFFILIATE CARD ─── */
  .affiliate-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;display:flex;align-items:center;gap:13px;margin-bottom:16px;text-decoration:none;transition:border-color .15s,box-shadow .15s;position:relative;}
  .affiliate-card:hover{border-color:var(--cat-mid);box-shadow:var(--shadow-sm);}
  .affiliate-badge{position:absolute;top:8px;right:10px;font-size:8.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink4);}
  .affiliate-icon{width:40px;height:40px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
  .affiliate-text .af-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;}
  .affiliate-text .af-desc{font-size:11.5px;color:var(--ink3);line-height:1.4;}
  .affiliate-arrow{margin-left:auto;font-size:16px;color:var(--ink4);flex-shrink:0;}
  
  /* ─── CONVERTER DESCRIPTION ─── */
  .converter-description {padding-bottom:50px;padding-top: 20px;}
  .converter-description p{padding: 0 5px 20px 5px;text-align: justify;}

  /* ─── POPULAR ─── */
  .section-row{display:flex;align-items:center;margin-bottom:10px;}
  .section-lbl{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink4);}
  .quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:24px;}
  @media(min-width:480px){.quick-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:700px){.quick-grid{grid-template-columns:repeat(4,1fr);}}
  .quick-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:25px 12px;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .12s;display:flex;}
  .quick-card:hover{border-color:var(--cat-mid);box-shadow:0 2px 8px rgba(13,31,60,.09);transform:translateY(-1px);}
  .qc-from{font-size:12.5px;font-weight:700;color:var(--ink); display: inline-flex;}
  .qc-arrow{font-size:11px;color:var(--cat);margin:2px 0;font-weight:600;transition:color .2s;padding: 0 5px;}
  .qc-to{font-size:11.5px;color:var(--ink3);font-weight:500;display: inline-flex}
  
  /* ─── ALL TILES ─── */
  .all-grid-main-page{grid-template-columns:repeat(3,1fr) !important;}
  .all-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:32px;}
  @media(max-width:540px){.all-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:340px){.all-grid{grid-template-columns:repeat(2,1fr);}}
  .all-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 8px;cursor:pointer;text-align:center;transition:border-color .15s,box-shadow .15s,background .15s;}
  .all-tile:hover{border-color:var(--cat-mid);box-shadow:var(--shadow-sm);}
  .all-tile.active{background:var(--navy);border-color:var(--navy);}
  .all-tile .ti{font-size:22px;display:block;margin-bottom:4px;}
  .all-tile .tn{font-size:11px;font-weight:700;color:var(--ink3);}
  .all-tile.active .tn{color:rgba(255,255,255,0.85);}

  .all-grid-main-page .tn{
   font-size: 15px;
   font-weight: 400;
  }

  .all-grid-main-page .all-tile{
   min-height: 120px !important;
   border-radius: 5px !important;
  }
  
  /* ═══════════════════════════════════════════
     SHOE SIZE PANEL — all equivalents at once
  ═══════════════════════════════════════════ */
  .shoe-selector{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .shoe-from-group{flex:1;min-width:180px;}
  .shoe-from-row{display:flex;align-items:stretch;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:border-color .15s,box-shadow .15s;}
  .shoe-from-row:focus-within{border-color:var(--cat);box-shadow:0 0 0 3px color-mix(in srgb, var(--cat) 15%, transparent);}
  .shoe-sys-sel{border:none;border-right:1.5px solid var(--border);background:var(--surface2);color:var(--ink2);font-family:var(--ui);font-size:12px;font-weight:700;padding:0 10px;min-width:130px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath fill='%2364748B' d='M5.5 7.5L1 2.5h9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;}
  .shoe-sys-sel:focus{outline:none;}
  .shoe-size-sel{border:none;background:transparent;font-family:var(--mono);font-size:22px;font-weight:500;color:var(--ink);padding:13px 16px;flex:1;min-width:0;cursor:pointer;appearance:none;-webkit-appearance:none;}
  .shoe-size-sel:focus{outline:none;}
  #shoe-size-val{background-color: transparent !important; padding-left: 20px;}
  
  /* Results table */
  .shoe-results{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;}
  .shoe-results-header{background:var(--surface2);border-bottom:1px solid var(--border);padding:10px 18px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink4);}
  .shoe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  @media(min-width:600px){.shoe-grid{grid-template-columns:repeat(6,1fr);}}
  .shoe-cell{padding:14px 12px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
  .shoe-cell:last-child{border-right:none;}
  .shoe-cell:nth-child(n+4){border-bottom:none;}
  @media(min-width:600px){.shoe-cell:nth-child(n+4){border-bottom:1px solid var(--border);}.shoe-cell:nth-child(n+7){border-bottom:none;}.shoe-cell:nth-child(3){border-right:1px solid var(--border);}.shoe-cell:nth-child(6){border-right:none;}}
  .shoe-cell.is-active{background:var(--cat-bg);}
  .shoe-cell .sc-sys{font-size:9.5px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;color:var(--ink4);margin-bottom:4px;}
  .shoe-cell .sc-val{font-size:22px;font-weight:600;font-family:var(--mono);color:var(--ink);line-height:1.1;}
  .shoe-cell.is-active .sc-val{color:var(--cat);}
  .shoe-cell .sc-sub{font-size:10px;color:var(--ink4);margin-top:2px;}
  .shoe-no-match{padding:20px;text-align:center;font-size:14px;color:var(--ink3);}
  
  /* ═══════════════════════════════════════════
     CURRENCY PANEL
  ═══════════════════════════════════════════ */
  .currency-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink4);padding:8px 20px;border-bottom:1px solid var(--border);background:var(--surface2);}
  .currency-dot{width:7px;height:7px;border-radius:50%;background:var(--cat);flex-shrink:0;transition:background .2s;}
  .currency-dot.loading{animation:pulse 1s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
  .currency-source{margin-left:auto;font-weight:600;}
  
  /* Multi-currency display */
  .multi-currency{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden;}
  .mc-header{padding:10px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink4);background:var(--surface2);}
  .mc-row{display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer;}
  .mc-row:last-child{border-bottom:none;}
  .mc-row:hover{background:var(--bg);}
  .mc-flag{font-size:18px;margin-right:10px;flex-shrink:0;}
  .mc-currency-info{flex:1;}
  .mc-code{font-size:13px;font-weight:700;color:var(--ink);}
  .mc-name{font-size:11px;color:var(--ink4);}
  .mc-amount{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--cat);transition:color .2s;}
  .mc-loading{padding:24px;text-align:center;font-size:13px;color:var(--ink4);}
  
  /* ─── FOOTER ─── */
  footer{background:var(--navy);padding:28px 16px;}
  .footer-inner{max-width:900px;margin:0 auto;}
  .footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-logo{font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.3px;}
  .footer-logo .dot{color:#3B88F5;}
  .footer-stats{display:flex;gap:20px;flex-wrap:wrap;}
  .fstat{text-align:center;}
  .fstat-num{font-size:15px;font-weight:700;color:#fff;display:block;}
  .fstat-lbl{font-size:10px;font-weight:500;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px;}
  .footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;margin-bottom:6px;}
  .footer-links a{color:rgba(255,255,255,0.4);text-decoration:none;transition:color .15s;}
  .footer-links a:hover{color:rgba(255,255,255,0.8);}
  .footer-copy{font-size:11px;color:rgba(255,255,255,0.25);}
  .menu-categories a {text-decoration: none;}
  

  /* ─── INFO CARDS ─── */
  
  .conversion-table{
   margin: 20px auto 50px auto;
   width: 500px;
   table-layout: fixed;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--r);
   border-spacing:0;
  }
   .conversion-table td, 
   .conversion-table thead th{
      padding: 5px 15px;
   }

   .conversion-table tr:nth-child(even) {
   background: var(--surface2);
   }
   .conversion-table caption, 
   .conversion-table thead{
      background: var(--surface2);
      color: var(--ink2);
   }
   .conversion-table caption{
      background-color: transparent;
      padding: 20px 0;
      font-size: 18px;
      font-weight: 700;
   }
   .conversion-table thead{
      border-bottom: 1px solid var(--border) !important;
      border-top-right-radius: var(--r);
      border-top-left-radius: var(--r);
   }

   .conversion-list-links{
      width: 100%;
   }
   .conversion-list-links caption{
      text-align: left;
   }
   .conversion-list-links a{
      color: #1E40AF;
      text-decoration: none;
      padding-left: 5px;
   }

   /* Reference Table */
   .reference-table-wrap{
    overflow-x: auto;
    padding-bottom: 30px;
   }
   .reference-table-title{
      text-align: center;
   }
   .reference-table{
      table-layout: fixed;
      margin: 20px auto 0px auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-spacing:0;
      width: 100%;
      font-family: var(--mono);
  
   }

   .reference-table thead{
      border-bottom: 1px solid var(--border) !important;
      border-top-right-radius: var(--r);
      border-top-left-radius: var(--r);
      background: var(--surface2);
      color: var(--ink2);
      position: sticky !important;
      z-index: 2;
      top: 0;
   }
.reference-table thead th{
   border-bottom: 1px solid var(--border) !important;
   /*border-top-right-radius: var(--r);
   border-top-left-radius: var(--r);*/
}
   .reference-table th{
      font-size: 12px;
      font-weight: 700;
      padding: 10px 10px 5px 0;
   }
   .reference-table td{
      font-size: 12px;
      text-align: center;
   }
   .reference-table tbody tr th{
      text-align: left;
      padding-left: 5px;
      border-right: 1px solid var(--border) !important;
   }

   .reference-table tr{
      padding: 20px 0;
      height: 50px;
   }
   .reference-table tr:nth-child(even) {
   background: var(--surface2);
   }

   /* ------- Branding -------*/
   .branding{
      padding: 150px 0;
      background: var(--midnight);
      color: #FFF;
      margin: 70px 0;
   }

   /* ------- Change Language -------*/
   .dropbtn {
      background-color: transparent;
      color: white;
      padding: 12px 0;
      font-size: 14px;
      border: none;
      cursor: pointer;
      min-width: 100%;
      width: 150px;
      text-align: center;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #080e1c;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      bottom: 100%;  /* ← pushes the menu above the button */
      z-index: 9999;
      min-width: 100%;
      width: 150px;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 0;
      text-decoration: none;
      display: block;
      color: #fff;
      text-align: center;
    }
    .dropdown-content a:hover {
      background-color: #1D72E8;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    .dropdown:hover .dropbtn {
      background-color: #374962ff;
    }

    /*----- SITEMAP -----*/
    .sitemap-category-links-list{
      padding-bottom: 50px;
    }
    .sitemap-category-links-list h3,
    .menu-sitemap h2{
      background-color: var(--border) !important;
      padding: 5px 20px;
      margin-bottom: 10px;
    }
 
    .sitemap-category-links-list ul li,
    .menu-sitemap ul li{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sitemap-category-links-list a,.sitemap-category-links-list a:visited{
      text-decoration: none;
      color: #1555C0;
    }
    .menu-sitemap a,.menu-sitemap a:visited{
      text-decoration: none;
      color: #fff;
    }
    .menu-sitemap{
      padding-top: 10px;
      padding-bottom: 50px;
    }
    .menu-sitemap-items{
      display: inline-block;
      background-color: var(--electric);
      margin: 5px;
      color: #fff;
      padding: 5px 10px;
      border-radius: 10px;
    }
 
    .menu-sitemap a:hover,
    .sitemap-category-links-list a:hover{
      color: var(--midnight);
    }

    .menu-sitemap-items:hover{
      background-color: var(--midnight);
      color: #fff !important;

    }
    .menu-sitemap-items a:hover{
      color: #fff !important;

    }


@media(max-width:690px){
   .all-grid-main-page{grid-template-columns:repeat(1,1fr) !important;}
   .content{padding: 0 20px;}
   .conversion-table{width: 100%;}
   .unit-sel{max-width: 120px;}
   .logo{font-size: 14px; display: flex;}
   .logo span{margin: auto 0;}
   .footer-logo { font-size: 12px; display: flex;}
   .footer-logo span {margin: auto 0;}
   .conv-accuracy-badge{display: none;}
   .reference-table{width: 700px;}
   .formula-row {display: grid; grid-template-columns: 1fr; gap: 0;align-content: center;}
   .formula-col1,.formula-col2 {justify-content: center;}
   #currency-formula-col2{padding-top: 15px;}


}
  @media(max-width:380px){
    .num-input{font-size:22px;padding:14px 12px;}
    .unit-sel{min-width:96px;font-size:11px;}
    .conv-body{padding:16px 14px 12px;}
    .conv-accuracy-badge{display: none;}
    .footer-top a, .footer-stats{margin: auto;}
    .menu-btn{font-size: 8px;}
    .formula-col2{padding: 5px 0;display: grid;text-align: center;}
    .formula-row{gap: 0;}
    .formula-col1{text-align: center;}
    .formula-row{height: auto; align-content: center !important;}
    .quick-grid{grid-template-columns: 1fr; text-align: center;}
  }