/**
 * Branwell — Timeblocks plugin styles
 * Handle: bw-styles-timeblocks
 *
 * ALL rules scoped under #s2p-timeblocks-panel so they cannot leak out
 * of the shortcode into the rest of the theme.
 *
 * Deliberately OMITTED (theme owns these): body font, body color, page
 * container max-width, heading defaults, link colors at page level.
 *
 * Colour policy:
 *   Palette-driven via var(--color-*) tokens defined by the theme.
 *   Switch the customizer palette (Royal Indigo → Coral Bloom → Red, etc.)
 *   and this plugin re-themes with it. The only fixed colours are:
 *     - #2d9d6f online-green (universal "available" signal — must read
 *       as green regardless of theme palette so users recognise the
 *       status convention)
 *     - rgba(0,0,0,…) hairline neutrals on payment-icon dropshadow
 *
 *   Tuesday pricing does NOT trigger any colour change — a small palette
 *   pill near the section label signals it. The price cards, selling
 *   points, and bonus banner all stay in the theme palette at all times.
 */

#s2p-timeblocks-panel {
    padding: 32px 0;
}
#s2p-timeblocks-panel * {
    box-sizing: border-box;
}

/* Header markup is rendered by the theme partial
   template-parts/section-header.php and styled by §6e SHARED
   SECTION HEADER in css/soulpath-website.css. The plugin owns
   no header CSS. */


/* ============================================================
   CONTACT PANEL — country-aware "Conversational tile"
   ============================================================ */
#s2p-timeblocks-panel .bw-contact-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--color-bg, #ffffff);
    /* No border or horizontal padding — the panel aligns flush with the
       rest of the timeblocks content edges. Vertical padding keeps the
       breathing room above/below the row. */
    border-radius: 12px;
    padding: 18px 0;
    margin-top: 18px;
}

#s2p-timeblocks-panel .bw-contact-panel__avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-bg, #ffffff);
    background: var(--color-bg-soft, #f5f5f5);
    overflow: hidden;
    flex-shrink: 0;
    margin-right: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar:last-child { margin-right: 0; }
#s2p-timeblocks-panel .bw-contact-panel__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color-accent-soft);
    font-weight: 600;
    font-size: 14px;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar img + .bw-contact-panel__avatar-fallback {
    z-index: -1;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar.is-fallback .bw-contact-panel__avatar-fallback {
    z-index: auto;
}
#s2p-timeblocks-panel .bw-contact-panel__avatar--more {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: 600;
    font-size: 13px;
    border-color: var(--color-bg, #ffffff);
}

#s2p-timeblocks-panel .bw-contact-panel__status {
    flex: 1 1 200px;
    min-width: 0;
}
#s2p-timeblocks-panel .bw-contact-panel__online {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #2d9d6f;
}
#s2p-timeblocks-panel .bw-contact-panel__online--offline {
    color: #888;
}
#s2p-timeblocks-panel .bw-contact-panel__online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
    animation: bw-contact-pulse 2s ease-out infinite;
}
#s2p-timeblocks-panel .bw-contact-panel__online--offline .bw-contact-panel__online-dot {
    animation: none;
    opacity: 0.5;
}
@keyframes bw-contact-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    #s2p-timeblocks-panel .bw-contact-panel__online-dot { animation: none; }
}
#s2p-timeblocks-panel .bw-contact-panel__subline {
    margin: 0;
    font-size: 13px;
    opacity: 0.6;
    line-height: 1.4;
}

#s2p-timeblocks-panel .bw-contact-panel__cta {
    display: flex;
    flex-direction: column;
    /* Stretch both buttons to the same width — they fill the CTA column
       so the phone and SMS read as identically-sized matched pair. The
       column itself is sized by its widest natural content (the phone
       number length), then both buttons inherit that width via 100%. */
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}
#s2p-timeblocks-panel .bw-contact-panel__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
#s2p-timeblocks-panel .bw-contact-panel__phone:hover,
#s2p-timeblocks-panel .bw-contact-panel__phone:focus-visible {
    background: var(--color-primary-dark, var(--color-primary));
    border-color: var(--color-primary-dark, var(--color-primary));
    color: var(--color-text-on-primary);
    outline: none;
    filter: brightness(0.95);
}
#s2p-timeblocks-panel .bw-contact-panel__phone svg { flex-shrink: 0; }

