/* DAK CSS: mobile-quick-access-fix.css */
/*
 * DAK mobile quick-access refinement
 * Phone-only. Keeps approved tablet/laptop/desktop layouts untouched.
 */
@media only screen and (max-width: 767px) {
  .quick-access-premium {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .quick-access-premium > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(15px, env(safe-area-inset-left)) !important;
    padding-right: max(15px, env(safe-area-inset-right)) !important;
  }

  .quick-access-head {
    margin: 0 auto 20px !important;
    padding: 0 4px !important;
    text-align: center !important;
  }

  .quick-access-head .section-label {
    margin-bottom: 10px !important;
  }

  .quick-access-head .section-title {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  .quick-access-head .section-sub {
    max-width: 31rem !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-wrap: pretty !important;
  }

  .quick-directory,
  .quick-directory.reveal,
  .quick-directory.reveal.visible {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  .quick-directory::before { display: none !important; }

  .quick-access-premium .ql-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .quick-access-premium .ql-grid > .ql-card {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 36px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 14px 14px 16px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .quick-access-premium .ql-card::before {
    width: 4px !important;
  }

  .quick-access-premium .ql-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 21px !important;
  }

  .quick-access-premium .ql-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    align-self: center !important;
  }

  .quick-access-premium .ql-title {
    margin: 0 0 4px !important;
    color: var(--m-text, var(--navy)) !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -.015em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .quick-access-premium .ql-desc {
    max-width: none !important;
    margin: 0 !important;
    color: var(--m-muted, var(--text-muted)) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  .quick-access-premium .ql-arrow {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    justify-self: end !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }

  .quick-access-premium .ql-card:hover,
  .quick-access-premium .ql-card:active {
    transform: none !important;
  }

  .quick-directory-note { display: none !important; }

  html[dir="rtl"] .quick-access-premium .ql-grid > .ql-card {
    grid-template-columns: 36px minmax(0, 1fr) 46px !important;
    padding: 14px 16px 14px 14px !important;
    text-align: right !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-icon {
    grid-column: 3 !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-content {
    grid-column: 2 !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-arrow {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-title {
    font-family: 'Noto Sans Arabic', 'DM Sans', sans-serif !important;
    font-size: 16.5px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-desc {
    font-family: 'Noto Sans Arabic', 'DM Sans', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }
}

@media only screen and (max-width: 359px) {
  .quick-access-premium > .container {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .quick-access-head .section-title {
    font-size: 32px !important;
  }

  .quick-access-premium .ql-grid > .ql-card {
    grid-template-columns: 42px minmax(0, 1fr) 32px !important;
    gap: 10px !important;
    min-height: 88px !important;
    padding: 13px 12px 13px 14px !important;
  }

  .quick-access-premium .ql-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 19px !important;
  }

  .quick-access-premium .ql-title { font-size: 17px !important; }
  .quick-access-premium .ql-desc { font-size: 12.5px !important; }

  .quick-access-premium .ql-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  html[dir="rtl"] .quick-access-premium .ql-grid > .ql-card {
    grid-template-columns: 32px minmax(0, 1fr) 42px !important;
  }
}


/* DAK CSS: responsive-final-pass.css */
/* ======================================================================
   DAK RESPONSIVE FINAL PASS — 2026-09-23
   Phone + touch-tablet fixes only. Approved laptop/desktop layout remains
   untouched. Tablet rules are gated by html.dak-tablet.
   ====================================================================== */

/* ---------- Phone + tablet: remove the white separator below newsletter ---------- */
@media (max-width: 767px) {
  .newsletter {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
  }
  .newsletter + .footer,
  .footer { margin-top: 0 !important; }
}

html.dak-tablet .newsletter {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
}
html.dak-tablet .newsletter + .footer,
html.dak-tablet .footer { margin-top: 0 !important; }

/* ---------- Tablet navigation: language + theme are always visible ---------- */
html.dak-tablet #navbar {
  height: 76px !important;
  padding: 0 20px !important;
  gap: 10px !important;
}
html.dak-tablet #navbar .logo { min-width: 0 !important; flex: 0 1 auto !important; }
html.dak-tablet #navbar .logo img {
  width: auto !important;
  height: 54px !important;
  max-width: min(215px, 31vw) !important;
  object-fit: contain !important;
}
html.dak-tablet #navbar .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-inline-start: auto !important;
  min-width: 0 !important;
}
html.dak-tablet #navbar .nav-links > a { display: none !important; }
html.dak-tablet #navbar .nav-links > .theme-control--desktop,
html.dak-tablet #navbar .nav-links > .lang-toggle { display: inline-flex !important; }
html.dak-tablet #navbar .theme-control--desktop { margin: 0 !important; }
html.dak-tablet #navbar .theme-trigger {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 13px !important;
}
html.dak-tablet #navbar .theme-trigger-chevron { display: none !important; }
html.dak-tablet #navbar .theme-trigger-icon svg { width: 20px !important; height: 20px !important; }
html.dak-tablet #navbar .lang-toggle {
  min-width: 72px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .hamburger {
  display: inline-flex !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
}

/* Also keep the same controls available inside the opened tablet menu. */
html.dak-tablet .mobile-menu {
  top: 76px !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 92px) !important;
  padding: 14px !important;
  gap: 3px !important;
  overflow-y: auto !important;
}
html.dak-tablet .mobile-menu > .lang-toggle {
  display: flex !important;
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--pf-border, #dbe3e9) !important;
  border-radius: 12px !important;
  background: var(--pf-surface-2, #f3f6f8) !important;
}
html.dak-tablet .mobile-menu .theme-control--mobile {
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 9px !important;
  border: 1px solid var(--pf-border, #dbe3e9) !important;
  border-radius: 13px !important;
  background: var(--pf-surface-2, #f3f6f8) !important;
}

/* ---------- Tablet child-journey form ---------- */
html.dak-tablet .journey-premium-card {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
html.dak-tablet .journey-story-panel,
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 28px !important;
}
html.dak-tablet .journey-form-head {
  display: grid !important;
  grid-template-columns: 52px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
}
html.dak-tablet .journey-form-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 15px !important;
}
html.dak-tablet .journey-form-head strong {
  display: block !important;
  font-size: 27px !important;
  line-height: 1.08 !important;
  margin: 0 0 4px !important;
}
html.dak-tablet .journey-form-head small {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px 16px !important;
  align-items: start !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child { grid-column: 1 / -1 !important; }
html.dak-tablet .journey-input-group {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 7px !important;
}
html.dak-tablet .journey-input-group label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: start !important;
  white-space: normal !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 54px !important;
  margin-top: 2px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
}

/* ---------- Tablet floating actions: never overlap ---------- */
html.dak-tablet .dak-ai-bubble {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 19px !important;
}
html.dak-tablet .dak-ai-bubble .dak-bot-mark,
html.dak-tablet .dak-ai-bubble svg { width: 36px !important; height: 36px !important; }
html.dak-tablet .back-to-top {
  right: max(27px, env(safe-area-inset-right)) !important;
  bottom: max(102px, calc(env(safe-area-inset-bottom) + 94px)) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px !important;
}
html.dak-tablet .wa-fab,
html.dak-tablet[dir="rtl"] .wa-fab {
  left: max(24px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  width: 56px !important;
  height: 56px !important;
}

/* ---------- Tablet calendar ---------- */
html.dak-tablet .calendar-view-switch {
  width: min(620px, 100%) !important;
  margin: 0 auto 20px !important;
  padding: 5px !important;
  gap: 5px !important;
  border-radius: 16px !important;
}
html.dak-tablet .calendar-view-tab {
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-radius: 12px !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-shell {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  min-width: 0 !important;
}
html.dak-tablet .calendar-board {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 22px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
html.dak-tablet .calendar-topline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 0 20px !important;
  padding: 2px 0 18px !important;
  text-align: center !important;
}
html.dak-tablet .calendar-brand {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(150px,190px) minmax(0,1fr) !important;
  gap: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html.dak-tablet[dir="rtl"] .calendar-brand { grid-template-columns: minmax(0,1fr) minmax(150px,190px) !important; }
html.dak-tablet .calendar-official-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}
html.dak-tablet .calendar-brand img {
  width: 100% !important;
  max-width: 185px !important;
  height: auto !important;
  max-height: 62px !important;
  object-fit: contain !important;
}
html.dak-tablet .calendar-brand-copy {
  min-width: 0 !important;
  text-align: start !important;
}
html.dak-tablet[dir="rtl"] .calendar-brand-copy { text-align: right !important; }
html.dak-tablet .calendar-brand-title {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-brand-copy .section-label {
  display: block !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  letter-spacing: .14em !important;
  text-align: inherit !important;
  white-space: normal !important;
}
html.dak-tablet .calendar-year-pill {
  min-width: 0 !important;
  width: auto !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  align-self: center !important;
}
html.dak-tablet .month-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
  min-width: 0 !important;
}
html.dak-tablet .month-card { min-width: 0 !important; overflow: hidden !important; }
html.dak-tablet .month-head {
  grid-template-columns: minmax(0,1fr) 104px !important;
  gap: 7px !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
}
html.dak-tablet[dir="rtl"] .month-head { grid-template-columns: 104px minmax(0,1fr) !important; }
html.dak-tablet .school-days { width: 104px !important; font-size: 10.5px !important; }
html.dak-tablet .mini-cal { width: 100% !important; table-layout: fixed !important; }
html.dak-tablet .mini-cal th { font-size: 9px !important; padding: 7px 0 !important; }
html.dak-tablet .mini-cal td { height: 30px !important; font-size: 12px !important; }
html.dak-tablet .key-panel {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 14px !important;
  min-width: 0 !important;
}
html.dak-tablet .key-card { min-width: 0 !important; padding: 18px !important; }
html.dak-tablet .summary-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
html.dak-tablet .summary-table th,
html.dak-tablet .summary-table td {
  padding: 8px 5px !important;
  font-size: 10.5px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
html.dak-tablet .events-calendar { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }
html.dak-tablet .events-calendar-head { grid-template-columns: minmax(0,1fr) auto !important; gap: 16px !important; padding: 24px !important; }
html.dak-tablet .events-body { grid-template-columns: 1fr !important; }
html.dak-tablet .events-side { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
html.dak-tablet .month-strip { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

/* ---------- Tablet assistant window ---------- */
html.dak-tablet .dak-ai-chat.dak-v4 {
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)) !important;
  width: min(430px, calc(100vw - 48px)) !important;
  height: min(640px, calc(100dvh - 72px)) !important;
  min-height: 500px !important;
  border-radius: 24px !important;
}
html.dak-tablet .dak-v4-header { min-height: 66px !important; padding: 11px 12px !important; }
html.dak-tablet .dak-ai-messages.dak-v4-messages { padding: 16px !important; }
html.dak-tablet .dak-v4-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
html.dak-tablet .dak-v4-topic { min-height: 72px !important; }
html.dak-tablet .dak-v4-composer textarea { font-size: 16px !important; }

/* ---------- General tablet overflow / touch QA ---------- */
html.dak-tablet body { overflow-x: hidden !important; }
html.dak-tablet :is(.container,.calendar-shell,.calendar-board,.month-grid,.key-panel,.journey-premium-card,.journey-form-panel,.journey-story-panel,.events-calendar,.events-body) { min-width: 0 !important; }
html.dak-tablet :is(input,select,textarea,button,a) { -webkit-tap-highlight-color: transparent; }
html.dak-tablet :is(input,select,textarea) { font-size: 16px; }

@media (max-width: 820px) {
  html.dak-tablet .calendar-brand {
    grid-template-columns: 150px minmax(0,1fr) !important;
    gap: 14px !important;
  }
  html.dak-tablet[dir="rtl"] .calendar-brand { grid-template-columns: minmax(0,1fr) 150px !important; }
  html.dak-tablet .calendar-brand img { max-width: 150px !important; }
  html.dak-tablet .calendar-brand-title { font-size: 27px !important; }
  html.dak-tablet .calendar-brand-copy .section-label { font-size: 9.5px !important; }
  html.dak-tablet .key-panel { grid-template-columns: 1fr !important; }
  html.dak-tablet .events-side { grid-template-columns: 1fr !important; }
}

@media (max-width: 740px) {
  /* If a small tablet reports a narrow CSS viewport, keep the calendar readable. */
  html.dak-tablet .month-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Assistant focus mode: keep floating controls out of the conversation ---------- */
@media (max-width: 767px) {
  body.dak-chat-open .back-to-top,
  body.dak-chat-open .wa-fab,
  body.dak-chat-open .wa-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

html.dak-tablet body.dak-chat-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
html.dak-tablet body.dak-chat-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(8,20,36,.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html.dak-tablet body.dak-chat-open .back-to-top,
html.dak-tablet body.dak-chat-open .wa-fab,
html.dak-tablet body.dak-chat-open .wa-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------- Tablet tables: never create page-level horizontal overflow ---------- */
html.dak-tablet :is(.home-adm-table-wrap,.age-table-wrap,.responsive-table-shell,.table-wrap) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-inline: contain !important;
}
html.dak-tablet :is(.age-table,.home-adm-age-table) {
  min-width: 620px !important;
  width: max-content !important;
  max-width: none !important;
}


/* DAK CSS: tablet-laptop-header.css */
/* ======================================================================
   DAK iPad / Tablet Header — Laptop-style navigation
   2026-09-23
   Applies only when tablet-detect.js adds html.dak-tablet.
   Desktop/laptop and phone layouts are intentionally untouched.
   ====================================================================== */

html.dak-tablet #navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  width: 100% !important;
  min-height: 126px !important;
  height: auto !important;
  padding: 12px 18px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px 12px !important;
  background: rgba(255,255,255,.985) !important;
  border-bottom: 1px solid rgba(26,35,50,.09) !important;
  box-shadow: 0 8px 24px rgba(15,38,61,.055) !important;
  overflow: visible !important;
}

html.dak-tablet #navbar .logo {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 58px !important;
  line-height: 0 !important;
}
html.dak-tablet #navbar .logo img {
  display: block !important;
  width: auto !important;
  height: 58px !important;
  max-width: min(300px, 44vw) !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

/* No mobile drawer on iPad/tablet: all navigation is visible like laptop. */
html.dak-tablet #navbar .hamburger {
  display: none !important;
}
html.dak-tablet .mobile-menu,
html.dak-tablet .mobile-menu.open,
html.dak-tablet .mobile-menu-backdrop,
html.dak-tablet .mobile-menu-backdrop.is-open {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.dak-tablet #navbar .nav-links {
  order: 3 !important;
  position: static !important;
  display: flex !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px 5px !important;
  overflow: visible !important;
}

html.dak-tablet #navbar .nav-links > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  color: var(--text, #1A2332) !important;
  font-size: 11.4px !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .nav-links > a:not(.nav-portal-btn):hover,
html.dak-tablet #navbar .nav-links > a:not(.nav-portal-btn):focus-visible {
  background: var(--gray, #F5F7FA) !important;
  color: var(--purple, #6B3FA0) !important;
}

html.dak-tablet #navbar .nav-links > a.nav-portal-btn,
html.dak-tablet #navbar .nav-links > a.nav-portal-btn:visited {
  color: #fff !important;
  background: linear-gradient(135deg,#6B3FA0 0%,#7B4CC4 100%) !important;
  border: 1px solid rgba(107,63,160,.28) !important;
  box-shadow: 0 5px 13px rgba(107,63,160,.11) !important;
  padding-inline: 10px !important;
}

/* Laptop-style appearance and language controls stay at the top right. */
html.dak-tablet #navbar .nav-links > .theme-control--desktop,
html.dak-tablet #navbar .nav-links > .lang-toggle {
  display: inline-flex !important;
  position: absolute !important;
  top: 14px !important;
  z-index: 2 !important;
}
html.dak-tablet #navbar .nav-links > .theme-control--desktop {
  inset-inline-end: 96px !important;
  margin: 0 !important;
}
html.dak-tablet #navbar .theme-trigger {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(26,35,50,.13) !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(26,35,50,.06) !important;
}
html.dak-tablet #navbar .theme-trigger-text,
html.dak-tablet #navbar .theme-trigger-chevron {
  display: none !important;
}
html.dak-tablet #navbar .theme-trigger-icon,
html.dak-tablet #navbar .theme-trigger-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html.dak-tablet #navbar .nav-links > .lang-toggle {
  inset-inline-end: 18px !important;
  min-width: 70px !important;
  width: 70px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(26,35,50,.13) !important;
  background: #fff !important;
  color: var(--navy, #1A2332) !important;
  box-shadow: 0 5px 16px rgba(26,35,50,.06) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
html.dak-tablet #navbar .nav-links > .lang-toggle .lang-toggle-track {
  display: none !important;
}
html.dak-tablet #navbar .nav-links > .lang-toggle .lang-toggle-label {
  display: inline !important;
}

/* Dark theme keeps the exact same geometry. */
html.dak-tablet[data-theme="dark"] #navbar {
  background: rgba(12,25,40,.985) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.20) !important;
}
html.dak-tablet[data-theme="dark"] #navbar .nav-links > a:not(.nav-portal-btn) {
  color: #eef4f8 !important;
}
html.dak-tablet[data-theme="dark"] #navbar .theme-trigger,
html.dak-tablet[data-theme="dark"] #navbar .nav-links > .lang-toggle {
  background: #14243a !important;
  color: #eef4f8 !important;
  border-color: rgba(255,255,255,.13) !important;
}

