/*
 * Combi-boiler ("پکیج") service page — shell parity layer.
 *
 * Loaded only by pages/package-repair-mashhad.blade.php, in the early "styles" stack —
 * the same cascade position the other service pages give their *-shell-v1.css. 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 deliberate: body.tmset-page-package-service and .tm-pkg-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-package-landing-v1.css (loaded late).
 *
 * Modelled on tamirset-fridge-shell-v1.css so all five service pages keep one shell
 * behaviour; only the page background and bottom-nav tint differ (warm instead of cool).
 */

: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-mega-panel-radius: 26px;
  --tmset-mega-panel-border: rgba(232, 222, 214, .94);
  --tmset-mega-panel-shadow: 0 28px 78px rgba(7, 23, 38, .18), 0 8px 24px rgba(216, 90, 26, .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) { 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, #0b2239);
  color: var(--tmset-white, #fff);
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(11, 34, 57, .22);
}

body.tmset-page-package-service {
  background: linear-gradient(#fbf6f2 0, #fff 42%, #f5f9fc);
  color: #102235;
  font-family: var(--tmset-font-body, "Vazirmatn", Tahoma, Arial, sans-serif);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.tmset-page-package-service main { min-inline-size: 0; }
body.tmset-page-package-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-package-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-pkg-page, .tm-pkg-page * { box-sizing: border-box; }
.tm-pkg-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(122, 74, 45, .12);
  box-shadow: 0 -14px 36px rgba(45, 27, 16, .12);
  backdrop-filter: blur(18px);
}
.tm-pkg-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #4a3a30;
  font-size: .74rem;
  font-weight: 900;
}
.tm-pkg-bottom-nav__icon { display: grid; place-items: center; }
.tm-pkg-bottom-nav__icon > img { width: 22px; height: 22px; }
body.tmset-page-package-service .tm-pkg-bottom-nav {
  color: #102235;
  isolation: isolate;
  background: rgba(255, 255, 255, .96);
  border-color: rgba(216, 90, 26, .18);
}
body.tmset-page-package-service .tm-pkg-bottom-nav__item { color: #4b3529; }
body.tmset-page-package-service .tm-pkg-bottom-nav__icon > img { filter: saturate(1.2) contrast(1.05) drop-shadow(0 7px 9px rgba(45, 27, 16, .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-package-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-pkg-bottom-nav { display: grid; }
}

@media (max-width: 480px) {
  .tm-pkg-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-package-service .tm-pkg-bottom-nav { left: 8px; right: 8px; gap: 4px; padding: 7px; }
  body.tmset-page-package-service .tm-pkg-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; }
}