/* DESIGN 2_0 — add-ons for the profile page.
   States the batch does not have: field errors, the subscriptions block and the
   banner CTA. Rules mirror the designer's own patterns (.dfield.is-invalid
   and .delivery__error in styles.css) and use the same tokens, so nothing
   here has to be reworked once he draws these states — just delete this file.
   Loaded after styles.css on EVERY design 2 page (views/index.ejs:95), not only
   the profile — so anything added here has to be scoped to where it belongs.
   NB the kit's field component is named per sheet: .dfield (delivery / info
   sheets — the 21.09 batch called it .deliver-field, the 30.09 batch is back to
   .dfield), .profile-field (profile), .signin-field (auth). */

/* Field errors — same treatment as .dfield.is-invalid in the checkout */
.profile-field.is-invalid {
    box-shadow: inset 0 0 0 2px var(--error-color);
}
.profile-field.is-invalid .profile-field__label {
    color: var(--error-color);
}

/* Error text — same treatment as .delivery__error (Footnote Reg 14/18).
   Sits outside .profile-field: the field has a fixed height of 60px. */
.profile-field-error,
.profile-form__error {
    margin: 0;
    font-family: var(--custom-app-font-reg);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.4px;
    color: var(--error-color);
}
.profile-form__error {
    margin-top: 4px;
}

/* Subscriptions (1_1 feature, no markup in the batch) */
.profile-subscriptions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.profile-subscriptions__title {
    margin: 0;
    font-family: var(--custom-app-font-bold);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--primary-text-color, #171717);
}
.profile-subscriptions__desc {
    margin: 0;
    font-family: var(--custom-app-font-reg);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.4px;
    color: var(--secondary-text-color, #6b6b6b);
}
.profile-subscriptions__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* The row itself is now the designer's own `.toggle-row` switch
   (styles.css:7618-7676, settings.html:120-134) — see profile_form.ejs.
   The two rules below therefore match NOTHING in our markup any more; they are
   kept (not deleted) only so nothing shifts before the new styles.css is
   installed where the DB serves it from. The switch paints its own state
   (`:checked + .toggle-row__switch`), so the old `.checked` hook is gone too.
   Delete both together with the install. */
.profile-subscription {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--custom-app-font-reg);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.4px;
    cursor: pointer;
}
.profile-subscription.checked {
    font-family: var(--custom-app-font-bold);
}
/* STILL IN USE: the hover hint inside `.toggle-row__text` ("how to
   unsubscribe"), the only `.profile-subscription*` class left in the markup. */
.profile-subscription__popover {
    margin-left: 8px;
    font-size: 13px;
    line-height: 16px;
    color: var(--secondary-text-color, #6b6b6b);
}

/* Banner CTA — shown while the banner itself is not enabled yet */
.app-banner__btn {
    margin-top: 12px;
}

/* Save button "saving" state (1_1 used a .hb-loader-block spinner inside the
   button; the batch button has no slot for one, so the state is opacity only) */
.profile-form__save.loading {
    pointer-events: none;
    opacity: .6;
}

/* Read-only fields — the email cannot be changed. Ported 1_1 .wo-disabled */
.wo-disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .8;
}

/* Card delete confirm modal — the batch has no such dialog, so the 1_1
   wrapper class is kept and gets its 1_1 adjustments back */
.hb-card-modal .wo-modal-block .wo-modal-body .wo-modal-control {
    padding: 0;
}
.hb-card-modal .wo-modal-block .wo-modal-body .wo-modal-control button {
    text-transform: uppercase;
}

/* Sticky footer — moved to the shared sheet (2_0/default_modals.css): the
   batch rule it re-maps (body.page-profile) covers every account page, and
   Vadim wants the footer pinned on menu and checkout too, not only here. */

/* Birthday field — the inner input must not draw its own frame.
   Every other field on this form carries the batch's own
   `.profile-field__input` (profile.html:119-131), which is borderless: the
   visible box is the inset box-shadow on `.profile-field`. The birthday uses
   <input-date> (public/js/component/InputDate.js), which renders a bare
   <input class="wo-input-date"> — a 1_0 class, and `inheritAttrs: false`
   means a class on the tag never reaches it. So the input keeps the
   UA/global border and you get a second frame inside the container.
   The class cannot be added without editing that shared component (1_0 uses
   it too), so the batch's rules are repeated here. Drop this block if
   InputDate ever takes a class prop. */
.profile-field .wo-input-date {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--custom-app-font-reg);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--card-text-color);
}
.profile-field .wo-input-date:focus {
    outline: none;
}

/* Saved cards — these rules now come from the installed 05.10 sheet
   (styles.css:9782-9849). The verbatim copy that used to sit here was deleted on
   2026-10-06 once the deploy landed, because it had become a no-op: all ten rules
   were byte-identical to the sheet's. */