/* Larger iPads can use a true single-row laptop header. */
@media (min-width: 1000px) {
  html.dak-tablet #navbar {
    min-height: 82px !important;
    height: 82px !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html.dak-tablet #navbar .logo {
    height: 58px !important;
  }
  html.dak-tablet #navbar .logo img {
    height: 58px !important;
    max-height: 58px !important;
    max-width: 238px !important;
  }
  html.dak-tablet #navbar .nav-links {
    order: initial !important;
    position: static !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin-inline-start: auto !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 1px !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    min-height: 32px !important;
    padding: 5px 5px !important;
    font-size: 10.1px !important;
  }
  html.dak-tablet #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 7px !important;
  }
  html.dak-tablet #navbar .nav-links > .theme-control--desktop,
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
  }
  html.dak-tablet #navbar .theme-trigger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    width: 62px !important;
    min-width: 62px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    padding-inline: 7px !important;
    font-size: 11px !important;
  }
}

/* Intermediate iPads: keep all links visible and readable without a drawer. */
@media (min-width: 700px) and (max-width: 999px) {
  html.dak-tablet #navbar .nav-links {
    padding-inline: 2px !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    font-size: 11.2px !important;
    padding-inline: 8px !important;
  }
}

/* ======================================================================
   iPad logo visibility hard-fix
   Only one official lockup may be visible at a time. The generic tablet
   image rule above intentionally sizes logo images, but must not override
   the light/dark visibility rules from dark-mode.css.
   ====================================================================== */
