/* ==========================================================================
   Glass surfaces. Loaded after core/components/pages (and admin), it only restyles surfaces:
   translucent fills, soft light edges and layered shadows. Layout, colours and behaviour are unchanged.

   Performance: real blur (backdrop-filter) is kept for the few surfaces that float over moving content —
   header, menus, drawer, search, filters, sticky bars, admin top bar, login card. Repeated items (cards,
   tiles, product cards) get the frosted look from translucency and edge light only, so long grids stay
   smooth to scroll, also on phones.
   Readability: light glass never drops below ~55% white over the pale page backdrop, so text contrast is
   the same as before. Without blur support, or when the visitor asks for reduced transparency or more
   contrast, glass falls back to near-solid surfaces (end of file).
   ========================================================================== */

:root {
  --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58));
  --glass-fill-hover: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
  --glass-overlay: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-ring: rgba(23, 48, 106, .08);
  --glass-shadow: 0 0 0 1px var(--glass-ring), 0 12px 32px -16px rgba(23, 48, 106, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  --glass-shadow-hover: 0 0 0 1px rgba(23, 48, 106, .1), 0 22px 44px -18px rgba(23, 48, 106, .34), inset 0 1px 0 #fff;
  --glass-blur: blur(20px) saturate(180%);
  --glass-dark-fill: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  --glass-dark-edge: rgba(255, 255, 255, .16);
}

/* ---------- Page backdrop ----------
   A fixed, very pale colour mix behind everything, so glass surfaces on plain sections pick up a tint.
   It never moves, so it costs nothing while scrolling. */
body { background: #f5f7fc; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 8% 10%, rgba(0, 164, 239, .1), transparent 70%),
    radial-gradient(38% 46% at 92% 22%, rgba(134, 97, 197, .1), transparent 70%),
    radial-gradient(42% 50% at 70% 95%, rgba(0, 183, 195, .09), transparent 70%),
    radial-gradient(30% 40% at 15% 85%, rgba(255, 185, 0, .07), transparent 70%);
}

/* ---------- Header ----------
   The blur lives on a layer behind the bar instead of the header itself: a filter on the header would trap the
   fixed mobile drawer and stop the mega menu from blurring the page. */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-block-end-color: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 var(--glass-ring), 0 10px 30px -24px rgba(23, 48, 106, .35);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.has-overlay-header .site-header:not(.is-solid):not(.is-open) { background: transparent; box-shadow: none; }
.has-overlay-header .site-header:not(.is-solid):not(.is-open)::before { opacity: 0; }
.primary-nav__link:hover, .primary-nav__link[aria-expanded="true"],
.icon-btn:hover, .lang-switch:hover { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--glass-ring); }
.has-overlay-header .site-header:not(.is-solid):not(.is-open) :is(.primary-nav__link, .icon-btn, .lang-switch):hover { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* ---------- Menus, search, drawer ---------- */
.mega, .apps-menu, .search-panel {
  background: var(--glass-overlay);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  box-shadow: 0 0 0 1px var(--glass-ring), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.apps-menu { border-radius: 18px; }
.mega__link:hover, .apps-menu__item:hover, .apps-menu__item:focus-visible { background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--glass-ring); }
.mega__footer { border-block-start-color: rgba(23, 48, 106, .1); }
@media (max-width: 1279px) {
  .primary-nav {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  /* In the drawer the menus are part of the sheet, not floating panels. */
  .mega { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .primary-nav__link:hover, .primary-nav__link[aria-expanded="true"] { background: none; box-shadow: none; }
}

/* ---------- Cards and tiles (no blur: translucency and edge light) ---------- */
.card, .solution-tile, .brand-tile, .software-item, .product-card, .doc-list a, .about-card, .panel, .price-box, .pd-panel {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.card:hover, .product-card:hover, .doc-list a:hover { background: var(--glass-fill-hover); box-shadow: var(--glass-shadow-hover); border-color: var(--glass-edge); }
/* Keeps the coloured top bar of the colour-mix tiles; the hover tint shows through the glass. */
.solution-tile, .brand-tile, .software-item, .c-cycle > .card, .grid--3 > .card, .grid--4 > .card { border-block-start-color: var(--c-accent, var(--glass-edge)); }
.solution-tile:hover, .software-item:hover, .brand-tile:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg, #fff) 85%, transparent), rgba(255, 255, 255, .7) 70%);
  box-shadow: var(--glass-shadow-hover);
}
/* Product photos have white backgrounds, so the image frame stays solid white. */
.product-card__media { background: var(--white); border-block-end-color: rgba(23, 48, 106, .08); }
.product-card__specs li { background: rgba(255, 255, 255, .7); border-color: rgba(23, 48, 106, .1); }
.product-card__go { background: rgba(255, 255, 255, .6); border-color: rgba(23, 48, 106, .12); }
.panel--muted { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .38)); }
.pd-panel .spec-table { border-color: rgba(23, 48, 106, .1); }
.pd-panel .spec-table tr:nth-child(even) { background: rgba(255, 255, 255, .55); }

/* Shop filters: one sticky panel, so it gets the real blur. */
.filters {
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.page-hero--shop { background: transparent; }

/* Dark glass: on navy surfaces a faint light fill and a bright hairline. */
.contact-card { background: linear-gradient(135deg, rgba(23, 48, 106, .96), rgba(7, 13, 28, .96)); box-shadow: 0 0 0 1px var(--glass-dark-edge) inset, var(--shadow-lg); }
.section--dark .icon-badge, .why__list .icon-badge { box-shadow: inset 0 0 0 1px var(--glass-dark-edge), inset 0 1px 0 rgba(255, 255, 255, .12); }
.footer-social a { background: var(--glass-dark-fill); border-color: var(--glass-dark-edge); }

/* ---------- Buttons ----------
   A soft top sheen on filled buttons (weak enough that white text keeps its contrast), frosted ghost buttons. */
.btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px -10px rgba(23, 48, 106, .45); }
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 10px 24px -10px rgba(29, 95, 224, .55); }
.btn--secondary, .btn--outline { --btn-bg: rgba(255, 255, 255, .55); background-image: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px -10px rgba(23, 48, 106, .4); }
.btn--secondary:hover, .btn--outline:hover { --btn-bg: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(23, 48, 106, .45); }
.btn--light:hover { box-shadow: inset 0 1px 0 #fff, 0 8px 20px -12px rgba(0, 0, 0, .45); }
.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, .1);
  background-image: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--light { background-image: linear-gradient(180deg, #fff, rgba(255, 255, 255, .88)); }

/* ---------- Forms ---------- */
.input, .select, .textarea { background-color: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 2px rgba(23, 48, 106, .06); }
.input:hover, .select:hover, .textarea:hover { background-color: rgba(255, 255, 255, .86); }
.input:focus, .select:focus, .textarea:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(47, 116, 245, .18); }
.tabs { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--glass-edge), 0 0 0 1px var(--glass-ring); }
.tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px -6px rgba(23, 48, 106, .3), inset 0 1px 0 #fff; }
.alert { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }

