/*
 * Additions for /products/sessions-react/ that calender.css does not cover.
 *
 * The rest of the page deliberately reuses calender.css untouched; this file only
 * holds behaviour the classic page never had.
 */

/* ---------------------------------------------------------------------------
 * Mobile: the date picker behaves as a bottom sheet instead of following the
 * field. jQuery UI writes position/top/left inline when it opens the widget, so
 * these have to be !important to win -- specificity alone cannot beat inline.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
    body .ui-datepicker {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 10px 10px 0 0 !important;
        box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.15) !important;
    }
}

/* ---------------------------------------------------------------------------
 * Boot loader for the grid, shown until React has painted.
 *
 * It OVERLAYS the grid (.tabs-container is position:relative) rather than being
 * a flex sibling. As a flex item it consumed the whole row, so the grid next to
 * it was squeezed to ~0 and, once React painted BEFORE the loader was removed,
 * the single mobile column showed at a fraction of the width with white beside
 * it -- then snapped to full width when the loader left. As an absolute overlay
 * the grid holds full width from the first paint; removing the loader just
 * reveals a column that is already correctly laid out, with no reflow.
 *
 * #srx_grid_root carries the reserved height so the area does not collapse while
 * the grid is still empty (an absolute child cannot hold the parent open).
 * ------------------------------------------------------------------------- */
#srx_boot_loader {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Opaque: hide the grid mid-paint underneath, so the user sees the spinner
       and then the finished column -- never a half-rendered grid. */
    background: #fff;
}

.body_page#calender .tabs-container #srx_grid_root {
    min-height: 320px;
}

/* The classic slider animates .tab-content-wrapper via transform; this page
   switches tabs with display:none/block instead, so the leftover transition
   would only ever show as an unwanted slide. Turn it off. */
.body_page#calender .tabs-container .tab-content-wrapper {
    transition: none;
}

#srx_boot_loader .spinner {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * Spinner shown over the grid while a new date window loads.
 *
 * .tabs-container is position: relative, so this overlays the grid rather than
 * replacing it -- the columns stay visible underneath, as on the classic page.
 * That one positioned its spinner with inline right:45%; top:-1%, which drifted
 * with the viewport width; this is centred properly.
 * ------------------------------------------------------------------------- */
.srx-nav-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
}

.srx-nav-loader .spinner {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * "הדרכה קבוצתית" (group guidance) add-on toggle -- Figma 2447:6735.
 *
 * Sits inside a surfer row, between the surfer picker and the ticket list. Shown
 * only when the session still has guidance spots on the chosen side. New page
 * behaviour -- the classic popup never had it.
 *
 * Two columns: the title with its info icon and, underneath, the remaining-spots
 * pill; on the other side the switch and the price. items-start keeps the two
 * columns top-aligned rather than centring the shorter one.
 * ------------------------------------------------------------------------- */
.srx-guidance {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin: 12px 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #D3D8DA;
    border-radius: 10px;
}

.srx-guidance__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.srx-guidance__head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.srx-guidance__label {
    color: #243D44;
    font-family: 'Almoni Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
}

/* 16px frame, 13px glyph -- the icon is inset inside its frame in the design. */
.srx-guidance__info {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Sized in px, not by opposing insets: info.svg declares 12.99x12.99 and an
   absolutely positioned replaced element takes its intrinsic size when width is auto,
   ignoring right/bottom. Same value here either way, but explicit. */
.srx-guidance__info img {
    position: absolute;
    top: 9.41%;
    left: 9.41%;
    display: block;
    width: 12.99px;
    height: 12.99px;
    max-width: none;
}

.srx-guidance__spots {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    color: #243D44;
    font-family: 'Almoni Medium', sans-serif;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    background-color: #C2EAEA;
    border-radius: 100px;
}

.srx-guidance__ctrl {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    cursor: pointer;
}

.srx-guidance__price {
    color: #243D44;
    font-family: 'Almoni Medium', sans-serif;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
}

/* The switch. 27x16 track, 13px thumb, 2px from the edge it rests against.
   Measured off the design render rather than trusted from the export: on the ON
   state the thumb sits on the RIGHT (right third of the PNG is the bright one),
   so travel runs left -> right, not the reverse. */
.srx-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 27px;
    height: 16px;
}

.srx-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.srx-switch__track {
    position: absolute;
    inset: 0;
    background: #cfd6d8;
    border-radius: 12px;
    transition: background .2s;
    pointer-events: none;
}

.srx-switch__thumb {
    position: absolute;
    top: 1.5px;
    left: 2px;
    width: 13px;
    height: 13px;
    background: #fff;
    border-radius: 50%;
    transition: left .2s;
}

.srx-switch input:checked + .srx-switch__track {
    background: #243D44;
}

.srx-switch input:checked + .srx-switch__track .srx-switch__thumb {
    left: 12px;
}

/* ---------------------------------------------------------------------------
 * Guidance payment iframe (the Pelecard page). Uses the classic .popup shell;
 * only the iframe sizing is new.
 * ------------------------------------------------------------------------- */
.srx-guidance-pay .body {
    padding: 0;
}

.srx-pay-iframe {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    border: 0;
}

.srx-guidance-pay .spinner {
    margin: 40px auto;
}

/* ---------------------------------------------------------------------------
 * Guidance coach tooltip -- Figma 2391:28340.
 *
 * calender.css:998-1007 already matches the design on everything that matters:
 * 301px wide, 30px padding, radius 10, glow 0 0 14px rgba(0,0,0,.1), the 25x25
 * square rotated 45deg as the arrow, a 40x40 avatar at radius 10, and the
 * 24/28 - 14/18 - 16/20 type scale. Only the two gaps differ, so only those are
 * restated here -- calender.css itself is left alone for the classic page.
 * ------------------------------------------------------------------------- */
.body_page#calender .tabs-container .table .td .box_session .info .bottom .coach_tooltip {
    gap: 15px;
}