html.dak-tablet #navbar .logo .logo-light {
  display: block !important;
}
html.dak-tablet #navbar .logo .logo-dark {
  display: none !important;
}
html.dak-tablet[data-theme="dark"] #navbar .logo .logo-light {
  display: none !important;
}
html.dak-tablet[data-theme="dark"] #navbar .logo .logo-dark {
  display: block !important;
}


/* ======================================================================
   iPad calendar/header single-row compact fix
   Keep all top navigation items on one row on iPad landscape and wide
   tablet widths, especially on Calendar where long labels + portals used
   to wrap into a second line.
   ====================================================================== */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.dak-tablet #navbar {
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }
  html.dak-tablet #navbar .logo {
    height: 50px !important;
  }
  html.dak-tablet #navbar .logo img {
    height: 50px !important;
    max-height: 50px !important;
    max-width: 180px !important;
  }
  html.dak-tablet #navbar .nav-links {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  html.dak-tablet #navbar .nav-links > a {
    min-height: 30px !important;
    padding: 4px 4px !important;
    font-size: 9.2px !important;
    letter-spacing: -0.01em !important;
  }
  html.dak-tablet #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 6px !important;
    border-radius: 8px !important;
  }
  html.dak-tablet #navbar .theme-trigger {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  html.dak-tablet #navbar .nav-links > .lang-toggle {
    width: 56px !important;
    min-width: 56px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 6px !important;
    font-size: 10px !important;
  }
}


