/* Shared mobile title and header layout. Loaded after legacy component styles. */
@media (max-width:700px){
  #root{--fs-mobile-page:24px;--fs-mobile-title:20px;--fs-mobile-section:17px;--fs-mobile-label:14px;}
  #root :is(h1,h2,h3,h4),.fs-detail-dialog :is(h1,h2,h3,h4){
    min-width:0!important;max-width:100%!important;height:auto!important;max-height:none!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    word-break:normal!important;overflow-wrap:break-word!important;hyphens:none!important;
    -webkit-line-clamp:unset!important;line-clamp:unset!important;text-wrap:pretty;
  }
  #root :is(.page-title,.welcome-row,.exclusive-hero,.fs-admin-page-heading) h1{
    font-size:var(--fs-mobile-page)!important;line-height:1.25!important;font-weight:700!important;
    letter-spacing:-.025em!important;margin:0 0 10px!important;text-align:left!important;
  }
  #root :is(.section-heading,.panel-title,.resources-heading,.events-header,.fs-official-heading) h2{
    font-size:var(--fs-mobile-title)!important;line-height:1.3!important;letter-spacing:-.02em!important;
    font-weight:700!important;margin:0!important;text-align:left!important;
  }
  /* Titles get their own row; action buttons never squeeze the title. */
  #root :is(.section-heading,.panel-title,.resources-heading,.events-header,.notifications-heading,.fs-community-heading,.fs-official-heading){
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;gap:12px!important;min-width:0!important;height:auto!important;
  }
  #root :is(.section-heading,.panel-title,.resources-heading,.events-header,.notifications-heading,.fs-community-heading,.fs-official-heading)>div{
    min-width:0!important;max-width:100%!important;flex-basis:auto!important;
  }
  #root :is(.section-heading,.panel-title,.resources-heading,.fs-official-heading)>button{
    align-self:flex-start!important;max-width:100%!important;white-space:normal!important;height:auto!important;
  }
  #root :is(.page-title,.welcome-row>div,.hero-copy,.event-info,.fs-offer-copy,.modal-content,.event-popup-copy){min-width:0!important;}
  /* All event and offer card titles share the same scale, including list view. */
  #root .offer-grid .offer-card .offer-body .fs-offer-heading h3,
  #root .offer-card .offer-body h3,
  #root .event-card-main .event-info .event-title-button{
    display:block!important;font-size:var(--fs-mobile-title)!important;font-weight:700!important;
    line-height:1.3!important;letter-spacing:-.02em!important;text-align:left!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
    height:auto!important;max-height:none!important;overflow:visible!important;text-overflow:clip!important;
    -webkit-line-clamp:unset!important;margin-top:0!important;
  }
  #root .event-card-main .event-info .event-title-button{
    position:relative!important;box-sizing:border-box!important;width:100%!important;
    padding:0 24px 0 0!important;margin-bottom:8px!important;transform:none!important;
  }
  #root .event-card-main .event-info .event-title-button>span{
    position:absolute!important;inset:.15em 0 auto auto!important;width:18px!important;
    min-width:18px!important;font-size:16px!important;line-height:1.3!important;margin:0!important;
  }
  #root .offer-grid .offer-card .fs-offer-heading,#root .offer-modal .fs-offer-heading{
    display:flex!important;align-items:flex-start!important;gap:10px!important;min-width:0!important;
  }
  #root .offer-card .fs-offer-heading :is(h2,h3),#root .offer-modal .fs-offer-heading h2{flex:1 1 0%!important;min-width:0!important;margin:0!important;}
  #root :is(.offer-card,.offer-modal) .fs-offer-heading>.fs-offer-logo{flex:0 0 36px!important;width:36px!important;height:36px!important;margin:0!important;}
  #root .event-card-main .event-info>span,#root .offer-card .fs-offer-summary{
    display:block!important;margin-top:0!important;font-size:13px!important;line-height:1.5!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word!important;
  }
  /* Detail titles use the same 20 px scale and keep space for close controls. */
  #root :is(.offer-modal,.event-popup,.registration-modal,.content-editor,.fs-confirm-modal) h2,
  :is(#root,.fs-detail-dialog) .fs-detail-dialog-head h2{
    font-size:20px!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.02em!important;text-align:left!important;
  }
  #root :is(.registration-modal,.content-editor,.fs-confirm-modal)>h2{margin:8px 52px 12px 0!important;}
  .fs-detail-dialog>.fs-detail-dialog-head{
    display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;align-items:start!important;
    gap:12px!important;padding:16px!important;height:auto!important;min-height:0!important;box-sizing:border-box!important;
  }
  :is(#root,.fs-detail-dialog)>.fs-detail-dialog-head h2{min-width:0!important;margin:0!important;align-self:center!important;}
  .fs-detail-dialog>.fs-detail-dialog-head>button{
    position:static!important;grid-column:2!important;width:44px!important;min-width:44px!important;
    height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;line-height:1!important;
  }
  #root .hero-card.real-event-hero .hero-copy h2{font-size:24px!important;line-height:1.25!important;text-align:left!important;}
  /* Editor and gift form titles follow the same hierarchy. */
  #root .content-editor .fs-editor-context{height:auto!important;min-width:0!important;}
  #root .content-editor .fs-editor-context strong{display:block!important;min-width:0!important;font-size:17px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:break-word!important;}
  #root .content-editor .fs-editor-section>summary{align-items:flex-start!important;gap:10px!important;padding:14px!important;height:auto!important;}
  #root .content-editor .fs-editor-section>summary>div{min-width:0!important;flex:1 1 auto!important;}
  #root .content-editor .fs-editor-section>summary strong{display:block!important;font-size:15px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:break-word!important;}
  #root .content-editor .fs-editor-section>summary small{display:block!important;font-size:12px!important;line-height:1.45!important;white-space:normal!important;}
  #root .content-editor .fs-editor-index nav button{height:auto!important;white-space:normal!important;line-height:1.4!important;min-width:0!important;text-align:left!important;}
  :is(#root,.fs-detail-dialog).fs-gift-dialog .fs-gift-form :is(h3,legend){font-size:17px!important;line-height:1.4!important;}
  :is(#root,.fs-detail-dialog).fs-gift-dialog .fs-gift-form h4{font-size:14px!important;line-height:1.4!important;}
  .fs-detail-dialog .fs-gift-child>summary{flex-wrap:wrap!important;align-items:center!important;gap:8px!important;}
  .fs-detail-dialog .fs-gift-child-title{min-width:0!important;flex:1 1 120px!important;}
  .fs-detail-dialog .fs-gift-child-title strong{font-size:15px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:break-word!important;}
  .fs-detail-dialog .fs-gift-choice header>div{min-width:0!important;}
  /* Readable metadata and wrapping controls instead of squeezing font sizes. */
  #root :is(.fs-admin-create-button,.event-register,.offer-footer>button){white-space:normal!important;overflow-wrap:break-word!important;line-height:1.4!important;height:auto!important;min-height:44px!important;}
  #root .fs-gift-catalog-row>div:first-child{min-width:0!important;}
  #root .fs-gift-catalog-row strong{font-size:14px!important;line-height:1.4!important;overflow-wrap:break-word!important;}
}
/* Slightly smaller favourite visuals; the transparent hit target stays 44 px. */
#root .offer-visual>.favorite-button,#root .event-thumb>.favorite-button{
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  font-size:21px!important;padding:0!important;box-sizing:border-box!important;
}
#root .offer-visual>.favorite-button::before,#root .event-thumb>.favorite-button::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;background:transparent;
}
@media(max-width:700px){
  #root .offer-visual>.favorite-button,#root .event-thumb>.favorite-button{
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;font-size:22px!important;
  }
