/* ------------------------------------------------------------------------
   ToolSurf live seat counters  -  /page/packages and /cart

   Painted by ts-stock.js from /ts-stock.php. Four states carry every colour:

     open   seats comfortably available      emerald
     low    two or fewer left                amber
     last   one left                         crimson
     out    today's allocation is spent      stone, buy controls disabled

   The seat meter is one pip per seat in the day's allocation - filled pips
   are gone, hollow ones are still buyable. With caps of 3-10 that reads as
   real inventory at a glance in a way a percentage bar never does.

   Loaded after cart-premium.css and after the packages page's own <style>,
   so ordinary specificity wins almost everywhere; !important appears only
   where the kei theme's global button rules would otherwise take over.
   ------------------------------------------------------------------------ */

:root {
    --ts-seat-open:        #1f9d55;
    --ts-seat-open-ink:    #1b6b40;
    --ts-seat-open-bg:     #f3fbf7;
    --ts-seat-open-line:   #cfe9db;

    --ts-seat-low:         #c2740a;
    --ts-seat-low-ink:     #8a5206;
    --ts-seat-low-bg:      #fff9ee;
    --ts-seat-low-line:    #f0dcb6;

    --ts-seat-last:        #c0392b;
    --ts-seat-last-ink:    #97281c;
    --ts-seat-last-bg:     #fff4f1;
    --ts-seat-last-line:   #f2cabf;

    --ts-seat-out:         #9a8d84;
    --ts-seat-out-ink:     #6f6259;
    --ts-seat-out-bg:      #f8f6f4;
    --ts-seat-out-line:    #e6dfd8;

    /* A product the visitor already owns: never capped, never alarming. */
    --ts-seat-own:         #8a6f5f;
    --ts-seat-own-ink:     #6b5346;
    --ts-seat-own-bg:      #fbf7f4;
    --ts-seat-own-line:    #ebdfd6;

    /* Inlined so the basket notice needs no extra request and no markup change. */
    --ts-alert-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
}

/* ======================================================================
   The seat meter
   ====================================================================== */

.ts-seat {
    --ts-c:    var(--ts-seat-open);
    --ts-ink:  var(--ts-seat-open-ink);
    font-family: inherit;
    text-align: left;
}

[data-ts-state="low"]   .ts-seat { --ts-c: var(--ts-seat-low);  --ts-ink: var(--ts-seat-low-ink); }
[data-ts-state="last"]  .ts-seat { --ts-c: var(--ts-seat-last); --ts-ink: var(--ts-seat-last-ink); }
[data-ts-state="out"]   .ts-seat { --ts-c: var(--ts-seat-out);  --ts-ink: var(--ts-seat-out-ink); }
[data-ts-state="owned"] .ts-seat { --ts-c: var(--ts-seat-own);  --ts-ink: var(--ts-seat-own-ink); }

.ts-seat-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

.ts-seat-title {
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: -0.008em;
    line-height: 1.25;
    color: var(--ts-ink);
    font-variant-numeric: tabular-nums;
}

/* Only the count is heavy. With the panel gone this is what makes the line
   register at a glance, and it keeps the emphasis on the one thing that
   changes rather than on the sentence around it. */
.ts-seat-title b {
    font-size: 14px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

/* The single supporting fact, trailing the count on the same line. */
.ts-seat-fact {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #8b7a70;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-seat-fact b { font-weight: 800; color: #5c4a42; }

/* Live dot. Breathes while seats remain; goes still once they are gone. */
.ts-seat-dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ts-c);
}

.ts-seat-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ts-c);
    animation: ts-seat-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

[data-ts-state="last"]  .ts-seat-dot::after { animation-duration: 1.5s; }
[data-ts-state="out"]   .ts-seat-dot::after { animation: none; opacity: 0; }
[data-ts-state="owned"] .ts-seat-dot::after { animation: none; opacity: 0; }

@keyframes ts-seat-ping {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
}

/* --- pips ------------------------------------------------------------- */

/* Capped width. Once the surrounding panel came off, a full-bleed pip row
   turned into a heavy green rule across the card - and across the very wide
   bundle cards it read as a progress bar for the whole card. */
.ts-seat-pips {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    max-width: 190px;
}

.ts-seat-pips > i {
    flex: 1 1 0;
    min-width: 8px;
    height: 5px;
    border-radius: 99px;
    background: var(--ts-c);
    box-shadow: 0 1px 2px -1px color-mix(in srgb, var(--ts-c) 55%, transparent);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* A seat that has already gone today: recessed, clearly not on offer. */
.ts-seat-pips > i.is-gone {
    background: rgba(0, 0, 0, 0.10);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.07);
}

