/**
 * Copyright since 2026 GuruCoders
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to obtain it
 * through the world-wide-web, please send an email to office@gurucoders.ro
 * and a copy will be sent immediately.
 *
 * @author    GuruCoders <office@gurucoders.ro>
 * @copyright Since 2026 GuruCoders
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */
/* modules/gcpromo/views/css/bar.css
 *
 * Namespaced, and it SETS every property it depends on rather than inheriting.
 * That is not politeness: anvelino's live theme inlines 151,781 characters of
 * CSS into its header template, so anything we add competes with 150 KB of
 * rules of unknown specificity.
 *
 * The bar reserves its own height from the first paint. A theme that inlines
 * its critical CSS renders above-the-fold in one pass, and anything injected
 * afterwards shifts the page under the visitor's cursor.
 */
.gcpromo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    /* SYMMETRIC, and that is the whole point of writing it out.
     *
     * The right side used to be 44px and the left 16px, to keep long text from
     * running under the close button. But the close button is
     * position:absolute - it takes no space in the flow - so the only thing
     * the asymmetry did was move the centre: measured on 1.6 at a 1692px
     * viewport on 2026-10-21, the content sat 14px left of the bar's middle,
     * which is visible on a wide screen and is what George reported.
     *
     * 44px on both sides costs a little room on a narrow screen, where the
     * content wraps anyway, and buys a bar whose content is centred at every
     * width. */
    padding: 10px 44px;
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    z-index: 9000;
}
.gcpromo-bar-inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.gcpromo-bar-title { font-weight: 700; }
/* A SEPARATOR between the headline and the sentence after it.
 *
 * "Black Friday is live  Up to 30% off - ends soon" is two statements with a
 * gap between them, and at a glance it reads as one run-on sentence. A dot
 * only where both actually exist: the title is optional, and a bar that opened
 * with a floating bullet would be worse than the run-on. */
.gcpromo-bar-title + .gcpromo-bar-html::before {
    content: "\00B7";
    margin-right: 14px;
    opacity: 0.45;
    font-weight: 700;
}
/* Same reasoning as the popup's colour rule below: the bar sets its text
 * colour inline, and anything inside the message must inherit from the bar
 * rather than from the theme's `p` or `a`. */
.gcpromo-bar .gcpromo-bar-title,
.gcpromo-bar .gcpromo-bar-html,
.gcpromo-bar .gcpromo-bar-html * { color: inherit; }

/* And the MARGINS the theme puts on whatever the message is made of.
 *
 * `align-items: center` centres the boxes the bar is given, and it did: the
 * span around the message measured dead centre. The paragraph INSIDE it
 * carried the theme's `margin: 0 0 9px`, so the text a reader actually looks
 * at was drawn 5px above the title and the button - measured on 1.6 on
 * 2026-10-21, and the thing George meant by the bar being misaligned.
 *
 * First child's top and last child's bottom only, rather than every margin: a
 * message with two paragraphs in it still wants the space between them. A bar
 * is one line, so that is mostly theoretical - but zeroing everything would be
 * a decision about the shop's copy, and this is only about the edges the bar
 * owns. */
.gcpromo-bar .gcpromo-bar-html > :first-child { margin-top: 0; }
.gcpromo-bar .gcpromo-bar-html > :last-child { margin-bottom: 0; }
/* A PILL, like every other button this module draws, and big enough to be the
 * thing the bar is for. 6px of padding in a 44px bar is a link with a
 * background behind it. */
.gcpromo-bar-cta {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    transition: filter 140ms ease;
}
.gcpromo-bar-cta:hover { filter: brightness(1.08); }
.gcpromo-bar-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.75;
}
.gcpromo-bar-close:hover { opacity: 1; }
.gcpromo-bar[hidden] { display: none; }

