/**
 * Coccaro Loyalty — the left-edge tab, the drawer, the cart block and the
 * My Account page.
 *
 * Everything is namespaced .col-* and every rule is specific enough to survive
 * the Woodmart theme without a wall of !important. Where !important IS used it
 * is on button properties Woodmart sets globally — the Lucky Coupon plugin hit
 * exactly the same wall.
 *
 * z-index 9998 for the tab: one BELOW the Lucky Coupon sheet, so an open lucky
 * popup is never obscured by a points tab the customer did not ask for.
 */

:root {
    /* Coccaro Home's actual palette, lifted from coccaro-lucky-coupon so the
       two floating surfaces on this storefront look like the same shop.
       The previous navy/gold was invented and looked borrowed. */
    --col-blue: #455A71;        /* primary brand blue */
    --col-blue-dark: #38495c;
    --col-blue-soft: #c9d5e2;
    /* Blue and neutrals only. The beige accents (--col-tan / --col-sand /
       --col-cream) were removed on 2026-08-08: the identity is the blue, and
       a second warm family made the drawer read as a different shop's widget
       sitting on top of this one. */
    --col-neutral: #F5F7F9;     /* the only surface tint */
    --col-ink: #231F20;
    --col-line: #e2e8ee;
}

/* ------------------------------------------------------------------ the tab */

/**
 * !important on every property Woodmart sets globally on <button>.
 *
 * This is not defensive habit, it is a documented property of this theme:
 * the Lucky Coupon plugin had to do exactly the same thing, and it is written
 * down in CLAUDE.md ("Woodmart theme button CSS needs !important overrides").
 * Woodmart styles buttons at a higher specificity than a single class, so
 * without this the tab loses `position: fixed`, falls back into the document
 * flow at the very end of <body>, and becomes effectively invisible — the
 * markup is present and correct, and nothing appears on screen.
 */
.col-launcher {
    position: fixed !important;
    left: 20px !important;
    /* 50px, not 20px, so the pill sits on the SAME LINE as the WhatsApp
       "Support" button in the opposite corner — that widget is fixed at
       `bottom: 50px; right: 20px`, and at 20px this one hung 30px below it,
       which read as a mistake rather than a pair. Mirrored inset too: 20px
       from its own edge, same as WhatsApp's 20px from the other.

       This tracks a value owned by the THEME, not by us — the widget is
       printed by woodmart-child's functions.php. If it moves, move this. */
    bottom: 50px !important;
    right: auto !important;
    top: auto !important;
    z-index: 9998 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--col-blue) !important;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .22) !important;
    color: #fff !important;
    cursor: pointer !important;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-indent: 0 !important;
    transition: background .18s ease, transform .18s ease !important;
}

.col-launcher:hover { background: var(--col-blue-dark) !important; transform: translateY(-1px) !important; }
.col-launcher:active { filter: brightness(1.1) !important; }
.col-launcher:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }

.col-launcher__icon { display: inline-flex !important; align-items: center !important; }
.col-launcher__label { color: #fff !important; white-space: nowrap !important; }

/* The dot means "there is something here worth your attention". WHICH thing
   is decided by the CRM (LoyaltyNudge) — the plugin only draws it. */
.col-launcher__dot {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #d5382a !important;
    border: 2px solid #fff !important;
}

/* The star turns once every 8 seconds.
 *
 * One rotation in the first 12% (~0.95s) and then a long rest, rather than a
 * continuous spin: a thing that moves without stopping is a thing people stop
 * seeing, and it reads as a loading spinner rather than an invitation. The
 * pause is the animation.
 *
 * Lower specificity than the wiggle rule below on purpose — a launcher that is
 * mid-wiggle should wiggle, and pick the rotation back up when the class comes
 * off 900ms later. */
@keyframes col-star-spin {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}

.col-launcher__icon {
    animation: col-star-spin 8s ease-in-out infinite !important;
    transform-origin: 50% 50% !important;
}

/* One wiggle, then rest. A thing that moves forever is a thing people learn
   not to see; the class is added by JS once per browsing session. */
@keyframes col-wiggle {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-9deg); }
    30% { transform: rotate(7deg); }
    45% { transform: rotate(-5deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(-1deg); }
}