/* SMS button — inverted version of the phone button.
   Identical box: same padding, font-size, border-radius, border-width,
   box-sizing, and width:100%. They share the CTA column's width so
   the two read as a perfectly matched pair. */
#s2p-timeblocks-panel .bw-contact-panel__sms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    box-sizing: border-box;
    width: 100%;
    transition: background 0.15s ease, color 0.15s ease;
}
#s2p-timeblocks-panel .bw-contact-panel__sms:hover,
#s2p-timeblocks-panel .bw-contact-panel__sms:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    text-decoration: none;
    outline: none;
}
#s2p-timeblocks-panel .bw-contact-panel__sms svg { flex-shrink: 0; }

/* SMS wrapper — stretches to fill the CTA column on every viewport so the
   <a> inside can hit 100% width and match the phone button exactly. */
#s2p-timeblocks-panel .bw-contact-panel__sms-wrap {
    display: block;
    width: 100%;
}

@media (max-width: 640px) {
    #s2p-timeblocks-panel .bw-contact-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 14px;
        /* Vertical padding only on mobile too — keep edges flush with the
           rest of the panel content. */
        padding: 16px 0;
    }
    #s2p-timeblocks-panel .bw-contact-panel__avatars { justify-content: center; }
    #s2p-timeblocks-panel .bw-contact-panel__status { flex: 0 0 auto; }
    #s2p-timeblocks-panel .bw-contact-panel__online { justify-content: center; }
    /* Phone and SMS already stretch to 100% via the base rules — just bump
       padding/font for mobile touch comfort. */
    #s2p-timeblocks-panel .bw-contact-panel__phone,
    #s2p-timeblocks-panel .bw-contact-panel__sms {
        padding: 14px 18px;
        font-size: 16px;
    }
}


/* ============================================================
   DIVIDER
   ============================================================ */
#s2p-timeblocks-panel .s2p-divider {
    /* Empty spacer — used to keep vertical rhythm between sections without
       drawing a visible rule. The class name is retained for backwards
       compatibility with the existing template markup. */
    height: 0;
    margin: 16px 0;
}


/* ============================================================
   PRICING HEADER — small label + optional Tuesday pill
   Plugin-scoped class names (bw-pricing-header) so they cannot
   collide with the theme's page-level .s2p-section-header partial
   used for hero intros.
   ============================================================ */
#s2p-timeblocks-panel .bw-pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
#s2p-timeblocks-panel .bw-pricing-header__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    text-align: left;
    opacity: 0.55;
}

/* Tuesday rates pill — small, palette-aware, sits next to the label.
   Replaces the legacy big amber Tuesday banner. */
#s2p-timeblocks-panel .bw-tuesday-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    line-height: 1;
}
#s2p-timeblocks-panel .bw-tuesday-pill__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}


/* ============================================================
   BONUS MINUTES BANNER — real promotion, palette-aware
   ============================================================ */
#s2p-timeblocks-panel .bw-bonus-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}
#s2p-timeblocks-panel .bw-bonus-banner__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Bonus minutes pip on individual price cards */
#s2p-timeblocks-panel .s2p-bonus-mins {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    padding: 2px 8px;
    margin-top: 5px;
}


/* ============================================================
   PRICE LIST — vertical list with savings ladder
   Option C: each row shows duration, a fill bar visualising relative
   savings, the per-min rate with savings %, and the total. The popular
   row gets palette-accent background. No borders — soft container
   wrapping clean rows.
   ============================================================ */
#s2p-timeblocks-panel .bw-price-list {
    background: var(--color-bg-soft);
    border-radius: 12px;
    padding: 8px 20px;
    margin-bottom: 10px;
}

#s2p-timeblocks-panel .bw-price-list__row {
    display: grid;
    grid-template-columns: 130px 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    /* Subtle separator between rows using box-shadow inset on the next row
       rather than a border — keeps single-row corners possible. */
    box-shadow: inset 0 -1px 0 0 var(--color-border);
}
#s2p-timeblocks-panel .bw-price-list__row:last-child {
    box-shadow: none;
}

/* Popular row — palette-accent background, no separator above/below */
#s2p-timeblocks-panel .bw-price-list__row--popular {
    background: var(--color-accent-soft);
    margin: 0 -20px;
    padding: 16px 20px;
    border-radius: 10px;
    box-shadow: none;
}
/* The row immediately before the popular one shouldn't draw its separator
   into the popular row's coloured area. */
