/*
 * Refrigerator & freezer service page — shell parity layer.
 *
 * Loaded only by pages/refrigerator-freezer-repair-mashhad.blade.php, in the early "styles"
 * stack (the position the retired refrigerator-freezer-repair-mashhad.bundle.css occupied).
 * These are the rules that style elements OUTSIDE the page content: layer order, mobile
 * header sizing, drawer/overlay, the dedicated bottom nav and the back-to-top button.
 *
 * Class names are deliberately unchanged (body.tmset-page-fridge-service and
 * .tm-fridge-bottom-nav with its __icon/__label children) because
 * tamirset-service-mobile-nav-canonical-v1.css owns the final container rules and targets
 * those exact selectors. Page design lives in tamirset-fridge-landing-v1.css.
 */

:root {
  --tmset-layer-mobile-dock: var(--tmset-layer-bottom-nav, var(--tmset-z-mobile-dock, 7000));
  --tmset-layer-mobile-header: var(--tmset-layer-header, var(--tmset-z-header, 7200));
  --tmset-layer-mobile-overlay: var(--tmset-layer-overlay, var(--tmset-z-overlay, 7500));
  --tmset-layer-mobile-drawer: var(--tmset-layer-drawer, var(--tmset-z-drawer, 7700));
  --tmset-page-scroll-offset: calc(var(--tmset-mobile-header-total, 82px) + 18px);
  --tmset-page-bottom-safe-space: max(var(--tmset-mobile-ux-fixed-space, 0px), var(--tmset-dynamic-bottom-space, 0px));
  --tmset-service-nav-bg: var(--tmset-alpha-white-94);
  --tmset-service-nav-border: rgba(16, 151, 162, .18);
  --tmset-service-nav-ink: var(--tmset-navy-900);
  --tmset-service-nav-muted: #526879;
  --tmset-service-nav-primary: var(--tmset-teal-600);
  --tmset-service-nav-primary-2: var(--tmset-green-600);
  --tmset-service-nav-shadow: 0 18px 46px rgba(7, 23, 38, .18), inset 0 1px 0 var(--tmset-alpha-white-78);
  --tmset-service-nav-item-radius: 18px;
  --tmset-mega-panel-radius: 26px;
  --tmset-mega-panel-border: rgba(218, 232, 235, .94);
  --tmset-mega-panel-shadow: 0 28px 78px rgba(7, 23, 38, .18), 0 8px 24px var(--tmset-alpha-teal-08);
  --tmset-mobile-shell-inline: 12px;
  --tmset-mobile-header-top: max(10px, env(safe-area-inset-top, 0px));
  --tmset-mobile-header-height: 66px;
  --tmset-mobile-header-radius: 24px;
  --tmset-mobile-dock-height: 68px;
  --tmset-mobile-dock-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  --tmset-mobile-dock-radius: 22px;
  --tmset-mobile-header-bg-top: transparent;
  --tmset-mobile-header-bg-scrolled: rgba(255, 255, 255, .965);
  --tmset-mobile-header-border-top: transparent;
  --tmset-mobile-header-border-scrolled: var(--tmset-alpha-navy-10);
  --tmset-mobile-header-fg-top: var(--tmset-navy-900);
  --tmset-mobile-header-fg-scrolled: var(--tmset-navy-900);
  --tmset-mobile-header-control-bg-top: var(--tmset-alpha-white-88);
  --tmset-mobile-header-control-bg-scrolled: var(--tmset-color-bg);
  --tmset-mobile-header-control-border-top: var(--tmset-alpha-navy-08);
  --tmset-mobile-header-control-border-scrolled: var(--tmset-alpha-navy-12);
}

html { scroll-padding-top: var(--tmset-page-scroll-offset); }
:where([id]) { scroll-margin-top: var(--tmset-page-scroll-offset); }
:where(main, section, article, aside, form, .tmset-container, .tm-container, .tmset-shop-shell, .tmset-product-shell, .tmset-commerce-shell, .ts-shell) { min-inline-size: 0; }
:where(img, svg, video, canvas) { max-inline-size: 100%; block-size: auto; }

[data-tmset-overlay] { z-index: var(--tmset-layer-overlay, var(--tmset-z-overlay, 7500)); }
[data-tmset-drawer] { z-index: var(--tmset-layer-drawer, var(--tmset-z-drawer, 7700)); max-inline-size: min(92vw, 420px); }

.tmset-skip-link {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 9000;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--tmset-navy-900);
  color: var(--tmset-white);
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(11, 34, 57, .22);
}