.body_page#calender .tabs-container .table .td .box_session .info .bottom .coach_tooltip .coach_txt {
    gap: 15px;
}

/* ---------------------------------------------------------------------------
 * Bottom row of a session card, rebuilt.
 *
 * .srx-hour holds the hour on its own full-width line; .srx-tags holds the spots
 * pill and the guidance pill side by side underneath.
 *
 * calender.css:1718-1748 reorders these children with `order: 1..4` below 1024px
 * and absolutely positions .status. Both are neutralised here so one structure
 * holds at every width -- the wrappers decide the layout, not source order and
 * not `order`. Restated with the same selectors as calender.css and loaded after
 * it, so no !important is needed, and the classic page keeps its own behaviour.
 * ------------------------------------------------------------------------- */
.body_page#calender .tabs-container .table .td .box_session .info .bottom {
    flex-wrap: wrap;
    row-gap: 8px;
}

.body_page#calender .tabs-container .table .td .box_session .info .bottom .srx-hour {
    width: 100%;
}

.body_page#calender .tabs-container .table .td .box_session .info .bottom .srx-tags {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Drop the reordering calender.css applies on narrow screens. */
.body_page#calender .tabs-container .table .td .box_session .info .bottom .hour,
.body_page#calender .tabs-container .table .td .box_session .info .bottom .icon,
.body_page#calender .tabs-container .table .td .box_session .info .bottom .hour + .seps,
.body_page#calender .tabs-container .table .td .box_session .info .bottom .status {
    order: 0;
}

/* ...and the absolute positioning it gives .status there. */
.body_page#calender .tabs-container .table .td .box_session .info .bottom .status {
    position: static;
    left: auto;
    bottom: auto;
}

/* ---------------------------------------------------------------------------
 * Guidance tag, sold-out state -- Figma 2391:29239.
 *
 * Only the two colours change: the pill turns grey-300 on grey-100 text, which
 * is the very pair .status already uses in calender.css. Geometry, radius, gap
 * and type all come from .guidance_tag unchanged. The extra class outranks the
 * base rule on specificity, so load order does not matter here.
 * ------------------------------------------------------------------------- */
.body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag.is-full {
    color: #545F64;
    background-color: #D3D8DA;
}

/* ---------------------------------------------------------------------------
 * Buying an extra kartisia -- its own box, under the owned ones.
 *
 * The classic partial shows one list or the other, never both, so nothing in
 * calender.css separates them. This box is a second .surf_tickets, and the card
 * framing already comes from .list_tickets (calender.css:1408, 1px #D3D8DA,
 * radius 10px) -- only the gap between the two cards is missing.
 * ------------------------------------------------------------------------- */
.box_surf .surf_tickets.srx-buy-box {
    margin-top: 15px;
}

/* The buy box has one title and no balance column, so the header must not keep
   the space-between of a two-column header (calender.css:2288). */
.srx-buy-box .list_tickets_header {
    justify-content: flex-start;
}

/* The carousel is the last thing in the card -- .list_tickets drops its bottom
   padding under .show_tickets (calender.css:1471), which left the cards flush
   against their border. */
.box_surf.show_tickets .srx-buy-box .list_tickets ul.scroll {
    padding-bottom: 15px;
}