.col-launcher.is-wiggling .col-launcher__icon { animation: col-wiggle .7s ease-in-out !important; }

@media (prefers-reduced-motion: reduce) {
    .col-launcher.is-wiggling .col-launcher__icon { animation: none !important; }
    /* Covers the 8-second rotation too: a repeating spin is exactly what this
       preference is asking us not to do. */
    .col-launcher__icon { animation: none !important; }
    .col-launcher { transition: none !important; }
    .col-scrim { transition: none !important; }
}

/* ------------------------------------------------------------------ the scrim
 *
 * `#col-scrim` was emitted by COL_Widget and un-hidden on open from the very
 * first version, and it had NO CSS AT ALL — an empty, unstyled, zero-height
 * div. So the drawer opened over an undimmed page with nothing to click, and
 * the only ways out were the × and the Escape key. That is what "clicking
 * outside does nothing" was.
 *
 * z-index sits between the launcher (9998) and the drawer (9999) so it covers
 * the page and the launcher, while the drawer stays above it. `display` is
 * forced on [hidden] because Woodmart sets `display` on bare divs and an
 * ignored `hidden` attribute would leave the whole page permanently dimmed. */
.col-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(35, 31, 32, .45) !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    transition: opacity .28s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.col-scrim.is-open { opacity: 1; }

.col-scrim[hidden] { display: none !important; }

@media (max-width: 600px) {
    .col-launcher { left: 14px !important; padding: 10px 15px !important; }
}

/* THE BOTTOM-LEFT CORNER IS SHARED. Three things stack there on a phone, and
   the launcher was landing on top of the first one:

     0–55px   Woodmart's sticky toolbar (`body.sticky-toolbar-on`) — fixed,
              bottom: 0, height 55px, no safe-area padding.
     72px     the Lucky Coupon 10% bar (`.clc-bar` / `.clc-progress`), which on
              mobile is FULL WIDTH (left: 10px; right: 10px) — so it covers the
              left corner too, not just the right.
     118px    where coccaro-lucky-coupon already lifts the WhatsApp widget and
              WPLoyalty's launcher while its promo is on screen.

   At `bottom: 14px` the pill sat entirely inside the toolbar's band, covering
   the menu, and was hidden under the 10% bar whenever that was showing. It is
   now placed in the same slots the other two floating widgets already use, so
   all three move together and none of them has to know about the others.

   BREAKPOINT IS 767px, NOT 600px, on purpose: the toolbar and the full-width
   10% bar switch to their desktop layout at `min-width: 768px`. Keying this off
   the 600px block above would leave 601–767px — every tablet in portrait —
   still overlapping. This block comes after that one so its `bottom` wins. */
@media (max-width: 767px) {
    /* WhatsApp sits at 50px on a phone, which put this pill inside Woodmart's
       sticky toolbar (fixed, bottom 0, height 55px) — hence 72px here. */
    .col-launcher { bottom: 72px !important; }

    /* Levelled with an override here rather than by editing the widget's own
       (untracked, external) source — 72px only gives it MORE clearance from
       the toolbar than its native 50px, never less, so this carries none of
       the risk that moving .col-launcher down to 50px would have.
       `body #whatsapp-floating-widget`, not a bare id selector: the widget's
       own `bottom: 50px !important` is injected inline, in the page BODY,
       which loads after this stylesheet (linked in <head>) — with matching
       specificity that source-order tie goes to the widget, not to us. One
       extra ancestor makes this (1,0,1) beats its bare (1,0,0), which wins
       outright regardless of load order. */
    body #whatsapp-floating-widget { bottom: 72px !important; }

    /* `clc-promo-on` is set by coccaro-lucky-coupon. If that plugin is off the
       class never appears and this rule simply never matches — no dependency.
       132, not 118: the bar's top edge is ~118, so the two were touching. This
       tracks the same value coccaro-lucky-coupon uses for the WhatsApp widget —
       if one moves, move both. */
    body.clc-promo-on .col-launcher { bottom: 132px !important; }
}

