/**
* ISC License
*
* Copyright (c) 2026 idnovate.com
* idnovate is a Registered Trademark & Property of idnovate.com, innovación y desarrollo SCP
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
* REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
* AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
* LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
* OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
* PERFORMANCE OF THIS SOFTWARE.
*
* @author idnovate
* @copyright 2026 idnovate.com
* @license https://www.isc.org/licenses/ https://opensource.org/licenses/ISC ISC License
*/
/* Never underline links inside the module UI (incl. on hover/focus). */
.wb-settings a,
.wb-settings a:hover,
.wb-settings a:focus,
.wb-detail a,
.wb-detail a:hover,
.wb-detail a:focus,
.wb-front a,
.wb-front a:hover,
.wb-front a:focus,
.wb-orderdetail a,
.wb-orderdetail a:hover,
.wb-orderdetail a:focus,
#wb-order-widget a,
#wb-order-widget a:hover,
#wb-order-widget a:focus,
.wb-vtabs-nav a,
.wb-vtabs-nav a:hover,
.wb-vtabs-nav a:focus {
text-decoration: none;
}
/* ---- Shared status badges (front + back) ---- */
.wb-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
color: #fff;
white-space: nowrap;
vertical-align: middle;
}
.wb-badge-pending { background: #f0ad4e; }
.wb-badge-approved { background: #27ae60; }
.wb-badge-rejected { background: #c0392b; }
.wb-badge-expired { background: #909399; }
.wb-badge-completed { background: #3498db; }
.wb-badge-cancelled { background: #6b7280; }
/* ---- Product-page right-of-withdrawal reassurance block ---- */
.wb-product-reassurance {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 15px;
margin: 16px 0;
border: 1px solid #e3e8ef;
border-radius: 10px;
background: #f7f9fc;
}
.wb-pr-icon { flex: 0 0 auto; color: #1a339a; line-height: 0; margin-top: 1px; }
.wb-pr-icon svg { display: block; }
.wb-pr-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wb-pr-title { font-weight: 600; color: #1f2733; font-size: 14.5px; }
.wb-pr-text { color: #5a6675; font-size: 13.5px; line-height: 1.5; }
.wb-pr-link { color: #1a339a; text-decoration: underline; white-space: nowrap; }
.wb-pr-link:hover { color: #14267a; }
/* Order reference line under the request-detail title */
.wb-view-order { margin: 0 0 18px; font-size: 15px; color: #444; }
.wb-view-order a { color: #2d3e50; text-decoration: underline; }
/* ===================================================================
* Front office
* =================================================================== */
.wb-front .wb-page-title {
display: flex;
align-items: center;
gap: 10px;
}
.wb-front .wb-page-title .wb-ico { font-size: 26px; }
/* Front module pages: frame each in a clean white card on the theme's grey
background, for a consistent look. The detail page (#wb-view) additionally
separates header / timeline / actions with light dividers; the list (#wb-list)
drops the per-request card shadow so the items read as rows inside the panel. */
#wb-view.wb-front,
#wb-list.wb-front,
#wb-form.wb-front,
#wb-success.wb-front {
background: #fff;
border: 1px solid #e7ebf0;
border-radius: 14px;
padding: 24px 30px 26px;
box-shadow: 0 4px 18px rgba(23, 32, 53, 0.07);
margin: 4px 0 24px;
}
#wb-view .wb-page-title,
#wb-list .wb-page-title,
#wb-form .wb-page-title,
#wb-success .wb-page-title { margin: 0 0 6px; }
#wb-view .wb-flow {
margin: 0;
padding-top: 22px;
border-top: 1px solid #eef1f5;
}
#wb-view .wb-view-actions {
padding-top: 20px;
border-top: 1px solid #eef1f5;
}
#wb-list .wb-card { box-shadow: none; }
@media (max-width: 560px) {
#wb-view.wb-front,
#wb-list.wb-front,
#wb-form.wb-front,
#wb-success.wb-front { padding: 18px 16px 20px; }
}
/* Withdrawal-function page: orders the customer can still withdraw from (each with
a direct "Withdraw" button), so the right can be exercised straight from here. */
.wb-eligible-orders { margin: 0 0 22px; }
.wb-eo-intro { color: #5a6675; margin: 0 0 12px; }
.wb-eo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
margin-bottom: 10px;
border: 1px solid #e3e6ea;
border-radius: 10px;
background: #f7f9fc;
box-shadow: 0 1px 2px rgba(20, 30, 50, 0.05);
}
.wb-eo-info { display: flex; flex-direction: column; flex: 1 1 auto; gap: 2px; min-width: 0; }
.wb-eo-ref { font-weight: 600; color: #2d3e50; }
.wb-eo-meta { font-size: 13px; color: #8a9099; }
.wb-eo-btn { flex: 0 0 auto; }
/* ---- Order detail box ---- */
.wb-orderdetail {
margin: 22px 0;
padding: 18px 20px 20px;
border: 1px solid #e5e5e5; /* neutral — blends in with the other order sections */
border-radius: 0;
background: #fff;
}
.wb-orderdetail .wb-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 17px;
font-weight: 700;
}
.wb-orderdetail .wb-title .wb-ico { font-size: 20px; color: #2d3e50; }
.wb-orderdetail .wb-muted { color: #8a9099; margin: 0; }
.wb-orderdetail .wb-status-line { margin: 0 0 12px; }
.wb-orderdetail .wb-status-line .wb-badge { margin-left: 6px; }
.wb-orderdetail .wb-elig { margin: 0 0 12px; }
.wb-request-btn .wb-ico,
.wb-btn-ghost .wb-ico { font-size: 16px; vertical-align: text-bottom; }
/* ---- Request history cards ---- */
.wb-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 18px;
}
.wb-card {
border: 1px solid #e3e6ea;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.wb-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #f6f8fa;
border-bottom: 1px solid #e3e6ea;
}
.wb-card-ref { font-weight: 700; color: #2d3e50; }
.wb-card-body { padding: 12px 16px; }
.wb-card-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 5px 0;
border-bottom: 1px dashed #eef1f4;
font-size: 14px;
}
.wb-card-row:last-child { border-bottom: 0; }
.wb-card-label { color: #8a9099; }
.wb-card-value { font-weight: 600; text-align: right; }
.wb-empty {
text-align: center;
padding: 40px 20px;
color: #8a9099;
}
.wb-empty .wb-ico { font-size: 48px; opacity: 0.5; }
.wb-card-foot { padding: 10px 16px; border-top: 1px solid #eef1f4; text-align: right; }
/* ---- Customer request detail: status timeline ---- */
/* Horizontal status stepper — shared by the customer detail view and the
back-office order widget. The connector is drawn per step (dot-centre to the
next dot-centre); the last step draws none, so the line ends exactly under
the final dot and never overshoots. */
.wb-flow {
list-style: none;
margin: 22px 0;
padding: 0;
display: flex;
align-items: flex-start;
}
.wb-flow-step {
position: relative;
flex: 1 1 0;
min-width: 0;
padding: 0 8px;
text-align: center;
}
.wb-flow-step::after {
content: "";
position: absolute;
top: 6px; /* centre on the 14px dot (centre = 7px) */
left: 50%;
width: 100%; /* equal-width steps → reaches the next dot-centre */
height: 2px;
background: #e3e6ea;
z-index: 0;
}
.wb-flow-step:last-child::after { display: none; }
.wb-flow-done::after { background: #27ae60; } /* completed segment */
.wb-flow-dot {
position: relative;
z-index: 1;
display: block;
margin: 0 auto 8px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #c7ccd1;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #e3e6ea;
}
.wb-flow-done .wb-flow-dot { background: #27ae60; box-shadow: 0 0 0 2px #27ae60; }
.wb-flow-current .wb-flow-dot { background: #f0ad4e; box-shadow: 0 0 0 2px #f0ad4e; }
.wb-flow-rejected .wb-flow-dot { background: #c0392b; box-shadow: 0 0 0 2px #c0392b; }
.wb-flow-label { font-weight: 600; display: block; line-height: 1.25; }
.wb-flow-date { color: #8a9099; font-size: 12px; display: block; margin-top: 2px; }
.wb-flow-pending .wb-flow-label { color: #9aa0a6; font-weight: 500; }
.wb-flow-current .wb-flow-label { color: #b9770e; }
.wb-flow-rejected .wb-flow-label { color: #c0392b; }
/* Narrow columns: fall back to the original vertical layout. */
@media (max-width: 560px) {
.wb-flow { display: block; }
.wb-flow-step { text-align: left; padding: 0 0 16px 22px; }
.wb-flow-step::after { top: 18px; left: 6px; width: 2px; height: 100%; }
.wb-flow-dot { position: absolute; left: 0; top: 2px; margin: 0; }
}
.wb-view-details { margin-bottom: 18px; }
.wb-view-details > p { margin: 14px 0 0; }
.wb-view-items { list-style: none; padding-left: 0; margin: 0; }
.wb-view-items li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f0f2f4;
}
.wb-vi-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.wb-vi-top { display: flex; align-items: baseline; gap: 8px; }
.wb-view-items .wb-qty { color: #8a9099; flex: 0 0 auto; }
.wb-view-items .wb-vi-name { flex: 0 1 auto; }
.wb-vi-price { color: #6b7280; font-size: 13px; }
.wb-vi-img {
width: 44px;
height: 44px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e5e7eb;
flex: 0 0 auto;
background: #fff;
}
.wb-vi-noimg { display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #b6bcc4; }
.wb-vi-noimg .wb-ico { font-size: 22px; }
.wb-view-items .wb-vi-hidden { display: none; }
.wb-view-items.wb-show-all .wb-vi-hidden { display: flex; }
.wb-items-toggle {
background: none;
border: 0;
color: #2d3e50;
cursor: pointer;
padding: 8px 0;
font-weight: 600;
text-decoration: underline;
}
.wb-items-toggle:hover { color: #1a339a; }
.wb-return-box {
margin: 18px 0;
padding: 16px 18px;
background: #eef7ff;
border: 1px solid #cde4fb;
border-radius: 8px;
}
.wb-return-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid #d4e6f8;
font-size: 16px;
font-weight: 700;
color: #1c3d5a;
}
.wb-return-title .wb-ico { font-size: 20px; color: #2d7dd2; }
.wb-return-by { margin: 0 0 10px; color: #2b3a47; }
.wb-return-by strong { color: #1c3d5a; }
.wb-return-instructions { margin: 0; color: #36404a; line-height: 1.55; }
.wb-return-instructions p:first-child { margin-top: 0; }
.wb-return-instructions p:last-child { margin-bottom: 0; }
.wb-return-address { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #d4e6f8; color: #36404a; white-space: pre-line; }
/* Preserve author line breaks without injecting
(keeps templates escape-clean). */
.wb-preline { white-space: pre-line; }
/* "My account" page footer links (Back to your account / Home) */
.wb-account-footer {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #e6e9ed;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.wb-foot-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #6b7785;
font-size: 14px;
}
.wb-foot-link:hover { color: #2d3e50; }
.wb-foot-link .wb-ico { font-size: 18px; }
/* "Back to my requests" link under the detail actions */
.wb-back-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #6b7785;
font-size: 14px;
margin-top: 14px;
}
.wb-back-link:hover { color: #2d3e50; }
.wb-back-link .wb-ico { font-size: 18px; }
/* Breadcrumb back link (legacy, unused) */
.wb-breadcrumb {
display: inline-flex;
align-items: center;
gap: 6px;
color: #6b7785;
font-size: 14px;
margin-bottom: 14px;
}
.wb-breadcrumb:hover { color: #2d3e50; }
.wb-breadcrumb .wb-ico { font-size: 18px; }
.wb-view-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.wb-cancel-form { margin: 0; }
.wb-btn-cancel {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 8px;
background: #fff;
color: #c0392b;
font-weight: 600;
border: 1px solid #e0b4b0;
cursor: pointer;
transition: background .15s, color .15s;
}
.wb-btn-cancel:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.wb-btn-cancel .wb-ico { font-size: 18px; }
.wb-cancel-hint { margin: 8px 0 0; font-size: 13px; color: #7a7f87; }
.wb-btn-pdf {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 8px;
background: #2d3e50;
color: #fff;
font-weight: 600;
border: 0;
transition: background .15s;
}
.wb-btn-pdf:hover { background: #22303d; color: #fff; }
.wb-btn-pdf .wb-ico { font-size: 18px; }
/* Success-page CTA ("View my requests") — themed button, not a bare link */
.wb-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: 8px;
background: #1a339a;
color: #fff;
font-weight: 600;
text-decoration: none;
border: 0;
transition: background .15s;
}
.wb-btn-secondary:hover { background: #14267a; color: #fff; }
.wb-btn-secondary .wb-ico { font-size: 18px; }
/* ---- Withdrawal confirmation modal ---- */
.wb-modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(17, 24, 39, 0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 20px;
}
.wb-modal-overlay.is-open { display: flex; }
.wb-modal {
background: #fff;
border-radius: 14px;
max-width: 460px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
overflow: hidden;
animation: wb-modal-in .18s ease;
}
@keyframes wb-modal-in {
from { transform: translateY(12px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.wb-modal-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px;
background: #1a339a;
color: #fff;
}
.wb-modal-title { margin: 0; font-size: 18px; color: #fff; }
.wb-modal-ic { font-size: 22px; line-height: 1; }
.wb-modal-body { padding: 20px 24px; }
.wb-modal-text { margin: 0 0 14px; color: #374151; line-height: 1.55; }
.wb-modal-note {
display: flex;
gap: 8px;
align-items: flex-start;
background: #f3f6fc;
border-left: 3px solid #1a339a;
padding: 10px 12px;
border-radius: 6px;
font-size: 12.5px;
color: #4b5563;
line-height: 1.5;
}
.wb-modal-note-ic { font-weight: 700; color: #1a339a; }
.wb-modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 16px 24px 22px;
}
.wb-modal-btn {
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
border: 0;
}
.wb-modal-cancel { background: #eef0f3; color: #374151; }
.wb-modal-cancel:hover { background: #e2e6ea; }
.wb-modal-confirm { background: #1a339a; color: #fff; }
.wb-modal-confirm:hover { background: #14267a; }
/* ---- Settings: left vertical tabs ---- */
/* The BO theme pads `.light_display_layout form` with 1rem sides; override so the
tab layout controls its own spacing. The nav is a self-contained floating
card that stops at the last tab (align-items:flex-start, not stretch). */
.wb-settings .wb-tabs-panel { padding: 0 !important; }
.wb-tabs-panel > form { margin: 0 !important; padding: 0 !important; }
.wb-tabs-panel .wb-vtabs {
display: flex;
align-items: flex-start;
gap: 18px;
margin: 0;
padding: 18px;
}
.wb-vtabs-nav {
flex: 0 0 240px;
margin: 0;
padding: 0; /* no inset: the active tab's dark background fills flush to the frame */
list-style: none;
background: transparent;
border: 1px solid #e4e8ec; /* thin light frame, square (no rounding/shadow) */
border-radius: 0;
box-shadow: none;
}
.wb-vtab {
padding: 11px 14px;
cursor: pointer;
color: #363a41;
font-weight: 600;
border-radius: 0;
transition: background .12s, color .12s;
}
.wb-vtab + .wb-vtab { border-top: 1px solid #e4e8ec; } /* delineate each tab section */
.wb-vtab i { margin-right: 8px; opacity: .8; }
.wb-vtab:hover { background: #e9edf1; }
.wb-vtab.active { background: #25292e; color: #fff; }
.wb-vtab.active i { opacity: 1; }
.wb-vtabs-body { flex: 1 1 auto; min-width: 0; padding: 16px 18px; border: 1px solid #e4e8ec; }
.wb-vtab-pane { display: none; }
.wb-vtab-pane.active { display: block; }
.wb-tab-title { margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid #eceef1; font-size: 17px; font-weight: 600; }
.wb-tab-title i { margin-right: 8px; color: #6b7280; }
/* Force our footer band over the theme's .panel-footer defaults. PrestaShop 8's admin theme
styles .panel-footer with `margin: 15px -19px …` (a top gap + NEGATIVE side margins that make
the bar overflow the panel by ~19px each side), so without !important the Save band detached
from the form and stuck out past the panel edges on 8.2.7. margin:0 kills both; bg/border keep
the band identical across PS 1.7 / 8 / 9. */
.wb-tabs-panel .panel-footer { margin: 0 !important; padding: 12px 16px; border-top: 1px solid #eceef1 !important; background: #fbfbfb !important; }
/* Save/Create footer: flexbox pins the button flush-right INSIDE the footer band on every
admin theme. The old approach (button pull-right + overflow clearfix) depended on the
theme's float handling and left the button out of place on PrestaShop 8.2.7; flexbox is
theme-independent (flex items ignore float, so the button's pull-right stays as a harmless
fallback). Shared across our admin footers (settings, filters, new request); mail edit
uses .wb-mail-footer for its own multi-control layout. */
.wb-panel-footer { display: flex; justify-content: flex-end; align-items: center; overflow: hidden; }
/* The cross-page navigation for the module's sections is PrestaShop's own native
page-head tab bar. It appears automatically because the section container is nested
under "Orders" (menu depth 3); see installTabs()/fixContainerParent(). No custom
markup, CSS or JS — it inherits the theme's sticky tabs. */
/* …but the core template prints only the tab NAME (it has no icon slot), so the bar reads
as a bare word list. Re-add each page's icon with ::before on its stable `subtab-` id,
using the admin theme's own FontAwesome codepoints — the exact glyphs its icon-* classes
resolve to on PS 1.7/8/9 (read back from the theme, not guessed). The attribute selector
scopes this to the module's own tabs, so no other section's bar is affected. */
.page-head-tabs .nav > li > a[id^="subtab-AdminWithdrawal"]::before {
display: inline-block;
margin-right: 7px;
font-family: 'FontAwesome';
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1;
text-decoration: inherit;
opacity: .75;
}
.page-head-tabs #subtab-AdminWithdrawalSettings::before { content: '\f085'; } /* cogs */
.page-head-tabs #subtab-AdminWithdrawalRequests::before { content: '\f01c'; } /* inbox */
.page-head-tabs #subtab-AdminWithdrawalReasonsSla::before { content: '\f0ca'; } /* list-ul */
.page-head-tabs #subtab-AdminWithdrawalFilters::before { content: '\f0b0'; } /* filter */
.page-head-tabs #subtab-AdminWithdrawalMailTemplates::before { content: '\f0e0'; } /* envelope */
.page-head-tabs #subtab-AdminWithdrawalAnalytics::before { content: '\f080'; } /* bar-chart */
.page-head-tabs #subtab-AdminWithdrawalCron::before { content: '\f017'; } /* clock */
.page-head-tabs #subtab-AdminWithdrawalRegulation::before { content: '\f0e3'; } /* legal */
.page-head-tabs #subtab-AdminWithdrawalSetup::before { content: '\f0d0'; } /* magic */
/* The active tab's icon at full strength, matching its darker label. */
.page-head-tabs .nav > li > a.current[id^="subtab-AdminWithdrawal"]::before { opacity: 1; }
/* The request DETAIL page is a hidden controller, so PrestaShop draws the section tab
bar with no items — an empty ~2px line. Hide that empty artifact; our JS rebuilds the
bar from the section tabs (euwbHeadTabs) and adds .wb-tabs-ready to reveal it, so the
merchant keeps the module's top navigation while a request is open. If JS is
unavailable the bar stays hidden and the "Back to list" button still navigates. */
body.adminwithdrawalrequestdetail .page-head-tabs { display: none; }
body.adminwithdrawalrequestdetail .page-head-tabs.wb-tabs-ready { display: block; }
@media (max-width: 991px) {
.wb-tabs-panel .wb-vtabs { display: block; padding: 12px; }
.wb-vtabs-nav { position: static; flex-basis: auto; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.wb-vtab { flex: 1 1 auto; text-align: center; }
.wb-vtab + .wb-vtab { margin-top: 0; border-top: 0; }
.wb-vtabs-body { padding: 14px; }
}
/* ---- Back office: B2B exclusion settings ---- */
.wb-b2b-heading { margin: 6px 0 4px; font-size: 15px; }
.wb-b2b-intro { margin-bottom: 14px; }
/* ---- Back office: multiselects ---- */
.wb-multi { min-height: 110px; }
/* ---- Request form ---- */
.wb-front .wb-section-title {
margin: 24px 0 6px;
font-size: 16px;
font-weight: 700;
}
.wb-front .wb-hint { color: #8a9099; margin: 0 0 12px; font-size: 14px; }
/* Full-only notice (partial withdrawal blocked until the order ships, 1.1.0) */
.wb-front .wb-notice-full {
margin: 0 0 12px;
padding: 10px 14px;
background: #fff8ec;
border: 1px solid #f2dfbf;
border-radius: 10px;
color: #7a5a24;
font-size: 14px;
}
/* When only a full withdrawal is offered, the item list is shown read-only (all included). */
.wb-front .wb-items-locked { pointer-events: none; }
/* Return-method chooser. Card per option: radio, a fixed logo column, then name, delay
and price stacked. The price sits under the name rather than in a far-right column —
pushed to the edge of a full-width row it read as an unrelated figure. The list is
capped so a two-word option does not stretch across the whole page. */
.wb-front .wb-carriers { list-style: none; margin: 0 0 8px; padding: 0; max-width: 460px; }
.wb-front .wb-carrier { margin: 0 0 10px; }
.wb-front .wb-carrier-label {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 12px 16px;
border: 1px solid #e2e7ee;
border-radius: 10px;
cursor: pointer;
text-align: left;
font-weight: normal;
transition: border-color .12s, background .12s, box-shadow .12s;
}
.wb-front .wb-carrier-label:hover { border-color: #c7d2e0; background: #f8fafc; }
.wb-front .wb-carrier-radio { margin: 0; flex: 0 0 auto; }
/* Reserved even when the carrier has no logo, so every row starts at the same place. */
.wb-front .wb-carrier-logo-box {
flex: 0 0 52px;
width: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.wb-front .wb-carrier-logo { max-height: 30px; max-width: 52px; display: block; }
.wb-front .wb-carrier-main {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
.wb-front .wb-carrier-name { font-weight: 600; line-height: 1.3; }
.wb-front .wb-carrier-delay { color: #8a9099; font-size: 13px; line-height: 1.3; }
.wb-front .wb-carrier-rate { margin-top: 4px; font-weight: 600; }
/* Selected option: highlighted like the item cards above it. The class is applied by
euwithdrawalbutton.js (see syncCarriers) rather than with :has(), which is unsupported
on older browsers and did not reliably restyle the card when the radio changed. */
.wb-front .wb-carrier-label.is-selected {
border-color: #2f6fed;
box-shadow: 0 0 0 1px #2f6fed inset;
background: #f7faff;
}
/* Legal info box */
.wb-info-box {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 16px 0 22px;
padding: 14px 16px;
background: #f4f8fc;
border: 1px solid #dce8f4;
border-radius: 10px;
color: #45586b;
}
.wb-info-box .wb-ico { color: #3a7bd5; font-size: 22px; flex: 0 0 auto; }
.wb-info-box p { margin: 0; font-size: 14px; line-height: 1.5; }
/* Item cards */
.wb-items { list-style: none; margin: 0; padding: 0; }
.wb-items > .wb-item { margin: 0 0 12px; }
.wb-item-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid #e6e9ed;
border-radius: 12px;
background: #fff;
cursor: pointer;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
transition: border-color .15s, box-shadow .15s, background .15s;
}
.wb-item-card:hover { border-color: #c9d2da; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.07); }
.wb-item.is-selected .wb-item-card { border-color: #3a7bd5; background: #f6faff; }
/* Front only: the real checkbox is hidden and replaced by the styled .wb-item-checkbox.
Scoped to .wb-items so it does NOT hide the plain checkbox in the back-office
"new request" items table (.wb-new-items uses the same class without a visual swap). */
.wb-items .wb-item-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wb-item-checkbox {
flex: 0 0 auto;
width: 24px;
height: 24px;
border: 2px solid #cdd4da;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
background: #fff;
transition: all .15s;
}
.wb-item-checkbox .wb-ico { font-size: 18px; }
.wb-item.is-selected .wb-item-checkbox { background: #3a7bd5; border-color: #3a7bd5; color: #fff; }
.wb-item-thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e6e9ed;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.wb-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wb-item-thumb .wb-ico { color: #c7ccd1; }
.wb-item-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; text-align: left; }
.wb-item-name { font-weight: 600; color: #2d3e50; }
.wb-item-sub { color: #8a9099; font-size: 13px; }
/* Exempt / excluded item: shown for information, not selectable. */
.wb-item-exempt .wb-item-card { cursor: not-allowed; background: #fafbfc; }
.wb-item-exempt .wb-item-card:hover { border-color: #e6e9ed; box-shadow: none; }
.wb-item-exempt .wb-item-thumb,
.wb-item-exempt .wb-item-name,
.wb-item-exempt .wb-item-sub { opacity: .5; }
.wb-item-checkbox-off { border-color: #e0e4e8; background: #f4f5f7; color: #c0392b; }
.wb-item-checkbox-off .wb-ico { font-size: 16px; }
.wb-item-exempt-note { color: #c0392b; font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
/* Quantity stepper */
.wb-item-qty {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px 4px 54px;
color: #5d6d7e;
font-size: 14px;
}
.wb-stepper { display: inline-flex; align-items: center; border: 1px solid #d8dde2; border-radius: 8px; overflow: hidden; }
.wb-step {
width: 36px;
height: 34px;
border: 0;
background: #f4f6f8;
color: #2d3e50;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.wb-step:hover { background: #e7ebef; }
.wb-qty-input {
width: 48px;
height: 34px;
border: 0;
border-left: 1px solid #d8dde2;
border-right: 1px solid #d8dde2;
text-align: center;
font-weight: 600;
-moz-appearance: textfield;
background: #fff;
}
.wb-qty-input::-webkit-outer-spin-button,
.wb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wb-front .wb-reason,
.wb-front .wb-note { max-width: 520px; }
/* Always white (some themes grey out form controls until focus). */
.wb-request-form .form-control,
.wb-front .wb-reason,
.wb-front .wb-note,
.wb-front .wb-reason:focus,
.wb-front .wb-note:focus { background-color: #fff !important; }
.wb-legal {
margin: 18px 0;
padding: 14px 16px;
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 10px;
}
.wb-legal label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; }
.wb-submit { margin-top: 6px; }
/* ---- Replacement (exchange) picker ---- */
.wb-replacement {
margin: 6px 0 4px;
padding: 16px;
background: #f3f8ff;
border: 1px solid #cfe0f5;
border-radius: 10px;
}
.wb-repl-search { position: relative; max-width: 520px; }
.wb-repl-results {
position: absolute;
left: 0; right: 0; top: 100%;
z-index: 20;
margin-top: 2px;
max-height: 320px;
overflow-y: auto;
background: #fff;
border: 1px solid #cfd6de;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
}
.wb-repl-result {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
cursor: pointer;
border-bottom: 1px solid #f0f2f5;
}
.wb-repl-result:last-child { border-bottom: 0; }
.wb-repl-result:hover { background: #f6faff; }
.wb-repl-result img, .wb-repl-thumb img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.wb-repl-noimg { width: 42px; height: 42px; border-radius: 6px; background: #eef1f5; display: inline-block; }
.wb-repl-rname { flex: 1 1 auto; min-width: 0; }
.wb-repl-rname small { color: #8a93a0; }
.wb-repl-rprice { font-weight: 600; white-space: nowrap; }
.wb-repl-noresult { padding: 10px 12px; color: #8a93a0; }
.wb-repl-selected { margin-top: 12px; }
.wb-repl-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #fff;
border: 1px solid #cfd6de;
border-radius: 8px;
}
.wb-repl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wb-repl-name { font-weight: 600; }
.wb-repl-base-price { color: #5a6573; font-size: 0.92em; }
.wb-repl-clear {
border: 0; background: transparent; font-size: 22px; line-height: 1;
color: #98a2b3; cursor: pointer; padding: 0 4px;
}
.wb-repl-clear:hover { color: #e04141; }
.wb-repl-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.wb-repl-fields label { display: block; font-size: 0.9em; font-weight: 600; margin-bottom: 4px; }
.wb-repl-combo { flex: 1 1 260px; min-width: 0; }
.wb-repl-qty { flex: 0 0 110px; }
.wb-repl-qty-input { width: 100%; }
.wb-repl-diff {
margin-top: 14px;
padding: 10px 12px;
border-radius: 8px;
background: #fff;
border: 1px solid #e3e8ee;
}
.wb-repl-diff .wb-diff-line { display: block; color: #5a6573; font-size: 0.88em; }
.wb-repl-diff .wb-diff-main { display: block; font-weight: 700; margin-top: 2px; }
.wb-repl-diff.wb-diff-pay { background: #fff6f2; border-color: #ffd2c2; }
.wb-repl-diff.wb-diff-pay .wb-diff-main { color: #c0492b; }
.wb-repl-diff.wb-diff-refund { background: #f1faf3; border-color: #c4e9cf; }
.wb-repl-diff.wb-diff-refund .wb-diff-main { color: #1f8a4c; }
.wb-repl-diff.wb-diff-zero .wb-diff-main { color: #5a6573; }
/* Admin request-detail: separate the "Add note" button from the textarea */
.wb-detail .wb-note-submit { margin-top: 10px; }
/* Admin request-detail: Return & refund — numbered two-step flow */
.wb-refund-panel .wb-rf-step { display: flex; gap: 14px; position: relative; padding: 2px 0; }
.wb-refund-panel .wb-rf-step + .wb-rf-step { margin-top: 8px; }
.wb-refund-panel .wb-rf-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #e7ebf0;
color: #5a6573;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.wb-refund-panel .wb-rf-step.wb-rf-done .wb-rf-num { background: #27ae60; color: #fff; }
.wb-refund-panel .wb-rf-step:not(:last-child)::before {
content: '';
position: absolute;
left: 13px;
top: 32px;
bottom: -4px;
width: 2px;
background: #e7ebf0;
}
.wb-refund-panel .wb-rf-body { flex: 1 1 auto; min-width: 0; padding-bottom: 6px; }
.wb-refund-panel .wb-rf-title { font-weight: 700; margin-bottom: 6px; }
.wb-refund-panel .wb-rf-received { color: #1f8a4c; margin: 0; font-weight: 600; }
.wb-refund-panel .wb-rf-hint { margin: 0 0 8px; }
.wb-refund-panel .wb-rf-field { margin-bottom: 12px; }
.wb-refund-panel .wb-rf-field > label { font-weight: 600; display: block; margin-bottom: 4px; }
.wb-refund-panel .wb-deduction-group { max-width: 180px; }
.wb-refund-panel .wb-rf-options { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.wb-refund-panel .wb-rf-options .wb-inline-check { margin: 0; font-weight: 400; }
.wb-refund-panel .wb-rf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wb-refund-panel .wb-rf-note { margin-top: 12px; }
/* Admin request-detail exchange panel */
.wb-replacement-card .wb-repl-diff-admin.wb-repl-pay { color: #c0492b; }
.wb-replacement-card .wb-repl-diff-admin.wb-repl-refund { color: #1f8a4c; }
/* Customer request view exchange block */
.wb-view-replacement { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.wb-view-repl-diff.wb-repl-pay { color: #c0492b; font-weight: 600; }
.wb-view-repl-diff.wb-repl-refund { color: #1f8a4c; font-weight: 600; }
/* ---- Setup guide (compliance profiles + checklist) ---- */
.wb-setup .wb-profiles { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; }
.wb-setup .wb-profile-card {
flex: 1 1 240px;
display: block;
margin: 0;
padding: 14px 16px;
border: 2px solid #dfe4ea;
border-radius: 10px;
background: #fff;
cursor: pointer;
font-weight: 400;
transition: border-color .15s, box-shadow .15s;
}
.wb-setup .wb-profile-card:hover { border-color: #b9c4d0; }
.wb-setup .wb-profile-card.wb-profile-active { border-color: #2d7ff9; box-shadow: 0 2px 12px rgba(45, 127, 249, 0.14); }
.wb-setup .wb-profile-card input { margin-right: 8px; }
.wb-setup .wb-profile-head { font-weight: 700; display: block; margin-bottom: 6px; }
.wb-setup .wb-profile-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 11px; font-weight: 700; color: #1761c4; background: #e8f1ff; border-radius: 20px; vertical-align: middle; }
.wb-setup .wb-profile-desc { display: block; color: #5a6573; font-size: 0.92em; line-height: 1.45; }
.wb-setup .wb-setup-actions { margin-top: 14px; }
.wb-setup .wb-checklist { list-style: none; margin: 4px 0 0; padding: 0; }
.wb-setup .wb-check { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #f0f2f5; }
.wb-setup .wb-check:last-child { border-bottom: 0; }
.wb-setup .wb-check > i { margin-top: 2px; }
.wb-setup .wb-check-ok > i { color: #1f8a4c; }
.wb-setup .wb-check-bad > i { color: #d0392b; }
.wb-setup .wb-check-warn > i { color: #d89b1c; }
.wb-setup .wb-check-text a { margin-left: 6px; }
/* ---- Attachments ---- */
.wb-attachments { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.wb-attach-thumb img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; border: 1px solid #dfe4ea; display: block; }
.wb-attach-file { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #dfe4ea; border-radius: 6px; background: #fff; }
.wb-attach-list { list-style: none; margin: 6px 0 0; padding: 0; }
.wb-attach-list li { margin: 3px 0; }
.wb-attach-list a { display: inline-flex; align-items: center; gap: 6px; }
.wb-attach { margin-top: 6px; }
.wb-attach .wb-attach-toobig { color: #c0492b; }
/* ===================================================================
* Back office
* =================================================================== */
/* ---- Order page widget (displayAdminOrder) ---- */
/* Self-styled so it renders consistently across PS 1.6–9 BO themes, which
style .panel/.label differently (PS9 in particular drops the old skin). */
/* ---- Back-office "real delivery date" panel (order page, side column) ---- */
.wb-dp.panel,
.wb-dp {
border: 1px solid #dfe3e8;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(20, 28, 40, .06);
margin-bottom: 18px;
overflow: hidden;
padding: 0;
}
.wb-dp-head {
padding: 12px 16px;
background: #f6f7f9;
border-bottom: 1px solid #e7eaee;
font-size: 14px;
font-weight: 700;
color: #2b2f36;
}
.wb-dp-head i { margin-right: 6px; color: #6b7280; }
.wb-dp-body { padding: 14px 16px; }
.wb-dp-flash { padding: 8px 10px; margin: 0 0 10px; font-size: 13px; }
.wb-dp-help { font-size: 12px; color: #6b7280; margin: 0 0 12px; line-height: 1.45; }
.wb-dp-facts { list-style: none; margin: 0 0 12px; padding: 0; }
.wb-dp-facts li {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 5px 0;
font-size: 13px;
border-bottom: 1px solid #f0f1f3;
}
.wb-dp-facts li:last-child { border-bottom: 0; }
.wb-dp-k { color: #6b7280; }
.wb-dp-v { font-weight: 600; color: #2b2f36; text-align: right; }
.wb-dp-v.wb-dp-real { color: #16a085; }
.wb-dp-label { display: block; font-size: 12px; font-weight: 600; color: #2b2f36; margin: 0 0 4px; }
.wb-dp-row { display: flex; gap: 8px; align-items: center; }
.wb-dp-input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.wb-dp-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wb-dp-note { font-size: 11px; color: #9aa0a8; margin: 12px 0 0; }
.wb-ow {
border: 1px solid #dfe3e8;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(20, 28, 40, .06);
margin-bottom: 18px;
overflow: hidden;
}
.wb-ow-head {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 18px;
background: #f6f7f9;
border-bottom: 1px solid #e7eaee;
}
.wb-ow-title { font-size: 15px; font-weight: 700; color: #2b2f36; }
.wb-ow-title i { margin-right: 6px; color: #6b7280; }
.wb-ow-badge {
margin-left: auto;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #909399;
text-transform: uppercase;
letter-spacing: .02em;
}
.wb-ow-badge-success { background: #27ae60; }
.wb-ow-badge-warning { background: #f0ad4e; }
.wb-ow-badge-danger { background: #c0392b; }
.wb-ow-badge-info { background: #3498db; }
.wb-ow-badge-default { background: #909399; }
.wb-ow-body { padding: 18px; }
.wb-ow-body .wb-flow { margin: 4px 0 18px; }
.wb-ow-meta { margin: 0; }
.wb-ow-line { margin: 0 0 4px; font-size: 14px; color: #2b2f36; }
.wb-ow-sub { margin: 0 0 12px; color: #8a9099; font-size: 13px; }
.wb-ow-sep { color: #c7ccd1; margin: 0 4px; }
.wb-ow-sla { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.wb-ow-slaitem { font-size: 13px; color: #555; }
.wb-ow-pill {
display: inline-block;
margin-left: 4px;
padding: 2px 9px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.wb-ow-pill-ok { background: #27ae60; }
.wb-ow-pill-danger { background: #c0392b; }
.wb-ow-action { margin-top: 4px; }
/* ---- Settings: dual-listbox swap ---- */
.wb-swap-title { font-weight: 700; }
.wb-swap {
display: flex;
gap: 14px;
border: 1px solid #d6dbe0;
border-radius: 4px;
padding: 12px;
background: #fff;
}
.wb-swap-col { flex: 1 1 50%; }
.wb-swap-head { display: block; font-weight: 600; margin-bottom: 4px; }
.wb-swap-col .wb-swap-search { margin-bottom: 6px; }
.wb-swap-col select { width: 100%; }
.wb-swap-col .btn-block { margin-top: 6px; }
/* ---- Settings: multilang WYSIWYG fields (instructions, product block) ---- */
.wb-rte-toolbar { margin-bottom: 6px; }
.wb-rte-toolbar .wb-rte-switch { width: auto; min-width: 160px; display: inline-block; }
.wb-rte-field { margin-bottom: 4px; }
/* ---- Email template editor ---- */
.wb-varchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-varchip {
border: 1px solid #cde4fb;
background: #eef7ff;
color: #2d3e50;
border-radius: 14px;
padding: 4px 12px;
font-family: monospace;
font-size: 12px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.wb-varchip:hover { background: #d6ecff; border-color: #9fcdf5; }
.wb-mailedit .wb-code {
font-family: Menlo, Consolas, "Courier New", monospace;
font-size: 12px;
line-height: 1.5;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
}
.wb-mailedit .panel .form-group { padding: 0 15px; }
.wb-mailedit .panel .form-group:first-child { padding-top: 12px; }
.wb-mailedit .form-group > label { font-weight: 600; }
/* Editor footer: test-tools group on the left, Save flush-right, help note full-width below.
Flexbox (not float+clearfix) so the Save button stays aligned on every admin theme — same
PS 8.2.7 fix as .wb-panel-footer. margin-left:auto on the Save button pushes it right while
the test group stays pinned left; the button keeps pull-right as a harmless fallback. */
.wb-mail-footer { display: flex; flex-wrap: wrap; align-items: center; }
.wb-mail-footer > button { margin-left: auto !important; } /* beat the theme's .btn margin so Save sits flush-right */
.wb-mail-test { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wb-mail-test .wb-test-email { width: 220px; display: inline-block; }
.wb-test-help { flex: 0 0 100%; margin: 8px 0 0; }
.wb-mailedit .wb-trans-row { display: flex; align-items: flex-start; gap: 10px; }
.wb-mailedit .wb-trans-inputs { flex: 1 1 auto; min-width: 0; }
.wb-mailedit .wb-lang-switch {
flex: 0 0 auto;
width: auto;
min-width: 64px;
height: 34px;
padding: 6px 8px;
border: 1px solid #c7ccd1;
border-radius: 4px;
background: #fff;
}
.wb-mailedit .wb-tabs-row { align-items: flex-end; margin-bottom: 0; }
.wb-mailedit .wb-mailtabs { flex: 1 1 auto; margin-bottom: 0; }
/* The PS9 BO theme forces an underline on every #content a[href]; that rule
carries an ID so it outweighs a plain class selector — override with !important. */
.wb-mailedit .wb-mailtabs a,
.wb-mailedit .wb-mailtabs a:hover,
.wb-mailedit .wb-mailtabs a:focus { text-decoration: none !important; }
.wb-mailedit .wb-tab-pane { padding: 14px 0; }
.wb-mailedit .wb-html-preview {
width: 100%;
height: 520px;
border: 1px solid #e3e6ea;
border-radius: 4px;
background: #fff;
}
/* Translatable field in the General settings (return instructions) */
.wb-general-langs .wb-trans-row { display: flex; align-items: flex-start; gap: 10px; }
.wb-general-langs .wb-trans-inputs { flex: 1 1 auto; min-width: 0; }
.wb-general-langs .wb-lang-switch {
flex: 0 0 auto;
width: auto;
min-width: 64px;
height: 34px;
padding: 6px 8px;
border: 1px solid #c7ccd1;
border-radius: 4px;
background: #fff;
}
/* ---- Analytics ---- */
.wb-analytics .wb-period { margin-bottom: 14px; }
.wb-analytics .wb-period .btn { margin-right: 4px; }
.wb-kpi-default { background: #5d6d7e; }
.wb-bars { padding: 6px 4px; }
.wb-bar-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.wb-bar-label { flex: 0 0 130px; text-align: right; color: #555; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-bar-track { flex: 1 1 auto; height: 18px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.wb-bar-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; transition: width .3s; }
.wb-bar-value { flex: 0 0 40px; font-weight: 600; color: #2d3e50; }
.wb-kpis { margin-bottom: 15px; }
/* Analytics tab shows 5 KPI cards — fit them on a single row (overrides the
default col-lg-3 = 4-per-row). The Requests list keeps its 4-card layout. */
.wb-analytics .wb-kpis { display: flex; flex-wrap: wrap; }
.wb-analytics .wb-kpis > div { flex: 0 0 20%; max-width: 20%; }
.wb-analytics .wb-kpis .wb-kpi { padding: 16px 8px; height: 100%; }
.wb-analytics .wb-kpis .wb-kpi-value { font-size: 26px; }
@media (max-width: 991px) { .wb-analytics .wb-kpis > div { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 600px) { .wb-analytics .wb-kpis > div { flex-basis: 100%; max-width: 100%; } }
.wb-kpi {
text-align: center;
padding: 18px 10px;
border-radius: 6px;
background: #fff;
border: 1px solid currentColor;
margin-bottom: 12px;
}
.wb-kpi-value { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: inherit; }
.wb-kpi-label { display: block; font-size: 13px; font-weight: 600; color: inherit; }
.wb-kpi-sub { display: block; font-size: 11.5px; opacity: 0.75; color: inherit; margin-top: 2px; }
.wb-kpi-warning { color: #e0951f; }
.wb-kpi-danger { color: #c0392b; }
.wb-kpi-success { color: #1e8a4c; }
.wb-kpi-info { color: #2c80c0; }
.wb-analytics .panel-heading { margin-bottom: 6px; }
.wb-analytics-cards { margin-bottom: 4px; }
.wb-analytic { padding: 6px 12px; text-align: center; }
.wb-analytic-value { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: #2c3e50; }
.wb-analytic-label { display: block; font-size: 13px; font-weight: 600; color: #555; }
.wb-analytic-sub { display: block; font-size: 12px; color: #999; margin-top: 2px; }
.wb-top-title { margin: 14px 0 6px; padding: 0 12px; font-size: 14px; font-weight: 700; }
.wb-top-products { font-size: 13px; margin-bottom: 4px; }
.wb-top-products th { font-weight: 600; }
.wb-top-help { padding: 0 12px; margin: 0 0 6px; }
.wb-admin-table { font-size: 14px; }
.wb-admin-table .wb-row { cursor: pointer; }
.wb-admin-table .wb-row:hover { background: #f5f5f5; }
.wb-admin-table .wb-view-btn { font-size: 13px; padding: 6px 14px; }
.wb-admin-table .wb-row-actions-grp { white-space: nowrap; }
.wb-admin-table .wb-row-menu-toggle { font-size: 13px; padding: 6px 10px; }
.wb-admin-table .wb-row-menu-toggle .caret { margin: 0; }
.wb-row-menu { min-width: 210px; font-size: 13px; }
.wb-row-menu > li > a { padding: 7px 16px; }
.wb-row-menu > li > a > i { width: 16px; margin-right: 6px; text-align: center; }
.wb-filters .form-group { margin-right: 8px; }
.wb-cb-col { width: 32px; text-align: center; }
.wb-bulk-bar { padding: 4px 0 14px; margin-bottom: 6px; border-bottom: 1px solid #eee; }
.wb-bulk-bar .form-group { margin-right: 8px; }
.wb-bulk-bar .wb-bulk-count { display: inline-block; min-width: 90px; margin-right: 8px; font-weight: bold; }
.wb-bulk-bar .wb-bulk-note { min-width: 280px; }
.wb-bulk-bar .wb-bulk-help { display: block; margin-top: 6px; }
/* Email templates list */
.wb-mt-table { font-size: 15px; }
.wb-mt-table .wb-mt-edit { font-size: 14px; padding: 8px 18px; }
.wb-detail-header { margin-bottom: 15px; }
.wb-detail-title { display: inline-block; margin-left: 10px; }
.wb-item-img { width: 40px; height: 40px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px; }
/* The PS9 BO theme enlarges #content blockquote (ID rule); force it back down. */
.wb-ack-preview { font-style: italic; color: #555; margin: 10px 15px; font-size: 13px !important; line-height: 1.5 !important; }
.wb-actions form { margin-bottom: 10px; }
.wb-actions textarea { margin-bottom: 8px; }
.wb-deadline-check { margin-bottom: 16px; }
.wb-deadline-check p { margin: 0 0 4px; }
.wb-deadline-check .help-block { margin-bottom: 0; }
.wb-dc-dates { display: inline-block; font-size: 12px; color: #555; }
.wb-inline-check { font-weight: normal; margin: 0; display: block; }
.wb-refund-deduction { margin-bottom: 10px; }
.wb-refund-deduction > label { font-weight: bold; }
.wb-deduction-group { max-width: 200px; }
.wb-refund-deduction .help-block { margin-bottom: 0; }
/* ---- Settings: reasons (modern card list) ---- */
.wb-reasons-intro { margin: 0; padding: 14px 20px 2px; }
#wb-reasons { max-width: none; }
.wb-reasons-head {
display: flex;
align-items: center;
gap: 12px;
padding: 0 14px 8px;
color: #8a9099;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 600;
}
.wb-reasons-head .wb-rh-pos { flex: 0 0 46px; text-align: center; }
.wb-reasons-head .wb-rh-label { flex: 1 1 auto; padding-left: 10px; max-width: 500px; }
.wb-reasons-head .wb-rh-replacement { flex: 0 0 90px; text-align: center; }
.wb-reasons-head .wb-rh-active { flex: 0 0 60px; text-align: center; }
.wb-reasons-head .wb-rh-move { flex: 0 0 76px; text-align: center; }
.wb-reasons-head .wb-rh-actions { flex: 0 0 76px; text-align: center; }
.wb-reason-empty {
text-align: center;
color: #9aa0a6;
padding: 26px;
border: 1px dashed #d8dde2;
border-radius: 10px;
background: #fafbfc;
}
.wb-reason-empty .wb-ico,
.wb-reason-empty [class^="icon-"] { opacity: .6; margin-right: 6px; }
.wb-reason-item {
display: flex;
align-items: center;
gap: 12px;
padding: 5px 14px;
margin-bottom: 2px;
background: transparent;
border: 0;
}
.wb-reason-pos {
flex: 0 0 46px;
display: flex;
align-items: center;
justify-content: center;
cursor: move; /* drag handle — hovering shows the move cursor */
}
.wb-reason-pos-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 7px;
border: 1px solid #ced4da;
border-radius: 6px;
background: #f4f6f8;
color: #2d3e50;
font-weight: 700;
font-size: 13px;
line-height: 1;
user-select: none;
transition: border-color .15s, background .15s;
}
.wb-reason-pos:hover .wb-reason-pos-num { border-color: #2d8cf0; background: #eaf4ff; }
/* Drag feedback */
.wb-reason-placeholder {
box-sizing: border-box;
height: 46px; /* fallback; JS sets it to the real row height on drag start */
border: 1px dashed #2d8cf0;
border-radius: 8px;
background: #f0f7ff;
margin-bottom: 2px;
}
.wb-reason-item.ui-sortable-helper {
box-shadow: 0 8px 22px rgba(45, 62, 80, .16);
border-radius: 8px;
background: #fff;
}
.wb-reason-labels { flex: 1 1 auto; min-width: 0; max-width: 500px; }
.wb-reason-move { flex: 0 0 76px; display: flex; gap: 6px; justify-content: center; }
.wb-reason-label {
width: 100%;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 0 !important;
background: #fff;
box-shadow: none !important;
padding: 6px 10px;
font-size: 14px;
color: #2d3e50;
transition: border-color .15s, background .15s;
}
/* Language switcher: a plain select, left-aligned with the reason boxes below. */
.wb-reasons-lang { display: flex; align-items: center; margin: 2px 0 12px; padding-left: 14px; }
.wb-reason-langsw {
flex: 0 0 auto;
width: auto !important;
max-width: 220px;
min-width: 0;
height: 32px;
padding: 4px 26px 4px 10px;
border: 1px solid #ced4da;
border-radius: 4px;
background: #fff;
font-size: 13px;
color: #333;
cursor: pointer;
outline: none;
}
.wb-reason-langsw:focus { border-color: #2d8cf0; }
.wb-reason-label:hover { border-color: #b9c1c9; }
.wb-reason-label:focus { outline: none; border-color: #2d8cf0; background: #fff; }
.wb-reason-replacement { flex: 0 0 90px; display: flex; justify-content: center; }
.wb-reason-active { flex: 0 0 60px; display: flex; justify-content: center; }
.wb-reason-actions { flex: 0 0 76px; display: flex; gap: 6px; justify-content: center; }
/* Slider switch */
.wb-switch {
position: relative;
width: 44px;
height: 24px;
border: 0;
padding: 0;
border-radius: 12px;
background: #cfd6dc;
cursor: pointer;
transition: background .2s;
}
.wb-switch.on { background: #27ae60; }
.wb-switch-knob {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
transition: left .2s;
}
.wb-switch.on .wb-switch-knob { left: 23px; }
/* Round icon buttons */
.wb-ricon {
width: 32px;
height: 32px;
border: 1px solid #e6e9ed;
background: #fff;
border-radius: 8px;
color: #5d6d7e;
cursor: pointer;
transition: all .15s;
}
.wb-ricon:hover { background: #eef2f6; color: #2d3e50; }
.wb-ricon-danger:hover { background: #fdecea; color: #c0392b; border-color: #f3c6c0; }
.wb-ricon.wb-flash-ok { background: #27ae60; color: #fff; border-color: #27ae60; }
.wb-ricon.wb-flash-err { background: #c0392b; color: #fff; border-color: #c0392b; }
.wb-reason-add {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 4px 14px;
border: 0;
background: transparent;
}
.wb-reason-add .wb-add-icon { color: #9aa0a6; font-size: 18px; }
#wb-add-reason-btn { white-space: nowrap; flex-shrink: 0; }
.wb-reason-add input {
flex: 1 1 auto;
border: 1px solid #ced4da;
border-radius: 0 !important;
box-shadow: none !important;
padding: 6px 10px;
font-size: 14px;
color: #2d3e50;
background: #fff;
}
.wb-reason-add input:focus { outline: none; border-color: #2d8cf0; }
/* ---- Settings: exceptions & rules list + editor ---- */
.wb-overrides-table td { vertical-align: middle; }
.wb-overrides-table .wb-col-exempt { width: 90px; }
.wb-overrides-table .wb-col-actions { width: 92px; }
.wb-rule-row-actions { white-space: nowrap; }
.wb-rule-row-actions .wb-rule-edit { margin-right: 4px; }
.wb-rule-row-actions .wb-rule-del-form { display: inline-block; margin: 0; }
/* Spacing between a button's icon and its label (BO theme glues them). */
.wb-editor-actions .btn i { margin-right: 6px; }
.wb-ov-product { display: flex; align-items: center; gap: 12px; }
/* Target-type tabs (product / category / manufacturer / supplier / attribute / feature) */
.wb-target-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.wb-target-tabs .wb-target-tab { flex: 0 0 auto; }
.wb-target-tabs .wb-target-tab i { margin-right: 4px; }
/* ---- Exception editor: multi-select chips ---- */
.wb-exc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; padding: 6px 8px; border: 1px solid #dce8f4; border-radius: 8px; background: #fff; }
.wb-exc-chips .wb-chip { display: inline-flex; align-items: center; background: #eef4fb; border: 1px solid #cfe0f2; border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 13px; line-height: 1.6; }
.wb-exc-chips .wb-chip-x { margin-left: 4px; padding: 0 6px; color: #c0392b; font-weight: bold; text-decoration: none; line-height: 1; }
.wb-exc-chips .wb-chip-x:hover { color: #e74c3c; }
.wb-exc-chips .wb-exc-chips-empty { font-size: 13px; }
.wb-results-table .wb-pick.wb-picked, .wb-results-table .wb-group-pick.wb-picked { color: #2e7d32; border-color: #b7dfb9; background: #f1f8f1; }
.wb-results-table .wb-pick.wb-picked i, .wb-results-table .wb-group-pick.wb-picked i { color: #2e7d32; }
/* Rule target cell: [badge][thumb slot][label + path] — aligned columns */
.wb-ov-product { display: flex; align-items: center; gap: 10px; }
.wb-rule-target { display: inline-block; line-height: 1.4; }
.wb-type-badge {
flex: 0 0 auto;
min-width: 112px;
text-align: left;
font-weight: 600;
}
.wb-type-badge i { margin-right: 3px; }
.wb-type-product { background: #6c8ea0; }
.wb-type-category { background: #5b9e7d; }
.wb-type-manufacturer { background: #b07d52; }
.wb-type-supplier { background: #7d6cae; }
.wb-type-attribute { background: #a0688f; }
.wb-type-feature { background: #5f8a4d; }
/* Fixed thumbnail slot so names line up whether or not a row has an image. */
.wb-rule-thumb { flex: 0 0 34px; width: 34px; text-align: center; }
.wb-rule-thumb .wb-res-img { margin: 0; }
.wb-rule-path { display: block; font-size: 11px; opacity: .8; }
/* Two-column layout: editor (left) + configured list (right), 50/50, full width. */
.wb-exc-intro { margin: 0; padding: 14px 20px 2px; }
.wb-precedence-note {
margin: 8px 20px 4px;
padding: 9px 14px;
background: #eef4fb;
border-left: 3px solid #2c6cb0;
border-radius: 4px;
color: #2c4a6b;
font-size: 13px;
line-height: 1.5;
}
.wb-precedence-note i { margin-right: 6px; color: #2c6cb0; }
.wb-exceptions-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.wb-exc-editor-col, .wb-exc-list-col {
flex: 1 1 50%;
min-width: 300px;
box-sizing: border-box;
padding: 20px 32px;
}
.wb-exc-list-col { border-left: 1px solid #eef1f4; }
@media (max-width: 1199px) {
.wb-exc-editor-col, .wb-exc-list-col { flex-basis: 100%; }
.wb-exc-list-col { border-left: 0; border-top: 1px solid #eef1f4; }
}
.wb-editor-title {
margin-top: 0;
margin-bottom: 16px;
font-size: 15px;
font-weight: 700;
color: #2d3e50;
}
/* Stacked editor form (label above control). */
.wb-stacked-form .form-group { margin-bottom: 16px; }
.wb-stacked-form .wb-stack-label {
display: block;
font-weight: 600;
color: #2d3e50;
margin-bottom: 6px;
}
.wb-stacked-form .help-block { margin-bottom: 0; margin-top: 6px; }
.wb-stacked-form .wb-extend-input { max-width: 180px; }
/* Keep text inputs from spanning the full column width. */
.wb-stacked-form .wb-finder-input,
.wb-stacked-form input[name="custom_note"],
.wb-stacked-form input[name="exempt_reason"] { max-width: 75%; }
.wb-editor-actions {
text-align: right;
border-top: 1px solid #eef1f4;
padding-top: 14px;
margin-top: 4px;
}
/* Compact configured-exceptions table (right column). */
.wb-overrides-compact { font-size: 12.5px; margin-bottom: 0; }
.wb-overrides-compact > thead > tr > th,
.wb-overrides-compact > tbody > tr > td { padding: 7px 8px; }
.wb-overrides-compact .wb-ov-product { gap: 8px; }
.wb-overrides-compact .wb-ov-product img { width: 34px; height: 34px; object-fit: cover; }
.wb-overrides-compact .wb-col-exempt { width: 60px; }
.wb-overrides-compact .wb-col-actions { width: 44px; }
/* Internal scroll for long exception lists (keeps the section compact). */
.wb-overrides-scroll { max-height: 460px; overflow-y: auto; border: 1px solid #eef1f4; border-radius: 6px; }
.wb-overrides-scroll .wb-overrides-compact { margin-bottom: 0; }
.wb-overrides-scroll .wb-overrides-compact > thead > tr > th {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
box-shadow: inset 0 -1px 0 #e7ebef;
}
.wb-count-badge {
display: inline-block;
min-width: 20px;
padding: 1px 7px;
margin-left: 6px;
font-size: 11px;
font-weight: 700;
color: #5a6675;
background: #eef2f7;
border-radius: 10px;
vertical-align: middle;
}
/* Visibility filters: category tree (self-contained checkbox tree). */
.wb-cat-tree { border: 1px solid #dfe4e8; border-radius: 6px; background: #fff; }
.wb-cattree-toolbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
padding: 7px 10px; border-bottom: 1px solid #eef1f4; background: #fafbfc;
border-radius: 6px 6px 0 0;
}
.wb-cattree-search-wrap {
display: flex; align-items: center; gap: 6px;
border: 1px solid #cdd4da; border-radius: 4px; padding: 3px 8px; background: #fff;
}
.wb-cattree-search-wrap .icon-search { color: #9aa4ad; font-size: 12px; }
.wb-cattree-search { border: 0; outline: none; font-size: 12px; width: 150px; background: transparent; }
.wb-cattree-links { font-size: 12px; }
.wb-cattree-links a { margin-right: 12px; white-space: nowrap; }
.wb-cat-tree .wb-cattree-links a,
.wb-cat-tree .wb-cattree-links a:hover,
.wb-cat-tree .wb-cattree-links a:focus,
.wb-cat-tree .wb-cattree-links a:active { text-decoration: none !important; }
.wb-cattree-links a:last-child { margin-right: 0; }
.wb-cattree-scroll { max-height: 300px; overflow: auto; padding: 8px 10px; }
.wb-cattree, .wb-cattree ul { list-style: none; margin: 0; padding: 0; }
.wb-cattree ul { padding-left: 20px; }
.wb-cattree-li.wb-collapsed > ul { display: none; }
.wb-cattree-row { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.wb-cattree-toggle {
border: 0; background: transparent; cursor: pointer; padding: 0;
width: 18px; height: 18px; line-height: 18px; text-align: center;
color: #7a8694; flex: 0 0 18px;
}
.wb-cattree-toggle i { transition: transform .12s; }
.wb-cattree-li.wb-collapsed > .wb-cattree-row .wb-cattree-toggle i { transform: rotate(-90deg); }
.wb-cattree-bullet { display: inline-block; width: 18px; flex: 0 0 18px; }
.wb-cattree-label { font-weight: 400; margin: 0; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.wb-cattree-label input { margin: 0; }
/* Finder bar (live search) */
.wb-finder-bar { margin-bottom: 14px; }
.wb-finder-input { max-width: none; width: 100%; }
.wb-finder-input .input-group-addon {
background: #fff;
border-right: 0;
color: #9aa0a6;
}
.wb-finder-input .form-control {
height: 38px;
border-left: 0;
box-shadow: none;
}
.wb-finder-input .form-control:focus { border-color: #ccd1d6; }
.wb-finder-input .btn { height: 38px; }
/* Selected product chip with thumbnail */
.wb-sel-img {
width: 38px;
height: 38px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e6e9ed;
}
/* ---- Settings: product finder (search -> results table -> pick) ---- */
.wb-finder-bar { margin-bottom: 12px; }
.wb-finder-bar .form-control { min-width: 280px; margin-right: 6px; }
.wb-results-wrap { margin-bottom: 8px; }
.wb-results-table td { vertical-align: middle; }
.wb-res-product { display: flex; align-items: center; gap: 12px; }
.wb-res-img {
width: 44px;
height: 44px;
object-fit: cover;
border: 1px solid #e3e6ea;
border-radius: 4px;
flex: 0 0 auto;
}
.wb-res-info { display: flex; flex-direction: column; }
.wb-res-name { font-weight: 500; }
.wb-no-results { padding: 10px 2px; }
.wb-pick i { margin-right: 5px; }
/* Selected-product chip inside the exception form */
.wb-product-selected {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
background: #eef7ff;
border: 1px solid #cde4fb;
border-radius: 10px;
min-height: 44px;
font-weight: 600;
color: #2d3e50;
}
.wb-product-selected.wb-none {
background: #f6f8fa;
border-color: #e6e9ed;
color: #9aa0a6;
font-weight: 400;
}
.wb-product-selected .wb-clear {
color: #c0392b;
margin-left: 4px;
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
border-radius: 50%;
}
.wb-product-selected .wb-clear:hover { background: #fdecea; }
/* ---- Timeline ---- */
.wb-timeline { list-style: none; padding-left: 0; margin: 0; }
.wb-timeline-item {
padding: 8px 12px;
border-left: 3px solid #ccc;
margin-bottom: 6px;
background: #fafafa;
}
.wb-timeline-item.wb-actor-merchant { border-left-color: #3498db; }
.wb-timeline-item.wb-actor-customer { border-left-color: #27ae60; }
.wb-timeline-item.wb-actor-system { border-left-color: #909399; }
.wb-timeline-action { font-weight: 700; margin-right: 8px; }
.wb-timeline-actor { color: #666; }
.wb-timeline-time { color: #999; float: right; font-size: 12px; }
.wb-timeline-note { margin-top: 4px; color: #444; }
/* ---- BO: New request (manual creation) ---- */
.wb-new-btn { margin-top: -4px; }
.wb-order-lookup .form-control { display: inline-block; }
.wb-new-order-head { padding: 6px 4px; }
.wb-new-order-head .text-muted { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.wb-new-items td { vertical-align: middle; }
.wb-item-img {
width: 44px;
height: 44px;
object-fit: cover;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.wb-new-items tr.wb-item-on { background: #eaf6ff; }
.wb-new-items .wb-item-qty { width: 90px; }
/* Exempt / excluded item rows in the BO manual-request table. */
.wb-new-exempt { color: #9aa0a6; }
.wb-new-exempt td { background: #fafbfc; }
.wb-new-exempt .wb-item-img { opacity: .55; }
.wb-new-exempt .wb-exempt-ico { color: #c0392b; font-size: 16px; }
/* ---- BO: legal notice (always visible, full width) ---- */
.wb-legal-text { color: #666; line-height: 1.6; margin-bottom: 0; max-width: none; }
/* ---- Front: order-history withdrawal pill / status chip ---- */
.wb-hist-wrap { margin-top: 7px; }
.wb-hist-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
line-height: 1.2;
color: #fff !important;
text-decoration: none !important;
background: linear-gradient(135deg, #3a7bd5 0%, #2d3e50 100%);
box-shadow: 0 2px 6px rgba(45, 62, 80, .25);
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
white-space: nowrap;
}
.wb-hist-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 62, 80, .32);
filter: brightness(1.06);
color: #fff !important;
}
/* Status chip on the customer's order list. Beyond .wb-hist-chip it also carries, so a
shop can restyle or hide any particular case from its own CSS without touching the
module:
.wb-hist-pending / -approved / -rejected / -expired / -completed / -cancelled
the withdrawal status (from the raw value, so it does not vary per language)
.wb-badge- the same status in the module's badge naming
.wb-hist-order- the ORDER status the row is in
The wrapper mirrors the first one as .wb-hist-wrap-.
Example — hide the chip on cancelled orders (id_state 6 by default):
.wb-hist-order-6 { display: none; } */
.wb-hist-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-weight: 600;
font-size: 12.5px;
color: #4a5568 !important;
text-decoration: none !important;
background: #eef1f5;
border: 1px solid #dfe4ea;
white-space: nowrap;
}
.wb-hist-chip:hover { background: #e4e9f0; color: #2d3e50 !important; }
.wb-hist-ic { font-size: 15px; line-height: 1; }
/* ---- Primary CTA (order detail / confirmation / form): native Bootstrap look ---- */
.wb-request-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: none !important;
}
/* ---- Order confirmation card (neutral, thin card border) ---- */
.wb-confirmation {
border: 1px solid #e3e5e8;
border-radius: 4px;
background: #fff;
box-shadow: none;
margin-bottom: 30px;
}
.wb-confirmation .wb-title { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.wb-confirmation .wb-title .wb-ico { color: #4a4f57; }
.wb-confirmation-body { padding: 16px 18px; }
/* ---- Notices ---------------------------------------------------------------
Own classes on purpose. These used to be plain Bootstrap .alert/.alert-danger
with nothing of ours, so their whole appearance was on loan from the theme: a
theme without those rules rendered bare text, and a theme with its own could
restyle them at will. The block above learned the same lesson the hard way —
a shop had `.card { display: none }` in its order-confirmation page and
switched the entire withdrawal block off, because we were carrying that
generic class for styling we already provide ourselves. Theme classes are
kept only where they genuinely integrate: buttons, form controls and the
account tiles, which have to look like the rest of the customer account. -- */
.wb-front .wb-alert {
border: 1px solid #e3e5e8;
border-left-width: 4px;
border-radius: 4px;
background: #fbfbfc;
padding: 12px 16px;
margin-bottom: 20px;
}
.wb-front .wb-alert > :first-child { margin-top: 0; }
.wb-front .wb-alert > :last-child { margin-bottom: 0; }
.wb-front .wb-alert ul { margin: 0; padding-left: 20px; }
.wb-front .wb-alert-danger { border-left-color: #c0392b; background: #fdf6f5; }
.wb-front .wb-alert-success { border-left-color: #27ae60; background: #f4fbf7; }
/* ---- Checkout: digital-content consent (Art. 16.m) ---- */
.wb-dc-box {
border: 1px solid #e3e5e8;
border-radius: 4px;
background: #fbfbfc;
padding: 12px 14px;
margin: 0 0 16px;
}
.wb-dc-box.wb-dc-invalid { border-color: #c0392b; background: #fdecea; }
.wb-dc-label { display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; font-weight: normal; }
.wb-dc-label input { margin-top: 3px; flex: 0 0 auto; }
.wb-dc-req { color: #c0392b; font-weight: 600; }
.wb-dc-error-msg { display: none; color: #c0392b; margin: 8px 0 0 26px; font-size: 13px; }
.wb-dc-box.wb-dc-invalid .wb-dc-error-msg { display: block; }
/* ---- Settings: template-variable annotations (soft blue, not the default red) ---- */
.wb-settings .help-block code,
.wb-settings code {
color: #2c6cb0;
background: #eef4fb;
border: 1px solid #dbe7f5;
padding: 1px 6px;
border-radius: 3px;
font-size: 90%;
}
/* Account DASHBOARD tile. Scoped to `.link-item` (the dashboard-tile structure)
rather than the body class, so it works on any theme — the compact account
left-menu uses .account-menu__link (no .link-item) and is never touched. */
#wb-withdrawal-link span.link-item { display: block; height: 100%; padding: 1rem; text-align: center; }
/* Inherit the theme's text color in any account context so the link never
renders as a stray default-blue link (dashboard card OR account left-menu). */
#wb-withdrawal-link, #wb-withdrawal-link:hover, #wb-withdrawal-link:focus { color: inherit; text-decoration: none; }
/* Tile icon: a centered glyph above the label, sized to match the theme's other
account tiles (the masked SVG would otherwise sit at 1em — too small). */
/* Match the theme's native account-tile icons (an ~80px tall, glyph centered)
so our label sits at the same height. !important overrides the theme's own
icon rules; scoped to our tile only. */
#wb-withdrawal-link .link-item .wb-ico {
display: block !important;
width: 100% !important;
height: 80px !important;
margin: 0 !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: 48px !important;
mask-size: 48px !important;
}
/* ---- Order-history eligible-row highlight ---- */
.wb-row-eligible > td,
.wb-row-eligible > th { background: #f3f8ff !important; }
.wb-row-eligible > td:first-child,
.wb-row-eligible > th:first-child { box-shadow: inset 3px 0 0 #3a7bd5; }
/* ---- History: withdrawal CTA (Bootstrap button) below the row actions ---- */
.wb-hist-cta {
white-space: normal;
text-transform: none !important;
padding: 6px 14px !important;
max-width: 100%;
}
.wb-hist-cta .wb-hist-ic { font-size: 14px; vertical-align: -1px; }
/* Hummingbird (PS 8.1+/9) actions cell is a CSS grid (repeat(2,minmax(0,1fr))).
Make the CTA fill its column and wrap so it never overflows / gets cut off.
Classic keeps it as a button below the row links. */
.order-history__cell--actions .wb-hist-wrap { margin-top: 0; min-width: 0; max-width: 100%; }
.order-history__cell--actions .wb-hist-cta { display: block; width: 100%; }
/* ===================================================================
* BO: Regulation reference page
* =================================================================== */
.wb-reg { max-width: none; }
/* The PS9 BO theme forces an underline on every #content a[href]; override it. */
.wb-reg a,
.wb-reg a:hover,
.wb-reg a:focus { text-decoration: none !important; }
.wb-reg-hero {
background: linear-gradient(135deg, #5b6fd6 0%, #34397e 100%);
color: #fff;
border-radius: 14px;
padding: 26px 30px;
margin-bottom: 18px;
box-shadow: 0 6px 20px rgba(45, 50, 110, .22);
}
.wb-reg-hero h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: #fff; }
.wb-reg-hero p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #eef0ff; max-width: 760px; }
.wb-reg-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.wb-reg-badge {
display: inline-block;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .25);
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
}
.wb-reg-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 18px;
align-items: start;
}
.wb-reg-toc {
position: sticky;
top: 12px;
background: #fff;
border: 1px solid #e6e9ed;
border-radius: 12px;
padding: 14px 16px;
}
.wb-reg-toc h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: #8a9099; }
.wb-reg-toc ul { list-style: none; margin: 0; padding: 0; }
.wb-reg-toc li { margin: 2px 0; }
.wb-reg-toc a { display: block; padding: 6px 8px; border-radius: 8px; color: #2d3e50; font-size: 13px; text-decoration: none; }
.wb-reg-toc a:hover { background: #f2f6fb; color: #34397e; }
.wb-reg-content { min-width: 0; }
.wb-reg-card {
background: #fff;
border: 1px solid #e6e9ed;
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.wb-reg-card h2 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 12px;
font-size: 17px;
font-weight: 700;
color: #2d3e50;
}
.wb-reg-ic { font-size: 20px; line-height: 1; }
.wb-reg-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: #3f4855; }
.wb-reg-card ul { margin: 0 0 4px; padding-left: 20px; }
.wb-reg-card li { margin-bottom: 7px; font-size: 13.5px; line-height: 1.55; color: #3f4855; }
.wb-reg-covered {
background: #e7f6ec;
color: #1e8a4c;
border: 1px solid #bfe6cd;
font-size: 11px;
font-weight: 700;
padding: 2px 9px;
border-radius: 999px;
}
.wb-reg-note { font-style: italic; color: #6b7785 !important; }
.wb-reg-form {
background: #f7f9fb;
border: 1px solid #e6e9ed;
border-left: 3px solid #5b6fd6;
border-radius: 8px;
padding: 14px 18px;
font-size: 13px;
color: #2d3e50;
}
.wb-reg-form p { color: #2d3e50; }
.wb-reg-disclaimer { font-size: 11.5px; line-height: 1.55; color: #8a9099; margin-top: 4px; }
@media (max-width: 900px) {
.wb-reg-grid { grid-template-columns: 1fr; }
.wb-reg-toc { position: static; }
}
/* Footer right-of-withdrawal entry point. Shipped HIDDEN: the JS moves its link
into the theme's "Your account" footer links, or drops it when the theme has no
such list — so it NEVER renders as a stray full-width strip that breaks the
footer layout (regression seen on a custom 1.7.8 theme). */
.wb-footer-withdrawal { display: none; }
/* Fallback when the JS cannot fold the link into the theme's account list (fully
custom footer, or translated account URLs it could not match): show it as a modest,
centred footer link so the entry point is never lost — still never a full-width strip. */
.wb-footer-withdrawal.wb-foot-standalone { display: block; text-align: center; padding: 10px 0; font-size: .95em; }
.wb-footer-ico { margin-right: 5px; font-style: normal; }
/* "Right of withdrawal" link inside the "Your account" block. Normal weight so it
aligns with the other account links; the return arrow sits on the right.
Merchants can hide it with: .wb-account-withdrawal { display: none; } */
.wb-account-withdrawal a { font-weight: normal; }
.wb-account-withdrawal .wb-footer-ico { margin-left: 6px; margin-right: 0; font-style: normal; opacity: .85; }
/* Guest lookup form: breathing room between fields and the submit button. */
.wb-lookup-form .form-group { margin-bottom: 20px; }
.wb-lookup-form .form-group label { display: block; margin-bottom: 6px; font-weight: 600; }
.wb-lookup-form .wb-lookup-submit { margin-top: 6px; }
/* ===================================================================
* Theme-independent icons (Art. compliance UI must render on ANY theme,
* not only those that load the Material Icons web font). Rendered as CSS
* masks tinted with the surrounding text color. Size is driven by the
* existing per-context font-size rules above (1em = current font size).
* =================================================================== */
.wb-ico{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.wb-ico-assignment_return{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E")}
.wb-ico-undo{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E")}
.wb-ico-info{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E")}
.wb-ico-image{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E")}
.wb-ico-block{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E")}
.wb-ico-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")}
.wb-ico-inbox{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H4.99c-1.11 0-1.98.9-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z'/%3E%3C/svg%3E")}
.wb-ico-local_shipping{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zM18 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zM18 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E")}
.wb-ico-picture_as_pdf{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E")}
.wb-ico-cancel{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/%3E%3C/svg%3E")}
.wb-ico-chevron_left{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E")}
.wb-ico-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E")}
/* Settings dropdowns whose options carry long labels (order-status names plus the
"module status" wording): PrestaShop's fixed-width helpers truncate them, so let the
field use the width of its column, capped so it stays aligned with the other fields. */
.wb-settings select.wb-select-wide {
width: 100%;
max-width: 460px;
}
/* Compliance caveat shown next to a setting that departs from the Directive (the
delivery-refund opt-out). Amber rather than red: it is a legitimate merchant choice
whose consequences must be visible, not an error. */
.wb-legal-warn {
border-left: 3px solid #f0a848;
padding-left: 10px;
color: #8a5b12;
}
p.help-block.wb-legal-warn {
margin-top: 8px;
}
/* Per-carrier return prices (Settings → General). Compact table: the price column is the
only one the merchant types in, so it stays narrow and right-aligned with the switches. */
.wb-settings .wb-rc-table { margin-bottom: 8px; }
.wb-settings .wb-rc-table > thead > tr > th { font-weight: 600; border-bottom-width: 1px; }
.wb-settings .wb-rc-table > tbody > tr > td { vertical-align: middle; }
.wb-settings .wb-rc-col-use { width: 120px; text-align: center; }
.wb-settings .wb-rc-col-price { width: 190px; }
.wb-settings .wb-rc-col-price .input-group { margin: 0; }
.wb-settings .wb-rc-intro { margin-bottom: 10px; }
/* ===================================================================
* Printing the back-office order page
* ===================================================================
* Driven by the merchant's choice (Settings → Design & positions), applied as a
* class on each block by the templates — CSS cannot read a setting, so the PHP
* side stamps wb-print-none / wb-print-summary / wb-print-full and these rules
* key on it. Nothing here affects the screen.
*
* none (default) nothing prints, as before the module added these blocks
* summary the dates print, the forms and buttons do not
* full prints as it looks on screen
*
* The blocks sit where PrestaShop's own order-page hooks put them
* (displayAdminOrderSide, or displayAdminOrder before 1.7.7), so their position is
* not ours to move — which is why this is settled at print time.
*/
@media print {
/* none: leave the order sheet exactly as it was without this module. */
.wb-print-none {
display: none !important;
}
/* summary: the facts are worth having on paper, a date field and a Save button
are not — and dropping them is what keeps a one-page order on one page. */
.wb-print-summary .wb-dp-help,
.wb-print-summary .wb-dp-flash-box,
.wb-print-summary .wb-dp-form,
.wb-print-summary .wb-ow-actions,
.wb-print-summary form,
.wb-print-summary .btn,
.wb-print-summary button {
display: none !important;
}
/* Flat on paper, and never split across two pages. */
.wb-print-summary,
.wb-print-full {
box-shadow: none !important;
border: 1px solid #ccc !important;
page-break-inside: avoid;
break-inside: avoid;
}
}