/* ============================================================
   CDI Premium V5 - essential mobile UX pass
   Preserves the existing CDI layout, colour palette and Poppins.
   ============================================================ */

:root{
  --cdi-v5-pad:20px;
  --cdi-v5-gap:10px;
  --cdi-v5-chip-border:#dbe3ec;
  --cdi-v5-chip-bg:#ffffff;
}

/* Normal browser pages must not reserve space for the installed app nav. */
html:not(.pwa-standalone) body{
  padding-bottom:0!important;
}

/* Explicit install control in the mobile drawer. */
.cdi-install-menu-btn{
  width:100%;
  min-height:48px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.2)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  cursor:pointer;
}
.cdi-install-menu-btn i{font-size:19px}
.pwa-standalone .cdi-install-menu-btn{display:none!important}

/* The install sheet is now used only for installation and instructions. */
.cdi-pwa-sheet[data-sheet-kind="install"] .cdi-pwa-sheet-copy span{
  max-width:44ch;
}
.cdi-pwa-browser-steps{
  grid-column:1/-1;
  display:grid;
  gap:8px;
  padding-top:4px;
}
.cdi-pwa-browser-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.86);
  font-size:12px;
  line-height:1.45;
}
.cdi-pwa-browser-step b{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(0,191,232,.15);
  color:#78e7f8;
}

/* Footer: one mobile gutter only and no artificial white gap beneath it. */
.site-footer{
  width:100%!important;
  max-width:none!important;
}
.site-footer>.container{
  box-sizing:border-box!important;
}

/* Compact AI trigger. The label remains on desktop only. */
.ai-fab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ai-fab .ai-fab-icon{font-size:20px;line-height:1}
.ai-fab.is-footer-near{opacity:0!important;pointer-events:none!important;transform:translateY(10px)!important}

