/**
 * 2010-2026 SwissGeek | Web Developer Freelance
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * 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 license@swissgeek.dev
 * so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop or PhenixSuite to newer
 * versions in the future. If you wish to customize PrestaShop or PhenixSuite for your
 * needs please refer to https://www.prestashop.com or https://www.phenixsuite.com for more information.
 *
 * @Module       SGK Custom Wallet
 * @Description  Store-credit wallet, gift cards and referrals for PrestaShop 1.7, 8 and 9.
 * @Version      2.1.0
 * @Copyright    Copyright (c) 2010-2026 - SwissGeek | Web Developer Freelance <https://swissgeek.dev/>
 * @Support      Support Requests <https://admin.swissgeek.dev/forms/ticket?styled=1&with_logo=1>
 * @Blog         Breaking News <https://news.swissgeek.dev/> <https://news.prestageek.ch/>
 * @Addons       Developments <https://prestageek.ch/> <https://add.swissgeek.dev/>
 *
 * @License      Academic Free License 3.0 (AFL-3.0) <https://opensource.org/licenses/AFL-3.0>
 */

/* ======================================================================
 * SGK Custom Wallet — Panda theme (SunnyToo / St-themes) skin.
 *
 * Loaded ONLY on a Panda(-based) theme, AFTER front.css, and scoped with the
 * `.sgkw--panda` modifier that the templates add on every root element. The
 * double class (e.g. `.sgkw-wallet.sgkw--panda`, specificity 0,2,0) wins over
 * the base sheet (0,1,0) AND over Panda's own rules (0,1,x) regardless of the
 * order in which the stylesheets end up in the page.
 *
 * Panda specifics (verified against Panda 2.9.2):
 *   - Bootstrap 4.0.0-alpha.6, no CSS custom properties of its own
 *   - palette: accent #e54d26, body #666, titles #444, muted #999,
 *     borders #d9d9d9 / #f2f2f2, surfaces #fff / #f6f6f6,
 *     success #4cbb6c, error #ff4c4c
 *   - typography is NOT fixed: the merchant picks it in the theme editor
 *     (stthemeeditor writes views/css/customer-s{id}.css). The wallet
 *     therefore INHERITS the font instead of forcing one.
 *   - global `ul { list-style:none; padding-left:0 }` reset to counter
 *   - global `button:focus { outline: 5px auto -webkit-focus-ring-color }`
 *   - Material Icons is NOT loaded (Panda ships Fontello, prefix `fto-`), so
 *     the module falls back to its self-contained inline SVG icon.
 *
 * Merchant override: define `--sgkw-panda-accent` once in the theme editor's
 * custom CSS to align the wallet with a customised Panda accent colour.
 * ==================================================================== */

/* ----------------------------------------------------------------------
 * 1. Design tokens. The base stylesheet drives its look from these custom
 *    properties, so re-pointing them at Panda values re-skins the balance
 *    hero, cards, borders, radii and history table in a single pass.
 * ------------------------------------------------------------------- */
.sgkw--panda {
    --sgkw-accent: var(--sgkw-panda-accent, #e54d26);
    --sgkw-accent-soft: #fbe9e4;
    --sgkw-text: #666;
    --sgkw-muted: #999;
    --sgkw-border: #d9d9d9;
    --sgkw-surface: #fff;
    --sgkw-surface-alt: #f6f6f6;
    --sgkw-radius: 0;
    --sgkw-credit: #4cbb6c;
    --sgkw-debit: #ff4c4c;

    /* Follow the merchant's typography choice instead of hard-coding one. */
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--sgkw-text);
}

/* Square every surface the base file rounds through a literal radius. */
.sgkw-wallet.sgkw--panda .sgkw-balance,
.sgkw-wallet.sgkw--panda .sgkw-card,
.sgkw-wallet.sgkw--panda .sgkw-history,
.sgkw-wallet.sgkw--panda .sgkw-table tr,
.sgkw-account-top.sgkw--panda .sgkw-account-top__link,
.sgkw-partial.sgkw--panda .sgkw-partial__inner {
    border-radius: 0;
}

/* Pills stay rounded on purpose (balance chips, status badges): they read as
   tags and match Panda's own rounded count/label badges. */