/* DESKTOP: stay level with the WhatsApp button while the 10% bar is showing.
 *
 * Nothing on the left needs this offset — above 768px the bar is a 400px pill
 * anchored bottom-RIGHT, nowhere near this corner — so the pill could sit at
 * 50px quite happily. It lifts anyway, purely so the pair stays on one line:
 * coccaro-lucky-coupon raises the WhatsApp widget to 90px while its promo is up,
 * and a pill that stayed at 50 would drop out of alignment exactly when the
 * corner is busiest.
 *
 * The 90 here is the same 90 in lucky-popup.css's min-width:768px block. */
@media (min-width: 768px) {
    body.clc-promo-on .col-launcher { bottom: 90px !important; }
}

/* Cart and checkout keep the SAME bottom-left corner as every other page
   (owner's call, 2026-08-16 — an earlier revision moved them bottom-right and
   it was reverted the same day). Nothing special is needed for them: the base
   rules above already place the launcher, and the mobile offsets already clear
   Woodmart's sticky toolbar and the 10% bar.

   The corner matters: bottom-right holds the WhatsApp widget and, over
   10,000 EGP, the Lucky Coupon bar, and three floating things in one corner is
   a known iOS Safari jump bug. */

.col-drawer {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 9999 !important;
    width: 82%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 16px 16px 0;
    box-shadow: 6px 0 26px rgba(0, 0, 0, .3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s ease;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.col-drawer.is-open { transform: translateX(0); }

/* Respect the customer's own setting. A slide-in is decoration; nobody should
   have to feel motion-sick to spend their points. */
@media (prefers-reduced-motion: reduce) {
    .col-drawer { transition: none; }
}

.col-drawer__head {
    position: relative;
    padding: 22px 20px 20px;
    background: linear-gradient(150deg, var(--col-blue), var(--col-blue-dark));
    color: #fff;
    border-radius: 0 16px 0 0;
    text-align: center;
}

.col-drawer__logo {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto 12px;
    /* The logo artwork is dark on transparent; on the blue header it needs to
       read as white rather than disappear. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.col-drawer__eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .75;
    font-weight: 700;
}

.col-drawer__balance {
    margin: 6px 0 0;
    /* One size for the points AND the "= EGP" line under them (2026-09-14):
       the money is the point, not a footnote. Clamped so "= EGP 2,417,080"
       still fits a 320px phone at the same size as the balance. */
    font-size: clamp(24px, 8.5vw, 34px);
    overflow-wrap: anywhere;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.col-drawer__balance span {
    font-size: 14px;
    font-weight: 600;
    opacity: .8;
    margin-left: 4px;
}

.col-drawer__egp { margin: 6px 0 0; font-size: 14px; opacity: .92; }
.col-drawer__balance--egp { margin-top: 4px; }
.col-drawer__rate { margin: 8px 0 0; font-size: 14px; font-weight: 600; opacity: .9; }
.col-drawer__egp b { font-weight: 800; }

.col-drawer__body { padding: 16px 18px 24px; flex: 1; }

/* ---------------------------------------------------------- quick actions */

.col-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.col-quick__btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: 1px solid var(--col-line) !important;
    border-radius: 10px !important;
    padding: 11px 6px !important;
    background: #fff !important;
    color: var(--col-blue-dark) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: border-color .15s ease, background .15s ease !important;
}

.col-quick__btn em {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    color: #78828d;
    margin-top: 3px;
}

.col-quick__btn:hover {
    border-color: var(--col-blue) !important;
    background: var(--col-neutral) !important;
}

/* "Use everything" is the generous option, so it reads as the primary one and
   spans the full width rather than sitting in the grid as just another tile. */
.col-quick__btn.is-max {
    grid-column: 1 / -1;
    background: var(--col-blue) !important;
    border-color: var(--col-blue) !important;
    color: #fff !important;
}

.col-quick__btn.is-max em { color: rgba(255, 255, 255, .8); }
.col-quick__btn.is-max:hover { background: var(--col-blue-dark) !important; border-color: var(--col-blue-dark) !important; }
.col-quick__btn.is-busy { opacity: .55 !important; pointer-events: none !important; }

/* ------------------------------------------------- choose your own amount */

/* Sits under the preset tiles as a quieter alternative, not a rival to them.
   Tinted rather than white so it reads as one block and does not compete with
   the cards above, which are the path most people should take.

   Every control carries !important for the same reason the rest of this file
   does: Woodmart styles bare inputs, and its rules load after ours. */

.col-custom {
    margin-top: 14px;
    padding: 12px;
    background: var(--col-neutral);
    border: 1px solid var(--col-line);
    border-radius: 12px;
}

.col-custom .col-mini-head { margin-top: 0; }

.col-custom__row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.col-custom__field { flex: 1 1 auto; min-width: 0; }

.col-custom__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #78828d;
    margin-bottom: 4px;
}

.col-custom__input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 42px !important;
    padding: 0 10px !important;
    border: 1px solid var(--col-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--col-blue-dark) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}