/* Related links and facts: compact, touch friendly and not one long column. */
.aeo-facts,
.aeo-links,
.seo-interlinks-grid,
.related-searches-rail,
.sl-rail{
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.aeo-facts::-webkit-scrollbar,
.aeo-links::-webkit-scrollbar,
.seo-interlinks-grid::-webkit-scrollbar,
.related-searches-rail::-webkit-scrollbar,
.sl-rail::-webkit-scrollbar{display:none}

@media(max-width:768px){
  /* Footer alignment and size. */
  .site-footer{
    padding:38px 0 16px!important;
  }
  .site-footer>.container{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:var(--cdi-v5-pad)!important;
    padding-right:var(--cdi-v5-pad)!important;
  }
  .site-footer .foot-grid{
    width:100%!important;
    margin:0!important;
    padding:0 0 24px!important;
    gap:22px 16px!important;
  }
  .site-footer .foot-brand,
  .site-footer .foot-col,
  .site-footer .foot-bottom{
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .site-footer .foot-logo{
    width:174px!important;
    max-width:174px!important;
    height:auto!important;
  }
  .site-footer .foot-brand p{
    max-width:34ch;
    margin-top:14px!important;
    line-height:1.65!important;
  }
  .site-footer .foot-bottom{
    padding-top:17px!important;
    padding-bottom:0!important;
  }

  /* Compact AI button so it does not cover pills, cards and footer links. */
  .ai-fab{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    padding:0!important;
    border-radius:50%!important;
    transition:opacity .18s ease,transform .18s ease!important;
  }
  .ai-fab .ai-fab-label,
  .ai-fab .dot{display:none!important}
  .ai-fab .ai-fab-icon{font-size:22px!important;color:#fff!important}
  .pwa-standalone .ai-fab{
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  body:has(.chat-panel.open) .ai-fab,
  body:has(form:focus-within) .ai-fab{opacity:0!important;pointer-events:none!important}

  /* Quick Answer facts and links use two balanced columns. */
  .aeo-block{
    padding:16px!important;
    border-radius:18px!important;
  }
  .aeo-facts{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin:14px 0!important;
  }
  .aeo-fact{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    white-space:normal!important;
    border-radius:14px!important;
    padding:8px 10px!important;
    font-size:11.5px!important;
    line-height:1.3!important;
    box-sizing:border-box!important;
  }
  .aeo-fact:last-child:nth-child(odd){grid-column:1/-1}
  .aeo-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .aeo-link{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:8px 11px!important;
    border-radius:12px!important;
    font-size:12px!important;
    line-height:1.25!important;
    box-sizing:border-box!important;
  }
  .aeo-link:last-child:nth-child(odd){grid-column:1/-1}

  /* Related-page blocks become a two-row swipe rail. */
  .seo-interlinks{
    margin:24px 0!important;
    padding:17px 16px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .seo-interlinks-grid,
  .related-searches-rail,
  .sl-rail{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,minmax(46px,auto))!important;
    grid-auto-columns:minmax(158px,72%)!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    padding:2px 20px 8px 0!important;
  }
  .seo-interlink,
  .related-searches-rail .acchip,
  .sl-rail a{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:9px 12px!important;
    border:1px solid var(--cdi-v5-chip-border)!important;
    border-radius:13px!important;
    background:var(--cdi-v5-chip-bg)!important;
    color:#0b1f3d!important;
    font-size:12.5px!important;
    font-weight:600!important;
    line-height:1.3!important;
    white-space:normal!important;
    text-decoration:none!important;
    scroll-snap-align:start!important;
  }
  .related-searches-block{
    margin-top:26px!important;
    padding-top:22px!important;
    overflow:hidden!important;
  }

  /* SEO link matrix remains crawlable but no longer creates a huge mobile list. */
  .seo-links{
    padding:32px 0 36px!important;
    overflow:hidden!important;
  }
  .seo-links .sl-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .seo-links .sl-col{
    min-width:0!important;
    overflow:hidden!important;
  }
  .seo-links .sl-h{
    margin:0 0 10px!important;
  }

  /* Pills used inside forms remain touch friendly and compact. */
  .cdi-pills-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .cdi-pills-grid .cdi-pill{
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    min-height:46px!important;
  }
}

@media(max-width:360px){
  .aeo-facts,.aeo-links{grid-template-columns:1fr!important}
  .aeo-fact:last-child:nth-child(odd),
  .aeo-link:last-child:nth-child(odd){grid-column:auto}
  .seo-interlinks-grid,.related-searches-rail,.sl-rail{grid-auto-columns:82%!important}
}

@media(prefers-reduced-motion:reduce){
  .ai-fab{transition:none!important}
}

/* V20 iPhone PWA install nudge */
.cdi-pwa-sheet[data-sheet-kind="ios-install"]{
  border-color:rgba(116,229,249,.24);
  background:linear-gradient(135deg,rgba(6,20,38,.98),rgba(12,38,72,.98));
}
.cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-inner{
  align-items:flex-start;
}
.cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-copy strong{
  font-size:15px;
}
.cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-copy span{
  color:rgba(255,255,255,.74);
  max-width:52ch;
}
.cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-install-primary{
  white-space:nowrap;
}
.cdi-ios-install-row{
  background:linear-gradient(135deg,rgba(18,103,214,.06),rgba(0,191,232,.08));
  border-radius:16px;
  padding:12px!important;
  margin-top:13px;
}
.pwa-standalone .cdi-ios-install-row{display:none!important}
@media(max-width:760px){
  .cdi-pwa-sheet[data-sheet-kind="ios-install"]{
    bottom:max(12px,env(safe-area-inset-bottom));
  }
  .cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-inner{
    grid-template-columns:44px 1fr;
    padding:14px;
  }
  .cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-icon{
    width:44px;height:44px;border-radius:12px;
  }
  .cdi-pwa-sheet[data-sheet-kind="ios-install"] .cdi-pwa-sheet-actions{
    grid-column:1/-1;
    justify-content:space-between;
  }
}