#s2p-timeblocks-panel .bw-price-list__row:has(+ .bw-price-list__row--popular) {
    box-shadow: none;
}

#s2p-timeblocks-panel .bw-price-list__duration-label {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-strong, var(--color-primary));
    line-height: 1.2;
}
#s2p-timeblocks-panel .bw-price-list__eyebrow {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin: 2px 0 0;
    opacity: 0.75;
}
#s2p-timeblocks-panel .bw-price-list__bonus {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    margin: 4px 0 0;
}

/* Savings ladder — a slim filled bar. Width set inline per row, fill in
   palette primary so it tracks the theme. The track is a muted version. */
#s2p-timeblocks-panel .bw-price-list__bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    /* Width is fluid — fills the 1fr column. */
}
#s2p-timeblocks-panel .bw-price-list__bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width 0.4s ease;
}

#s2p-timeblocks-panel .bw-price-list__rate {
    text-align: right;
}
#s2p-timeblocks-panel .bw-price-list__rate-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
}

/* Strikethrough rate — the regular-week price crossed out, sitting before
   the live Tuesday price. Muted opacity so the live price wins visual weight.
   Inherits text colour from the row so popular-row strikethrough is readable
   on the accent-soft background. */
#s2p-timeblocks-panel .bw-price-list__rate-strike {
    text-decoration: line-through;
    font-weight: 400;
    opacity: 0.45;
}
#s2p-timeblocks-panel .bw-price-list__row--popular .bw-price-list__rate-strike {
    opacity: 0.55;
}
#s2p-timeblocks-panel .bw-price-list__rate-live {
    /* Inherits .bw-price-list__rate-value styling. Separate span only to
       isolate it from the strikethrough sibling. */
}

#s2p-timeblocks-panel .bw-price-list__rate-saving {
    font-size: 11px;
    margin: 2px 0 0;
    opacity: 0.55;
    line-height: 1;
}

#s2p-timeblocks-panel .bw-price-list__total {
    min-width: 80px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
}
/* Total strikethrough — small muted line above the live total. Same
   opacity rules as the rate strikethrough so visual treatment is
   consistent across both columns. */
#s2p-timeblocks-panel .bw-price-list__total-strike {
    font-size: 12px;
    font-weight: 400;
    text-decoration: line-through;
    margin: 0;
    opacity: 0.45;
    line-height: 1;
}
#s2p-timeblocks-panel .bw-price-list__row--popular .bw-price-list__total-strike {
    opacity: 0.55;
}
#s2p-timeblocks-panel .bw-price-list__total-live {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 2px 0 0;
    line-height: 1;
}

#s2p-timeblocks-panel .s2p-below-cards {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 24px;
}
#s2p-timeblocks-panel .s2p-carryover,
#s2p-timeblocks-panel .s2p-gst-below {
    font-size: 12px;
    margin: 0;
    opacity: 0.55;
}


/* ============================================================
   VALUE SPLIT — two-bucket cards.
   Left = always-true trust facts. Right = currently-active offers.
   Palette-aware, no borders. The offers card uses the palette-accent
   background so live promos feel "lit up" without colour cascading.
   ============================================================ */
#s2p-timeblocks-panel .bw-value-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

#s2p-timeblocks-panel .bw-value-split__card {
    border-radius: 12px;
    padding: 22px 24px;
}
#s2p-timeblocks-panel .bw-value-split__card--trust {
    background: var(--color-bg-soft);
}
#s2p-timeblocks-panel .bw-value-split__card--offers {
    background: var(--color-accent-soft);
    color: var(--color-primary);
}

#s2p-timeblocks-panel .bw-value-split__eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    opacity: 0.6;
}
#s2p-timeblocks-panel .bw-value-split__card--offers .bw-value-split__eyebrow {
    color: var(--color-primary);
    opacity: 0.7;
}

#s2p-timeblocks-panel .bw-value-split__headline {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-primary));
    margin: 0 0 16px;
    line-height: 1.35;
}

#s2p-timeblocks-panel .bw-value-split__body {
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 8px;
    color: var(--color-text, var(--color-primary));
    opacity: 0.85;
}
#s2p-timeblocks-panel .bw-value-split__body:last-of-type {
    margin-bottom: 0;
}
#s2p-timeblocks-panel .bw-value-split__body strong {
    font-weight: 600;
    color: var(--color-primary);
    opacity: 1;
}