/* The spinner arrows are 12px of tap target inside a 42px field on a phone,
   and hitting one instead of the field changes the amount by a single point. */
.col-custom__input::-webkit-outer-spin-button,
.col-custom__input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.col-custom__input:focus {
    outline: none !important;
    border-color: var(--col-blue) !important;
}

.col-custom__arrow {
    flex: 0 0 auto;
    padding-bottom: 12px;
    color: #9aa4ae;
    font-size: 15px;
}

.col-custom__out {
    flex: 0 0 auto;
    text-align: right;
    min-width: 88px;
}

.col-custom__egp {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--col-blue);
    letter-spacing: -.3px;
    line-height: 42px;
}

.col-custom__slider {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 2px !important;
    padding: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.col-custom__slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: var(--col-blue-soft);
}

.col-custom__slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: var(--col-blue-soft);
}

/* 22px, not the 12px a default thumb gives: this is dragged with a thumb on a
   phone, and the recommended minimum tap target is 24px. */
.col-custom__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -9px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--col-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.col-custom__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--col-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.col-custom__slider:focus-visible {
    outline: 3px solid var(--col-blue-soft) !important;
    outline-offset: 4px !important;
}

.col-custom__hint {
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #78828d !important;
}

.col-custom__go {
    margin-top: 10px !important;
}

/* Narrow phones: the EGP figure drops under the field rather than squeezing
   both into a row that cannot hold them. */
@media (max-width: 359px) {
    .col-custom__row { flex-wrap: wrap; }
    .col-custom__arrow { display: none; }
    .col-custom__out { width: 100%; text-align: left; min-width: 0; }
    .col-custom__egp { line-height: 1.3; }
}

/* ------------------------------------------------------------- mini stats */

.col-stats {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 4px;
    background: var(--col-neutral);
    border-radius: 10px;
    text-align: center;
}

.col-stats > div { flex: 1; }

.col-stats b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--col-blue-dark);
    letter-spacing: -.3px;
}

.col-stats span {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #78828d;
    margin-top: 3px;
    font-weight: 700;
}

/* ---------------------------------------------------------- how it works */

.col-how {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed var(--col-line);
    border-radius: 10px;
}

.col-how p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #5f6874;
}

.col-how .col-mini-head { margin-top: 0; }
.col-how b { color: var(--col-blue-dark); }

/* ------------------------------------------------------------ the CTA block */