/* Fallback for engines without color-mix. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ts-seat-pips > i { box-shadow: none; }
}

/* Fallback meter for an unusually large allocation. */
.ts-seat-bar {
    margin-top: 9px;
    height: 6px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.09);
    overflow: hidden;
}

.ts-seat-bar > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--ts-c);
    transition: width 0.5s ease;
}

/* ======================================================================
   Release strip  (top of /page/packages and above the /cart grid)
   ====================================================================== */

[data-ts-release],
[data-ts-cart-summary] {
    display: none;
}

/* A line, not a card. The pill it used to be added a fourth bordered band
   above the fold and competed with the heading it was meant to support. */
[data-ts-release][data-ts-on],
[data-ts-cart-summary][data-ts-on] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 12.5px;
    font-weight: 650;
    color: #7d6b61;
    font-variant-numeric: tabular-nums;
}

/* Packages page: sits under the sub-heading, above the plan row. */
[data-ts-release][data-ts-on] {
    max-width: 760px;
    margin-bottom: 30px;
}

/* Hairline separators instead of interpuncts - lighter at small sizes. */
[data-ts-release][data-ts-on] .ts-release-fact + .ts-release-fact,
[data-ts-cart-summary][data-ts-on] .ts-release-fact + .ts-release-fact {
    padding-left: 11px;
    border-left: 1px solid rgba(125, 107, 97, 0.25);
}

.ts-release-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ts-seat-open);
    flex: 0 0 auto;
}

.ts-release-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ts-seat-open);
    animation: ts-seat-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ts-release-lead {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10.5px;
    color: #9a4f36;
}