/* ======================================================================
   iPad Calendar — keep both portal buttons on one line
   Prevents "Portal" from wrapping below the campus name.
   Calendar page/tablet only.
   ====================================================================== */
@media (min-width: 700px) and (max-width: 1199px) {
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn,
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn:visited {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;
    line-height: 1 !important;
  }
}

/* Give the portals a little extra room on common iPad landscape widths
   without changing the approved laptop/desktop header. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.dak-tablet body.page-calendar #navbar .nav-links {
    column-gap: 0 !important;
  }
  html.dak-tablet body.page-calendar #navbar .nav-links > a.nav-portal-btn {
    padding-inline: 6px !important;
    font-size: 9px !important;
  }
}


/* DAK CSS: hero-office-spacing-fix.css */
/* DAK responsive hero -> School Office spacing fix
   Scope: phone + tablet only. Desktop/laptop (>=1200px) remains unchanged. */

@media (max-width: 767px) {
  /* Keep the office card clearly below the carousel instead of overlapping it. */
  .home-office-status {
    margin: 0 !important;
    padding: 12px var(--m-gutter, 14px) 0 !important;
    background: var(--m-bg, #f6f9fb) !important;
  }

  .home-office-status .container {
    padding-inline: 0 !important;
  }

  /* Dots stay visibly inside the image and never sit on the card boundary. */
  .hero-right .carousel-dots,
  #heroCarousel .carousel-dots {
    bottom: 14px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablet/iPad: remove the desktop floating overlap and give both blocks breathing room. */
  .home-office-status {
    margin: 0 0 18px !important;
    padding: 18px 0 0 !important;
    background: var(--pf-bg, #f6f9fb) !important;
  }

  .hero-right .carousel-dots,
  #heroCarousel .carousel-dots {
    bottom: 18px !important;
  }
}


/* DAK CSS: tablet-final-refinement.css */
/* ======================================================================
   DAK iPad / Tablet Final Refinement — 2026-09-23
   Tablet-only. Keeps approved phone + laptop/desktop layouts untouched.
   ====================================================================== */

/* ---------- Journey: retain the polished laptop visual language ---------- */
html.dak-tablet .journey-premium-card {
  max-width: 1080px !important;
  margin: 34px auto 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(26,35,50,.08) !important;
  box-shadow: 0 24px 62px rgba(26,35,50,.10) !important;
}

html.dak-tablet .journey-story-panel {
  padding: 40px 40px 34px !important;
  min-height: 450px !important;
}
html.dak-tablet .journey-story-top { margin-bottom: 28px !important; }
html.dak-tablet .journey-story-panel h3 {
  max-width: 560px !important;
  font-size: clamp(31px,4.2vw,40px) !important;
  line-height: 1.08 !important;
  margin-bottom: 12px !important;
}
html.dak-tablet .journey-story-panel p {
  max-width: 610px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin-bottom: 18px !important;
}

/* Undo the generic <=980px stacked-road treatment on real tablets. */
html.dak-tablet .glowing-journey-path {
  min-height: 238px !important;
  margin-top: 18px !important;
  padding: 0 !important;
  border-radius: 26px !important;
}
html.dak-tablet .journey-road {
  display: block !important;
  inset: 16px 18px 18px !important;
  width: calc(100% - 36px) !important;
  height: calc(100% - 34px) !important;
}
html.dak-tablet .journey-moving-light { display: block !important; }
html.dak-tablet .journey-road-step {
  position: absolute !important;
  width: 142px !important;
  margin: 0 !important;
  display: block !important;
  padding: 13px 13px 14px !important;
  border-radius: 20px !important;
  transform: none !important;
}
html.dak-tablet .journey-road-step .road-icon {
  margin: 0 0 9px !important;
  flex: none !important;
}
html.dak-tablet .journey-road-step.step-start {
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  top: auto !important;
}
html.dak-tablet .journey-road-step.step-grow {
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%,-50%) !important;
}
html.dak-tablet .journey-road-step.step-grad {
  right: 20px !important;
  left: auto !important;
  top: 20px !important;
  bottom: auto !important;
}
html.dak-tablet[dir="rtl"] .journey-road-step.step-start,
html.dak-tablet[lang="ar"] .journey-road-step.step-start {
  right: 20px !important;
  left: auto !important;
}
html.dak-tablet[dir="rtl"] .journey-road-step.step-grad,
html.dak-tablet[lang="ar"] .journey-road-step.step-grad {
  left: 20px !important;
  right: auto !important;
}
html.dak-tablet .journey-path-pills {
  margin-top: 18px !important;
  justify-content: center !important;
  gap: 9px !important;
}

/* Laptop-like two-panel layout where tablet width genuinely allows it. */
@media (min-width: 1000px) {
  html.dak-tablet .journey-premium-card {
    grid-template-columns: minmax(0,1.08fr) minmax(360px,.82fr) !important;
  }
  html.dak-tablet .journey-story-panel,
  html.dak-tablet .journey-form-panel {
    min-height: 100% !important;
  }
}
@media (max-width: 999px) {
  html.dak-tablet .journey-premium-card { grid-template-columns: 1fr !important; }
}