#root .offer-visual>.favorite-button::before,#root .event-thumb>.favorite-button::before{inset:-2px;}
}

/* Mobile header: reserve the actual height of every row, including search. */
@media (max-width: 900px) {
  #root .topbar {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(64px + env(safe-area-inset-top, 0px)) !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    padding-block: calc(10px + env(safe-area-inset-top, 0px)) 10px !important;
  }
}

@media (max-width: 600px) {
  #root .topbar,
  #root .topbar.fs-has-edit-toggle {
    display: grid !important;
    grid-template-columns: 44px 44px minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 6px !important;
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  #root .topbar > .mobile-menu {
    grid-area: 1 / 1 !important;
  }
  #root .topbar > .fs-mobile-search-toggle {
    grid-area: 1 / 2 !important;
  }
  #root .topbar > .topbar-shortcuts,
  #root .topbar.fs-has-edit-toggle > .topbar-shortcuts {
    grid-area: 1 / 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
  }
  #root .topbar .fs-admin-edit-toggle > button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 5px !important;
    gap: 4px !important;
  }
  #root .topbar .fs-admin-edit-label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  #root .topbar .fs-admin-edit-state {
    display: none !important;
  }
  #root .topbar > .profile {
    display: none !important;
  }
  #root .topbar > .search {
    grid-area: 2 / 1 / auto / -1 !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 48px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #root .topbar .fs-admin-edit-error {
    position: static;
    display: block;
    width: auto;
    margin-top: 6px;
  }
}

/* Keep five touch targets on one row, even on a 320 px phone.
   The switch retains its existing accessible name and checked state. */
@media (max-width: 360px) {
  #root .topbar .fs-admin-edit-label {
    display: none !important;
  }
}

/* Home shortcuts are full-width cards, not a clipped horizontal carousel. */
@media (max-width: 700px) {
  #root .content {
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)) !important;
  }
  #root .quick-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  #root .quick-actions > button,
  #root .quick-actions > button:last-child {
    grid-column: auto !important;
    grid-template-columns: 42px minmax(0, 1fr) 20px !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 86px !important;
    padding: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: none !important;
  }
  #root .quick-actions > button > div {
    min-width: 0 !important;
  }
  #root .quick-actions :is(strong, small) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
  }
  #root .quick-actions .quick-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Slightly smaller bottom navigation, with comfortable touch targets. */
@media (max-width: 900px) {
  #root .fs-mobile-five {
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #root .fs-mobile-five > button {
    min-height: 54px !important;
    padding: 4px 1px !important;
    gap: 4px !important;
    font-size: 10.5px !important;
    border-radius: 11px !important;
  }
  #root .fs-mobile-five > button svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Mobile categories: a clear select affordance instead of a flat blue bar. */
@media (max-width: 900px) {
  #root .fs-offers-toolbar {
    min-width: 0;
    max-width: 100%;
  }
  #root .fs-category-select {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 13px 54px 13px 16px !important;
    border: 1px solid #d4e3ec !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23185674' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(to left, #edf5fa 44px, transparent 44px) !important;
    background-position: right 14px center, center !important;
    background-size: 16px 16px, 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 3px 10px #0b284708 !important;
    color: #173e58 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #root .fs-category-select:focus-visible {
    outline: 2px solid #29789b !important;
    outline-offset: 3px !important;
    border-color: #29789b !important;
  }
  #root .fs-category-select option {
    background: #fff;
    color: #173e58;
  }
}