/* ----------------------------------------------------------------------
 * 2. Titles — Panda section-title idiom: UPPERCASE, weight 400, #444.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .sgkw-card__title {
    color: #444;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: #d9d9d9;
}

.sgkw-wallet.sgkw--panda .sgkw-balance__label {
    color: #999;
}

.sgkw-wallet.sgkw--panda .sgkw-balance__amount {
    color: #444;
}

/* Accent bar on top of the balance hero. */
.sgkw-wallet.sgkw--panda .sgkw-balance::before {
    background: var(--sgkw-accent);
}

/* ----------------------------------------------------------------------
 * 3. Lists and notices. Panda applies a global `ul { list-style:none }`
 *    reset; restore bullets inside the module's own error lists only.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .alert ul {
    list-style: disc outside;
    padding-left: 1.25rem;
    margin: 0;
}

.sgkw-wallet.sgkw--panda .alert ul li {
    list-style: inherit;
}

.sgkw-wallet.sgkw--panda .alert {
    border-radius: 0;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
}

.sgkw-wallet.sgkw--panda .alert-success {
    color: #2f6b3f;
    background: #eaf6ee;
    border-color: #cfe9d6;
}

.sgkw-wallet.sgkw--panda .alert-danger {
    color: #a12820;
    background: #fdeceb;
    border-color: #f6cfcc;
}

/* ----------------------------------------------------------------------
 * 4. Form controls — Panda inputs: square, #d9d9d9 border, 34px tall,
 *    focus border #666.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .form-control,
.sgkw-partial.sgkw--panda .form-control {
    height: 34px;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    background: #fff;
    color: #666;
    box-shadow: none;
    font-family: inherit;
    font-size: 0.875rem;
}

.sgkw-wallet.sgkw--panda .form-control:focus,
.sgkw-partial.sgkw--panda .form-control:focus {
    border-color: #666;
    box-shadow: none;
    outline: 0;
}

/* Currency addon recreated by the base file — align it to Panda inputs. */
.sgkw-wallet.sgkw--panda .input-group-addon,
.sgkw-partial.sgkw--panda .input-group-addon {
    height: 34px;
    border: 1px solid #d9d9d9;
    border-left: 0;
    border-radius: 0;
    background: #f6f6f6;
    color: #999;
}

.sgkw-wallet.sgkw--panda .input-group > .form-control,
.sgkw-partial.sgkw--panda .input-group > .form-control {
    border-radius: 0;
}

/* ----------------------------------------------------------------------
 * 5. Buttons — Panda idiom: square, padding 9px 16px.
 *    .btn-primary → accent, hover to #000 (Panda signature).
 *    .btn-default → transparent + 2px #444 border, hover fills #444/white.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .btn,
.sgkw-partial.sgkw--panda .btn {
    border-radius: 0;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sgkw-wallet.sgkw--panda .btn-primary,
.sgkw-partial.sgkw--panda .btn-primary {
    color: #fff;
    background-color: var(--sgkw-accent);
    border: 1px solid var(--sgkw-accent);
}

.sgkw-wallet.sgkw--panda .btn-primary:hover,
.sgkw-wallet.sgkw--panda .btn-primary:focus,
.sgkw-partial.sgkw--panda .btn-primary:hover,
.sgkw-partial.sgkw--panda .btn-primary:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.sgkw-wallet.sgkw--panda .btn-default,
.sgkw-partial.sgkw--panda .btn-default {
    color: #444;
    background-color: transparent;
    border: 2px solid #444;
    padding: 8px 15px; /* keeps the total box height aligned with the 2px border */
}

.sgkw-wallet.sgkw--panda .btn-default:hover,
.sgkw-wallet.sgkw--panda .btn-default:focus,
.sgkw-partial.sgkw--panda .btn-default:hover,
.sgkw-partial.sgkw--panda .btn-default:focus {
    color: #fff;
    background-color: #444;
    border-color: #444;
}