/* ---------- Journey form: clean labels, no overlap, comfortable fields ---------- */
html.dak-tablet .journey-form-panel {
  padding: 34px 36px 36px !important;
}
html.dak-tablet .journey-form-panel::before { display: none !important; }
html.dak-tablet .journey-form-head {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 24px !important;
  padding: 0 0 20px !important;
}
html.dak-tablet .journey-form-icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  flex: 0 0 50px !important;
}
html.dak-tablet .journey-form-head strong {
  font-size: 22px !important;
  line-height: 1.12 !important;
  margin: 0 0 5px !important;
}
html.dak-tablet .journey-form-head small {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr) !important;
  gap: 20px 18px !important;
  align-items: start !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child {
  grid-column: 1 / -1 !important;
}
html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  position: static !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  align-self: start !important;
}
html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-align: start !important;
  white-space: normal !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.dak-tablet .journey-premium-inputs select:disabled {
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  html.dak-tablet .journey-form-panel { padding: 30px 26px 32px !important; }
  html.dak-tablet .journey-premium-inputs,
  html.dak-tablet .journey-inputs { grid-template-columns: 1fr !important; }
  html.dak-tablet .journey-dob-field,
  html.dak-tablet .journey-grade-field { grid-column: 1 / -1 !important; }
}

/* ---------- Tablet footer: compact, laptop-like, no white wedges ---------- */
html.dak-tablet .newsletter {
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: linear-gradient(135deg,#10263d 0%,#15283c 54%,#241d3a 100%) !important;
}
html.dak-tablet .newsletter-card {
  margin-bottom: 0 !important;
}
html.dak-tablet .newsletter + .footer,
html.dak-tablet .footer {
  margin-top: 0 !important;
  border-radius: 0 !important;
}
html.dak-tablet .footer {
  padding: 34px 30px 24px !important;
  overflow: hidden !important;
}
html.dak-tablet .footer-grid {
  width: min(100%,1120px) !important;
  grid-template-columns: minmax(0,1.45fr) minmax(150px,.75fr) minmax(150px,.75fr) !important;
  gap: 32px !important;
  margin: 0 auto 22px !important;
  align-items: start !important;
}
html.dak-tablet .footer-grid > div:first-child,
html.dak-tablet .footer-col {
  min-width: 0 !important;
}
html.dak-tablet .footer-brand-name { font-size: 19px !important; margin-bottom: 9px !important; }
html.dak-tablet .footer-brand-name span { font-size: 10.5px !important; }
html.dak-tablet .footer-desc {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
  margin-bottom: 12px !important;
  max-width: 480px !important;
}
html.dak-tablet .footer-contact {
  font-size: 12.5px !important;
  line-height: 1.75 !important;
}
html.dak-tablet .footer-col h4 {
  margin-bottom: 12px !important;
  font-size: 11px !important;
}
html.dak-tablet .footer-col ul li { margin-bottom: 7px !important; }
html.dak-tablet .footer-col ul li a { font-size: 12.5px !important; }
html.dak-tablet .footer-bottom {
  width: min(100%,1120px) !important;
  margin: 0 auto !important;
  padding-top: 17px !important;
  gap: 12px 20px !important;
  font-size: 11.5px !important;
  flex-wrap: wrap !important;
}
html.dak-tablet .footer-bottom-links {
  gap: 14px !important;
  flex-wrap: wrap !important;
}
html.dak-tablet .footer-bottom-links a { font-size: 11.5px !important; }

@media (max-width: 900px) {
  html.dak-tablet .footer { padding: 30px 26px 22px !important; }
  html.dak-tablet .footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 24px 30px !important;
  }
  html.dak-tablet .footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  html.dak-tablet .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}


/* ======================================================================
   DAK iPad / Tablet Journey Form Clean Fix — 2026-09-23
   Final tablet-only override. Keeps phone and laptop/desktop untouched.
   ====================================================================== */
html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  grid-template-columns: minmax(0,1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-inputs .compact,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group:first-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}
html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs input[type="date"],
html.dak-tablet .journey-premium-inputs select {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html.dak-tablet .journey-premium-inputs select {
  padding-inline-end: 44px !important;
}
html.dak-tablet .journey-premium-inputs select:disabled {
  opacity: .9 !important;
  cursor: default !important;
}
html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  height: auto !important;
  margin-top: 2px !important;
  padding: 14px 18px !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}
/* Give the tablet form its own calm readable measure. */
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
}
@media (max-width: 999px) {
  html.dak-tablet .journey-form-panel {
    padding: 30px 30px 32px !important;
  }
}
@media (max-width: 780px) {
  html.dak-tablet .journey-form-panel {
    padding: 28px 24px 30px !important;
  }
  html.dak-tablet .journey-form-head strong {
    font-size: 21px !important;
  }
}

/* 2026-09-23 — iPad/tablet DOB value alignment polish */
html.dak-tablet #journeyDob {
  text-align: center !important;
  text-align-last: center !important;
  padding-inline: 46px !important;
  line-height: 56px !important;
}
html.dak-tablet #journeyDob::-webkit-date-and-time-value {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
html.dak-tablet #journeyDob::-webkit-datetime-edit {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
html.dak-tablet #journeyDob::-webkit-datetime-edit-fields-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
html.dak-tablet #journeyDob::-webkit-calendar-picker-indicator {
  margin: 0 !important;
}


/* DAK CSS: tablet-journey-stability.css */
/* DAK Tablet Journey Stability Fix — 2026-09-23
   Tablet-only. Prevents iPad form stretching, clipping and awkward field layout. */
html.dak-tablet .journey-premium-section,
html.dak-tablet .journey-premium-section .container {
  overflow-x: clip !important;
}