/* ---------- Bars that stay on screen ---------- */
.sticky-cta {
  background: rgba(255, 255, 255, .74) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-block-start-color: var(--glass-edge) !important;
}
.hero-slider__controls { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 24px -12px rgba(0, 0, 0, .5); }

/* ---------- Admin ---------- */
body.admin {
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(134, 97, 197, .1), transparent 70%),
    radial-gradient(45% 55% at 20% 100%, rgba(0, 164, 239, .1), transparent 70%),
    #f3f5fa fixed;
}
body.admin::before, body.admin-login::before { content: none; }
.admin-side { background: linear-gradient(180deg, #0b1530, var(--navy-950)); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06); }
[dir="rtl"] .admin-side { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .06); }
.admin-top {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-block-end-color: var(--glass-edge);
  box-shadow: 0 1px 0 var(--glass-ring);
}
.admin-card, .stat, .admin-danger { background: var(--glass-fill); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.admin-danger { background: linear-gradient(135deg, rgba(255, 248, 247, .9), rgba(255, 248, 247, .7)); border-color: #f5c2bd; }
a.stat:hover { background: var(--glass-fill-hover); box-shadow: var(--glass-shadow-hover); }
.admin-table { background: transparent; }
.admin-table th { background: rgba(255, 255, 255, .55); }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, .6); }
.table-wrap { background: rgba(255, 255, 255, .5); border-color: var(--glass-edge); box-shadow: 0 0 0 1px var(--glass-ring); }
.tr-col, .admin-media li, .admin-list li { background: rgba(255, 255, 255, .5); border-color: rgba(23, 48, 106, .1); }
.message, .notes li { background: rgba(255, 255, 255, .6); }
body.admin-login {
  background:
    radial-gradient(45% 55% at 15% 20%, rgba(0, 164, 239, .35), transparent 70%),
    radial-gradient(40% 50% at 85% 80%, rgba(134, 97, 197, .4), transparent 70%),
    var(--navy-950);
}
.login-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .9));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 30px 70px -30px rgba(0, 0, 0, .6), inset 0 1px 0 #fff;
}

/* ---------- Fallbacks ---------- */
/* No blur available: overlays become almost solid so text over busy content stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before, .mega, .apps-menu, .search-panel, .filters, .sticky-cta, .admin-top { background: rgba(255, 255, 255, .97) !important; }
  @media (max-width: 1279px) { .primary-nav { background: #fff; } }
}
/* Visitors who ask for less transparency or more contrast get solid surfaces with clear borders. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::before { content: none; }
  .site-header::before, .mega, .apps-menu, .search-panel, .filters, .sticky-cta, .admin-top, .login-card,
  .card, .solution-tile, .brand-tile, .software-item, .product-card, .doc-list a, .about-card, .panel, .price-box, .pd-panel,
  .admin-card, .stat, .input, .select, .textarea {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .card, .solution-tile, .brand-tile, .software-item, .product-card, .doc-list a, .about-card, .panel, .price-box, .pd-panel, .filters, .admin-card, .stat { border-color: var(--line-strong); }
  @media (max-width: 1279px) { .primary-nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
}