/* ----------------------------------------------------------------------
 * 6. Focus-ring leak.
 *    Panda ships `button:focus { outline: 5px auto -webkit-focus-ring-color }`
 *    (specificity 0,1,1), which out-specifies the base `.btn { outline:none }`.
 *    Neutralise the mouse-click ring, then give keyboard users an accent ring.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .btn:focus,
.sgkw-partial.sgkw--panda .btn:focus,
.sgkw-wallet.sgkw--panda button:focus,
.sgkw-partial.sgkw--panda button:focus {
    outline: 0;
}

.sgkw-wallet.sgkw--panda .btn:focus-visible,
.sgkw-partial.sgkw--panda .btn:focus-visible,
.sgkw-wallet.sgkw--panda button:focus-visible,
.sgkw-partial.sgkw--panda button:focus-visible {
    outline: 2px solid var(--sgkw-accent);
    outline-offset: -2px;
}

/* ----------------------------------------------------------------------
 * 7. Referral block.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .sgkw-referral__intro {
    color: #999;
}

.sgkw-wallet.sgkw--panda .sgkw-referral__stats {
    color: var(--sgkw-accent);
}

/* ----------------------------------------------------------------------
 * 8. History table — Panda-flat header, hairline rows.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .sgkw-table thead th {
    color: #999;
    border-bottom: 2px solid #d9d9d9;
}

.sgkw-wallet.sgkw--panda .sgkw-table td {
    border-color: #f2f2f2;
}

.sgkw-wallet.sgkw--panda .sgkw-amount--credit {
    color: #4cbb6c;
}

.sgkw-wallet.sgkw--panda .sgkw-amount--debit {
    color: #ff4c4c;
}

/* ----------------------------------------------------------------------
 * 9. Customer-account entry points (rendered outside .sgkw-wallet, each with
 *    its own `.sgkw--panda` modifier).
 *
 *    NOTE: the "My account" page entry (account_link.tpl) is deliberately
 *    absent from this layer. It reuses Panda's own account-link markup
 *    (`a.list-group-item > span.link-item`) and is skinned by the theme itself,
 *    which is precisely what keeps it aligned with the neighbouring links.
 *    Adding a rule here would break that alignment again.
 * ------------------------------------------------------------------- */

/* Full-width banner (displayCustomerAccountTop). Border and background are
 * intentionally left to the base stylesheet; only the interactive states and
 * the round icon holder are re-tuned to Panda's palette. */
.sgkw-account-top.sgkw--panda .sgkw-account-top__link:hover,
.sgkw-account-top.sgkw--panda .sgkw-account-top__link:focus {
    border-color: var(--sgkw-accent);
    box-shadow: none;
    color: #444;
}

.sgkw-account-top.sgkw--panda .sgkw-account-top__icon {
    border-radius: 50%; /* the round icon holder stays round on purpose */
    background: #fff;
    border: 1px solid #d9d9d9;
    color: var(--sgkw-accent);
}

.sgkw-account-top.sgkw--panda .sgkw-account-top__label {
    color: #444;
}

/* Header block (displayNav2 / displayMobileBar) and "Your account" links block. */
.sgkw-nav-wallet.sgkw--panda a,
.sgkw-myaccount-block.sgkw--panda a {
    color: #666;
}

.sgkw-nav-wallet.sgkw--panda a:hover,
.sgkw-myaccount-block.sgkw--panda a:hover {
    color: var(--sgkw-accent);
}

.sgkw-nav-wallet.sgkw--panda .sgkw-nav-wallet__balance,
.sgkw-myaccount-block.sgkw--panda .sgkw-myaccount-block__balance {
    color: var(--sgkw-accent);
}

/* ----------------------------------------------------------------------
 * 10. Header integration.
 *
 *     Desktop: the block sits in `#top_bar` (displayNav2), a thin bar with
 *     #444 text on a hairline border — keep the type small and quiet.
 *
 *     Mobile/tablet: Panda hides `#top_bar` below 992px and shows
 *     `#mobile_bar` instead, so the same block is rendered again through the
 *     displayMobileBar hook, inside `#mobile_bar_right`, next to the cart and
 *     account icons. It must behave like the neighbouring icon buttons:
 *     compact, centred, with a comfortable touch target.
 * ------------------------------------------------------------------- */
#top_bar .sgkw-nav-wallet.sgkw--panda {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#top_bar .sgkw-nav-wallet.sgkw--panda a {
    padding: 0 10px;
    font-size: 0.8125rem;
    color: #444;
}