.gcpromo-popup[hidden] { display: none; }
.gcpromo-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; }
.gcpromo-popup-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.55); }
.gcpromo-popup-panel {
    position: relative;
    box-sizing: border-box;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 32px 30px 26px;
    border-radius: 14px;
    text-align: center;
    /* Deeper and softer: the old shadow was a 40px blur at 30%, which on a
     * dark backdrop is barely a shadow at all and left the panel looking
     * pasted on rather than lifted. */
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}
/* A TARGET, not a glyph in a corner. 24px of type with 6px of padding beside
 * it is a 36x24 hit area tucked against the edge; this is a round 32px button
 * with room around it, which is what a finger gets. */
.gcpromo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 999px;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 140ms ease, background-color 140ms ease;
}
.gcpromo-popup-close:hover {
    opacity: 1;
    /* Translucent white reads on whatever background the shop chose. */
    background: rgba(255, 255, 255, 0.12);
}
/* The panel carries a base size and the title an absolute one.
 *
 * `1.3rem` here was a fraction of the THEME's root font size. PrestaShop 1.6's
 * default theme sets `html { font-size: 10px }`, so the title came out at
 * 13px - exactly the size of the message under it, with no heading left -
 * while 1.7, 8 and 9 rendered it at 20.8px. George saw it and asked for a
 * bigger title on 1.6; the title was not small, it was theme-dependent.
 *
 * font-weight is set for the same reason: 1.6's theme gives every h1-h6
 * `font-weight: 500`, so the heading was not bold either. */