html.dak-tablet .journey-premium-card {
  width: calc(100% - 40px) !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin: 30px auto 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.dak-tablet .journey-story-panel,
html.dak-tablet .journey-form-panel {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* The form itself stays calm and readable on tablets. */
html.dak-tablet .journey-form-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 30px 32px 32px !important;
}

html.dak-tablet .journey-form-head {
  margin: 0 0 22px !important;
  padding: 0 0 18px !important;
}

html.dak-tablet .journey-premium-inputs,
html.dak-tablet .journey-inputs {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}

html.dak-tablet .journey-premium-inputs .wide,
html.dak-tablet .journey-premium-inputs .compact,
html.dak-tablet .journey-premium-btn,
html.dak-tablet .journey-input-group {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.dak-tablet .journey-input-group,
html.dak-tablet .journey-dob-field,
html.dak-tablet .journey-grade-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  overflow: visible !important;
}

html.dak-tablet .journey-input-group label,
html.dak-tablet .journey-dob-field label,
html.dak-tablet .journey-grade-field label {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: start !important;
  white-space: normal !important;
}

html.dak-tablet .journey-premium-inputs input,
html.dak-tablet .journey-premium-inputs select,
html.dak-tablet .journey-premium-inputs input[type="date"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.dak-tablet .journey-premium-inputs input[type="date"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  padding-inline: 14px !important;
}

html.dak-tablet .journey-premium-inputs select {
  padding-inline-end: 42px !important;
}

html.dak-tablet .journey-premium-btn {
  min-height: 56px !important;
  height: auto !important;
  margin: 2px 0 0 !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* Portrait iPads: one calm vertical composition. */
@media (max-width: 899px) {
  html.dak-tablet .journey-premium-card {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
  }
  html.dak-tablet .journey-story-panel {
    padding: 34px 30px 30px !important;
  }
  html.dak-tablet .journey-form-panel {
    padding: 28px 30px 30px !important;
  }
}

/* Landscape / larger tablets: use the laptop-style two-panel composition,
   while keeping the form controls stacked so they never crush each other. */
@media (min-width: 900px) {
  html.dak-tablet .journey-premium-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
    gap: 0 !important;
  }
  html.dak-tablet .journey-story-panel {
    min-height: 100% !important;
    padding: 38px 36px 34px !important;
  }
  html.dak-tablet .journey-form-panel {
    min-height: 100% !important;
    padding: 34px 32px !important;
  }
}

html.dak-tablet[dir="rtl"] .journey-premium-inputs input,
html.dak-tablet[dir="rtl"] .journey-premium-inputs select,
html.dak-tablet[lang="ar"] .journey-premium-inputs input,
html.dak-tablet[lang="ar"] .journey-premium-inputs select {
  text-align: right !important;
}


/* DAK CSS: office-window.css */
/* Office Window */
.office-window-card{max-width:680px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 205px!important;grid-template-areas:"main window" "note window" "actions window"!important;gap:8px 20px!important;align-items:center!important;padding:18px 18px 18px 20px!important}.office-window-card .office-status-main{grid-area:main}.office-window-card .office-status-note{grid-area:note;margin:0 0 0 26px!important}.office-window-card .office-status-actions{grid-area:actions;margin-top:6px!important}.office-window-wrap{grid-area:window;display:grid;grid-template-rows:102px auto;gap:7px;align-self:stretch}.office-window{position:relative;overflow:hidden;border-radius:18px;background:#d9f6ff;border:6px solid rgba(255,255,255,.9);box-shadow:0 8px 18px rgba(22,43,65,.09),inset 0 0 0 1px rgba(27,55,80,.08)}.window-sky{position:absolute;inset:0;background:linear-gradient(180deg,#c9f0ff 0%,#eef9ff 72%,#c5d7d8 73%,#a3b9bb 100%);transition:.5s}.window-sun,.window-moon{position:absolute;right:14px;top:8px;width:26px;height:26px;border-radius:50%;opacity:0;transition:.5s}.window-sun{background:#ffc54c;box-shadow:0 0 18px rgba(255,197,76,.4)}.window-moon{background:#f7f1d4;box-shadow:-8px 2px 0 #aebddb}.window-stars{position:absolute;left:14px;top:14px;color:#fff1ad;font-size:11px;opacity:0}.window-frame-v{position:absolute;top:0;bottom:0;left:50%;width:4px;background:rgba(255,255,255,.9);transform:translateX(-50%)}.window-frame-h{position:absolute;left:0;right:0;top:53%;height:4px;background:rgba(255,255,255,.9);transform:translateY(-50%)}.window-desk{position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(180deg,#9d7758,#7a5c46);z-index:4}.window-lamp{position:absolute;left:19px;bottom:17px;width:5px;height:30px;background:#20394e;z-index:5}.window-lamp:before{content:"";position:absolute;width:25px;height:14px;left:-10px;top:-7px;border-radius:14px 14px 4px 4px;background:#6b3fa0}.window-lamp i{position:absolute;width:12px;height:4px;left:-4px;bottom:-2px;border-radius:99px;background:#20394e}.window-plant{position:absolute;right:18px;bottom:17px;width:19px;height:17px;background:#d5a16b;border-radius:3px 3px 7px 7px;z-index:5}.window-plant:before,.window-plant:after,.window-plant i:before{content:"";position:absolute;width:13px;height:20px;border-radius:50% 50% 50% 0;background:#4fa373;bottom:12px}.window-plant:before{left:-5px;transform:rotate(-28deg)}.window-plant:after{right:-5px;transform:rotate(28deg) scaleX(-1)}.window-plant i:before{left:3px;bottom:14px;transform:scale(.8)}.window-copy{text-align:center;min-width:0}.window-copy strong{display:block;color:var(--navy);font-size:11.5px;font-weight:900;line-height:1.15}.window-copy span{display:block;margin-top:2px;color:rgba(26,35,50,.58);font-size:8.8px;font-weight:700;line-height:1.25}.window-copy small{display:block;margin-top:3px;color:rgba(26,35,50,.45);font-size:8.3px;font-weight:800}
.office-window-card.office-morning .window-sun,.office-window-card.office-day .window-sun{opacity:1}.office-window-card.office-morning .window-sky{background:linear-gradient(180deg,#ffe9bb 0%,#e3f7ff 72%,#c9dad8 73%,#a8bbba 100%)}.office-window-card.office-day .window-sky{background:linear-gradient(180deg,#c7efff 0%,#eefaff 72%,#c9dad8 73%,#a8bbba 100%)}.office-window-card.office-sunset .window-sky{background:linear-gradient(180deg,#efb9a7 0%,#c9b9e8 72%,#afa4ad 73%,#8a7b84 100%)}.office-window-card.office-sunset .window-sun{opacity:.8;top:47px}.office-window-card.office-night .window-sky{background:linear-gradient(180deg,#1e3356 0%,#111f39 72%,#38494c 73%,#273638 100%)}.office-window-card.office-night .window-moon,.office-window-card.office-night .window-stars{opacity:1}.office-window-card.office-night .window-lamp:before{background:#f4bd4a;box-shadow:0 0 18px rgba(244,189,74,.7)}
html[data-theme="dark"] .window-copy strong{color:#f5f8fb}html[data-theme="dark"] .window-copy span,html[data-theme="dark"] .window-copy small{color:rgba(245,248,251,.58)}
@media(max-width:760px){.office-window-card{grid-template-columns:minmax(0,1fr) 112px!important;grid-template-areas:"main window" "note window" "actions actions"!important;gap:8px 10px!important;padding:14px!important}.office-window-card .office-status-note{margin:0!important}.office-window-wrap{grid-template-rows:82px auto;gap:5px}.office-window{border-width:4px;border-radius:14px}.window-copy strong{font-size:9.4px}.window-copy span{font-size:7.6px}.window-copy small{font-size:7.3px}.office-window-card .office-status-actions{display:flex!important}.office-window-card .office-status-action{min-width:0!important}.window-lamp{transform:scale(.8);transform-origin:left bottom}.window-plant{transform:scale(.8);transform-origin:right bottom}}


/* ================================================================
   OLD OFFICE CARD + NEW SCHOOL VISUAL V4.4
   Restore the old card exactly, changing only the old window scene
   to the approved DAK school + buses illustration.
   No window frame / glass / desk / plant / lamp artwork.
   ================================================================ */

.office-window-card .office-window {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.office-window-card .office-window .window-sky {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Remove only the OLD window illustration pieces.
   The card text, office status, buttons, greeting, time and Qur'an stay. */
.office-window-card .window-sun,
.office-window-card .window-moon,
.office-window-card .window-stars,
.office-window-card .window-frame-v,
.office-window-card .window-frame-h,
.office-window-card .window-desk,
.office-window-card .window-lamp,
.office-window-card .window-plant {
  display: none !important;
}

/* Prevent old day/night CSS from replacing the new visual. */
.office-window-card.office-morning .window-sky,
.office-window-card.office-day .window-sky,
.office-window-card.office-sunset .window-sky,
.office-window-card.office-night .window-sky {
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Phone keeps the exact old card/window footprint. */
@media (max-width:760px) {
  .office-window-card .office-window {
    border: 0 !important;
    border-radius: 10px !important;
  }

  .office-window-card .office-window .window-sky {
    background-position: center center !important;
  }
}


/* ================================================================
   SCHOOL VISUAL — TIME-OF-DAY LIGHTING ONLY V4.5
   IMPORTANT:
   - SAME image
   - SAME crop
   - SAME size
   - SAME position
   - SAME card
   Only lighting/color changes automatically with Muscat time.
   ================================================================ */

/* Morning — soft warm sunrise tone */
.office-window-card.office-morning .office-window .window-sky {
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  filter:
    brightness(1.06)
    saturate(.96)
    sepia(.04)
    hue-rotate(-3deg) !important;
}

/* Day — clear neutral daylight */
.office-window-card.office-day .office-window .window-sky {
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  filter:
    brightness(1.10)
    saturate(1.02)
    contrast(.98) !important;
}

/* Sunset — warm amber / soft evening tone */
.office-window-card.office-sunset .office-window .window-sky {
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  filter:
    brightness(.90)
    saturate(.94)
    sepia(.16)
    hue-rotate(-7deg) !important;
}

/* Night — keep the same approved night artwork, only slightly deeper */
.office-window-card.office-night .office-window .window-sky {
  background-image: url("../images/dak-school-card-visual.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  transform: none !important;
  filter:
    brightness(.72)
    saturate(.88)
    contrast(1.04) !important;
}

/* Subtle atmosphere tint, no geometry/layout changes. */
.office-window-card .office-window .window-sky::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.office-window-card.office-morning .office-window .window-sky::after {
  background: linear-gradient(180deg, rgba(255,221,163,.10), rgba(255,255,255,.015) 62%) !important;
}

.office-window-card.office-day .office-window .window-sky::after {
  background: linear-gradient(180deg, rgba(196,230,255,.045), transparent 58%) !important;
}

.office-window-card.office-sunset .office-window .window-sky::after {
  background: linear-gradient(180deg, rgba(235,142,96,.13), rgba(82,58,98,.07) 74%) !important;
}

.office-window-card.office-night .office-window .window-sky::after {
  background: linear-gradient(180deg, rgba(7,20,42,.10), rgba(5,15,32,.17)) !important;
}

/* Ensure responsive versions keep the identical crop and footprint. */
@media (max-width:760px) {
  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: cover !important;
    background-position: center center !important;
    transform: none !important;
  }
}


/* ================================================================
   V4.7 — FULL SCHOOL SCENE ON PHONE/TABLET + CLEARER NIGHT
   Desktop remains unchanged.
   ================================================================ */

/* Keep the night atmosphere, but make the school scene clearly visible. */
.office-window-card.office-night .office-window .window-sky {
  filter:
    brightness(.93)
    saturate(.96)
    contrast(1.02) !important;
}

.office-window-card.office-night .office-window .window-sky::after {
  background:
    linear-gradient(180deg,
      rgba(6,18,40,.025),
      rgba(5,15,32,.055)
    ) !important;
}

/* Tablet / iPad:
   show the COMPLETE illustration instead of cropping its sides. */
@media (min-width: 641px) and (max-width: 1100px) {
  .office-window-wrap {
    grid-template-rows: auto auto !important;
  }

  .office-window-card .office-window {
    width: 205px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    background: #0d3768 !important;
  }

  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }
}

/* Phone:
   the old 112×82 crop was too narrow and cut the school scene.
   Keep it compact, but use the artwork's wide aspect ratio so the whole
   building/buses/road composition is visible. */
@media (max-width: 640px) {
  .office-window-wrap {
    grid-template-rows: auto auto !important;
  }

  .office-window-card .office-window {
    width: 118px !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    background: #0d3768 !important;
  }

  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }
}


/* ================================================================
   V4.8 — CLEAR FULL SCENE + CLEARER SCHOOL LOGO ON PHONE / IPAD
   Uses the SAME approved artwork. No scene elements are changed.
   ================================================================ */

/* Night stays night, but remove the unnecessary dimming so the
   building, buses and school logo remain clear. */
.office-window-card.office-night .office-window .window-sky {
  filter:
    brightness(1.07)
    saturate(1.00)
    contrast(1.025) !important;
}

.office-window-card.office-night .office-window .window-sky::after {
  background:
    linear-gradient(180deg,
      rgba(3,14,34,.012),
      rgba(4,13,30,.022)
    ) !important;
}

/* iPad / tablet: enlarge the scene while preserving the full artwork. */
@media (min-width: 641px) and (max-width: 1100px) {
  .office-window-card {
    grid-template-columns: minmax(0,1fr) 280px !important;
    gap: 10px 18px !important;
  }

  .office-window-wrap {
    width: 280px !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
  }

  .office-window-card .office-window {
    width: 280px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1779 / 884 !important;
    background: #0d3768 !important;
  }

  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }
}

/* Phone: stack the image so it can be large enough for the official
   logo and full school scene to be clearly visible, instead of forcing
   the artwork into the old tiny 112px side column. */
@media (max-width: 640px) {
  .office-window-card {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas:
      "main"
      "note"
      "window"
      "actions" !important;
    gap: 9px !important;
    padding: 14px !important;
  }

  .office-window-card .office-status-main {
    grid-area: main !important;
  }

  .office-window-card .office-status-note {
    grid-area: note !important;
    margin: 0 !important;
  }

  .office-window-wrap {
    grid-area: window !important;
    width: 100% !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    gap: 6px !important;
  }

  .office-window-card .office-window {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1779 / 884 !important;
    border-radius: 14px !important;
    background: #0d3768 !important;
  }

  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    transform: none !important;
  }

  .office-window-card .office-status-actions {
    grid-area: actions !important;
    width: 100% !important;
    display: flex !important;
  }

  .office-window-card .office-quran-strip {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .window-copy {
    width: 100% !important;
    text-align: center !important;
  }
}


/* ================================================================
   V5.0 — CLEARLY VISIBLE TIME-OF-DAY SCENES
   SAME exact school artwork / logo / buses / road / crop.
   Only atmosphere + lighting changes by Muscat time.
   ================================================================ */

.office-window-card .office-window .window-sky {
  transition: filter .6s ease, background-image .6s ease !important;
}

/* MORNING 5:00–7:59
   Make the scene unmistakably morning, not dark-night. */
.office-window-card.office-morning .office-window .window-sky {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 210, 145, .62) 0%,
      rgba(151, 205, 255, .52) 48%,
      rgba(255, 238, 206, .22) 100%
    ),
    url("../images/dak-school-card-visual.webp") !important;
  background-blend-mode: screen, normal !important;
  filter:
    brightness(1.18)
    saturate(.93)
    contrast(.96) !important;
}

.office-window-card.office-morning .office-window .window-sky::after {
  background:
    linear-gradient(
      180deg,
      rgba(255, 223, 174, .16),
      rgba(255,255,255,.05) 62%,
      transparent 100%
    ) !important;
  mix-blend-mode: screen !important;
}

/* DAY 8:00–16:59
   Strong daylight so the building/logo stays very clear. */
.office-window-card.office-day .office-window .window-sky {
  background-image:
    linear-gradient(
      180deg,
      rgba(104, 191, 255, .80) 0%,
      rgba(178, 220, 255, .60) 50%,
      rgba(235, 246, 255, .28) 100%
    ),
    url("../images/dak-school-card-visual.webp") !important;
  background-blend-mode: screen, normal !important;
  filter:
    brightness(1.22)
    saturate(.88)
    contrast(.94) !important;
}

.office-window-card.office-day .office-window .window-sky::after {
  background:
    linear-gradient(
      180deg,
      rgba(186, 225, 255, .14),
      rgba(255,255,255,.06) 70%,
      transparent 100%
    ) !important;
  mix-blend-mode: screen !important;
}

/* SUNSET 17:00–18:59 */
.office-window-card.office-sunset .office-window .window-sky {
  background-image:
    linear-gradient(
      180deg,
      rgba(248, 126, 84, .42) 0%,
      rgba(225, 151, 118, .34) 40%,
      rgba(91, 72, 139, .22) 100%
    ),
    url("../images/dak-school-card-visual.webp") !important;
  background-blend-mode: screen, normal !important;
  filter:
    brightness(1.05)
    saturate(.98)
    contrast(.99) !important;
}

.office-window-card.office-sunset .office-window .window-sky::after {
  background:
    linear-gradient(
      180deg,
      rgba(255, 162, 106, .10),
      rgba(111, 71, 132, .06) 72%,
      transparent 100%
    ) !important;
  mix-blend-mode: screen !important;
}

/* NIGHT 19:00–4:59
   Keep it night, but never muddy/dim. */
.office-window-card.office-night .office-window .window-sky {
  background-image:
    linear-gradient(
      180deg,
      rgba(32, 76, 132, .08),
      rgba(10, 31, 68, .04)
    ),
    url("../images/dak-school-card-visual.webp") !important;
  background-blend-mode: screen, normal !important;
  filter:
    brightness(1.10)
    saturate(1.00)
    contrast(1.02) !important;
}

.office-window-card.office-night .office-window .window-sky::after {
  background:
    linear-gradient(
      180deg,
      rgba(38, 83, 140, .025),
      rgba(5, 15, 32, .018)
    ) !important;
  mix-blend-mode: screen !important;
}

/* Keep every device on the same exact scene/crop logic. */
@media (max-width: 1100px) {
  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* ================================================================
   V5.1 — REAL TIME-OF-DAY SCHOOL SCENES
   Four actual scene images are used now.
   School / logo / buses / road / mountains remain in the same place.
   ================================================================ */

.office-window-card .office-window .window-sky {
  filter: none !important;
  background-blend-mode: normal !important;
}

.office-window-card .office-window .window-sky::after {
  display: none !important;
  content: none !important;
}

/* 5:30 AM–10:59 AM */
.office-window-card.office-morning .office-window .window-sky {
  background-image: url("../images/dak-school-morning.webp") !important;
  filter: none !important;
}

/* 11:00 AM–4:29 PM */
.office-window-card.office-day .office-window .window-sky {
  background-image: url("../images/dak-school-day.webp") !important;
  filter: none !important;
}

/* 4:30 PM–6:29 PM */
.office-window-card.office-sunset .office-window .window-sky {
  background-image: url("../images/dak-school-sunset.webp") !important;
  filter: none !important;
}

/* 6:30 PM–5:29 AM */
.office-window-card.office-night .office-window .window-sky {
  background-image: url("../images/dak-school-night.webp") !important;
  filter: none !important;
}

/* Keep the whole scene visible on phone and tablet. */
@media (max-width: 1100px) {
  .office-window-card .office-window .window-sky,
  .office-window-card.office-morning .office-window .window-sky,
  .office-window-card.office-day .office-window .window-sky,
  .office-window-card.office-sunset .office-window .window-sky,
  .office-window-card.office-night .office-window .window-sky {
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}


/* ================================================================
   V5.6 — APPROVED FOUR REAL SCENES + SAFE CROSS-FADE
   Layout footprint is intentionally untouched. Only the visual layer
   changes with Muscat time: 05:30 / 11:00 / 16:30 / 18:30.
   ================================================================ */
.office-window-card .office-window .window-sky-fade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: inherit;
  will-change: opacity;
}

@media (max-width: 1100px) {
  .office-window-card .office-window .window-sky-fade {
    background-size: 100% 100% !important;
  }
}