/* Order details inside the profile column ------------------------------------
   NOT a "state the batch is missing" like the rules above — do not delete this
   one with them.
   The batch draws .odetails as a FULL-PAGE component: his orders.html carries
   only the card list and "View details" is a link to the separate
   order-details.html, so the row always gets the whole content column (1204px)
   and 720 + 24 + 400 = 1144px fits. We expand the details IN PLACE inside
   .profile__col instead (the 1_1 mechanic), and there it can never fit. Measured
   in Chromium against his own sheet:
     1920px -> column 805, card 292      1400px -> column 525, card  97
     1300px -> column 425, card  52      1241px -> column 446, card  52
   (52 = the card's own 24+24 padding + 2+2 border, i.e. a 0px content box.)
   `.odetails__aside` is `flex: 0 0 400px` (styles.css:7981), so it refuses to
   shrink and eats the column while `.odetails__card` collapses to a sliver. The
   banner only leaves the screen at @media (max-width: 1240px) (styles.css:7516),
   which is why it looks broken exactly while the banner is visible.
   His own answer to "not enough room" is the stack in @media (max-width: 1240px)
   (styles.css:8163-8172) — and the column here is narrower than that
   breakpoint's entire content area at every desktop width, so the stacked state
   is the correct one here at all widths. Same declarations, scoped to the column
   so a future full-width .odetails page keeps its two-card row. */
#hb_profile_page .profile__col .odetails {
    flex-direction: column;
}
#hb_profile_page .profile__col .odetails__card,
#hb_profile_page .profile__col .odetails__aside {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
}

/* ==========================================================================
   Hidden-on-request blocks (Vadim, 2026-10-07)
   --------------------------------------------------------------------------
   This file is loaded on EVERY design 2 page (views/index.ejs:95), so each rule
   below carries the #hb_*_page scope of the page it belongs to — that is what
   keeps it off the other two. All three are hide-only: the markup stays, so
   deleting a rule brings the element straight back.
   ========================================================================== */

/* 1. The pickup "truck" glyph that sits in front of an address in the orders
      area. Two places render it, both for a PICKUP order only
      (v-show="order.type === 1" / "!== 2"):
        components_2/profile_orders.ejs:36   .order-card__place  — the card list
        components_2/profile_orders.ejs:218  .odetail .odetail__icon — expanded
      The delivery glyph (delivery.svg) is untouched, and so is the menu's
      .order-status__truck (order_status.ejs:25) — different element, not asked for.

      The [src$=...] guard is load-bearing: truck.svg is ALSO used by
      events_modal.ejs:47, modal_map_outlets_2.ejs:128, ordering_2.ejs:203 and
      order_status.ejs:25, so the two containers are named on purpose rather than
      matching the file name globally. The designer's sheet has no `display` on
      .order-card__place img or .odetail__icon, and v-show restores
      style.display to '' when it shows the element, so no !important is needed. */
#hb_profile_page .order-card__place img[src$="truck.svg"],
#hb_profile_page .odetail .odetail__icon[src$="truck.svg"] {
    display: none;
}

/* 2. "Get directions" + "I need help" — the whole action row goes.
      Two renders, one per page root: components_2/profile_orders.ejs:177
      (profile) and components_2/order_status.ejs:40 (reached from
      menu_2.ejs:991). The row holds nothing but those two buttons.
      The batch's own rule drops only --directions, and only for delivery
      (.order-status.is-delivery .order-status__btn--directions), i.e. it always
      keeps "I need help"; both were asked to go. */
#hb_profile_page .order-status__actions,
#hb_menu_page .order-status__actions {
    display: none;
}

/* 3. The "Help" stub row in the account nav — components_2/profile_nav.ejs:38.
      It is the only row carrying href="#" (every other row is a real tab with
      role="button" + :class), because Help has no page yet and the row goes
      nowhere. Keyed on the attributes rather than :nth-child so reordering the
      tabs can never hide the wrong one. */
#hb_profile_page .profile-nav__row[href="#"] {
    display: none;
}

/* 4. The "truck stop" glyph in the menu's live-order status row —
      components_2/order_status.ejs:25, inside .order-status__where
      (reached from menu_2.ejs:991). It is the ONLY icon there: its sibling
      .order-status__home (:29) is v-show="false", i.e. never rendered.

      It does NOT depend on the order type — the <img> carries no v-show/v-if.
      The designer's sheet does hide it for delivery and in the terminal states,
      but every one of those rules is keyed on `.order-status.is-delivery` /
      `.order-status.is-done`, and OUR <section class="order-status"> never gets
      either class: they are set only on the profile's block
      (profile_orders.ejs:152-156). So on the menu the truck shows for EVERY
      order type, including delivery — where it reads as a delivery truck sitting
      next to the venue address.

      His own comment on .order-status__home settles it: "The location row points
      at the address, not at a truck stop". The glyph is wrong next to an address,
      so it goes (Vadim, 2026-10-07). This is the menu half of rule 1 above; the
      two are deliberately separate because rule 1 must stay off the menu. */
#hb_menu_page .order-status__truck {
    display: none;
}