/* ATC Intelligent UI R1 — additive component layer. Compatible with Bootstrap 5. */
:root{--atc-ui-ink:#10233f;--atc-ui-soft:#62748d;--atc-ui-border:#e2eaf4;--atc-ui-focus:#2367b9}
.atc-ui-launch{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;white-space:nowrap;border-radius:12px!important;font-weight:800;min-height:38px}
.atc-ui-launch i{font-size:.9rem}
.atc-ui-launch:focus-visible,.atc-ui-mobile-launch:focus-visible{outline:3px solid var(--atc-ui-focus);outline-offset:2px}
.atc-ui-modal[hidden]{display:none!important}
.atc-ui-modal{position:fixed;inset:0;z-index:21000;display:flex;align-items:flex-start;justify-content:center;padding:min(12vh,90px) 15px 24px;font-family:Cairo,system-ui,sans-serif;direction:inherit;color:var(--atc-ui-ink)}
.atc-ui-backdrop{position:absolute;inset:0;background:rgba(5,18,39,.68);backdrop-filter:blur(6px)}
.atc-ui-sheet{position:relative;z-index:1;background:#fff;width:min(650px,100%);border-radius:22px;border:1px solid rgba(236,241,248,.9);box-shadow:0 28px 95px rgba(4,19,42,.32);overflow:hidden;outline:none;max-height:min(780px,calc(100dvh - 95px));display:flex;flex-direction:column}
.atc-ui-head{display:flex;align-items:center;gap:14px;padding:22px 23px 12px}
.atc-ui-spark{width:45px;height:45px;flex:none;display:grid;place-items:center;border-radius:14px;background:#eaf3ff;color:#135caa;font-size:1.45rem;font-weight:800}
.atc-ui-heading{flex:1;min-width:0}
.atc-ui-heading h2{font-size:1.15rem;margin:0 0 4px;font-weight:900}
.atc-ui-heading p{font-size:.8rem;color:var(--atc-ui-soft);margin:0}
.atc-ui-x{border:0;border-radius:10px;background:#f1f5f9;color:#49617d;width:34px;height:34px;display:grid;place-items:center;flex:none;cursor:pointer}
.atc-ui-x:hover,.atc-ui-x:focus-visible{background:#dceafb;color:#0b4b91}
.atc-ui-search{position:relative;margin:8px 22px 14px;display:flex;align-items:center;gap:10px;border:1px solid #cddced;border-radius:14px;padding:0 14px;background:#f8fafd}
.atc-ui-search:focus-within{border-color:var(--atc-ui-focus);box-shadow:0 0 0 3px rgba(35,103,185,.14)}
.atc-ui-search-icon{font-size:1.75rem;line-height:1;color:#647b97}
.atc-ui-search input{font-family:inherit;min-height:52px;border:0;outline:none;flex:1;min-width:0;background:transparent;font-size:.94rem;color:#152943}
.atc-ui-search input::placeholder{color:#788aa0}
.atc-ui-search kbd{background:#e7edf4;color:#506179;padding:4px 7px;border-radius:6px;font-size:.67rem}
.atc-ui-results{overflow-y:auto;min-height:110px;padding:0 14px 16px;overscroll-behavior:contain}
.atc-ui-result-label{margin:2px 12px 9px;color:#60758e;font-size:.78rem;font-weight:800}
.atc-ui-result{display:flex;align-items:center;gap:13px;text-decoration:none;padding:11px 13px;border-radius:12px;border:1px solid transparent;color:var(--atc-ui-ink);margin:3px 0;transition:background-color .12s ease,border-color .12s ease}
.atc-ui-result:hover,.atc-ui-result:focus-visible,.atc-ui-result.is-active{background:#edf5ff;border-color:#dceafc;color:#073b73;outline:none}
.atc-ui-result-mark{width:40px;height:40px;border-radius:12px;background:#ecf1f8;color:#265b90;display:grid;place-items:center;flex:none;font-weight:900;font-size:1rem}
.atc-ui-result-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.atc-ui-result-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:.92rem}
.atc-ui-result-info small{color:#6c7f96;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atc-ui-result-arrow{font-family:system-ui,sans-serif;opacity:.55;font-size:1.1rem}
.atc-ui-empty{padding:27px 15px;color:#64748b;text-align:center;font-size:.9rem}
.atc-ui-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;border-top:1px solid var(--atc-ui-border);padding:12px 22px;color:#70839a;font-size:.71rem;background:#fbfcff}
.atc-ui-mobile-launch{display:none;position:fixed;inset-inline-start:15px;bottom:88px;width:48px;height:48px;border-radius:15px;z-index:1044;background:#0b5ed7;color:#fff;box-shadow:0 8px 24px rgba(10,55,109,.28);border:1px solid #d9e8ff;font-size:1.55rem;line-height:1;cursor:pointer}
body:not(.atc-mobile-nav-enabled) .atc-ui-mobile-launch{bottom:18px}
@media(max-width:767.98px){.atc-ui-mobile-launch{display:grid;place-items:center}.atc-ui-modal{padding:18px 10px}.atc-ui-sheet{max-height:calc(100dvh - 36px);border-radius:18px}.atc-ui-head{padding:17px 15px 10px}.atc-ui-search{margin:8px 13px 12px}.atc-ui-results{padding:0 8px 10px}.atc-ui-foot{padding:12px 14px}.atc-ui-foot span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.atc-ui-result{transition:none}}
@media(prefers-contrast:more){.atc-ui-result{border-color:#879caf}.atc-ui-sheet{border:2px solid #203b5e}.atc-ui-search{border-color:#203b5e}}


/* ATC Intelligent UI R1.1 — responsive public header layout (RTL/LTR).
   Fixes nav overflow without clipping/hiding account/cart links. */
@media (min-width: 1200px) {
  .atc-intelligent-header > .container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(.75rem,1.75vw,1.5rem);
    row-gap: .25rem;
  }
  .atc-intelligent-header .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-width: 0;
    max-width: 230px;
  }
  .atc-intelligent-header #mainNav {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .3rem .75rem;
    min-width: 0;
    width: 100%;
  }
  .atc-intelligent-header #mainNav > .navbar-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .55rem;
    min-width: 0;
    margin: 0 !important;
  }
  .atc-intelligent-header #mainNav > .navbar-nav .nav-link {
    padding-block: .3rem;
    white-space: nowrap;
  }
  .atc-intelligent-header #mainNav > .atc-nav-search {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    margin: 0 !important;
  }
  .atc-intelligent-header #mainNav > .atc-header-actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .4rem !important;
  }
  .atc-intelligent-header .atc-header-actions > * {
    flex-shrink: 0;
  }
  .atc-intelligent-header .atc-header-actions > .btn {
    padding: .45rem .62rem;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Icon-only quick access at constrained desktop widths. Its accessible label remains. */
  .atc-intelligent-header .atc-ui-launch > span {display:none;}
  .atc-intelligent-header .atc-ui-launch {min-width:42px;}
}
@media (max-width: 1199.98px) {
  .atc-intelligent-header #mainNav {min-width:0;}
  .atc-intelligent-header #mainNav > .atc-nav-search {
    width:100%;max-width:100%;min-width:0;margin:.5rem 0 0 !important;
  }
  .atc-intelligent-header #mainNav > .atc-header-actions {
    display:flex;flex-wrap:wrap;gap:.5rem!important;margin-top:.85rem;
  }
  .atc-intelligent-header #mainNav > .navbar-nav {width:100%;}
}
@media (max-width: 575.98px) {
  .atc-intelligent-header .navbar-brand {min-width:0;max-width:calc(100% - 75px);}
  .atc-intelligent-header .brand-mark {flex-shrink:0;}
  .atc-intelligent-header .navbar-brand span:last-child {min-width:0;}
  .atc-intelligent-header .navbar-brand b {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ========================================================================
   ATC Intelligent UI R1.2 — Motion Experience
   Progressive enhancement: no dimensions changed, reduced-motion supported.
   Scope: homepage/storefront and smart navigation. No animation on checkout.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Command palette: visual entrance only; ARIA/focus behavior stays in R1. */
  .atc-ui-modal:not([hidden]) .atc-ui-backdrop {
    animation: atc-r12-shade-in .20s ease-out both;
  }
  .atc-ui-modal:not([hidden]) .atc-ui-sheet {
    animation: atc-r12-sheet-in .26s cubic-bezier(.16,1,.3,1) both;
    transform-origin: center top;
  }
  @keyframes atc-r12-shade-in { from {opacity:0} to {opacity:1} }
  @keyframes atc-r12-sheet-in {
    from {opacity:0; transform:translate3d(0,10px,0) scale(.985)}
    to {opacity:1; transform:translate3d(0,0,0) scale(1)}
  }

  /* Only nodes selected by JS, and only those initially below the viewport. */
  body.atc-r12-motion .atc-r12-enter {
    transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--atc-r12-delay,0ms);
  }
  body.atc-r12-motion .atc-r12-enter.atc-r12-pending {
    opacity:0;
    transform:translate3d(0,15px,0);
  }
  body.atc-r12-motion .atc-r12-enter.atc-r12-visible {
    opacity:1;
    transform:translate3d(0,0,0);
  }
  /* R1.1 header layout remains untouched; pseudo-elements don't alter width. */
  .atc-intelligent-header .navbar-nav .nav-link {
    position:relative;
  }
  .atc-intelligent-header .navbar-nav .nav-link::after {
    content:"";
    position:absolute;
    inset-inline: .6rem;
    bottom: .06rem;
    height: 2px;
    border-radius: 2px;
    background:currentColor;
    opacity:.48;
    transform:scaleX(0);
    transition:transform .2s ease;
    pointer-events:none;
  }
  .atc-intelligent-header .navbar-nav .nav-link:hover::after,
  .atc-intelligent-header .navbar-nav .nav-link:focus-visible::after {
    transform:scaleX(1);
  }
  /* Focus/hover for the smart-navigation entry point. */
  .atc-ui-launch i,
  .atc-ui-mobile-launch {
    transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease;
  }
  .atc-ui-result-mark {transition:transform .2s ease,background-color .2s ease}
  .atc-ui-result:hover .atc-ui-result-mark,
  .atc-ui-result:focus-visible .atc-ui-result-mark {transform:scale(1.055);background:#dcecff}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference) {
  body.atc-r12-home main .col-md-4 > .h-100.border.rounded-4:hover,
  body.atc-r12-home .program-card:hover,
  body.atc-r12-home .program-card:focus-within,
  body.atc-r12-home .product-card:hover,
  body.atc-r12-home .product-card:focus-within,
  body.atc-r12-store .product-card:hover,
  body.atc-r12-store .product-card:focus-within {
    transform:translateY(-5px);
    box-shadow:0 17px 38px rgba(15,35,73,.13);
  }
  body.atc-r12-home .product-card-clickable:hover .product-img,
  body.atc-r12-store .product-card-clickable:hover .product-img {transform:scale(1.035)}
  .atc-ui-launch:hover i,
  .atc-ui-launch:focus-visible i {transform:rotate(-10deg) scale(1.1)}
  .atc-ui-mobile-launch:hover {transform:translateY(-2px);box-shadow:0 13px 28px rgba(10,55,109,.33)}
}
@media (prefers-reduced-motion: reduce) {
  /* Overrides R1 hero motion on homepage; also disables palette and card motion. */
  .atc-ui-modal .atc-ui-sheet,
  .atc-ui-modal .atc-ui-backdrop,
  .atc-r12-enter,
  .atc-ui-launch i,
  .atc-ui-mobile-launch,
  .atc-ui-result-mark {
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
  .atc-home-hero .reveal-up,
  .atc-home-hero .hero-progress > span {animation:none!important;opacity:1!important;transform:none!important}
  body.atc-r12-home .product-card,
  body.atc-r12-home .program-card,
  body.atc-r12-store .product-card,
  body.atc-r12-home .product-img,
  body.atc-r12-store .product-img {transition:none!important;transform:none!important}
}