#top_bar .sgkw-nav-wallet.sgkw--panda a:hover {
    color: var(--sgkw-accent);
}

#mobile_bar .sgkw-nav-wallet.sgkw--panda {
    display: inline-flex;
    align-items: center;
}

#mobile_bar .sgkw-nav-wallet.sgkw--panda a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 0.8125rem;
    color: #444;
}

#mobile_bar .sgkw-nav-wallet.sgkw--panda .sgkw-icon {
    width: 1.35em;
    height: 1.35em;
}

/* Below 480px Panda's mobile bar gets crowded — keep the icon, drop the
   amount, which stays one tap away on the wallet page. */
@media only screen and (max-width: 480px) {
    #mobile_bar .sgkw-nav-wallet.sgkw--panda .sgkw-nav-wallet__balance {
        display: none;
    }
}

/* ----------------------------------------------------------------------
 * 11. Checkout partial-payment widget. The base file draws a rounded card
 *     with a fallback accent — re-skin to Panda: neutral hairline, square,
 *     #f6f6f6 fill, accent top rule.
 * ------------------------------------------------------------------- */
.sgkw-partial.sgkw--panda .sgkw-partial__inner {
    border: 1px solid #d9d9d9;
    border-top: 2px solid var(--sgkw-accent);
    background: #f6f6f6;
    border-radius: 0;
}

.sgkw-partial.sgkw--panda .sgkw-partial__head {
    color: #444;
}

.sgkw-partial.sgkw--panda .sgkw-partial__head .sgkw-icon,
.sgkw-partial.sgkw--panda .sgkw-partial__balance {
    color: var(--sgkw-accent);
}

.sgkw-partial.sgkw--panda .sgkw-partial__msg--ok {
    color: #4cbb6c;
}

.sgkw-partial.sgkw--panda .sgkw-partial__msg--ko {
    color: #ff4c4c;
}

/* Payment step: balance reminder and order confirmation notice. */
.sgkw-payment-info.sgkw--panda,
.sgkw-payment-return.sgkw--panda {
    color: #666;
}

.sgkw-payment-info.sgkw--panda .sgkw-payment-info__balance {
    color: var(--sgkw-accent);
}

/* ----------------------------------------------------------------------
 * 12. Status pills — readable against Panda surfaces.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .sgkw-status--0 {
    background: #fdf3d8;
    color: #8a6d1a;
}

.sgkw-wallet.sgkw--panda .sgkw-status--1 {
    background: #eaf6ee;
    color: #2f6b3f;
}

.sgkw-wallet.sgkw--panda .sgkw-status--2 {
    background: #f2f2f2;
    color: #878787;
}

/* ----------------------------------------------------------------------
 * 13. Gift card panel — same square, flat idiom as the rest of the layer.
 *     Panda defines no :root variables, so the accent falls back to the
 *     theme default (#e54d26) unless the merchant overrides
 *     --sgkw-panda-accent.
 * ------------------------------------------------------------------- */
.sgkw-wallet.sgkw--panda .sgkw-gc {
    border-radius: 0;
    border-color: #d9d9d9;
}

.sgkw-wallet.sgkw--panda .sgkw-gc::before {
    background: var(--sgkw-accent);
}

.sgkw-wallet.sgkw--panda .sgkw-gc--redeemed::before,
.sgkw-wallet.sgkw--panda .sgkw-gc--expired::before,
.sgkw-wallet.sgkw--panda .sgkw-gc--disabled::before {
    background: #d9d9d9;
}

.sgkw-wallet.sgkw--panda .sgkw-gc__amount,
.sgkw-wallet.sgkw--panda .sgkw-gc__code {
    color: #444;
}

.sgkw-wallet.sgkw--panda .sgkw-gc__meta,
.sgkw-wallet.sgkw--panda .sgkw-gc__send-title {
    color: #666;
}

.sgkw-wallet.sgkw--panda .sgkw-gc__send {
    border-top-color: #d9d9d9;
}

/* Panda's buttons are square; keep the inline actions consistent. */
.sgkw-wallet.sgkw--panda .sgkw-gc__btn {
    border-radius: 0;
}