.gcpromo-popup-panel { font-size: 15px; line-height: 1.5; }
.gcpromo-popup-title { margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.gcpromo-popup-html { margin: 0 0 20px; font-size: 15px; }

/* A BUTTON, not a slab. `display: block` made it 420px of a 480px panel and
 * 50px tall - measured on 1.6 - which is a red bar with a word on it rather
 * than something to press. inline-block sizes it to its own words and the
 * panel's text-align centres it. */
.gcpromo-popup-cta {
    display: inline-block;
    max-width: 100%;
    padding: 12px 30px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: filter 140ms ease;
}
.gcpromo-popup-cta:hover { filter: brightness(1.08); }

/* Everything below is about ONE thing: a theme reaching into this popup.
 *
 * Measured in a real browser on all four generations, 2026-10-21, with the
 * panel background at rgb(17,17,17):
 *
 *   1.6   label color rgb(51,51,51)  - unreadable. And the theme's JS (jQuery
 *         Uniform) had REWRITTEN our markup: our input came back wrapped in
 *         <div class="checker"><span>...</span></div>, the real input forced
 *         to opacity 0, the wrapper rendering as a block - which is why the
 *         box sat alone at the far left with the text centred under it.
 *   1.7   label color rgb(35,35,35), text-align RIGHT, and the <p> inside the
 *         message at rgb(122,122,122) - grey on near-black.
 *   8     identical to 1.7.
 *   9     correct, by luck of its theme. Nothing here was protecting it.
 *
 * The file's opening promise - "it SETS every property it depends on rather
 * than inheriting" - was kept for the bar and quietly broken for the popup:
 * the dismiss rule set four properties and inherited `color` from whatever the
 * theme said about <label>. A theme is not a neutral background; on a shop it
 * is 150 KB of opinions about every element name we use.
 */

/* color: inherit, everywhere a theme can reach. The panel carries the
 * shopkeeper's chosen text colour as an inline style, so inheriting from IT is
 * right - inheriting from the document is what produced grey on black. Two
 * classes beat `label`, `p` and `.page-content p`, which is what themes use. */
.gcpromo-popup-panel .gcpromo-popup-title,
.gcpromo-popup-panel .gcpromo-popup-html,
.gcpromo-popup-panel .gcpromo-popup-html *,
.gcpromo-popup-panel .gcpromo-popup-dismiss { color: inherit; }

/* The same edges in the popup. Its message is block-level, so a stray trailing
 * margin shows as an uneven gap above the button rather than as text off its
 * line - less obvious, same cause. */
.gcpromo-popup-panel .gcpromo-popup-html > :first-child { margin-top: 0; }
.gcpromo-popup-panel .gcpromo-popup-html > :last-child { margin-bottom: 0; }

.gcpromo-popup-panel .gcpromo-popup-dismiss {
    /* flex, and NOT inline-flex.
     *
     * Two things have to be true at once: the control and its text are one
     * line (a flex row does that), and that line is its own (a block-level box
     * does that). inline-flex gives only the first - tried it, and on 1.6 the
     * label flowed up beside the call-to-action button, which is worse than
     * the problem being fixed.
     *
     * justify-content centres the pair, so the theme's `label { text-align:
     * right }` - which is what pushed the control to the edge on 1.7 and 8 -
     * has nothing left to act on: text-align does not place flex items.
     *
     * The cost is that the whole row is clickable, not just the words. Inside
     * a 480px panel, on a 20px row, that is the behaviour a person expects
     * from a checkbox row anyway. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.85;
    cursor: pointer;
}

/* The wrapper a theme's JavaScript injects around our checkbox.
 *
 * `display: contents` removes the wrapper's own box while leaving the input in
 * the flow - so Uniform's 15x15 sprite span stops being drawn and our own
 * layout applies to the input directly. Listed by the class names the two
 * widget libraries in this fleet actually use, plus any bare div a future one
 * drops in: a div inside this label is never ours. */
.gcpromo-popup-dismiss .checker,
.gcpromo-popup-dismiss .checker > span,
.gcpromo-popup-dismiss .radio,
.gcpromo-popup-dismiss > div { display: contents; }

.gcpromo-popup-dismiss .gcpromo-popup-dismiss-input {
    /* opacity and appearance are the two a checkbox-replacement library takes
     * away; without them the box is invisible and the label looks broken. */
    opacity: 1;
    appearance: auto;
    -webkit-appearance: checkbox;
    position: static;
    float: none;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-width: 15px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    /* the tick follows the popup's text colour instead of the OS blue */
    accent-color: currentColor;
}

/* --- the run-up clock, compact -------------------------------------------
 *
 * The same markup as the campaign page's countdown and deliberately not the
 * same size: a bar is a thin strip across every page of the shop, and the
 * page's 30px boxes would double its height on a phone.
 *
 * Scoped under .gcpromo-bar and .gcpromo-popup so it cannot reach the
 * campaign page's block, which is on the same page when the bar is shown
 * there. */
.gcpromo-bar .gcpromo-countdown,
.gcpromo-popup .gcpromo-countdown {
    display: inline-flex;
    /* ROW, stated rather than inherited. front.css lays the campaign page's
     * countdown out as a column - label above the boxes - and that file is
     * loaded on the campaign page, where the bar is shown too. Without this the
     * bar grew a second line there and only there. */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.gcpromo-bar .gcpromo-countdown-label,
.gcpromo-popup .gcpromo-countdown-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
    /* The bar sets its own colours from the shop's settings, so the label
     * follows the text it sits in rather than naming a colour of its own. */
    color: inherit;
}
.gcpromo-bar .gcpromo-countdown-value,
.gcpromo-popup .gcpromo-countdown-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.gcpromo-bar .gcpromo-countdown-cell,
.gcpromo-popup .gcpromo-countdown-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 6px;
    /* A translucent white over whatever background the shop chose, so one rule
     * reads correctly on a dark bar and on a light one. */
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
}
.gcpromo-bar .gcpromo-countdown-number,
.gcpromo-popup .gcpromo-countdown-number {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.gcpromo-bar .gcpromo-countdown-unit,
.gcpromo-popup .gcpromo-countdown-unit {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* THE COUNTDOWN GETS ITS OWN LINE, and the button the one below it.
 *
 * Both were inline, so on a panel wide enough they shared a row: the clock
 * squeezed left and the button jammed against it on the right.
 *
 * AT THE END OF THE FILE, and that is not tidiness. The shared block above
 * sets `margin: 0` on both the bar's countdown and the popup's, with the same
 * specificity as this - two classes - so written any earlier this rule lost
 * and the button started exactly where the clock ended: measured at a 0px gap
 * on 1.6, which is what George saw. */
.gcpromo-popup .gcpromo-countdown {
    display: flex;
    justify-content: center;
    margin: 0 0 22px;
}

/* --- WHEN THE BAR RUNS OUT OF ROOM ----------------------------------------
 *
 * Measured on 1.6 at a 375px viewport, 2026-10-26: the bar was 159px tall -
 * a quarter of the screen, pushing the shop down - and its content had only
 * 287px to live in, because 44px of padding on each side is reserved for a
 * close button that is position:absolute and takes no space in the flow.
 *
 * The padding stays SYMMETRIC, just smaller. Making it asymmetric is the
 * obvious saving and it moves the centre of a centred bar, which is the
 * defect George reported on 2026-10-21 and the reason the 44px is written out
 * at the top of this file.
 *
 * Everything else simply gets smaller: a promo bar is not the page, and on a
 * phone the page is nearly all of what there is. */
/* 820px, not a phone width: the breakpoint is about FITTING, not about what
 * kind of device is asking. Measured on 1.6 with the demo's own copy - at
 * 600px the bar is two lines and 74px tall, and at 768px, just above a
 * phone-sized breakpoint, it was back to desktop type, wrapped to three lines
 * and 92px. A bar that gets TALLER as the window gets wider is a breakpoint in
 * the wrong place. */
@media (max-width: 820px) {
    .gcpromo-bar {
        padding: 8px 36px;
        font-size: 14px;
    }
    .gcpromo-bar-inner { gap: 8px; }

    /* NO SEPARATOR. It is there to part two statements sharing a line, and
     * at this width they do not share one - the headline takes the first and
     * the sentence the second, so the dot lands alone at the start of the
     * second line and reads as a bullet somebody left in. Measured at 375px
     * on 1.6, and the thing that actually looked broken. */
    .gcpromo-bar-title + .gcpromo-bar-html::before { display: none; }

    .gcpromo-bar-cta {
        padding: 7px 16px;
        font-size: 14px;
    }
    /* PINNED TO THE TOP, not to the middle. A bar this tall centres its close
     * button over whatever line happens to be in the middle - here the clock -
     * where it reads as part of it. */
    .gcpromo-bar-close {
        top: 6px;
        right: 6px;
        transform: none;
        font-size: 20px;
    }

    .gcpromo-bar .gcpromo-countdown { gap: 4px; }
    .gcpromo-bar .gcpromo-countdown-label { font-size: 10px; letter-spacing: 0.06em; }
    .gcpromo-bar .gcpromo-countdown-value { gap: 3px; }
    .gcpromo-bar .gcpromo-countdown-cell { padding: 2px 5px; }
    .gcpromo-bar .gcpromo-countdown-number { font-size: 13px; }
    .gcpromo-bar .gcpromo-countdown-unit { font-size: 8px; }
}

/* Narrower still - the small phones that are still in the fleet's logs. The
 * seconds cell is the first thing to go: a bar that says "6 days 23 hours"
 * has said what it needs to, and the seconds are what force a fourth line. */
@media (max-width: 400px) {
    /* ENOUGH WIDTH BACK TO BE USEFUL, BUT NOT UNDER THE BUTTON.
     *
     * 30px did not clear it, and the arithmetic that chose 30 was wrong: the
     * button is 25px wide and sits at `right: 6px`, so it occupies the last
     * 31px of the bar and anything narrower than that runs underneath it.
     * Measured at 375px on 9 on 2026-10-26 - the message ended at x=344 and
     * the button began at x=344 - which is the photograph George sent, with
     * "- ends soon" touching the x.
     *
     * 38px is those 31 plus seven of air. The headline and the sentence then
     * take two lines instead of one, which is what the 820px block above
     * already assumes and what reads better anyway: two statements with no
     * separator between them look like one run-on sentence. */
    .gcpromo-bar { padding: 8px 38px; }

    /* And the seconds go. A bar that says "6 days 23 hours" has said what it
     * needs to, and the seconds cell is what forces another line. */
    .gcpromo-bar .gcpromo-countdown-cell:last-child { display: none; }
}