/* ---------------------------------------------------------------------------
 * Session card, mobile -- Figma 2447:6388 (s8mvndONWnPzdldpdW5OEK).
 *
 * Same DOM as every other width; only the layout changes. The card becomes a
 * column: title, hour, then the two pills sharing the row, then a full-width
 * button. .srx-hour and .srx-tags already exist for exactly this split.
 *
 * Selectors mirror calender.css so specificity ties and this file, loaded right
 * after it, wins -- no !important. Scoped to this page: the classic /sessions/
 * keeps its current mobile card.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .body_page#calender .tabs-container .table .td .box_session {gap: 15px;}

    /* 48px on desktop, 35px here. */
    .body_page#calender .tabs-container .table .td .box_session .wave {width: 35px; min-width: 35px;}

    /* Text column: the badge sits at the inline-end, so the 15px breathing space
       goes on the other side. */
    .body_page#calender .tabs-container .table .td .box_session > .wrapper {flex-direction: column; gap: 16px; padding: 15px 0 15px 15px;}
    .body_page#calender .tabs-container .table .td .box_session .info {display: flex; flex-direction: column; gap: 10px; padding: 0;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom {flex-direction: column; align-items: stretch; gap: 10px; row-gap: 10px; width: 100%;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .srx-hour .hour {text-align: right;}

    /* The two pills share the row, half each, and grow to fit their text instead
       of staying on the single 20px line they use on desktop. */
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .srx-tags {align-items: stretch; gap: 8px; width: 100%;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .status,
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag {flex: 1 1 0; justify-content: center; min-width: 0; height: auto; padding: 10px 7px; color: #243D44; text-align: center; white-space: normal; border-radius: 10px;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag {gap: 5px; text-align: right;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag > span {flex: 1 1 0; min-width: 0;}
    /* The sold-out state keeps its own greys. */
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag.is-full {color: #545F64;}

    .body_page#calender .tabs-container .table .td .box_session button {width: 100%; height: auto; padding: 15px 25px; font-size: 14px; font-weight: 700; line-height: 18px; margin: 0; border-radius: 100px;}

    /* Coach tooltip. It is a child of .guidance_tag, which calender.css puts in
       position:relative -- fine on desktop where the pill is wide, but here the pill
       is half a row, so a 280px panel centred on it hangs off the left edge. The pill
       drops to static and .bottom becomes the containing block, so the panel is sized
       and clamped against the whole row instead. width/max-width together mean
       min(280px, row) -- it can never overflow. */
    .body_page#calender .tabs-container .table .td .box_session .info .bottom {position: relative;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag {position: static;}
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .coach_tooltip {top: calc(100% + 16px); right: auto; left: 0; width: 280px; max-width: 100%; padding: 25px 20px; transform: none;}
    /* Arrow over the info icon. The icon sits at the pill's inline-end, i.e. the left
       edge of the row: 7px of pill padding + half of the 16px button = 15px, which is
       also 15px from the tooltip's left edge since both start at the row. */
    .body_page#calender .tabs-container .table .td .box_session .info .bottom .coach_tooltip::before {right: auto; left: 60px; transform: translateX(-50%) rotate(45deg);}
}

/* Guidance tooltip: one instructor block per session staff. */
.coach_tooltip .coach_block + .coach_block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
}

/* ---------------------------------------------------------------------------
 * No open/fade animation on the booking-popup ticket list. calender.css gives
 * .list_tickets `transition: .5s all` so it eases open when a surfer is picked;
 * on the React page it should just appear. (calender.css itself is left alone.)
 * ------------------------------------------------------------------------- */
#who_come .list_tickets,
#who_come .box_surf.show_tickets .list_tickets {
    transition: none !important;
}

/* ---------------------------------------------------------------------------
 * Coach tooltip on the guidance ⓘ inside the booking popup. calender.css only
 * styles the card's tooltip (much deeper selector), so it is restated here,
 * anchored to the guidance row and opening below the info icon.
 * ------------------------------------------------------------------------- */