.ts-release-fact b { font-weight: 850; color: #3d2c24; }
.ts-release-fact.ts-release-hot b { color: var(--ts-seat-low); }
.ts-release-fact.ts-release-out b { color: var(--ts-seat-last); }

/* ======================================================================
   Packages page
   ====================================================================== */

/* No box. A tinted panel here competed with the price, the savings line and
   the CTA for the same attention, and four bordered blocks stacked before the
   tool list is what made the card feel crowded. Colour alone carries the
   state; the pips carry the quantity. */
.pricing-wrapper .item [data-ts-seats] {
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
}

.pricing-wrapper .item [data-ts-seats]:empty { display: none; }

/* The card steps back once it cannot be bought today - readable, not hidden;
   customers still want to see what they will get tomorrow. */
.pricing-wrapper .item[data-ts-state="out"] .features-container,
.pricing-wrapper .item[data-ts-state="out"] .price-area,
.pricing-wrapper .item[data-ts-state="out"] .discount-alert {
    opacity: 0.55;
    filter: saturate(0.65);
    transition: opacity 0.3s ease;
}

/* Replacement for the <a class="btn"> CTA. A <span>, so the kei theme's
   a[class*="btn"] white-text rule cannot reach it - but .btn still hands it
   the gradient, which is undone here. */
.pricing-wrapper .item span.ts-btn-out,
span.ts-btn-out {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: 16px;
    text-align: center;
    line-height: 1.3;
    cursor: not-allowed;
    background: repeating-linear-gradient(
        135deg, #f4efeb 0 10px, #efe8e3 10px 20px) !important;
    color: #6d5b52 !important;
    border: 1px solid #e2d6cd !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.ts-btn-out-ico {
    display: block;
    width: 17px;
    height: 17px;
    margin: 0 auto 5px;
    opacity: 0.6;
}

.ts-btn-out-line {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #4a382f !important;
}

.ts-btn-out-sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 650;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.ts-btn-out-sub b { font-weight: 850; color: #3d2c24 !important; }

/* ======================================================================
   Cart page
   ====================================================================== */

/* On /cart the live line is the first item INSIDE the existing trust bar
   rather than a band of its own - the page already had an upsell banner, a
   trust bar and a filter bar stacked before the first product.

   Folding it in makes five items share that row, and at 1400px the stock
   30px gap overflowed by ~11px and wrapped the bar onto two lines - which
   would have given back most of the height the merge just saved. */
.ts-cart-container .ts-trust-bar {
    gap: 18px 22px;
}

.ts-trust-bar [data-ts-cart-summary][data-ts-on] {
    margin: 0;
    gap: 4px 8px;
    white-space: nowrap;
    color: var(--ts-seat-open-ink, #1b6b40);
}

.ts-trust-bar [data-ts-cart-summary] .ts-release-fact + .ts-release-fact {
    border-left-color: rgba(27, 107, 64, 0.28);
}

/* Same reasoning as the packages card: in a grid of a hundred products a
   tinted, bordered panel on every single card reads as wallpaper. Two lines
   of ink under the title is louder precisely because it is quieter. */
.ts-card .ts-seat-slot {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
}

.ts-card .ts-seat-slot:empty { display: none; }

.ts-card[data-ts-state="out"] {
    border-style: dashed;
}

.ts-card[data-ts-state="out"] .ts-card-img-wrap img {
    filter: grayscale(1);
    opacity: 0.5;
}

.ts-card[data-ts-state="out"] .ts-badge-save { display: none; }

/* A corner flag so a sold-out card is obvious while scanning the grid. */
.ts-card[data-ts-state="out"] .ts-badge-cat {
    background: var(--ts-seat-out) !important;
    color: #fff !important;
}

.ts-card input.ts-btn-disabled,
.ts-card input.am-cart-button-add:disabled,
.ts-card input.am-cart-button-order:disabled {
    background: #f1ebe7 !important;
    color: #8a7a71 !important;
    border-color: #e0d5cd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 1;              /* the theme dims disabled inputs to near-invisible */
    text-transform: none !important;
}

.ts-card select.billing-plan-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ======================================================================
   Basket refusal notice

   When INVOICE_VALIDATE refuses a checkout, cart/IndexController re-renders
   the basket and cart/layout-wide.phtml prints the message through Zend's
   formErrors helper into <div class="am-cart-error"><ul>. Unstyled that is a
   bare bullet on a white page - easy to miss at exactly the moment the
   customer most needs to read it.

   NOTE the list class is `am-errors`, NOT Zend's stock `errors`: this install
   patches the default in Zend/View/Helper/FormErrors.php:69. `errors` is kept
   below only in case that local patch is ever reverted.
   ====================================================================== */

.am-cart-error:not(:empty) {
    margin: 0 0 22px;
}

.am-cart-error ul.am-errors,
.am-cart-error ul.errors {
    display: block;
    margin: 0;
    padding: 15px 18px 15px 46px;
    list-style: none;
    position: relative;
    border-radius: 14px;
    background: var(--ts-seat-last-bg);
    border: 1px solid var(--ts-seat-last-line);
    color: #6e3b32;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

/* Inline warning glyph, so the notice reads as an alert at a glance. */
.am-cart-error ul.am-errors::before,
.am-cart-error ul.errors::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 16px;
    width: 19px;
    height: 19px;
    background: var(--ts-seat-last);
    -webkit-mask: var(--ts-alert-ico) center / contain no-repeat;
    mask: var(--ts-alert-ico) center / contain no-repeat;
}

.am-cart-error ul.am-errors li + li,
.am-cart-error ul.errors li + li { margin-top: 5px; }

html.ts-account-dark .am-cart-error ul.am-errors,
html.ts-account-dark .am-cart-error ul.errors {
    background: rgba(192, 57, 43, 0.13);
    border-color: rgba(192, 57, 43, 0.32);
    color: #f0c9c1;
}

/* ======================================================================
   Dark mode  (html.ts-account-dark - app-wide since 2026-07-29)
   The packages page locks color-scheme:light, so only /cart needs this.
   ====================================================================== */

html.ts-account-dark .ts-seat            { --ts-ink: #7fd7a5; }
html.ts-account-dark [data-ts-state="low"]  .ts-seat { --ts-ink: #f0b45e; }
html.ts-account-dark [data-ts-state="last"] .ts-seat { --ts-ink: #f4998a; }
html.ts-account-dark [data-ts-state="out"]  .ts-seat { --ts-ink: #a9b2ad; }

html.ts-account-dark .ts-seat-fact        { color: #94a39d; }
html.ts-account-dark .ts-seat-fact b      { color: #e8efec; }
html.ts-account-dark .ts-seat-bar         { background: rgba(255, 255, 255, 0.12); }
html.ts-account-dark .ts-seat-pips > i.is-gone { color: rgba(255, 255, 255, 0.16); }

html.ts-account-dark [data-ts-cart-summary][data-ts-on] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.13);
    color: #c3cec9;
}

html.ts-account-dark .ts-release-lead      { color: #e39676; }
html.ts-account-dark .ts-release-fact b    { color: #edf5f2; }

html.ts-account-dark .ts-card input.ts-btn-disabled,
html.ts-account-dark .ts-card input.am-cart-button-add:disabled,
html.ts-account-dark .ts-card input.am-cart-button-order:disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #93a09b !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ======================================================================
   Motion and small screens
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ts-seat-dot::after,
    .ts-release-dot::after { animation: none !important; opacity: 0 !important; }
    .ts-seat-pips > i,
    .ts-seat-bar > i { transition: none; }
}

@media (max-width: 640px) {
    .ts-seat-title { font-size: 12.5px; }
    .ts-seat-fact  { font-size: 11px; }

    [data-ts-release][data-ts-on],
    [data-ts-cart-summary][data-ts-on] {
        border-radius: 18px;
        padding: 12px 16px;
        gap: 6px 12px;
    }

    .pricing-wrapper .item span.ts-btn-out { padding: 12px 14px; }
    .ts-btn-out-line { font-size: 14px; }
}