body.tmset-page-fridge-service {
  background: linear-gradient(#f3f8fc 0, #fff 42%, #f4fafc);
  color: #102235;
  font-family: var(--tmset-font-body, "Vazirmatn", Tahoma, Arial, sans-serif);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.tmset-page-fridge-service main { min-inline-size: 0; }
body.tmset-page-fridge-service [data-tmset-repair-modal-open] {
  min-inline-size: 0;
  max-inline-size: 100%;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
  touch-action: manipulation;
}
body.tmset-page-fridge-service a[href^="tel:"] { unicode-bidi: plaintext; }

/* Dedicated bottom navigation (final container rules are owned by
   tamirset-service-mobile-nav-canonical-v1.css; these are the base styles it builds on). */
.tm-fridge-page, .tm-fridge-page * { box-sizing: border-box; }
.tm-fridge-bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 90;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(11, 94, 122, .12);
  box-shadow: 0 -14px 36px rgba(7, 27, 45, .12);
  backdrop-filter: blur(18px);
}
.tm-fridge-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #314a5a;
  font-size: .74rem;
  font-weight: 900;
}
.tm-fridge-bottom-nav__icon { display: grid; place-items: center; }
.tm-fridge-bottom-nav__icon > img { width: 22px; height: 22px; }
body.tmset-page-fridge-service .tm-fridge-bottom-nav {
  color: #102235;
  isolation: isolate;
  background: rgba(255, 255, 255, .96);
  border-color: rgba(13, 128, 154, .18);
}
body.tmset-page-fridge-service .tm-fridge-bottom-nav__item { color: #19394b; }
body.tmset-page-fridge-service .tm-fridge-bottom-nav__icon > img { filter: saturate(1.28) contrast(1.06) drop-shadow(0 7px 9px rgba(7, 27, 45, .12)); }

@media (max-width: 1060px) {
  :root {
    --tmset-mobile-fixed-inline-gap: var(--tmset-mobile-shell-inline, 12px);
    --tmset-mobile-fixed-bottom-gap: var(--tmset-mobile-dock-bottom, max(10px, env(safe-area-inset-bottom, 0px)));
    --tmset-mobile-page-top-reserve: calc(var(--tmset-mobile-header-total, 82px) + 14px);
    --tmset-mobile-page-top-gap: 14px;
    --tmset-mobile-shell-inline: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --tmset-mobile-header-height: 66px;
    --tmset-mobile-header-total: calc(var(--tmset-mobile-header-height) + var(--tmset-mobile-header-top));
    --tmset-mobile-bottom-reserved: calc(var(--tmset-mobile-dock-height) + var(--tmset-mobile-dock-bottom) + 16px);
  }
  body { --tmset-dynamic-bottom-space: 0px; overflow-x: hidden; }
  body.tmset-page-fridge-service { padding-bottom: calc(var(--tmset-bottom-dock-height, 76px) + env(safe-area-inset-bottom, 0px)); }
  [data-tmset-overlay] {
    position: fixed;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(4, 23, 39, .58);
    backdrop-filter: blur(8px);
    transition: opacity .22s, visibility .22s;
  }
  [data-tmset-drawer] {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 392px);
    max-width: calc(100vw - 24px);
    height: 100dvh;
    display: block;
    padding: max(12px, env(safe-area-inset-top, 0px)) 10px max(12px, env(safe-area-inset-bottom, 0px));
    background: transparent;
    transform: translate(105%);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
  }
  .tmset-mobile-ux-backtop {
    inline-size: 38px !important;
    block-size: 38px !important;
    min-inline-size: 38px !important;
    min-block-size: 38px !important;
    inset-inline-end: max(12px, env(safe-area-inset-right, 0px)) !important;
    inset-block-end: max(12px, calc(var(--tmset-mobile-ux-fixed-space, 0px) + 10px)) !important;
    z-index: calc(var(--tmset-z-mobile-dock, 7000) + 7) !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 15px !important;
    background: rgba(11, 34, 57, .94) !important;
    color: var(--tmset-white, #fff) !important;
    backdrop-filter: blur(12px) saturate(1.05) !important;
    box-shadow: 0 12px 28px rgba(11, 34, 57, .22) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) scale(.96) !important;
    transition: opacity .18s, visibility .18s, transform .2s cubic-bezier(.22, 1, .36, 1) !important;
  }
  .tmset-mobile-ux-backtop:hover,
  .tmset-mobile-ux-backtop:focus-visible {
    transform: translateY(-1px) scale(1) !important;
    outline: 2px solid var(--tmset-ui-focus-border, #157e40) !important;
    outline-offset: 3px !important;
    box-shadow: var(--tmset-focus-ring, 0 0 0 4px rgba(21, 126, 64, .18)), 0 12px 28px #0b223938 !important;
  }
}

@media (max-width: 720px) {
  .tm-fridge-bottom-nav { display: grid; }
}

@media (max-width: 480px) {
  .tm-fridge-bottom-nav__item { font-size: .68rem; }
}

@media (max-width: 420px) {
  .tmset-mobile-ux-backtop {
    inline-size: 36px !important;
    block-size: 36px !important;
    min-inline-size: 36px !important;
    min-block-size: 36px !important;
    inset-inline-end: max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-block-end: max(10px, calc(var(--tmset-mobile-ux-fixed-space, 0px) + 8px)) !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --tmset-mobile-shell-inline: 9px;
    --tmset-mobile-header-height: 62px;
    --tmset-mobile-header-radius: 22px;
  }
}

@media (max-width: 380px) {
  body.tmset-page-fridge-service .tm-fridge-bottom-nav { left: 8px; right: 8px; gap: 4px; padding: 7px; }
  body.tmset-page-fridge-service .tm-fridge-bottom-nav__item { font-size: .68rem; }
}

@media (min-width: 1061px) {
  .tmset-mobile-ux-backtop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tmset-mobile-ux-backtop { transition: none !important; }
}