#who_come .srx-guidance { position: relative; }
#who_come .srx-guidance .coach_tooltip {
    display: none; flex-direction: column; align-items: flex-start; gap: 10px;
    position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 30;
    width: 320px; max-width: 100%; padding: 24px 24px 20px; color: #243D44;
    text-align: right; white-space: normal; cursor: default; background: #fff;
    border-radius: 10px; box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
}
#who_come .srx-guidance .coach_tooltip.show { display: flex; }
#who_come .srx-guidance .coach_tooltip::before {
    content: ''; position: absolute; top: -10.5px; right: 30px; width: 25px; height: 25px;
    background: #fff; border-radius: 5px; transform: rotate(45deg);
}
#who_come .srx-guidance .coach_tooltip .coach_block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
#who_come .srx-guidance .coach_tooltip .coach_block + .coach_block { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ececec; }
#who_come .srx-guidance .coach_tooltip .coach_head { display: flex; align-items: center; gap: 10px; }
#who_come .srx-guidance .coach_tooltip .coach_img { overflow: hidden; width: 40px; min-width: 40px; height: 40px; border-radius: 10px; }
#who_come .srx-guidance .coach_tooltip .coach_img img { width: 40px; min-width: 40px; height: 40px; object-fit: cover; }
#who_come .srx-guidance .coach_tooltip .coach_txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#who_come .srx-guidance .coach_tooltip .coach_name { font-size: 22px; font-weight: 700; line-height: 26px; }
#who_come .srx-guidance .coach_tooltip .coach_role { font-size: 14px; font-weight: 500; line-height: 18px; color: #2374DD; }
#who_come .srx-guidance .coach_tooltip .coach_desc { font-size: 15px; font-weight: 500; line-height: 20px; }

/* ---------------------------------------------------------------------------
 * The whole guidance pill opens the coach tooltip, not just the small info icon.
 * The handler lives on the pill in sessionCard.jsx; this is only the affordance.
 * ------------------------------------------------------------------------- */
.body_page#calender .tabs-container .table .td .box_session .info .bottom .guidance_tag {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Sticky loyalty card, mobile: it sits under the site header, whose height is not
 * fixed on this page -- whoComePopup mounts the hold counter (.srx-header-clock)
 * inside .wrap_header while a booking is held, making the header taller. So the
 * offset comes from --srx-header-h, measured live by the sticky effect in
 * schedule.jsx, instead of loyalty.css's hardcoded 72px.
 *
 * The `body` prefix is what wins here: loyalty.css is registered after this file
 * (the view registers it inside the signed-in branch), so an identical selector
 * would lose on source order.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
    body .lyl-preview-wrap--sessions.lyl-sticky {top: var(--srx-header-h, 72px);}
}

/* Guidance toggle locked when the order's guidance spots are all taken. */
.srx-guidance__ctrl.is-locked { opacity: .45; cursor: not-allowed; }
.srx-guidance__ctrl.is-locked .srx-switch input { cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * Only the button opens the booking popup now, so the card must not look
 * clickable -- calender.css:895 gives .box_session cursor: pointer for the classic
 * page, where the whole card is the target.
 * ------------------------------------------------------------------------- */
.body_page#calender .tabs-container .table .td .box_session {
    cursor: default;
}

.body_page#calender .tabs-container .table .td .box_session button.btn_blue {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Sticky navigation and table head, mobile.
 *
 * calender.css:2216-2217 pins both at calc(72px + --lyl-sticky-h). 72px is the bare
 * header, but whoComePopup mounts the hold counter (.srx-header-clock) inside
 * .wrap_header while a booking is held, making the header taller -- so both ended up
 * behind it. --srx-header-h is the header measured live by the sticky effect in
 * schedule.jsx, which covers both states with one expression: without the timer it
 * resolves to the bare height, with it to the taller one.
 *
 * Same 767px breakpoint and same selectors as calender.css, and this file loads after
 * it. The fallback keeps /sessions/ unchanged: it never publishes the variable.
 * ------------------------------------------------------------------------- */
@media all and (max-width: 767px) {
    .body_page#calender .tabs-container.sticky-at-header .navigation {top: calc(var(--srx-header-h, 72px) + var(--lyl-sticky-h, 0px));}
    .body_page#calender .tabs-container.sticky-at-header .tab-panel.active .table .thead {top: calc(var(--srx-header-h, 72px) + var(--lyl-sticky-h, 0px));}
}

/* ---------------------------------------------------------------------------
 * The "יש למלא הצהרת בריאות" warning in the surfer picker.
 *
 * Same look as .health_alert (calender.css:2294-2296, 2326) under a name that
 * healthJs.php's `.find('.health_alert').remove()` cannot match -- see the comment
 * in surfers.jsx. React owns this node, so nothing outside React may delete it.
 * ------------------------------------------------------------------------- */
.srx_health_alert {position: relative; padding-right: 28px; margin-right: auto; color: red; font-size: 15px;}
.srx_health_alert::before {content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
    background-image: url('/images/icons/alert.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    .srx_health_alert {font-size: 13px; line-height: 100%; white-space: nowrap;}
}