#s2p-timeblocks-panel .bw-value-split__offer {
    margin-bottom: 12px;
}
#s2p-timeblocks-panel .bw-value-split__offer:last-of-type {
    margin-bottom: 16px;
}
#s2p-timeblocks-panel .bw-value-split__offer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.3;
}
#s2p-timeblocks-panel .bw-value-split__offer-sub {
    font-size: 12px;
    color: var(--color-primary);
    opacity: 0.7;
    margin: 2px 0 0;
    line-height: 1.4;
}

#s2p-timeblocks-panel .bw-value-split__terms {
    font-size: 11px;
    color: var(--color-primary);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-decoration: underline;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
#s2p-timeblocks-panel .bw-value-split__terms:hover {
    opacity: 1;
}


/* ============================================================
   DISCLAIMER MODAL
   ============================================================ */
#s2p-disc-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-backdrop, rgba(0, 0, 0, 0.45));
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
#s2p-disc-modal.open { display: flex; }
#s2p-disc-modal[hidden] { display: none; }
#s2p-disc-modal .s2p-modal-box {
    background: var(--color-bg, #fff);
    border-radius: 10px;
    padding: 24px;
    max-width: 480px;
    width: 90%;
    position: relative;
}
#s2p-disc-modal .s2p-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 12px;
}
#s2p-disc-modal .s2p-modal-body {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    opacity: 0.85;
}
#s2p-disc-modal .s2p-modal-link { margin-top: 12px; }
#s2p-disc-modal .s2p-modal-link a {
    color: var(--color-primary);
    text-decoration: none;
}
#s2p-disc-modal .s2p-modal-link a:hover { text-decoration: underline; }
#s2p-disc-modal .s2p-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.5;
}
#s2p-disc-modal .s2p-modal-close:hover { opacity: 1; }


/* ============================================================
   TRUST / PAYMENT FOOTER
   ============================================================ */
#s2p-timeblocks-panel .s2p-trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* No border-top — use margin instead to keep the payment footer visually
       separated from the selling-points block above without drawing a rule. */
    margin-top: 24px;
    padding-top: 0;
    flex-wrap: wrap;
    gap: 12px;
}
#s2p-timeblocks-panel .s2p-pay-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#s2p-timeblocks-panel .s2p-pay-icon {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}
#s2p-timeblocks-panel .s2p-pay-icon svg {
    display: block;
    border-radius: 4px;
}
#s2p-timeblocks-panel .s2p-pay-icon--payid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 38px;
    border-radius: 4px;
    border: 0.5px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-soft, #f7f7f7);
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 6px;
}
#s2p-timeblocks-panel .s2p-pay-icon--payid img {
    width: 40px;
    height: auto;
    display: block;
    flex-shrink: 0;
}
#s2p-timeblocks-panel .s2p-trust-items {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
#s2p-timeblocks-panel .s2p-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: 0.7;
}
#s2p-timeblocks-panel .s2p-trust-dot-green {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d9d6f;
    flex-shrink: 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    /* Value-split stacks vertically on tablet & smaller */
    #s2p-timeblocks-panel .bw-value-split {
        grid-template-columns: 1fr;
    }

    #s2p-timeblocks-panel .s2p-below-cards,
    #s2p-timeblocks-panel .s2p-trust-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #s2p-timeblocks-panel .s2p-trust-items { justify-content: center; }
}

@media (max-width: 640px) {
    /* Price list compresses on mobile — the savings bar drops out, the
       row becomes a tighter 3-column layout. Duration on the left, rate
       in the middle, total on the right. The bar adds visual weight on
       desktop but eats space on mobile where rows are already short. */
    #s2p-timeblocks-panel .bw-price-list {
        padding: 8px 14px;
    }
    #s2p-timeblocks-panel .bw-price-list__row {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 12px 0;
    }
    #s2p-timeblocks-panel .bw-price-list__row--popular {
        margin: 0 -14px;
        padding: 12px 14px;
    }
    /* Bar hides on mobile — savings % in the rate column carries the
       same information without taking horizontal space. */
    #s2p-timeblocks-panel .bw-price-list__bar {
        display: none;
    }
    #s2p-timeblocks-panel .bw-price-list__duration-label {
        font-size: 14px;
    }
    #s2p-timeblocks-panel .bw-price-list__total {
        min-width: 0;
    }
    #s2p-timeblocks-panel .bw-price-list__total-live {
        font-size: 18px;
    }
}