/* =====================================================================
   Family Connect — mobile app polish (phones only, < 768px)
   Loaded LAST so it wins over the older layered rules. Everything here
   is scoped to small screens; desktop is untouched.
   ===================================================================== */
@media (max-width: 767.98px) {
  :root {
    --m-bg: #f8f5ef;
    --m-card: #ffffff;
    --m-ink: #1d2b36;
    --m-ink-2: #5b6b76;
    --m-line: #ece6da;
    --m-brand: var(--fc2-teal-dark,#1f8a66);
    --m-brand-d: var(--fc2-teal-deep,#146448);
    --m-brand-l: var(--fc2-tint-soft,#e7f5ef);
    --m-gold: #f2b437;
    --m-radius: 18px;
    --m-shadow: 0 1px 2px rgba(29,43,54,.05), 0 6px 18px rgba(29,43,54,.06);
    --m-nav-h: 64px;
  }

  /* ---------- base typography ---------- */
  html body, html body .fc_page, html body .fc_learning_page {
    font-family: 'Tajawal', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
  }
  html body { background: var(--m-bg) !important; color: var(--m-ink); font-size: 15px; line-height: 1.6; }
  html body h1, html body h2, html body h3, html body h4 { font-family: 'Tajawal', 'Baloo 2', sans-serif !important; letter-spacing: 0; color: var(--m-ink); }
  html body #wrapwrap main { background: var(--m-bg); }
  html body .o_portal_wrap > .container { padding: 12px 14px calc(var(--m-nav-h) + 28px + env(safe-area-inset-bottom)) !important; max-width: 100%; }
  html body .fc_page { padding-left: 0 !important; padding-right: 0 !important; }
  html body a, html body button { touch-action: manipulation; }

  /* ---------- top bar ---------- */
  html body .fc_global_header {
    position: sticky !important; top: 0; z-index: 100;
    min-height: 0 !important; height: auto !important;
    padding-top: env(safe-area-inset-top);
    /* no backdrop-filter here: it would turn the fixed tab bar (a child of
       the header) into a header-relative box and push it off screen */
    background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 1px solid var(--m-line) !important; box-shadow: none !important;
  }
  html body .fc_global_header .fc_global_header_inner {
    min-height: 56px !important; padding: 8px 14px !important; gap: 8px !important;
    flex-wrap: nowrap !important; align-items: center !important;
  }
  html body .fc_global_header .fc_learning_brand { font-size: 20px !important; gap: 6px; flex: 0 0 auto; }
  html body .fc_global_header .fc_brand_mark { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  html body .fc_global_header .fc_header_profile { margin: 0 !important; margin-inline-start: auto !important; gap: 4px !important; flex: 0 1 auto; min-width: 0; }
  html body .fc_global_header .fc_header_action { width: 36px !important; height: 36px !important; min-width: 36px; border-radius: 12px !important; font-size: 16px !important; padding: 0 !important; justify-content: center; }
  html body .fc_global_header .fc_lang_toggle span { display: none !important; }
  html body .fc_global_header .fc_header_avatar { width: 36px !important; height: 36px !important; border-width: 2px !important; font-size: 15px; }
  html body .fc_global_header .fc_header_level,
  html body .fc_global_header .fc_points_chip,
  html body .fc_global_header .fc_header_name { display: none !important; }
  html body .fc_global_header .fc_logout_link { display: none !important; }
  html body .fc_global_header .fc_login_link { padding: 8px 12px !important; border-radius: 12px !important; font-size: 13px !important; }

  /* ---------- bottom tab bar ---------- */
  html body .fc_global_header .fc_learning_nav {
    position: fixed !important; inset: auto 0 0 0 !important; z-index: 120 !important;
    display: grid !important; grid-auto-flow: column !important; grid-auto-columns: 1fr !important;
    height: calc(var(--m-nav-h) + env(safe-area-inset-bottom)) !important;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) !important; gap: 2px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid var(--m-line) !important; box-shadow: 0 -6px 24px rgba(29,43,54,.07) !important;
    overflow: visible !important;
  }
  html body .fc_global_header .fc_learning_nav > a,
  html body .fc_global_header .fc_learning_nav > .fc_nav_more {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 0 !important; padding: 4px 2px !important; margin: 0;
    border: 0; background: transparent; border-radius: 14px;
    color: #7b8790 !important; font: 700 11px/1.15 'Tajawal', sans-serif !important; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html body .fc_global_header .fc_learning_nav > a i,
  html body .fc_global_header .fc_learning_nav > .fc_nav_more i { display: block !important; margin: 0 !important; font-size: 20px !important; color: inherit !important; }
  html body .fc_global_header .fc_learning_nav > a.active { color: var(--m-brand) !important; }
  html body .fc_global_header .fc_learning_nav > a.active i { background: var(--m-brand-l); border-radius: 999px; padding: 3px 14px; }
  html body .fc_global_header .fc_learning_nav > a.active:after { display: none !important; }
  html body .fc_global_header .fc_learning_nav > a.fc_nav_overflow { display: none !important; }
  html body .fc_global_header .fc_learning_nav > .fc_nav_more { display: flex !important; cursor: pointer; }
  html body .fc_global_header .fc_learning_nav > .fc_nav_more.active,
  html body .fc_global_header .fc_learning_nav > .fc_nav_more[aria-expanded="true"] { color: var(--m-brand) !important; }

  /* "More" sheet */
  .fc_more_sheet { position: fixed; inset: 0; z-index: 115; /* under the tab bar (120) so 'More' can close it */ display: flex; align-items: flex-end; background: rgba(16,24,32,.38); animation: fcmFade .18s ease; }
  .fc_more_sheet[hidden] { display: none !important; }
  .fc_more_panel { width: 100%; background: #fff; border-radius: 24px 24px 0 0; padding: 10px 16px calc(var(--m-nav-h) + 18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.15); animation: fcmUp .22s cubic-bezier(.2,.8,.2,1); max-height: 88vh; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .fc_more_grip { width: 40px; height: 5px; border-radius: 9px; background: #dfe3e6; margin: 0 auto 12px; }
  .fc_more_panel h5 { margin: 0 4px 12px; font: 800 16px 'Tajawal', sans-serif; color: var(--m-ink); }
  .fc_more_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fc_more_grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: #f6f8f7; color: var(--m-ink) !important; text-decoration: none !important; font: 700 13px/1.3 'Tajawal', sans-serif; text-align: center; }
  .fc_more_grid a i { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: var(--c, var(--m-brand)); }
  .fc_more_grid a:active { transform: scale(.97); }
  .fc_more_grid a i.fc_more_emoji { font-style: normal; font-size: 24px; background: linear-gradient(160deg, #7fb3ff, #3f6fd8); }
  @keyframes fcmUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes fcmFade { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- text direction: keep Arabic pages truly right-to-left ---------- */
  html[dir="rtl"] body main.fc_learning_grid { direction: rtl !important; }

  /* ---------- inner-page banners (prayers, tafsir, listen, files...) ---------- */
  html body .fc2_page_banner { padding: 20px 18px !important; border-radius: 22px !important; margin-bottom: 14px !important; min-height: 0 !important; }
  html body .fc2_page_banner .fc2_banner_chevron { display: none !important; }
  html body .fc2_page_banner .fc2_banner_text { width: 100%; }
  html body .fc2_page_banner h1, html body .fc2_page_banner h2 { font-size: 21px !important; line-height: 1.4 !important; margin: 0 0 4px !important; color: #fff !important; }
  html body .fc2_page_banner p { font-size: 13.5px !important; line-height: 1.7 !important; margin: 0 !important; opacity: .95; }

  /* file pickers */
  html body .fc_page input[type="file"] { width: 100%; font-size: 14px !important; padding: 6px !important; border-radius: 14px !important; border: 1px dashed #cfd8d3 !important; background: var(--fc2-tint-faint,#f8fbf9) !important; }
  html body .fc_page input[type="file"]::file-selector-button { margin-inline-end: 10px; border: 0; border-radius: 10px; padding: 9px 14px; background: var(--m-brand); color: #fff; font: 700 13px 'Tajawal', sans-serif; }

  /* small action buttons/links get a comfortable tap size */
  html body .fc_page .btn, html body .fc_page .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; font-weight: 700; padding-inline: 14px; }

  /* ---------- generic cards / panels / buttons ---------- */
  html body .fc_panel, html body .fc_learning_page .fc_panel {
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important;
    border-radius: var(--m-radius) !important; box-shadow: var(--m-shadow) !important; padding: 16px !important;
  }
  html body .fc_panel h4, html body .fc_panel .fc_panel_title { font-size: 16px !important; font-weight: 800 !important; margin-bottom: 10px !important; }
  html body .fc_panel p { font-size: 13px !important; line-height: 1.7 !important; color: var(--m-ink-2) !important; }
  html body .fc_purple_button, html body .fc_outline_button {
    min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 14px !important; font-size: 14px !important; font-weight: 800 !important;
  }
  html body input.form-control, html body select.form-control, html body textarea.form-control,
  html body .fc_page input[type="text"], html body .fc_page input[type="email"], html body .fc_page input[type="password"],
  html body .fc_page input[type="search"], html body .fc_page select, html body .fc_page textarea {
    font-size: 16px !important; /* stops iOS zooming into inputs */
    min-height: 46px; border-radius: 14px !important;
  }

  /* ---------- child home (/my/services) ---------- */
  html body main.fc_learning_grid { display: flex !important; flex-direction: column !important; gap: 16px !important; }
  html body main.fc_learning_grid > .fc_learning_main { order: 1; display: flex; flex-direction: column; gap: 16px; }
  html body main.fc_learning_grid > .fc_side_right { order: 2; }
  html body main.fc_learning_grid > .fc_side_left { order: 3; display: grid !important; }
  html body main.fc_learning_grid > .fc_learning_sidebar { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 12px !important; }
  html body main.fc_learning_grid > .fc_learning_sidebar > * { min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; }
  html body .fc_tree_stage { width: 100% !important; }
  html body .fc_challenge_panel { display: flex !important; align-items: center; gap: 14px !important; }
  html body .fc_challenge_panel > span { font-size: 34px !important; flex: 0 0 auto; }
  html body .fc_challenge_panel > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  html body .fc_challenge_panel > div h4, html body .fc_challenge_panel > div p { flex: 1 0 100%; margin: 0 !important; }
  html body .fc_challenge_panel > div b { font-size: 13px; color: #b7791f; }
  html body .fc_challenge_panel > div a { margin-inline-start: auto; padding: 9px 16px !important; border-radius: 12px !important; font-size: 13px !important; position: static !important; }
  html body main.fc_learning_grid > .fc_learning_sidebar > .fc_challenge_panel,
  html body main.fc_learning_grid > .fc_learning_sidebar > .fc_badges_panel { grid-column: 1 / -1; }

  /* hero */
  html body .fc_knowledge_hero { min-height: 0 !important; padding: 22px 16px 16px !important; border-radius: 22px !important; margin: 0 !important; }
  html body .fc_knowledge_hero .fc_hero_copy { padding: 0 !important; width: 100% !important; max-width: 100% !important; }
  html body .fc_knowledge_hero .fc_hero_copy > span { font-size: 12px !important; }
  html body .fc_knowledge_hero h1 { text-shadow: 0 2px 10px color-mix(in srgb,var(--fc2-teal-ink,#0a281e) 35%,transparent); font-size: 24px !important; line-height: 1.35 !important; margin: 6px 0 4px !important; }
  html body .fc_knowledge_hero .fc_hero_copy > p:not(.fc_search_hint) { font-size: 13.5px !important; line-height: 1.7 !important; margin-bottom: 12px !important; }
  html body .fc_knowledge_hero .fc_search_hint { display: none !important; }
  html body .fc_knowledge_hero .fc_search_box { margin: 0 0 10px !important; border-radius: 16px !important; height: 50px; }
  html body .fc_knowledge_hero .fc_search_box input { font-size: 15px !important; min-height: 0; text-overflow: ellipsis; padding-inline: 14px !important; }
  html body .fc_knowledge_hero .fc_hero_copy > p:not(.fc_search_hint) { text-shadow: 0 1px 6px color-mix(in srgb,var(--fc2-teal-ink,#0a281e) 35%,transparent); }
  html body .fc_knowledge_hero .fc_search_suggestions { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; gap: 6px !important; margin: 0 -16px !important; padding: 0 16px 2px !important; scrollbar-width: none; }
  html body .fc_knowledge_hero .fc_search_suggestions::-webkit-scrollbar { display: none; }
  html body .fc_knowledge_hero .fc_search_suggestions button { flex: 0 0 auto; font-size: 12.5px !important; padding: 7px 12px !important; white-space: nowrap; }
  html body .fc_hero_star, html body .fc_hero_cloud { display: none !important; }

  /* "today's journey" */
  html body .fc_daily_cycle {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important;
    padding: 14px !important; margin: 0 !important; border-radius: var(--m-radius) !important;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important; box-shadow: var(--m-shadow) !important;
  }
  html body .fc_daily_cycle .fc_cycle_intro { grid-column: 1 / -1; display: flex !important; flex-direction: column; text-align: start; margin: 0 0 4px !important; }
  html body .fc_daily_cycle .fc_cycle_intro span { font-size: 16px !important; font-weight: 800; color: var(--m-ink) !important; }
  html body .fc_daily_cycle .fc_cycle_intro b { font-size: 12.5px !important; font-weight: 500 !important; color: var(--m-ink-2) !important; }
  html body .fc_daily_cycle .fc_cycle_arrow { display: none !important; }
  html body .fc_daily_cycle .fc_cycle_step {
    grid-column: auto !important; width: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 12px 6px !important; border-radius: 16px !important; background: #f6f8f7 !important; border: 0 !important;
  }
  html body .fc_daily_cycle .fc_cycle_icon { width: 40px !important; height: 40px !important; font-size: 20px !important; border-radius: 13px !important; display: flex !important; align-items: center; justify-content: center; }
  html body .fc_daily_cycle .fc_cycle_step b { font-size: 14px !important; }
  html body .fc_daily_cycle .fc_cycle_step small { font-size: 11.5px !important; line-height: 1.4; color: var(--m-ink-2) !important; }

  /* services → app-icon grid */
  html body .fc_section_heading { margin: 4px 2px 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 2px; }
  html body .fc_section_heading h2 { font-size: 18px !important; font-weight: 800 !important; margin: 0 !important; }
  html body .fc_section_heading span { font-size: 12.5px !important; color: var(--m-ink-2) !important; }
  html body .fc_adventure_grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; }
  html body .fc_adventure_grid .fc_adventure_card {
    min-height: 0 !important; height: auto !important; padding: 14px 6px 12px !important; margin: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
    background: var(--m-card) !important; border: 1px solid var(--m-line) !important; border-radius: 18px !important;
    box-shadow: var(--m-shadow) !important; transform: none !important; overflow: hidden;
  }
  html body .fc_adventure_grid .fc_adventure_card:before,
  html body .fc_adventure_grid .fc_adventure_card:after,
  html body .fc_adventure_grid .fc_adventure_number,
  html body .fc_adventure_grid .fc_adventure_card p,
  html body .fc_adventure_grid .fc_play_button { display: none !important; }
  html body .fc_adventure_grid .fc_adventure_icon {
    width: 52px !important; height: 52px !important; margin: 0 !important; padding: 0 !important;
    color: var(--service-color, var(--m-brand)) !important; animation: none !important; box-shadow: none !important; background: none !important;
  }
  html body .fc_adventure_grid .fc_adventure_card h3 { font-size: 13px !important; line-height: 1.35 !important; font-weight: 800 !important; margin: 0 !important; color: var(--m-ink) !important; }
  html body .fc_adventure_grid .fc_adventure_card:active { transform: scale(.96) !important; }

  /* side panels */
  html body .fc_profile_panel .fc_outline_button, html body .fc_tree_panel .fc_purple_button { width: 100%; font-size: 13px !important; }
  html body .fc_level_numbers { font-size: 12px !important; }
  html body .fc_today_panel ul { margin: 0; padding: 0; }
  html body .fc_today_panel li { font-size: 13px !important; }
  html body .fc_tree_stage { max-width: 100%; transform: scale(.9); transform-origin: top center; margin-bottom: -10px; }

  /* trust strip at the bottom of the child home */
  html body .fc_learning_footer { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 16px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  html body .fc_learning_footer > span { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 12px !important; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; font-size: 12px !important; text-align: start !important; }
  html body .fc_learning_footer .fc_footer_badge { width: 36px !important; height: 36px !important; font-size: 16px !important; flex: 0 0 36px; }
  html body .fc_learning_footer b { font-size: 13px !important; }
  html body .fc_learning_footer small { font-size: 11px !important; line-height: 1.4; }

  /* ---------- site footer: compact on phones (the tab bar already navigates) ---------- */
  html body .fc_global_footer { margin-top: 0 !important; padding-bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom)) !important; }
  html body .fc_global_footer .fc_global_footer_inner { display: block !important; padding: 26px 18px 14px !important; }
  html body .fc_global_footer .fc_global_footer_inner > section:not(.fc_footer_brand) { display: none !important; }
  html body .fc_global_footer .fc_footer_brand p { max-width: none !important; font-size: 13px !important; }
  html body .fc_global_footer .fc_learning_brand { font-size: 24px !important; }
  html body .fc_global_footer .fc_footer_bottom { flex-direction: column; align-items: center; gap: 4px !important; text-align: center; padding: 12px 18px !important; font-size: 11.5px !important; }

  /* notification panel fits the screen */
  html body .fc_notifications_panel { position: fixed !important; top: calc(60px + env(safe-area-inset-top)) !important; inset-inline: 10px !important; width: auto !important; max-height: 70vh; overflow: auto; border-radius: 18px !important; }

  /* PWA install banner sits above the tab bar */
  html body .fc_pwa_banner { bottom: calc(var(--m-nav-h) + 12px + env(safe-area-inset-bottom)) !important; }
  html body .fc_ios_guide { padding-bottom: calc(var(--m-nav-h) + 30px) !important; }
  html body .fc_ios_arrow { bottom: calc(var(--m-nav-h) + 6px) !important; }
}

/* Desktop and tablet too: Odoo's RTL build flips the grid's 'direction: rtl'
   to 'ltr', which put full stops on the wrong side of Arabic sentences.
   This file is loaded as a plain stylesheet (not flipped), so this holds. */
html[dir="rtl"] body .fc_learning_grid > * { direction: rtl; }

/* phones: the "More" sheet and button only exist for the tab bar */
@media (min-width: 768px) {
  .fc_more_sheet, .fc_learning_nav > .fc_nav_more { display: none !important; }
  /* the teacher's tab-bar "log out" tab: on desktop the header icon does it */
  .fc_learning_nav > a.fc_nav_logout { display: none !important; }
}
@media (max-width: 767.98px) {
  html body .fc_global_header .fc_learning_nav > a.fc_nav_logout { color: #d9534f !important; }
}
/* rail: log out sits apart at the end, in red */
.fc2_rail_nav a.fc2_rail_logout { margin-top: 10px; border-top: 1px dashed #e4ddf0; padding-top: 12px; color: #c0392b; }
.fc2_rail_nav a.fc2_rail_logout i { color: #d9534f; }
.fc2_rail_nav a.fc2_rail_logout:hover { background: #fdecea; color: #a93226; }

@media (max-width: 359.98px) {
  html body .fc_adventure_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .fc_global_header .fc_learning_brand span:not(.fc_brand_mark) { display: none; }
}