.col-cta {
    display: block;
    width: 100%;
    text-align: center;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 13px 10px !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.35;
    letter-spacing: .2px;
    cursor: pointer;
    text-transform: none !important;
}

.col-cta:hover { background: var(--col-blue-dark) !important; }

.col-cta--off {
    background: var(--col-neutral) !important;
    color: #78828d !important;
    cursor: default;
    font-weight: 700 !important;
}

.col-cta.is-busy { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------------- busy
   Since the drawer stopped reloading the page there is nothing else on screen
   to confirm a press landed, and redeeming is two round trips (mint, then
   redraw the cart). So: the button you pressed keeps full contrast and gains a
   spinner and a verb, and EVERY OTHER action in the drawer dims and stops
   responding. Dimming only what was clicked leaves the other amounts live, and
   that is how one intention becomes two coupons.

   !important throughout for the usual reason — Woodmart styles buttons at a
   higher specificity than a single class. */
.col-spin {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    margin-right: 8px !important;
    vertical-align: -2px !important;
    border: 2px solid currentColor !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: col-spin .6s linear infinite;
}

.col-busy-label { vertical-align: baseline; }

@keyframes col-spin { to { transform: rotate(360deg); } }

/* Not "animation: none" — a spinner that does not spin reads as a frozen page.
   Slowed right down instead, so it still signals activity without motion that
   provokes. */
@media (prefers-reduced-motion: reduce) {
    .col-spin { animation-duration: 2.4s !important; }
}

/* Everything else in the drawer stands down. */
.col-drawer.is-working .col-cta,
.col-drawer.is-working .col-quick__btn,
.col-drawer.is-working .col-cancel,
.col-drawer.is-working .col-ghost-btn,
.col-drawer.is-working .col-copy {
    pointer-events: none !important;
}

.col-drawer.is-working .col-cta:not(.is-busy),
.col-drawer.is-working .col-quick__btn:not(.is-busy),
.col-drawer.is-working .col-cancel:not(.is-busy),
.col-drawer.is-working .col-ghost-btn:not(.is-busy),
.col-drawer.is-working .col-copy:not(.is-busy) {
    opacity: .4 !important;
    transition: opacity .15s ease;
}

/* The pressed one is the opposite: it must stay the clearest thing on screen,
   which is why the inherited .is-busy dimming is undone here. */
.col-drawer.is-working .col-cta.is-busy,
.col-drawer.is-working .col-quick__btn.is-busy,
.col-drawer.is-working .col-cancel.is-busy {
    opacity: 1 !important;
    cursor: progress !important;
}

/* The quick amounts are a grid of tall multi-line buttons; while busy the
   label collapses to one centred line so the spinner is not stranded above
   two rows of small print that no longer apply. */
.col-quick__btn.is-busy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

.col-fine {
    margin: 8px 0 0;
    font-size: 14px;
    color: #8b939d;
    text-align: center;
    line-height: 1.5;
}

.col-msg { margin: 10px 0 0; font-size: 14px; text-align: center; line-height: 1.5; }
.col-msg.is-error { color: #a8452f; }
.col-msg.is-ok { color: #2f7a4a; }
/* In progress: deliberately neither green nor red — nothing has happened yet. */
.col-msg.is-working { color: #6b7580; }

.col-warn {
    margin: 12px 0 0;
    font-size: 14px;
    background: #fff6e8;
    border: 1px solid #f5dda8;
    color: #8a6420;
    padding: 8px 10px;
    border-radius: 7px;
    line-height: 1.5;
}

.col-applied {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--col-blue-dark);
    text-align: center;
}

.col-code {
    margin: 10px 0 0;
    text-align: center;
    font-size: 14px;
}

.col-code span {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 1px;
    background: #fff;
    border: 1px dashed var(--col-blue);
    color: var(--col-blue-dark);
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.col-countdown { display: block; margin-top: 6px; font-size: 12px; color: #8b939d; font-style: normal; }

.col-cancel {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #cfd6de !important;
    background: #fff !important;
    color: var(--col-blue) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px !important;
    border-radius: 9px !important;
    cursor: pointer;
}

.col-mini-head {
    margin: 18px 0 6px;
    font-size: 12px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #848d98;
    font-weight: 700;
}

.col-earn {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--col-ink);
    padding: 6px 0;
    border-bottom: 1px dashed #e8edf2;
}

.col-earn b { color: var(--col-blue-dark); white-space: nowrap; }

.col-ghost {
    display: block;
    margin-top: 16px;
    text-align: center;
    border: 1px solid #cfd6de;
    color: var(--col-blue) !important;
    font-weight: 700;
    font-size: 14px;
    padding: 11px;
    border-radius: 9px;
    text-decoration: none !important;
}

.col-ghost--inline { display: inline-block; margin-left: 8px; padding: 9px 16px; }

/* ------------------------------------------------------------- cart / checkout */



/* ------------------------------------------------------- My Account -> Points */

.col-page { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* A branded hero, so the page reads as part of the shop rather than as a
   data table bolted onto the account area. */
.col-page__hero {
    background: linear-gradient(150deg, var(--col-blue), var(--col-blue-dark));
    color: #fff;
    border-radius: 14px;
    padding: 26px 20px 24px;
    text-align: center;
    margin-bottom: 6px;
}

.col-page__logo {
    display: block;
    width: 116px;
    height: auto;
    margin: 0 auto 14px;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.col-page__hero-eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .72;
    font-weight: 700;
}

.col-page__hero-balance {
    margin: 8px 0 0;
    /* Shared with the "= EGP" line under it; clamped so a seven-figure pound
       amount fits a phone at the same size as the points. */
    font-size: clamp(28px, 10vw, 46px);
    overflow-wrap: anywhere;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.8px;
}

.col-page__hero-balance span {
    font-size: 14px;
    font-weight: 600;
    opacity: .8;
    margin-left: 5px;
    letter-spacing: 0;
}

.col-page__hero-sub { margin: 8px 0 0; font-size: 14px; opacity: .92; }
.col-page__hero-balance--egp { margin-top: 4px; }
.col-page__hero-rate { margin: 10px 0 0; font-size: 14px; font-weight: 600; opacity: .9; }
.col-page__hero-sub b { font-weight: 800; }

.col-page__head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--col-line);
    padding-bottom: 16px;
}

.col-page__eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #848d98;
    font-weight: 700;
}

.col-page__balance {
    margin: 4px 0 0;
    font-size: clamp(28px, 9vw, 42px);
    overflow-wrap: anywhere;
    font-weight: 800;
    color: var(--col-blue-dark);
    line-height: 1;
    letter-spacing: -1.5px;
}

.col-page__sub { margin: 6px 0 0; font-size: 14px; color: #6e7783; }
.col-page__balance--egp { margin-top: 4px; }

.col-page__stats { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #6e7783; }
.col-page__stats b { color: var(--col-blue-dark); margin-left: 4px; }

.col-card {
    border: 1px solid var(--col-line);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 18px;
    background: #fff;
}

.col-card--gold { background: var(--col-neutral); border-color: var(--col-line); }
.col-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--col-blue-dark); font-weight: 800; }
.col-card h3.col-spaced { margin-top: 20px; }
.col-k { margin: 0; font-size: 14px; color: #6e7783; line-height: 1.6; }
.col-empty { margin: 0; font-size: 14px; color: #8b939d; }

.col-cols { display: flex; flex-wrap: wrap; gap: 18px; }
.col-cols > .col-card { flex: 1 1 280px; }

.col-table { width: 100%; font-size: 14px; border-collapse: collapse; margin-top: 8px; }

.col-table th {
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #848d98;
    padding: 0 0 6px;
    font-weight: 700;
}

.col-table td { padding: 7px 0; border-top: 1px solid #eaeff4; color: var(--col-ink); }
.col-right { text-align: right; }
.col-plus { color: #2f7a4a; font-weight: 700; }
.col-minus { color: #a8452f; font-weight: 700; }

.col-link {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    background: #f2f5f8;
    border: 1px solid #dde4ec;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--col-ink);
    word-break: break-all;
    margin: 10px 0 0;
}

.col-copy {
    margin-top: 10px;
    border: 0 !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-transform: none !important;
}

/* --------------------------------------------------------------- small screens */

@media (max-width: 480px) {
    .col-page__head { flex-direction: column; align-items: flex-start; }
    .col-page__balance { font-size: clamp(26px, 8.5vw, 34px); }
}

/* RTL: the tab belongs on the leading edge whichever way the page runs, but
   the storefront is English-only today so this is a safety net rather than a
   supported mode. */
[dir="rtl"] .col-launcher { left: auto !important; right: 20px !important; }
[dir="rtl"] .col-drawer { left: auto; right: 0; border-radius: 16px 0 0 16px; transform: translateX(100%); }
[dir="rtl"] .col-drawer.is-open { transform: translateX(0); }

/* ------------------------------------------- nudge, progress and conflict */

/* The nudge headline: the same sentence the dot is about, so opening the box
   answers the question the dot asked. */
.col-nudge {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--col-neutral);
    border-left: 3px solid var(--col-blue);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--col-blue-dark);
}

/* Shown instead of the redeem control below the minimum. Phase 4 rendered
   nothing at all in this state; this turns the same fact into a reason to
   come back. */
.col-progress {
    margin: 0 0 14px;
    padding: 14px 12px;
    text-align: center;
    background: var(--col-neutral);
    border-radius: 6px;
    font-size: 14px;
    color: var(--col-blue-dark);
}

.col-quick__btn small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: .75 !important;
}

/* An amount the current cart cannot absorb yet is still offered — it just
   says what it needs. Dimmed, not disabled. */
.col-quick__btn.is-future { opacity: .82 !important; }

.col-conflict {
    margin: 0 0 14px;
    padding: 14px;
    background: var(--col-neutral);
    border-radius: 8px;
}

.col-conflict__head { margin: 0 0 6px; font-size: 14px; color: #78828d; }

.col-conflict__code {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--col-blue-dark);
}

.col-conflict__rule { margin: 0 0 8px; font-size: 14px; color: #78828d; }
.col-conflict__compare { margin: 0 0 14px; font-size: 14px; color: var(--col-ink); }

.col-ghost-btn {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 11px !important;
    border: 1px solid var(--col-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--col-blue-dark) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.col-ghost-btn:hover { border-color: var(--col-blue) !important; }
.col-ghost-btn:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }

/* The checkout entry point. Not a banner — an offer the customer can take.
   Opens the same drawer the launcher opens. */
.col-entry {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 12px 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background .18s ease !important;
}

.col-entry:hover { background: var(--col-blue-dark) !important; }
.col-entry:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }
.col-entry__icon { display: inline-flex !important; align-items: center !important; }
.col-entry__label { color: #fff !important; white-space: nowrap !important; }
.col-entry .col-launcher__dot { top: -2px !important; right: -2px !important; }

/* ------------------------------------------ the line under "Use your points"
   (2026-09-14). One or two short sentences from the CRM: the balance and its
   value, or what is already applied. Sits beside Apply Coupon on the cart, so
   it must wrap onto its own row rather than squeeze the coupon field. */
.col-entry-wrap { display: block !important; flex-basis: 100% !important; width: 100% !important; }
.col-entry-wrap .col-entry { margin-bottom: 6px !important; }
.col-entry__line {
    margin: 0 0 12px !important;
    font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    color: var(--col-ink) !important;
}
.col-entry__line b { display: block; font-weight: 700; color: var(--col-blue-dark); }
.col-entry__line span { display: block; color: #6e7783; }
.col-entry__line .col-entry__note { color: #2f7a4a; margin-top: 4px; }

.col-pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 14px; }
.col-pager a { color: var(--col-blue-dark); font-weight: 700; text-decoration: none; }
.col-pager span { color: #6e7783; }

.col-verify .col-cta { margin-top: 14px; width: auto; }

/* 2026-09-14 — applied / waiting discount actions in the drawer. */
.col-applied-actions { display: grid; gap: 8px; margin-top: 12px; }
.col-applied-actions .col-cta,
.col-applied-actions .col-ghost-btn { width: 100%; justify-content: center; }

/* On checkout the entry is moved under the coupon form (see placeCheckoutEntry). */

/* ------------------------------------------------ "Apply points" (2026-09-14, v1.8)
   Beside Apply Coupon on the cart and at checkout, and at the top of the side
   cart. The wrapper uses display:contents inside a coupon row so the button is a
   sibling of Apply Coupon and the sentence wraps onto its own line. */
.col-entry-wrap { display: block !important; width: 100% !important; margin: 10px 0 !important; }
.wd-coupon-form .col-entry-wrap,
.col-coupon-row .col-entry-wrap { display: contents !important; }

.col-entry-wrap .col-entry {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #B48A4E !important;
    color: #fff !important;
    font: 600 14px/1 inherit !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.col-entry-wrap .col-entry:hover { background: #98723C !important; }
.col-entry-wrap .col-entry .col-entry__label { color: #fff !important; }
.col-entry-wrap .col-entry--remove { background: #fff !important; color: var(--col-blue-dark) !important; border: 1px solid var(--col-line) !important; }
.col-entry-wrap .col-entry--remove .col-entry__label { color: var(--col-blue-dark) !important; }
.col-entry-wrap .col-entry--remove:hover { border-color: var(--col-blue) !important; background: #fff !important; }

.col-entry-wrap .col-entry__line {
    flex: 1 1 100% !important;
    order: 20;
    margin: 2px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--col-ink) !important;
}
.col-entry-wrap .col-entry__line b { display: inline !important; color: #2f7a4a !important; font-weight: 700 !important; }
.col-entry-wrap.is-applied .col-entry__line b { color: var(--col-blue-dark) !important; }
.col-entry-wrap .col-entry__more { margin-left: 8px; font-size: 13px; color: var(--col-blue-dark) !important; text-decoration: underline !important; white-space: nowrap; }
.col-entry-wrap .col-entry__msg { flex: 1 1 100% !important; order: 21; margin: 0 !important; font-size: 13px !important; }
.col-entry-wrap .col-entry__msg:empty { display: none !important; }

/* Checkout: loyalty.js puts the entry into the coupon form's button row. */
.checkout_coupon .col-coupon-row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; width: 100% !important; float: none !important; }
.checkout_coupon .col-coupon-row > button[name="apply_coupon"],
.checkout_coupon .col-coupon-row .col-entry { flex: 1 1 0 !important; width: auto !important; min-width: 140px !important; }

/* Side cart: a strip at the top of the panel. */
.col-entry-wrap--mini {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin: 0 0 6px !important;
    padding: 12px 15px !important;
    background: #F1F5F9 !important;
    border-bottom: 1px solid #E3E8EE !important;
}
.col-entry-wrap--mini .col-entry__line { order: 0; flex: 1 1 160px !important; margin: 0 !important; font-size: 14px !important; }
.col-entry-wrap--mini .col-entry { order: 1; min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; }

/* The WhatsApp "Support" button floats over the side cart's buttons and the
   points drawer. Hide it while either is open. */
body:has(.cart-widget-side.wd-opened) #whatsapp-floating-widget,
body:has(#col-drawer.is-open) #whatsapp-floating-widget { display: none !important; }

/* The side-cart strip was removed on 2026-09-14. WooCommerce keeps cart fragments
   in the browser's sessionStorage, so an old copy can reappear until the cart
   changes — this keeps it hidden meanwhile. */
.col-entry-wrap--mini { display: none !important; }