/* ==========================================================================
   Responsive Cart — Tailwind UI Ecommerce Theme

   This file provides base resets and component styles that complement
   Tailwind utility classes. No legacy csscustomer_large.css is loaded.
   ========================================================================== */

/* ===== Page Background ===== */
body#shoppingCart {
    background-color: #f9fafb; /* gray-50 */
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Base Reset ===== */
html, body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== Header ===== */
.headerLeft img {
    height: 40px;
    width: auto;
    /* min() so the 200px cap still applies on a wide header, but a narrow one can
       shrink the logo instead of shunting the language picker past the right edge.
       object-fit keeps the aspect ratio once the width, not the height, is binding. */
    max-width: min(200px, 100%);
    object-fit: contain;
}

/* ===== Clear divs — hide in flex/grid contexts ===== */
.clear {
    display: none;
}

/* ===== Form Inputs ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    font-size: 14px;
}

/* ===== Terms validation highlight (JS sets this class) ===== */
.metadata-Highlighted {
    background-color: #fef3c7 !important;
    border: 2px solid #f59e0b !important;
    border-radius: 8px;
    padding: 12px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* ===== Footer ===== */
.footerinside {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

/* ===== Print Group (retro prints) ===== */
.photoPrintTotalSell {
    margin-left: auto;
}

/* ===== Calendar Customisations ===== */
.calendarcomp_price {
    margin-left: auto;
}

/* ===== Sticky page chrome =====
   Both shells scroll the window - no ancestor of #header is a scroll container
   or overflow: hidden, and #contentScroll clips with overflow-x: clip for that
   reason (see below) - so the bars can be plain position: sticky. z-index 30
   is a tier under every overlay (the ladder starts at 40, see "Z-INDEX TIERS").
   Cart: the logo bar only (the step indicator scrolls away with the page).
   Account pages: .account-sticky-top wraps #header and the .contentNavigation
   title bar so the title bar needs no top offset of its own - the header's
   height varies with the brand logo. */
:root {
    --spc-header-height: 64px; /* jobticket_responsive #header: h-16 */
}

#shoppingCart #header {
    position: sticky;
    top: 0;
    z-index: 30;
}

.tpx-account-main .account-sticky-top {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* ===== Scrollable Content Area ===== */
/* overflow-x: hidden would force overflow-y to auto, making #contentScroll a
   scroll container - which breaks position: sticky on the payment card (the
   window is what actually scrolls). clip clips without creating a scroll
   container; the hidden line stays first as the fallback for old browsers. */
#contentScroll {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ===== backgroundGrey — neutralize ===== */
.backgroundGrey {
    background: transparent;
}

/* ==========================================================================
   Standalone responsive pages (update address / contact details etc.)
   These pages reuse the shared legacy partials (addressform.tpl, ajaxapi.tpl)
   so the legacy structural classes are restyled here to match the
   Tailwind based checkout design.
   ========================================================================== */

/* ===== Page scaffold ===== */
body {
    background-color: #f9fafb;
    color: #111827;
    margin: 0;
}

.outer-page {
    min-height: 100vh;
}

.headertop {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

body:not(#shoppingCart) .headerinside {
    max-width: 80rem;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body:not(#shoppingCart) .headerRight {
    display: flex;
    align-items: center;
    gap: 8px;
}

#contentHolder.longContentHeader {
    max-width: 44rem;
    margin: 32px auto;
    padding: 0 16px;
}

/* page title */
#page > h1.title-bar {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 20px 0;
}

/* ===== Cards (login block / address block) ===== */
.blocAccount.outerBox {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 20px;
}

.outerBoxMarginTop {
    margin-top: 24px;
}

.blocAccount h2.title-bar {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 0 12px 0;
    margin: 0 0 16px 0;
}

.currentBloc.outerBoxPadding {
    padding: 0;
}

/* ===== Form rows ===== */
.top_gap {
    margin-top: 16px;
}

.formLine1 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.formLine1 label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.formLine1 img {
    width: 7px;
    height: 7px;
}

.formLine2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formLine2 input[type="text"],
.formLine2 input[type="email"],
.formLine2 input[type="tel"],
.formLine2 input[type="password"],
.formLine2 select,
select.text,
.wizard-dropdown select {
    width: 100%;
    max-width: 26rem;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    outline: none;
}

.formLine2 input:focus,
.formLine2 select:focus,
.wizard-dropdown select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.formLine2 input[readonly] {
    background-color: #f3f4f6;
    color: #6b7280;
}

.wizard-dropdown {
    width: 100%;
    max-width: 26rem;
}

/* mandatory / error markers: only shown by the validation javascript */
.error_form_image {
    display: none;
    width: 7px;
    height: 7px;
}

.gap-label-mandatory {
    display: inline-block;
    width: 12px;
    height: 1px;
}

/* validation highlight applied by highlight() */
.errorInput,
input.errorInput,
select.errorInput {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px #dc2626 !important;
}

/* ===== Password field widget ===== */
.password-input-wrap {
    width: 100%;
    max-width: 26rem;
}

.password-background {
    position: relative;
    display: flex;
    align-items: center;
}

/* mirrors .spc-input from tailwind.cart.css so the password field is the same
   control as every other input on the page - same height, radius and focus ring.
   the extra right padding leaves room for the show/hide button */
.password-background input {
    display: block;
    width: 100%;
    background-color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 8px 40px 8px 12px;
    color: #111827;
    font-size: 14px;
    line-height: 1.5rem;
    outline: none;
    box-shadow: inset 0 0 0 1px #d1d5db, 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.password-background input:focus {
    box-shadow: inset 0 0 0 2px #4f46e5, 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.password-visibility {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
}

.password-visibility:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 1px;
}

/* the meter is a hint belonging to the input above it, not a control in its own
   right, so it carries no panel chrome. the min-height reserves the caption line
   so the form does not shift as the strength text changes length */
.progress-wrap {
    margin-top: 8px;
}

/* the caption sits above the bar on the account page and below it on the new
   account / reset forms, so space the parts by adjacency rather than by side */
.progress-wrap > * + * {
    margin-top: 6px;
}

.progress-wrap p,
.password-strength-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 6px;
    min-height: 18px;
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

.progress-wrap p span,
.password-strength-label strong {
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}

.progress-wrap progress {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background-color: #e5e7eb;
}

.progress-wrap progress::-webkit-progress-bar {
    border-radius: 999px;
    background-color: #e5e7eb;
}

.progress-wrap progress::-webkit-progress-value {
    border-radius: 999px;
    background-color: #9ca3af;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.progress-wrap progress::-moz-progress-bar {
    border-radius: 999px;
    background-color: #9ca3af;
    transition: background-color 0.2s ease;
}

.progress-wrap[data-strength="1"] .password-strength-label strong,
.progress-wrap[data-strength="1"] p span {
    color: #b91c1c;
}

.progress-wrap[data-strength="1"] progress::-webkit-progress-value {
    background-color: #dc2626;
}

.progress-wrap[data-strength="1"] progress::-moz-progress-bar {
    background-color: #dc2626;
}

.progress-wrap[data-strength="2"] .password-strength-label strong,
.progress-wrap[data-strength="2"] p span {
    color: #c2410c;
}

.progress-wrap[data-strength="2"] progress::-webkit-progress-value {
    background-color: #f97316;
}

.progress-wrap[data-strength="2"] progress::-moz-progress-bar {
    background-color: #f97316;
}

.progress-wrap[data-strength="3"] .password-strength-label strong,
.progress-wrap[data-strength="3"] p span {
    color: #a16207;
}

.progress-wrap[data-strength="3"] progress::-webkit-progress-value {
    background-color: #eab308;
}

.progress-wrap[data-strength="3"] progress::-moz-progress-bar {
    background-color: #eab308;
}

.progress-wrap[data-strength="4"] .password-strength-label strong,
.progress-wrap[data-strength="4"] p span {
    color: #1d4ed8;
}

.progress-wrap[data-strength="4"] progress::-webkit-progress-value {
    background-color: #3b82f6;
}

.progress-wrap[data-strength="4"] progress::-moz-progress-bar {
    background-color: #3b82f6;
}

.progress-wrap[data-strength="5"] .password-strength-label strong,
.progress-wrap[data-strength="5"] p span {
    color: #15803d;
}

.progress-wrap[data-strength="5"] progress::-webkit-progress-value {
    background-color: #22c55e;
}

.progress-wrap[data-strength="5"] progress::-moz-progress-bar {
    background-color: #22c55e;
}

/* ===== Bottom action buttons ===== */
body:not(#shoppingCart) .buttonBottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 24px 0;
}

body:not(#shoppingCart) .buttonBottom .btnLeft {
    margin-right: auto;
}

body:not(#shoppingCart) .contentBtn {
    display: inline-block;
}

body:not(#shoppingCart) .contentBtn button {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s;
}

body:not(#shoppingCart) .contentBtn button.btn-green-middle {
    background-color: #4f46e5;
    color: #ffffff;
}

body:not(#shoppingCart) .contentBtn button.btn-green-middle:hover {
    background-color: #6366f1;
}

body:not(#shoppingCart) .contentBtn button.btn-red-middle,
body:not(#shoppingCart) .contentBtn button.btn-white-middle {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

body:not(#shoppingCart) .contentBtn button.btn-red-middle:hover {
    color: #dc2626;
    border-color: #dc2626;
}

body:not(#shoppingCart) .contentBtn button.btn-white-middle:hover {
    color: #4f46e5;
    border-color: #4f46e5;
}

/* ==========================================================================
   CART OVERLAY LADDER
   --------------------------------------------------------------------------
   Every overlay on the checkout page must pick a tier here. The markup carries
   tailwind z-40/z-50 utilities, which is all the cart tailwind build emits
   (webroot/css/tailwindcart.css has no z-60 upwards), so anything above tier 2
   is set from this sheet by id - an id beats the utility whatever the source
   order.

     30  sticky page chrome (#shoppingCart #header, .account-sticky-top) - the
                             logo bar, and on the account pages the title bar
                             with it, stay pinned while the window scrolls;
                             every overlay below sits above them
     40  backdrops for tier 1 (#shim, #shimLoading)
     50  tier 1 dialogs      (#loadingBox, #storeLocator, #ordersTermsAndCondtions,
                              #spcAddressModal, and the store info panel, which
                              is its own fixed z-50 wrapper inside the static
                              #storeInfo - it clears the locator on document
                              order, not on a higher tier)
     60  tier 2 dialogs      (#dialogOuter - the gateway lightbox - and
                              #componentChangeBox; both are positioned by legacy
                              javascript and open over a tier 1 dialog)
     70  #removeLineOverlay  (carries its own backdrop, opens over the page)
     80  #spcAlertShim
     90  #spcAlertDialog     - ALWAYS TOPMOST

   The alert tier is the rule that matters. window.alert is replaced by
   spcShowAlert (jobticket_responsive.tpl), so every message that used to be a
   native alert is now an element in the page, and a native alert is by
   definition on top of everything. It is raised *from* the dialog that is open
   - the gateway lightbox's own error handler is the common case - so a shared
   tier is not enough: it must outrank every other overlay or the message is
   painted behind the thing that raised it and the customer has to close that to
   read it (QA, 2026-09-11, Stripe blank-card submit).

   New overlay? Give it a tier above. Do not reach for a large number to win an
   argument with an unknown neighbour - that is what put #removeLineOverlay at
   10000 and left the alert with nothing it could sit above.

   This sheet is not the only writer. The legacy javascript in jobticket.tpl sets
   inline z-index, which beats any selector here: #storeLocator is dropped to 15
   while the store info panel is up and put back to 200 (closeStoreInfo) - 200 is
   above the alert, so under spc that restore writes its ladder tier instead;
   #paymentOptions is set to 999 but has no markup on the responsive page. Any
   new inline write has to be reconciled with the tiers above.
   ========================================================================== */

/* ===== Loading dialog + backdrop (hidden until shown by javascript) ===== */
#shimLoading,
#shim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(107, 114, 128, 0.75);
    z-index: 40;
}

/* Tier 3 - the validation / gateway message dialog. Topmost, see the ladder
   above. Its own backdrop rather than #shim so dismissing it cannot uncover a
   dialog that is still open underneath. */
#spcAlertShim {
    z-index: 80;
}

#spcAlertDialog {
    z-index: 90;
}

body:not(#shoppingCart) #loadingBox {
    display: none;
    position: fixed;
    z-index: 50;
    width: 300px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

body:not(#shoppingCart) #loadingBox .dialogTop {
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
}

body:not(#shoppingCart) #loadingBox .dialogTop h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

body:not(#shoppingCart) #loadingBox .content {
    padding: 32px;
    display: flex;
    justify-content: center;
}

/* bare labels in the dynamically loaded address rows (country / region) */
.currentBloc label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

#ajaxdiv select {
    margin: 4px 0;
}

/* ===== iOS focus zoom: do not let a text field fall below 16px =====
   Safari on iOS zooms the whole page in when a text field with a computed font
   size under 16px takes focus, and does not zoom back out when the field goes
   away - the projects page rename dialog left the list zoomed and cut off.

   Anchored on the body id on purpose: every responsive page renders
   body#body.tpx-account or body#shoppingCart, and the id lifts this rule above
   any field skin written as a chain of classes (.tpx-account
   .projectname_container input[type="text"] { font-size: 14px } used to win
   here). A skin may still set a smaller size on the desktop layout; below 640px
   this rule has the last word.
*/
@media (max-width: 639px) {
    body#shoppingCart input[type="text"],
    body#shoppingCart input[type="email"],
    body#shoppingCart input[type="tel"],
    body#shoppingCart input[type="number"],
    body#shoppingCart input[type="password"],
    body#shoppingCart input[type="search"],
    body#shoppingCart input[type="url"],
    body#shoppingCart input:not([type]),
    body#shoppingCart textarea,
    body#shoppingCart select,
    body#body.tpx-account input[type="text"],
    body#body.tpx-account input[type="email"],
    body#body.tpx-account input[type="tel"],
    body#body.tpx-account input[type="number"],
    body#body.tpx-account input[type="password"],
    body#body.tpx-account input[type="search"],
    body#body.tpx-account input[type="url"],
    body#body.tpx-account input:not([type]),
    body#body.tpx-account textarea,
    body#body.tpx-account select {
        font-size: 16px;
    }
}

/* ===== Waiting spinner on the confirm order button ===== */
#ordercontinuebutton {
    position: relative;
}

#ordercontinuebutton.waiting-spinner {
    color: transparent;
    pointer-events: none;
}

#ordercontinuebutton.waiting-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: rc-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Single page checkout (body#shoppingCart) specific styling
   ========================================================================== */

/* ===== Header: language picker on the right (shared by the single page
   checkout header and the standard account header) ===== */
.headerRight > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.headerRight .imgLanguage {
    width: 24px;
    height: 24px;
    color: #6b7280;
    flex-shrink: 0;
}

.headerRight select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    height: 42px;
    min-width: 148px;
    padding: 0 36px 0 12px;
    font-size: 14px;
    line-height: 1.25;
    background-color: #ffffff;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

/* ===== Legacy dialog family (createDialog / gateway lightbox) =====
   The javascript positions #dialogOuter with inline top/left/width, which
   requires it to be a fixed, hidden-by-default overlay card. */
#dialogOuter {
    display: none;
    position: fixed;
    z-index: 60;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

#dialogOuter .dialogTop {
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
}

#dialogOuter .dialogTitle {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

#dialogOuter .dialogContent {
    padding: 20px 24px;
    font-size: 14px;
    color: #374151;
    overflow-y: auto;
    max-height: 70vh;
}

#dialogOuter .dialogBtn,
#dialogOuter #dialogBtn {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#dialogOuter button,
#dialogOuter .contentBtn {
    cursor: pointer;
}

/* ===== Metadata forms (product options + additional information) ===== */
.metadataHolder .metadataItem {
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.metadataHolder .metadataItem:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.metadataHolder .metadatatitle label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

/* Popup-list and radio-group titles are bare text followed by an unclassed
   <img> asterisk (UtilsMetaData.php). Tailwind preflight makes img display:block,
   which pushed the star onto its own line; only .valueRequiredImg (single-line
   fields) was restored. Style the titles like the label and keep the star inline. */
.metadataHolder .metadatatitle,
.metadataHolder .metadatatitleRadio {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.metadataHolder .metadatatitle img,
.metadataHolder .metadatatitleRadio img {
    width: 7px;
    height: 7px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.metadataHolder .description,
.metadataHolder .descriptionRadio {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.metadataHolder .valueRequiredImg {
    width: 7px;
    height: 7px;
    display: inline-block;
}

/* inputs carry inline pixel widths from the legacy builder so they must be
   overridden to fit their container */
.metadataHolder input[type="text"],
.metadataHolder textarea,
.metadataHolder select {
    width: 100% !important;
    max-width: 30rem;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    outline: none;
}

.metadataHolder input[type="text"]:focus,
.metadataHolder textarea:focus,
.metadataHolder select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.metadataHolder input[disabled],
.metadataHolder textarea[disabled],
.metadataHolder select[disabled] {
    background-color: #f3f4f6;
    color: #6b7280;
}

/* the legacy builder emits textareas with huge rows attributes */
.metadataHolder textarea {
    height: 96px !important;
    resize: vertical;
}

/* checkbox rows */
.metadataHolder .metadatatitlecheckbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.metadataHolder .metadatatitlecheckbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    flex-shrink: 0;
    margin: 0;
}

.metadataHolder .metadatatitlecheckbox label {
    font-size: 13px;
    color: #374151;
}

/* ===== Metadata radio option lists (with or without swatch images) ===== */
.metadataHolder .radioBloc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.metadataHolder .radioBloc input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    flex-shrink: 0;
    margin: 0;
}

.metadataHolder .labelRadio {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: #374151;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.metadataHolder .radioImage {
    max-height: 45px;
    width: auto;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

.metadataHolder .legendMeta {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* ===== Shipping method list (Tailwind Plus panel radio group) ===== */
#shippingMethodsList li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s;
}

#shippingMethodsList li:hover {
    background-color: #f9fafb;
}

#shippingMethodsList li:has(input:checked) {
    background-color: #eef2ff;
    box-shadow: inset 3px 0 0 #4f46e5;
}

#shippingMethodsList li:has(input:checked):hover {
    background-color: #eef2ff;
}

#shippingMethodsList li input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

#shippingMethodsList li label {
    color: #111827;
    font-weight: 500;
    cursor: pointer;
}

#shippingMethodsList li:has(input:checked) label {
    color: #312e81;
}

#shippingMethodsList li label .addressCFS {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}

#shippingMethodsList .shippingRate {
    margin-left: auto;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
}

/* the select store action rendered inside a shipping method row */
#shippingMethodsList .contentBtn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-left: 6px;
}

#shippingMethodsList .contentBtn .btn-white-left,
#shippingMethodsList .contentBtn .btn-white-right {
    display: none;
}

#shippingMethodsList .contentBtn .btn-white-middle {
    color: #4f46e5;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 3px 12px;
    background-color: #ffffff;
    transition: background-color 0.15s;
}

#shippingMethodsList .contentBtn:hover .btn-white-middle {
    background-color: #eef2ff;
}

/* ==========================================================================
   Shared legacy dialog content (component change / store locator / store info)
   ========================================================================== */

/* the component change dialog is positioned by javascript so it must be a
   fixed overlay card (the store locator has its own tailwind card shell) */
#componentChangeBox {
    position: fixed;
    z-index: 60;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-width: calc(100vw - 32px);
}

/* dialog headers */
#componentChangeBox .dialogTop,
.dialogContentContainer .title-bar,
#componentChangeBox .title-bar {
    margin: 0;
}

#componentChangeBox .dialogTop {
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
}

#componentChangeBox .dialogTop .title-bar {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.dialogContentContainer {
    padding: 16px 24px;
}

.dialogContentContainer .content,
#componentChangeBox .content {
    overflow-y: auto;
}

h2.title-bar-inside {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 16px 0 8px 0;
}

.dialogContentContainer .message {
    color: #dc2626;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ==========================================================================
   Companion product offers ("Additional Items" section in the order line
   cards on the single page checkout). The show/hide mechanics and the error
   state are part of the legacy javascript contract (setCompanionQty flips the
   two containers with inline display and replaces the inCart li's innerHTML),
   so they are skinned here rather than with utilities.
   ========================================================================== */

/* whichever of the Add / qty-stepper containers is inactive carries this class
   (same convention as the legacy companion selection page) */
.companionOption .addBtnQtyContainer {
    display: none;
}

/* a drawn corner connector standing in for indentation alone: a line drops
   from the parent line item above and turns into the top of the companion
   card, reading as "child of" rather than just a nearby indented box. Lives
   on the wrapper, not the card, so the card's overflow-hidden can't clip it. */
.companionLineWrap {
    position: relative;
}

.companionLineWrap::before {
    content: '';
    position: absolute;
    /* -1.5rem matches the parent card's mb-6 exactly (Tailwind's mb-6 is
       1.5rem, not a fixed 24px) so this reaches precisely to the collapsed
       margin gap above regardless of the page's root font-size, rather than
       a hardcoded px guess that can overshoot into the parent card. */
    top: -1.5rem;
    left: -18px;
    width: 18px;
    /* 50% of the wrapper's own height (= the card's height, its only child)
       plus the 1.5rem reach above it, so the turn lands on the card's
       vertical centre however tall its content makes it. */
    height: calc(50% + 1.5rem);
    border-left: 2px solid #d1d5db;
    border-bottom: 2px solid #d1d5db;
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

/* invalid manual quantity entry */
input.companionQtyValue.error {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px #dc2626;
}

/* "N in your cart." confirmation under the stepper. The tick is ::before
   because the javascript replaces the li's innerHTML wholesale. */
.companionInCartMessage {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.companionInCartMessage li {
    font-size: 12px;
    font-weight: 500;
    color: #15803d;
    text-align: right;
}

.companionInCartMessage li::before {
    content: '\2713';
    margin-right: 4px;
}

/* ===== component previews in the change dialog ===== */
#previewHolderCart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 16px;
}

.previewItemHolder {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background-color: #ffffff;
}

.previewItemHolder.selected {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
    background-color: #eef2ff;
}

.previewItemHolder .componentPreviewWrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.previewItemHolder .previewItemImg {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.previewItemHolder .previewItemImg input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    margin: 0;
    flex-shrink: 0;
}

.previewItemHolder img.previewItemImg,
.previewItemHolder .previewItemImg img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #f3f4f6;
}

.previewItemHolder .previewItemText {
    display: block;
    min-width: 0;
}

.previewItemHolder .labelTitleComponent {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
}

.previewItemHolder .previewItemPrice {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.previewItemHolder .borderRadioStore {
    display: none;
}

/* the info toggle and description live under the row */
.previewItemHolder .imgInfo,
.contentStoreDetail .imgInfo {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: #9ca3af;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
}

.contentStoreDetail .imgInfo:hover {
    color: #4f46e5;
}

.previewItemHolder > .imgInfo::before,
.contentStoreDetail > .imgInfo:empty::before {
    content: 'ⓘ';
}

.imgInfo img.imgInfo,
.imgInfo svg.imgInfo {
    position: static;
    width: 16px;
    height: 16px;
}

/* descriptions start hidden; javascript toggles them */
.previewItemDescImg {
    display: none;
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
}

/* ===== dialog footer buttons (Tailwind Plus gray dialog footer) ===== */
.buttonBottomInside {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.buttonBottomInside .btnLeft {
    margin-right: auto;
}

.buttonBottomInside .btnLeft,
.buttonBottomInside .btnRight {
    display: flex;
    align-items: center;
}

.buttonBottomInside .contentBtn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* legacy three part buttons: hide the sprite end caps and style the middle */
.buttonBottomInside .btn-red-cross-left,
.buttonBottomInside .btn-red-right,
.buttonBottomInside .btn-red-left,
.buttonBottomInside .btn-green-left,
.buttonBottomInside .btn-accept-right,
.buttonBottomInside .btn-green-right,
.buttonBottomInside .btn-white-left,
.buttonBottomInside .btn-white-right {
    display: none;
}

.buttonBottomInside .btn-red-middle {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s;
}

.buttonBottomInside .contentBtn:hover .btn-red-middle {
    color: #dc2626;
    border-color: #fca5a5;
}

.buttonBottomInside .btn-green-middle,
.buttonBottomInside .btn-submit-green-middle {
    background-color: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}

.buttonBottomInside .contentBtn:hover .btn-green-middle,
.buttonBottomInside .btn-submit-green-middle:hover {
    background-color: #6366f1;
}

.buttonBottomInside .btn-white-middle {
    background-color: #ffffff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}

/* ===== store locator content ===== */
.contentFormStoreLocator .storeLogo {
    margin-bottom: 8px;
}

.contentFormStoreLocator .wizard-dropdown {
    margin-bottom: 10px;
}

.contentFormStoreLocator input#searchText,
.contentFormStoreLocator .storeInputLong {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

.contentFormStoreLocator input#searchText:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.contentFormStoreLocator .contentSearchText {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contentFormStoreLocator .contentSearchText .contentText {
    flex: 1;
}

.contentFormStoreLocator #searchButton .btn-white-middle {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
}

/* scrollable store list */
#storeListAjaxDiv {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.contentStoreDetail {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
}

.contentStoreDetail:last-child {
    border-bottom: none;
}

.contentStoreDetail.selected {
    background-color: #eef2ff;
}

.contentStoreDetail input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    margin-top: 2px;
    flex-shrink: 0;
}

.contentStoreDetail .textRadioStore {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #6b7280;
    padding-right: 24px;
}

.contentStoreDetail .textRadioStore b {
    color: #111827;
    font-size: 14px;
}

.contentStoreDetail .borderRadioStore {
    display: none;
}

.noStoresFound {
    padding: 16px;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

#map {
    width: 100%;
    height: 320px;
    border-radius: 10px;
}

/* the store locator card shell needs its own scroll if content is tall */
#storeLocator .contentStoreLocator {
    max-height: 70vh;
    overflow-y: auto;
}

/* ===== Sidebar panels (order summary / support) ===== */

/* rows: label left, value right (also emitted by the ajax summary update) */
.side-panel .contentDotted,
.side-panel .content,
#ordersummarypanel .contentDotted,
#ordersummarypanel .content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #e5e7eb;
}

.side-panel .content:last-child,
#ordersummarypanel .content {
    border-bottom: none;
}

.side-panel .contentDottedImage,
#ordersummarypanel .contentDottedImage {
    display: none;
}

.titleDetailPanel {
    color: #4b5563;
}

.titleDetailPanelBold {
    color: #111827;
    font-weight: 600;
}

.priceBold,
.order-line-price-panel {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.sidebaraccount_text a {
    color: #4f46e5;
    text-decoration: none;
}

.sidebaraccount_text a:hover {
    text-decoration: underline;
}

/* panel header: hide the legacy decorative sprite icon */
.side-panel .title-bar-panel img {
    display: none;
}

.side-panel .title-bar-panel {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

/* support panel card */
.contactPanel .side-panel.section {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

/* store locator: suppress the browser focus ring on the scroll container */
#storeListAjaxDiv:focus {
    outline: none;
}

/* the shell dialog already carries the title, hide the duplicated inner one */
#storeDetails > h2.title-bar-inside:first-of-type {
    display: none;
}

/* search row: label, input and search button on one line */
.contentFormStoreLocator .inputGap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
}

.contentFormStoreLocator .inputGap .contentSearchText {
    flex: 1;
}

.contentFormStoreLocator .contentSearchText label {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-right: 8px;
}

.contentFormStoreLocator .inputGap .btnRight {
    flex-shrink: 0;
}

/* country / region / store group selects in the locator */
.contentFormStoreLocator select {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    margin: 4px 0 10px 0;
}

.contentFormStoreLocator label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* ===== inline loading spinner for dialog content (store locator etc.) ===== */
.spc-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    color: #6b7280;
    font-size: 13px;
}

.spc-loading-spinner::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: rc-spin 0.7s linear infinite;
    flex-shrink: 0;
}


/* ===== Payment method list (PHP emitted rows) ===== */
#paymentMethodsList .paymentmethodlist {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
}

#paymentMethodsList .paymentmethodlist input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
    margin: 0;
    flex-shrink: 0;
}

#paymentMethodsList .paymentmethodlist label {
    color: #111827;
    font-weight: 500;
    cursor: pointer;
}

/* ==========================================================================
   Final stage pages (order confirmation / cancellation / pay later)
   These share a legacy layout: header + optional brand banner (#leftSidebar)
   + content. Lay them out as a proper two column page on desktop.
   ========================================================================== */

/* header on these pages uses the bare headerinside wrapper */
#shoppingCart .headertop {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

#shoppingCart .headertop .headerinside {
    max-width: 80rem;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#shoppingCart .outer-page > #contentHolder {
    max-width: 80rem;
    margin: 40px auto;
    padding: 0 24px;
    width: 100%;
}

/* brand marketing banner: hidden on small screens */
#shoppingCart .fullsize-outer-page > #leftSidebar {
    display: none;
}

@media (min-width: 1024px) {
    #shoppingCart .fullsize-outer-page {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        column-gap: 40px;
        align-content: start;
    }

    #shoppingCart .fullsize-outer-page > #header {
        grid-column: 1 / -1;
    }

    #shoppingCart .fullsize-outer-page > #leftSidebar {
        display: block;
        grid-column: 1;
        margin: 40px 0 40px 24px;
    }

    #shoppingCart .fullsize-outer-page > #leftSidebar img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    #shoppingCart .fullsize-outer-page > #contentHolder {
        grid-column: 2;
        margin: 40px auto;
        align-self: start;
    }
}

/* ===== Support / contact footer under the checkout actions ===== */
.spc-support-footer {
    margin: 8px 0 32px 0;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.spc-support-footer .side-panel {
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
}

.spc-support-footer .title-bar-panel {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280; /* was #9ca3af - 2.42:1, under AA */
    margin-bottom: 4px;
}

.spc-support-footer .side-panel .contentDotted,
.spc-support-footer .side-panel .content {
    justify-content: center;
    gap: 6px;
    border-bottom: none;
    padding: 2px 0;
    font-size: 13px;
}

/* ===== Checkout page grid =====
   The order summary sidebar lives inside #page between the shipping and
   payment cards, so on mobile the natural stacking order is:
   cart -> shipping -> summary / voucher -> payment -> confirm.
   On large screens the sidebar is placed in a right hand column so the
   desktop layout is unchanged. */
@media (min-width: 1024px) {
    #shoppingCart #page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        column-gap: 32px;
        align-items: start;
    }

    #shoppingCart #page > * {
        grid-column: 1;
        min-width: 0;
    }

    #shoppingCart #page > #side-outer-panel {
        grid-column: 2;
        grid-row: 1 / span 30;
    }

    /* On the single page checkout the payment card (totals, voucher / gift
       card redemption, payment methods, terms) is the right hand column - the
       order summary sidebar it replaced only renders on other stages. Sticky
       at its full natural height so it stays visible while the item list
       scrolls (no inner scrollbar; a card taller than the viewport simply
       extends below the fold). Its own mb-6 is kept so its bottom edge lines
       up with the left column cards (whose grid rows also end in mb-6). */
    #shoppingCart #page > .contentPaymentBloc {
        grid-column: 2;
        grid-row: 1 / span 30;
        position: sticky;
        /* below the sticky header (h-16 = 64px), not under it */
        top: calc(var(--spc-header-height) + 24px);
    }
}

/* ===== Payment gateway lightbox (createDialog + thirdPartyPaymentScreen) ===== */
#dialogOuter.thirdPartyPaymentScreen {
    width: min(600px, calc(100vw - 32px)) !important;
}

#dialogOuter.thirdPartyPaymentScreen.unlimit {
    top: 24px !important;
    height: calc(100vh - 48px);
}

#dialogOuter.thirdPartyPaymentScreen.unlimit .dialogContent {
    max-height: none;
    padding: 20px 24px 68px 24px;
    overflow: hidden;
    position: relative;
}

.unlimitFrame {
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    /* dialog is 100vh - 48px tall; subtract header, paddings and close row */
    height: calc(100vh - 190px);
    background-color: #f9fafb;
    border-radius: 8px;
}

/* close buttons: secondary button look for any gateway */
#dialogOuter button.cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s;
}

#dialogOuter button.cancel:hover {
    background-color: #f9fafb;
}

/* unlimit: close action pinned to the dialog footer */
#dialogOuter.unlimit .unlimitClose,
#dialogOuter.unlimit button.cancel {
    position: absolute;
    bottom: 16px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s;
}

#dialogOuter .unlimitClose:hover {
    background-color: #f9fafb;
}

/* ==========================================================================
   Third party payment gateways - lightbox styles
   Ported from csscustomer_large.css and adapted for the responsive checkout.
   ========================================================================== */

/* --- general: any gateway --- */
.thirdPartyPaymentScreen .dialogContent {
    overflow-y: auto;
}

.thirdPartyPaymentScreen .dialogContent h1 {
    font-weight: 700;
}

.thirdPartyPaymentScreen .col2 {
    flex: 50%;
}

.thirdPartyPaymentScreen .dialog-text p {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.thirdPartyPaymentScreen .dialog-text a {
    color: #4f46e5;
    cursor: pointer;
}

.thirdPartyPaymentScreen .dialog-text a:hover {
    text-decoration: underline;
}

.thirdPartyPaymentScreen button {
    background-color: #4f46e5;
    border: none;
    color: #ffffff;
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.thirdPartyPaymentScreen button:hover {
    background-color: #6366f1;
    cursor: pointer;
}

.thirdPartyPaymentScreen .actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.thirdPartyPaymentScreen .address {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: fit-content;
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: #f9fafb;
}

/* cancel links used by most gateway dialogs */
.thirdPartyPaymentScreen a.cancel {
    font-size: 15px;
    font-weight: 500;
    color: #4f46e5;
    cursor: pointer;
    text-align: center;
    display: block;
    padding-top: 18px;
}

.thirdPartyPaymentScreen a.cancel:hover {
    color: #6366f1;
}

/* --- Bancard / WeChat --- */
.thirdPartyPaymentScreen.bancard .dialog-text a,
.thirdPartyPaymentScreen.WeChat .dialog-text a {
    font-size: 14px;
}

.thirdPartyPaymentScreen.bancard .dialog-text,
.thirdPartyPaymentScreen.WeChat .dialog-text {
    text-align: center;
    padding-top: 10px;
}

.thirdPartyPaymentScreen.WeChat p.advice {
    font-size: 14px;
    margin: -10px 0 15px;
}

.thirdPartyPaymentScreen.WeChat .dialogContent {
    display: flex;
}

.thirdPartyPaymentScreen.WeChat .qr-code {
    text-align: center;
}

/* --- inline card element states (Unlimit / Stripe / Tap) --- */
.thirdPartyPaymentScreen.unlimit .unlimitElement,
.thirdPartyPaymentScreen.stripe .StripeElement {
    background-color: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #bdbdbd;
    transition: box-shadow 150ms ease;
}

.thirdPartyPaymentScreen.unlimit .unlimitElement--focus,
.thirdPartyPaymentScreen.stripe .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.thirdPartyPaymentScreen.unlimit .unlimitElement--invalid,
.thirdPartyPaymentScreen.stripe .StripeElement--invalid {
    border-color: #fa755a;
}

.thirdPartyPaymentScreen.unlimit .unlimitElement--webkit-autofill,
.thirdPartyPaymentScreen.stripe .StripeElement--webkit-autofill,
.thirdPartyPaymentScreen.tap .TapElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.thirdPartyPaymentScreen.unlimit .unlimit-button,
.thirdPartyPaymentScreen.stripe .stripe-button {
    box-shadow: none;
    padding: 0 12px 20px;
}

.thirdPartyPaymentScreen.unlimit .formWrap,
.thirdPartyPaymentScreen.stripe .formWrap,
.thirdPartyPaymentScreen.tap .formWrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    margin-top: 10px;
    padding: 20px;
}

.thirdPartyPaymentScreen.unlimit .formHeader,
.thirdPartyPaymentScreen.stripe .formHeader,
.thirdPartyPaymentScreen.tap .formHeader,
.thirdPartyPaymentScreen.paypal .formHeader {
    text-align: center;
    display: inline-block;
    background-color: #ffffff;
    margin-top: -28px;
    padding: 0 5px 7px;
    font-size: 14px;
    color: #374151;
}

.thirdPartyPaymentScreen.unlimit .form-row,
.thirdPartyPaymentScreen.stripe .form-row {
    text-align: left;
    font-size: 14px;
}

.thirdPartyPaymentScreen.unlimit label,
.thirdPartyPaymentScreen.stripe label {
    display: inline-block;
    margin-bottom: 7px;
    cursor: default;
}

.thirdPartyPaymentScreen.unlimit .card-element,
.thirdPartyPaymentScreen.stripe .card-element {
    margin-bottom: 20px;
}

.thirdPartyPaymentScreen.unlimit .error,
.thirdPartyPaymentScreen.stripe .error,
.thirdPartyPaymentScreen.tap #error-handler {
    color: #dc2626;
    padding-bottom: 20px;
}

/* --- Stripe / PayPal dialog geometry --- */
#dialogOuter.thirdPartyPaymentScreen.stripe {
    top: 24px !important;
    bottom: 24px !important;
    margin: auto 0;
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 48px);
}

#dialogOuter.thirdPartyPaymentScreen.paypal {
    margin: auto 0;
    display: flex !important;
    flex-direction: column;
}

.thirdPartyPaymentScreen.stripe .dialogContent,
.thirdPartyPaymentScreen.paypal .dialogContent,
.thirdPartyPaymentScreen.klarna .dialogContent {
    flex: 1;
    max-height: none;
}

#gpay-button-online-api-id {
    padding: inherit;
}

.thirdPartyPaymentScreen.paypal ul.form-row {
    margin: 0;
    padding: 0;
}

.thirdPartyPaymentScreen.paypal ul.form-row li {
    list-style: none;
    margin: 1em 0 1em 0;
}

.thirdPartyPaymentScreen.paypal #card-errors {
    margin: 1em 0;
}

.thirdPartyPaymentScreen.paypal #paypal-legal-container {
    margin: 1em 0;
}

.thirdPartyPaymentScreen.paypal #paypal-legal-container a {
    color: #4f46e5;
}

/* --- DIBS Easy --- */
#dialogOuter.thirdPartyPaymentScreen.dibs-easy {
    display: none;
    min-width: min(650px, calc(100vw - 32px));
}

.dibs-parent {
    z-index: 101;
    position: relative;
}

.dibs-checkout-wrapper {
    max-height: 600px;
    overflow: auto;
}

.thirdPartyPaymentScreen.dibs-easy div#dibs-please-wait {
    font-size: 15px;
    text-align: center;
    display: none;
    padding-top: 18px;
}

@media only screen and (max-width: 1280px) {
    .dibs-checkout-wrapper {
        max-height: 450px;
    }

    #dialogOuter.thirdPartyPaymentScreen.dibs-easy {
        max-height: 600px;
    }
}

/* --- Klarna --- */
#dialogOuter.thirdPartyPaymentScreen.klarna {
    top: 24px !important;
    height: calc(100vh - 48px);
    display: flex !important;
    flex-direction: column;
}

.thirdPartyPaymentScreen.klarna .dialogContent {
    padding: 10px 16px;
    position: relative;
    overflow-y: hidden;
}

.klarna-payments-container-wrap {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e7eb;
}

.klarna-button-wrap {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.thirdPartyPaymentScreen.klarna .radio-container {
    font-size: 15px;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 0;
    padding: 20px 70px 20px 12px;
    position: relative;
}

.thirdPartyPaymentScreen.klarna .radio-container .logo {
    position: absolute;
    right: 15px;
    top: 16px;
}

.thirdPartyPaymentScreen.klarna .collapsable-content {
    border: 1px solid #e5e7eb;
    border-bottom: none;
    overflow: hidden;
}

.thirdPartyPaymentScreen.klarna .hidden {
    display: none;
}

.thirdPartyPaymentScreen.klarna .collapsable-content.visible {
    display: block;
}

.collapsable-content-inner {
    padding: 20px;
    opacity: 0;
}

.thirdPartyPaymentScreen.klarna .collapsable-content.visible .collapsable-content-inner {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.thirdPartyPaymentScreen.klarna a.cancel {
    font-size: 14px;
    text-align: left;
    text-decoration: underline;
    margin-top: 10px;
    padding-top: 0;
}

/* --- gateway shims --- */
/* full page transparent shim while the gateway dialog is being prepared */
#shim.pageloading-shim {
    background: transparent;
}

/* loading shim covering the dialog content while the gateway loads */
.thirdPartyPaymentScreen .innerdialogshim {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 400;
}

.thirdPartyPaymentScreen .innerdialogshim::before {
    content: "";
    background-image: url('../images/loading-large.svg');
    background-repeat: no-repeat;
    background-size: 110px;
    display: inline-block;
    height: 110px;
    width: 110px;
    margin: -55px 0 0 -55px;
    top: 50%;
    left: 50%;
    position: absolute;
}

/* gateway lightboxes manage their own height / scrolling, so release the
   generic dialog content cap for all of them */
#dialogOuter.thirdPartyPaymentScreen .dialogContent {
    max-height: none;
}

/* ==========================================================================
   Login / customer account pages (RESPONSIVEACCOUNT=1, body.tpx-account)
   The account area reuses the legacy structural classes and element ids that
   customer/main.tpl javascript depends on, restyled here to match the
   Tailwind based checkout design.
   ========================================================================== */

/* ===== Page scaffold: content column + optional brand banner ===== */
.tpx-account .outer-page > #contentHolder {
    max-width: 80rem;
    margin: 32px auto;
    padding: 0 16px;
    width: 100%;
}

@media (min-width: 640px) {
    .tpx-account .outer-page > #contentHolder {
        padding: 0 24px;
    }
}

/* brand marketing banner (auth pages): hidden on small screens */
.tpx-account .fullsize-outer-page > #leftSidebar {
    display: none;
}

@media (min-width: 1280px) {
    /* Keep the sidebar artwork and auth content inside the same 80rem visual
       boundary as the header. The content track absorbs the reduced width. */
    .tpx-account .fullsize-outer-page {
        /* the header caps its content at 80rem and pads it by 24px either side,
           so the banner and the auth content have to share that same inner box.
           keep the maths in rem: the root font size is 14px, so 80rem is 1120px
           rather than 1280px, and hardcoded px track totals escape the header. */
        --auth-banner-width: 260px;
        --auth-banner-gap: 32px;
        --auth-inner-width: calc(80rem - 48px);
        display: grid;
        grid-template-columns:
            minmax(24px, 1fr)
            var(--auth-banner-width)
            var(--auth-banner-gap)
            minmax(0, calc(var(--auth-inner-width) - var(--auth-banner-width) - var(--auth-banner-gap)))
            minmax(24px, 1fr);
        align-content: start;
    }

    .tpx-account .fullsize-outer-page > #header {
        grid-column: 1 / -1;
    }

    .tpx-account .fullsize-outer-page > #leftSidebar {
        display: block;
        grid-column: 2;
        margin: 40px 0;
        align-self: start;
    }

    .tpx-account .fullsize-outer-page > #leftSidebar img {
        display: block;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 220px);
        object-fit: contain;
        object-position: top center;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .tpx-account .fullsize-outer-page > #contentHolder {
        grid-column: 4;
        width: auto;
        max-width: none;
        margin: 40px 0;
        padding: 0;
        align-self: start;
    }
}

/* ===== Modern login page ===== */
.tpx-login-page .login-page-holder,
.tpx-login-page .login-page-content,
.tpx-login-page .login-panel-wrap {
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
}

.tpx-login-page .login-page-content {
    padding: 24px 0;
}

.tpx-login-page .login-panel-wrap {
    max-width: 640px;
}

.tpx-login-page .login-panel-wrap.max-w-\[320px\] {
    max-width: 320px;
}

.tpx-login-page .login-card,
.tpx-login-page .login-secondary-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08);
}

.tpx-login-page .login-card-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.tpx-login-page .login-title {
    margin-bottom: 10px;
    font-size: 22px;
}

.tpx-login-page .login-subtitle {
    margin: 0 0 30px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.tpx-login-page .login-form .spc-label {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.tpx-login-page .login-form .spc-input,
.tpx-login-page .login-form .password-background input {
    height: 46px;
    border-radius: 10px;
    border-color: #d1d5db;
    padding-left: 14px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tpx-login-page .login-form .spc-input:focus,
.tpx-login-page .login-form .password-background input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.tpx-login-page #forgotPasswordLink {
    font-weight: 600;
}

.tpx-login-page .login-help {
    margin-top: 14px;
    text-align: center;
}

.tpx-login-page .login-help a,
.tpx-login-page .login-help button {
    font-size: 12px;
}

.tpx-login-page #loginButton,
.tpx-login-page #resetButton {
    min-height: 46px;
    border-radius: 10px !important;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tpx-login-page #loginButton:hover,
.tpx-login-page #resetButton:hover {
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.25);
    transform: translateY(-1px);
}

.tpx-login-page .login-secondary-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
}

.tpx-login-page .login-secondary-card-body ul {
    flex: 1;
}

.tpx-login-page #newCustomersHolder #backButton {
    min-height: 46px;
    border-radius: 10px;
    font-weight: 600;
}

@media (min-width: 1280px) {
    .tpx-login-page .fullsize-outer-page {
        /* narrower banner than the other auth pages - the content track absorbs
           the difference, so the outer boundary still matches the header */
        --auth-banner-width: 240px;
    }

    .tpx-login-page .fullsize-outer-page > #leftSidebar,
    .tpx-login-page .fullsize-outer-page > #contentHolder {
        margin-top: 32px;
        margin-bottom: 32px;
    }
}

/* ===== Messages (JS reveals #message when it has content) ===== */
.tpx-account .message {
    display: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    background-color: #fef2f2;
    color: #991b1b;
}

.tpx-account .message.confirmation {
    background-color: #f0fdf4;
    color: #166534;
}

/* dialogs display their own message container without the alert look */
.tpx-account .maw_dialog .message,
.tpx-account #confirmationBox .message {
    background: transparent;
    color: #374151;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
}

.tpx-account .informationContainer {
    margin-top: 12px;
    border-radius: 8px;
    background-color: #eff6ff;
    padding: 12px 14px;
}

.tpx-account .informationContainer .informationHeader {
    font-size: 13px;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 4px 0;
}

.tpx-account .informationContainer .informationMessage {
    font-size: 13px;
    color: #1e3a8a;
    margin: 0;
}

.tpx-account .warning-bar,
.tpx-account .purgeAllMessage {
    border-radius: 8px;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 12px 16px;
    font-size: 13px;
    margin: 0 0 16px 0;
}

.tpx-account .warning-bar a,
.tpx-account .purgeAllMessage a {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
}

.tpx-account .purgeAllMessage p {
    margin: 0;
}

/* ===== Password visibility icon (ported from the legacy stylesheet) ===== */
.password-visibility::after {
    content: '';
    display: block;
    height: 18px;
    width: 23px;
    background-image: url('../images/icons/password-hide-show.svg');
    background-repeat: no-repeat;
    background-size: 23px 36px;
    opacity: 0.6;
    transition: opacity 0.4s;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 0;
}

.password-visibility:hover::after {
    opacity: 0.8;
}

.password-show::after {
    background-position: 0 0;
}

.password-hide::after {
    background-position: 0px -18px;
}

.tpx-account progress {
    accent-color: #4f46e5;
}

/* ===== Account area navigation bar ===== */
.tpx-account-main .outer-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
}

.tpx-account-main .contentNavigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.tpx-account-main .navigation-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

@media (min-width: 640px) {
    .tpx-account-main .navigation-inner {
        padding: 10px 24px;
    }
}

.tpx-account-main .contentTextNavigation {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    min-width: 0;
    flex-wrap: wrap;
}

.tpx-account-main .contentTextNavigation a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 500;
}

.tpx-account-main .contentTextNavigation a:hover {
    color: #4f46e5;
}

.tpx-account-main .contentTextNavigation .current-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111827;
    font-weight: 600;
}

.tpx-account-main .nav-home-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tpx-account-main .nav-separator {
    width: 12px;
    height: 12px;
    color: #d1d5db;
    flex-shrink: 0;
}

.tpx-account-main .btnLogOut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 12px;
    background-color: #ffffff;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tpx-account-main .btnLogOut:hover {
    color: #4f46e5;
    border-color: #4f46e5;
}

.tpx-account-main .nav-signout-icon {
    width: 16px;
    height: 16px;
}

/* ===== Main column + side panel grid ===== */
.tpx-account .account-main-column {
    min-width: 0;
    width: 100% !important;
}

.tpx-account-main #pageFooterHolder,
.tpx-account-main #page,
.tpx-account-main .contentMenu,
.tpx-account .account-menu-grid {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Override the legacy desktop stylesheet's fixed 800px content holder and
   790px page card on responsive account pages. */
.tpx-account-main #contentScroll > #contentHolder {
    float: none;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .tpx-account-main #contentHolder.has-side-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 32px;
        align-items: start;
    }
}

.tpx-account-main .side-outer-panel {
    margin-top: 24px;
}

@media (min-width: 1024px) {
    .tpx-account-main .side-outer-panel {
        margin-top: 0;
    }
}

/* ===== Side panels (account balance / gift card / support / redaction) ===== */
.tpx-account-main .side-outer-panel .side-panel {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(17, 24, 39, 0.05);
    padding: 20px;
    margin-bottom: 16px;
}

.tpx-account-main .side-panel .title-bar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin: 0 0 12px 0;
}

.tpx-account-main .side-panel .title-bar-panel img {
    width: 20px;
    height: 20px;
    opacity: 0.6;
}

.tpx-account-main .side-panel .contentDotted,
.tpx-account-main .side-panel .content {
    padding: 4px 0;
    font-size: 13px;
    color: #374151;
}

.tpx-account-main .side-panel .contentDottedImage {
    display: none;
}

.tpx-account-main .side-panel .titleDetailPanel {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
}

.tpx-account-main .side-panel .priceBold {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.tpx-account-main .side-panel .sidebaraccount_gap {
    margin-bottom: 8px;
}

.tpx-account .account-balances-panel .title-bar-panel {
    margin-bottom: 0;
}

.tpx-account-main .balance-list {
    display: flex;
    flex-direction: column;
}

.tpx-account-main .balance-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}

.tpx-account-main .balance-row .titleDetailPanel {
    margin: 0;
    font-size: 13px;
}

.tpx-account-main .balance-row .priceBold {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tpx-account-main .gift-card-redemption summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 0;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.tpx-account-main .gift-card-redemption summary::-webkit-details-marker {
    display: none;
}

.tpx-account-main .gift-card-redemption summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.15s;
}

.tpx-account-main .gift-card-redemption[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.tpx-account-main .gift-card-redemption-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    padding-top: 12px;
}

.tpx-account-main .side-panel .inputGiftCard {
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    outline: none;
    text-transform: uppercase;
}

.tpx-account-main .gift-card-redemption-form #setGiftCardButton {
    min-height: 40px;
    margin: 0;
}

.tpx-account-main .side-panel .inputGiftCard:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.tpx-account-main .side-panel .align-right {
    display: flex;
    justify-content: flex-end;
}

.tpx-account-main .side-panel a {
    color: #4f46e5;
    font-weight: 500;
    text-decoration: none;
}

.tpx-account-main .side-panel a:hover {
    color: #6366f1;
}

/* additional information footer block */
.tpx-account #footer {
    margin-top: 24px;
    font-size: 13px;
    color: #6b7280;
}

.tpx-account #footer .title-bar {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    margin: 0 0 8px 0;
}

/* ===== Page heading / card content ===== */
.tpx-account .account-page-title {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.tpx-account .account-page-identity {
    margin: 4px 0 20px;
    color: #6b7280;
    font-size: 14px;
}

.tpx-account-main #page > .content {
    background: transparent;
}

.tpx-account .account-section {
    margin-bottom: 0;
}

/* ===== Responsive account details form ===== */
.tpx-account .account-contact-grid,
.tpx-account .account-address-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 20px;
}

@media (min-width: 768px) {
    .tpx-account .account-contact-grid,
    .tpx-account .account-address-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tpx-account .account-form-field,
.tpx-account .account-address-grid > div {
    min-width: 0;
}

.tpx-account .account-contact-grid .formLine2 input,
.tpx-account .account-address-grid .formLine2 input,
.tpx-account .account-address-grid .formLine2 select,
.tpx-account .account-address-grid .wizard-dropdown {
    width: 100%;
    max-width: none;
}

.tpx-account .account-contact-grid .formLine2 input,
.tpx-account .account-address-grid .formLine2 input,
.tpx-account .account-address-grid .formLine2 select {
    height: 42px;
    box-sizing: border-box;
}

.tpx-account .account-address-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.tpx-account .account-address-section > h3 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

.tpx-account .account-address-grid > .top_gap {
    margin-top: 0;
}

.tpx-account-main #ajaxdiv.account-address-grid:not(:empty) {
    margin-top: 0;
}

@media (min-width: 768px) {
    .tpx-account .account-address-grid > div:has(#countrylist),
    .tpx-account .account-address-grid > div:has(#country),
    .tpx-account .account-address-grid > div:has(#maincompanyname),
    .tpx-account .account-address-grid > div:has(#mainaddress1),
    .tpx-account .account-address-grid > div:has(.informationContainer) {
        grid-column: 1 / -1;
    }
}

.tpx-account .account-contact-grid .informationContainer {
    margin-top: 10px;
}

.tpx-account #ajaxdiv:not(:empty) {
    margin-top: 16px;
}

/* ===== Legacy composite buttons =====
   The javascript swaps the sprite class names (btn-green-* / btn-white-* /
   btn-disabled-*) on the left / middle / right parts, so the container is
   styled as the button and the sprite side parts are hidden. Containers with
   a real <button> child keep the standalone-page button styling instead. */
.tpx-account .contentBtn:not(:has(> button)),
.tpx-account .online-buttons,
.tpx-account .yourOrderActionButton,
.tpx-account .browserPreviewButton,
.tpx-account .deleteOrderButton,
.tpx-account #executePayNowButton,
.tpx-account .browserConfirmContentBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

/* neutralise the sprite parts: middles become plain text */
.tpx-account .btn-green-middle,
.tpx-account .btn-red-middle,
.tpx-account .btn-white-middle,
.tpx-account .btn-blue-middle,
.tpx-account .btn-disabled-middle,
.tpx-account .btn-submit-green-middle {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    height: auto;
    line-height: inherit;
}

.tpx-account .btnOnlineMiddle span {
    font: inherit;
    color: inherit;
}

/* hide the sprite ends */
.tpx-account .btn-green-left,
.tpx-account .btn-green-right,
.tpx-account .btn-green-arrow-right,
.tpx-account .btn-accept-right,
.tpx-account .btn-red-left,
.tpx-account .btn-red-right,
.tpx-account .btn-red-cross-left,
.tpx-account .btn-white-left,
.tpx-account .btn-white-right,
.tpx-account .btn-blue-left,
.tpx-account .btn-blue-right,
.tpx-account .btn-blue-arrow-left,
.tpx-account .btn-blue-account-right,
.tpx-account .btn-disabled-left,
.tpx-account .btn-disabled-right,
.tpx-account .btn-disabled-right-tick {
    display: none;
    width: auto;
    height: auto;
    background: none;
}

/* icon-only buttons (sprite pair with no middle) get a glyph */
.tpx-account .btn-green-left:first-child:nth-last-child(2),
.tpx-account .btn-red-cross-left:first-child:nth-last-child(2),
.tpx-account .btn-blue-left:first-child:nth-last-child(2) {
    display: block;
}

.tpx-account .btn-green-left:first-child:nth-last-child(2)::before {
    content: 'OK';
}

.tpx-account .btn-blue-left:first-child:nth-last-child(2)::before {
    content: '\2715';
}

.tpx-account .btn-red-cross-left:first-child:nth-last-child(2)::before {
    content: '\2715';
}

/* colour states, driven by which sprite middle the javascript has applied */
.tpx-account .contentBtn:not(:has(> button)):has(.btn-green-middle),
.tpx-account .contentBtn:not(:has(> button)):has(.btn-submit-green-middle),
.tpx-account .contentBtn:not(:has(> button)):has(.btn-green-left:first-child:nth-last-child(2)),
.tpx-account .online-buttons:has(.btn-green-middle),
.tpx-account #executePayNowButton,
.tpx-account .browserConfirmContentBtn {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.tpx-account .contentBtn:not(:has(> button)):has(.btn-green-middle):hover,
.tpx-account .contentBtn:not(:has(> button)):has(.btn-submit-green-middle):hover,
.tpx-account .contentBtn:not(:has(> button)):has(.btn-green-left:first-child:nth-last-child(2)):hover,
.tpx-account .online-buttons:has(.btn-green-middle):hover,
.tpx-account #executePayNowButton:hover,
.tpx-account .browserConfirmContentBtn:hover {
    background-color: #6366f1;
    border-color: #6366f1;
}

.tpx-account .yourOrderActionButton:has(.btn-green-middle) {
    background-color: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.tpx-account .yourOrderActionButton:has(.btn-green-middle):hover {
    background-color: #6366f1;
    border-color: #6366f1;
}

.tpx-account .contentBtn:not(:has(> button)):has(.btn-red-middle):hover,
.tpx-account .deleteOrderButton:hover {
    color: #dc2626;
    border-color: #dc2626;
}

.tpx-account .contentBtn:not(:has(> button)):has(.btn-white-middle):hover,
.tpx-account .contentBtn:not(:has(> button)):has(.btn-blue-middle):hover,
.tpx-account .yourOrderActionButton:hover,
.tpx-account .browserPreviewButton:hover,
.tpx-account .online-buttons:has(.btn-white-middle):hover,
.tpx-account .online-buttons:has(.btn-blue-middle):hover {
    color: #4f46e5;
    border-color: #4f46e5;
}

.tpx-account .online-buttons:has(.btn-disabled-middle) {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: default;
}

.tpx-account .online-buttons:has(.btn-disabled-middle):hover {
    color: #9ca3af;
    border-color: #e5e7eb;
}

.tpx-account .contentBtn:not(:has(> button)):has(.btn-disabled-middle) {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: default;
}

/* ===== Account menu tiles ===== */
.tpx-account .account-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .tpx-account .account-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.tpx-account .menuItem {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.tpx-account .menuItem:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12);
    transform: translateY(-1px);
}

.tpx-account .menuItem .menuActionButton {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 18px;
    text-decoration: none;
    text-align: left;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
}

.tpx-account .menuItem .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #4f46e5;
    background-color: #eef2ff;
    flex-shrink: 0;
}

.tpx-account .menuItem .menu-icon svg {
    width: 23px;
    height: 23px;
}

.tpx-account .menuItem .menu-label {
    flex: 1;
    min-width: 0;
}

.tpx-account .menuItem .menu-chevron {
    width: 18px;
    height: 18px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}

.tpx-account .menuItem:hover .menu-chevron {
    color: #4f46e5;
    transform: translateX(2px);
}

/* ===== Orders / projects lists ===== */
.tpx-account .contentRow {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.tpx-account .projectlist .contentRow {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tpx-account .projectlist .contentRow:hover {
    border-color: #c7d2fe;
}

.tpx-account .projectlist .contentRow.selectedRow {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
    background-color: #eef2ff;
}

#existingOnlineProjectList {
    height: auto !important;
    max-height: min(62vh, 720px);
    overflow-y: auto;
    padding: 2px;
}

.tpx-account .title-bar-current {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    padding: 0;
}

.tpx-account .title-bar-current.warning-status {
    color: #b45309;
}

.tpx-account .currentBlocRow {
    margin-bottom: 24px;
}

.tpx-account .order-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.tpx-account .order-details .order-number {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.tpx-account .previewHolder {
    padding: 6px 0;
}

.tpx-account .previewItem {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tpx-account .product-preview-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background-color: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .tpx-account .product-preview-wrap {
        width: 96px;
        height: 96px;
    }
}

.tpx-account .product-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tpx-account .previewItemText {
    flex: 1;
    min-width: 0;
}

.tpx-account .textProduct {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    overflow-wrap: anywhere;
}

.tpx-account .contentDescription {
    margin-top: 2px;
}

.tpx-account .description-product {
    font-size: 13px;
    color: #374151;
}

.tpx-account .ordernumber {
    font-size: 12px;
    color: #6b7280;
}

.tpx-account .label-order-number,
.tpx-account .label-purge-date {
    font-weight: 500;
}

.tpx-account .dateofpurge {
    font-size: 12px;
    color: #b45309;
    margin: 2px 0;
}

.tpx-account .keepProjectLink {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.tpx-account .descriptionStatus {
    margin-top: 6px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tpx-account .previewItemDetail {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    background-color: #f3f4f6;
}

.tpx-account .previewItemDetail:empty {
    display: none;
}

.tpx-account .textRed {
    color: #b91c1c;
}

.tpx-account span.previewItemDetail.textRed {
    background-color: #fef2f2;
}

.tpx-account .textGreen {
    color: #15803d;
}

.tpx-account span.previewItemDetail.textGreen {
    background-color: #f0fdf4;
}

.tpx-account .textBlue {
    color: #1d4ed8;
}

.tpx-account span.previewItemDetail.textBlue {
    background-color: #eff6ff;
}

.tpx-account .textOrange {
    color: #c2410c;
}

.tpx-account .paymentstatus {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.tpx-account .descriptionPrice {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.tpx-account .descriptionPrice:empty {
    display: none;
}

.tpx-account .btnLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tpx-account .mulitLineSubTotal {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
    margin-top: 10px;
}

.tpx-account .online-production-status {
    margin-top: 6px;
    font-size: 12px;
}

.tpx-account .emptyBox {
    background-color: #ffffff;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

/* ===== Online projects page header ===== */
.tpx-account .onlineproject-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.tpx-account .onlineproject-page-header .spc-card-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    transition: all 0.15s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.tpx-account .onlineproject-page-header .spc-card-back-link:hover {
    background: #f3f4f6;
    color: #111827;
    border-color: #d1d5db;
}

.tpx-account .onlineproject-page-header .spc-card-back-chevron {
    width: 16px;
    height: 16px;
}

.tpx-account .onlineproject-page-header .onlineproject-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* projects action bar & mobile dock */
.tpx-account .onlineproject-dock-spacer {
    display: none;
}

.tpx-account .onlineproject-scrim {
    display: none;
}

.tpx-account .onlineproject-sheet-grabber {
    display: none;
}

.tpx-account .onlineproject-sheet-header {
    display: none;
}

.tpx-account .onlineproject-actions-container {
    width: 100%;
}

.tpx-account .onlineproject-desktop-back {
    margin: 16px 0 0 0;
}

.tpx-account .onlineproject_btnLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}



/* Primary Action Hero Styling: Continue Editing */
.tpx-account .online-buttons#editBtn:has(.btn-blue-middle) {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.35);
}

.tpx-account .online-buttons#editBtn:has(.btn-blue-middle):hover {
    background-color: #4338ca !important;
    border-color: #4338ca !important;
    color: #ffffff !important;
}

/* Complete Order: Green when active */
.tpx-account .online-buttons#completeBtn:has(.btn-green-middle) {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35);
}

.tpx-account .online-buttons#completeBtn:has(.btn-green-middle):hover {
    background-color: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

/* Delete button styling */
.tpx-account .online-buttons#deleteBtn:has(.deleteBtnText) {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    background-color: #ffffff !important;
}

.tpx-account .online-buttons#deleteBtn:has(.deleteBtnText):hover {
    color: #b91c1c !important;
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

@media (max-width: 639px) {
    /* Full height for project list on mobile. The budget is what sits above the
       list and stays put: the sticky logo + title bars (~122px on the default
       brand) plus the card's own header and padding (~87px), so the list's
       bottom edge lands on the fold and the window itself never has to scroll -
       the list is the only thing that scrolls. Measured 2026-09-16. */
    #existingOnlineProjectList {
        max-height: calc(100vh - 220px);
        max-height: calc(100dvh - 220px);
        min-height: 160px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .tpx-account .projectlist .contentRow {
        padding: 12px 14px;
        margin-bottom: 10px;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    }

    .tpx-account .projectlist .contentRow:active {
        transform: scale(0.99);
    }

    /* Dimmed backdrop / scrim */
    .tpx-account .onlineproject-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .tpx-account .onlineproject-scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Slide-up Action Sheet */
    .tpx-account .onlineproject-actions-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.18), 0 -4px 10px rgba(0, 0, 0, 0.08);
        padding: 8px 16px 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
        z-index: 100;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-sizing: border-box;
    }

    .tpx-account .onlineproject-actions-container.is-open {
        transform: translateY(0);
    }

    /* Grabber bar */
    .tpx-account .onlineproject-sheet-grabber {
        display: block;
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background-color: #d1d5db;
        margin: 2px auto 6px;
        flex-shrink: 0;
    }

    /* Sheet Header with title & close button */
    .tpx-account .onlineproject-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 2px 0 10px;
        border-bottom: 1px solid #f3f4f6;
    }

    .tpx-account .onlineproject-sheet-title-wrap {
        min-width: 0;
        flex: 1;
    }

    .tpx-account .onlineproject-sheet-label {
        display: block;
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6b7280;
        margin-bottom: 2px;
    }

    .tpx-account .onlineproject-sheet-title {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tpx-account .onlineproject-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #f3f4f6;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background-color 0.15s, color 0.15s;
    }

    .tpx-account .onlineproject-sheet-close:hover {
        background: #e5e7eb;
        color: #111827;
    }

    .tpx-account .onlineproject-actions-container .onlineproject_btnLinks {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        width: 100%;
        box-sizing: border-box;
    }

    .tpx-account .onlineproject-actions-container .online-buttons {
        font-size: 12px;
        line-height: 1.25;
        border-radius: 8px;
        box-sizing: border-box;
        text-align: center;
        gap: 5px;
    }

    /* Row 1: Primary actions */
    .tpx-account .onlineproject-actions-container #completeBtn,
    .tpx-account .onlineproject-actions-container #editBtn {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
        height: 40px;
        padding: 8px 10px;
        font-size: 13.5px;
        font-weight: 600;
        border-radius: 10px;
    }

    /* Row 2: Secondary actions */
    .tpx-account .onlineproject-actions-container #duplicateBtn,
    .tpx-account .onlineproject-actions-container #renameBtn,
    .tpx-account .onlineproject-actions-container #shareBtn,
    .tpx-account .onlineproject-actions-container #deleteBtn {
        flex: 1 1 calc(25% - 6px);
        min-width: 65px;
        height: 34px;
        padding: 6px 4px;
        font-size: 12px;
        border-radius: 8px;
    }

    /* Hide the bottom Back button on mobile */
    .tpx-account .onlineproject-desktop-back {
        display: none !important;
    }
}

.tpx-account #browserNotSupported {
    width: 100%;
    border-radius: 8px;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 10px 14px;
    font-size: 13px;
}

/* ===== Dialog family (positioned by the legacy javascript) ===== */
.tpx-account #confirmationBox,
.tpx-account #redactConfirmBox,
.tpx-account #dialogBox,
.tpx-account #dialogBoxOnlineAction,
.tpx-account #browserConfirmBox,
.tpx-account #ordersTermsAndCondtions,
.tpx-account .tpxSimpleDialog {
    display: none;
    position: fixed;
    z-index: 250;
    width: min(440px, calc(100vw - 32px));
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}

.tpx-account #dialogBox {
    width: min(760px, calc(100vw - 32px));
}

.tpx-account #ordersTermsAndCondtions {
    width: min(640px, calc(100vw - 32px));
}

/* #dialogOuter hosts showConfirmDialog()/showErrorDialog() - the delete-order
   confirmation among them - and the unscoped rule above puts it at 60, under
   every tier the legacy javascript raises #shim to. Nothing resets the shim's
   inline z-index (closeConfirmationBox leaves 200, closeDialog only hides it),
   so on a fresh page load the dialog wins at 60 over the shim's CSS 40, and
   after any confirmation cycle the same dialog opens *behind* the shim. Legacy
   sits it at 1001, above even the loading box; keep that order here. */
.tpx-account #dialogOuter {
    z-index: 310;
}

/* The legacy javascript works in three tiers and writes the middle one inline:
   a first-level dialog sits at 200, showConfirmationBox()'s callers raise #shim
   to 250 (shareByEmail) or 201 (renameExistingOnlineProject) so the backdrop
   covers that dialog, and the result box lands at 300 on top of the backdrop.
   Collapsing the family into one tier ties the dialog with the shim, which the
   dialog then wins on document order - the box behind the confirmation stays
   live and you can fire the same action again. Keep the tiers apart. */
.tpx-account #dialogBox,
.tpx-account #dialogBoxOnlineAction {
    z-index: 200;
}

.tpx-account #confirmationBox,
.tpx-account #redactConfirmBox,
.tpx-account .tpxSimpleDialog {
    z-index: 300;
}

/* The loading dialog's backdrop never had an account tier - unscoped it is the
   cart's 40, which is right there and under every dialog here. 202 is legacy's
   value (csscustomer_large.css): above a first-level dialog at 200, below the
   loading box itself. The box's own tier is further down this sheet, and see the
   note there for why it was not taking effect. */
.tpx-account #shimLoading {
    z-index: 202;
}

.tpx-account .dialogTop {
    padding: 14px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.tpx-account .dialogTop .title-bar {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.tpx-account #confirmationBox .content,
.tpx-account #redactConfirmBox .content,
.tpx-account #dialogBoxOnlineAction .content,
.tpx-account .tpxSimpleDialog .content {
    padding: 20px 24px;
    font-size: 14px;
    color: #374151;
}

.tpx-account #dialogBox .dialogContentContainer {
    max-height: min(60vh, 480px);
    overflow-y: auto;
}

.tpx-account #dialogBox .content {
    padding: 16px 24px;
}

.tpx-account .title-bar-inside {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 12px 0 8px 0;
}

.tpx-account .buttonShare {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
}

.tpx-account .buttonShare .btnLeft {
    margin-right: auto;
}

/* the javascript toggles these holders with inline display:block / none, so
   the left / right buttons are floated rather than laid out with flex */
.tpx-account .buttonBottomInside {
    padding-top: 16px;
}

.tpx-account #confirmationBox .content > .buttonBottomInside,
.tpx-account #redactConfirmBox .content > .buttonBottomInside,
.tpx-account #dialogBoxOnlineAction .content > .buttonBottomInside,
.tpx-account .tpxSimpleDialog .content > .buttonBottomInside {
    margin: 20px -24px -20px;
}

.tpx-account .buttonBottomInside::after {
    content: '';
    display: block;
    clear: both;
}

.tpx-account .buttonBottomInside .btnLeft {
    float: left;
}

.tpx-account .buttonBottomInside .btnRight {
    float: right;
}

.tpx-account #dialogBox .buttonShare {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.tpx-account .browserConfirmContent {
    padding: 20px 24px;
    font-size: 14px;
    color: #374151;
}

.tpx-account #browserConfirmBox .btnRight {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px 16px 24px;
}

.tpx-account .confirmationText {
    font-size: 14px;
    color: #374151;
}

.tpx-account .projectname_container label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.tpx-account .projectname_container input[type="text"] {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    outline: none;
}

.tpx-account .projectname_container input[type="text"]:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

/* terms and conditions dialog content */
.tpx-account .contentTermsAndConditions {
    padding: 16px 24px;
    max-height: 55vh;
    overflow-y: auto;
    font-size: 13px;
    color: #374151;
}

.tpx-account #ordersTermsAndCondtions .buttonBottomInside {
    padding: 12px 24px;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

/* share dialog internals */
.tpx-account .shareContent {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tpx-account .shareContentLeft {
    flex-shrink: 0;
}

/* one row per share method, so the logo sits beside its radio instead of wrapping
   underneath it */
.tpx-account .shareMethodOption {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpx-account .shareMethodOption + .shareMethodOption {
    margin-top: 14px;
}

.tpx-account .shareMethodOption input[type="radio"] {
    margin: 0;
    flex-shrink: 0;
}

.tpx-account .shareMethodOption label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.tpx-account .shareMethodOption label img {
    display: block;
}

/* AddToAny ships its compact menu at a fixed 300px, which is two services across, and
   the container shrink wraps it - so the services grid stayed narrow no matter how wide
   the dialog got. Letting both fill the dialog puts the tiles back to four across, the
   layout these have always been read in. */
.tpx-account #a2a_menu_container {
    display: block;
    width: 100%;
}

.tpx-account #a2a_menu_container .a2a_menu.a2a_mini {
    width: 100% !important;
    max-width: 100% !important;
}

/* AddToAny's select-covering shim iframe carries its own z-index; the legacy sheet
   pins it just under the first-level dialog tier so it cannot cover the services
   grid it is meant to sit behind. */
.tpx-account iframe.a2a_shim {
    z-index: 199 !important;
}

.tpx-account .shareContentRight {
    flex: 1;
    min-width: 220px;
}

/* ===== Share link dialog =====
   showShareProjectDialogLarge() builds its content into #simpleDialog, and none
   of the legacy .sharelink_* / .tip-popout rules were carried over. Without them
   the label sits inline against a default-width unstyled input, so the link
   reads as truncated mid-character (the value is the full url - the box is just
   ~177px), and the "copied" toast, which is meant to be a hidden popout flashed
   by flashTooltip(), renders as permanent body copy. A share url is ~109 chars
   (domain + '?fsaction=OnlineAPI.previewSharedProject&ref2=' + a 32-char hash),
   which no 440px dialog can show, so this one gets the share dialog's 760px and
   a 12px field - together that clears ~116 chars, the whole url with headroom
   for a longer branded domain. Beyond that it still scrolls, and Copy link has
   always copied the full value either way. */
.tpx-account .tpxSimpleDialog:has(.sharelink_link_container) {
    width: min(760px, calc(100vw - 32px));
}

.tpx-account .sharelink_link_container label {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    font-size: 13px;
    color: #374151;
}

.tpx-account .sharelink_link_container input[type="text"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #111827;
    outline: none;
}

.tpx-account .sharelink_link_container input[type="text"]:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

/* flashTooltip() adds .tip-popout-visible to run the fade, so the resting state
   has to be invisible and out of flow */
.tpx-account .tip-popout {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 56px;
    width: auto;
    margin: 0 auto;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.tpx-account .tip-popout p {
    display: inline-block;
    margin: 0;
    background: rgba(17, 24, 39, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #ffffff;
}

.tpx-account .tip-popout-visible {
    animation: popoutFade 4s;
}

@keyframes popoutFade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    /* visibility is a discrete property, so it flips at the midpoint between the
       keyframes that set it - naming it here again moves that flip to 90% and
       lets the opacity fade actually play out (the legacy keyframes set it only
       at 0% and 100%, so the toast blinked out at 2s of its 4s) */
    80% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.tpx-account #dialogBox label {
    font-size: 13px;
    color: #374151;
}

.tpx-account #dialogBox input[type="text"],
.tpx-account #dialogBox textarea {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #111827;
    outline: none;
    margin-top: 4px;
}

.tpx-account #dialogBox input[type="text"]:focus,
.tpx-account #dialogBox textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 1px #4f46e5;
}

.tpx-account #dialogBox .passwordProtectionCheckBoxBloc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.tpx-account #dialogBox .note {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 10px;
}

.tpx-account #dialogBox .note img,
.tpx-account #dialogBox .imgMessage {
    width: 7px;
    height: 7px;
}

/* simple dialog (TPXSimpleDialog template) */
.tpx-account .tpxSimpleDialog .tpxSimpleDialogMessage {
    font-size: 14px;
    color: #374151;
}

/* Loading dialog on the account pages (matches the standalone page rules).
   The selector carries :not(#shoppingCart) only to out-specify
   `body:not(#shoppingCart) #loadingBox` higher up this sheet - :not() lends its
   argument's specificity, so that one counts TWO ids and was silently winning,
   holding this box at the cart's tier 50. Under every account dialog, that is:
   duplicateProject() and renameExistingOnlineProject() raise the loading dialog
   while #dialogBoxOnlineAction (200) is still open, so "Duplicating project..."
   was painted invisibly behind the name form. 260 clears the first-level dialogs
   and stays under #confirmationBox (300) and #dialogOuter (310). */
body:not(#shoppingCart).tpx-account #loadingBox {
    display: none;
    position: fixed;
    z-index: 260;
    width: 300px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.tpx-account #loadingBox .content {
    padding: 32px;
    display: flex;
    justify-content: center;
}

/* account main pages: content holder lives under #contentScroll */
.tpx-account-main #contentScroll > #contentHolder {
    max-width: 80rem;
    margin: 24px auto;
    padding: 0 16px;
    width: 100%;
}

@media (min-width: 640px) {
    .tpx-account-main #contentScroll > #contentHolder {
        margin: 32px auto;
        padding: 0 24px;
    }
}

.tpx-account-main #contentScroll > #leftSidebar {
    display: none;
}

@media (min-width: 1280px) {
    /* Sidebar + account content share the header's 80rem width. */
    .tpx-account-main #contentScroll:has(> #leftSidebar) {
        display: grid;
        grid-template-columns: 240px 32px minmax(0, 1fr);
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        padding: 0 24px;
        box-sizing: border-box;
        align-items: start;
    }

    .tpx-account-main #contentScroll > #leftSidebar {
        display: block;
        grid-column: 1;
        margin: 32px 0;
        min-width: 0;
    }

    .tpx-account-main #contentScroll > #leftSidebar img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 680px;
        object-fit: contain;
        object-position: top center;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .tpx-account-main #contentScroll:has(> #leftSidebar) > #contentHolder {
        grid-column: 3;
        width: 100% !important;
        max-width: none !important;
        margin: 32px 0;
        padding: 0;
    }

    .tpx-account-main #contentScroll:has(> #leftSidebar) > #contentHolder:not(.has-side-panel) {
        display: block;
    }

    /* The dashboard is one cohesive column beside the artwork. Its account
       summary sits beneath the navigation instead of becoming a third column. */
    .tpx-account-main #contentHolder.account-dashboard-layout.has-side-panel {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .tpx-account .account-dashboard-layout .side-outer-panel {
        width: 100%;
        margin: 0;
    }

    .tpx-account .account-dashboard-layout .account-balances-panel {
        margin: 0;
    }

    .tpx-account .account-dashboard-layout .balance-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tpx-account .account-dashboard-layout .balance-row {
        display: block;
        padding: 16px 20px;
        border-bottom: 0;
        border-right: 1px solid #e5e7eb;
    }

    .tpx-account .account-dashboard-layout .balance-row:last-child {
        border-right: 0;
    }

    .tpx-account .account-dashboard-layout .balance-row .titleDetailPanel,
    .tpx-account .account-dashboard-layout .balance-row .priceBold {
        display: block;
    }

    .tpx-account .account-dashboard-layout .balance-row .priceBold {
        margin-top: 6px;
        font-size: 18px;
    }

    .tpx-account .account-dashboard-layout .gift-card-redemption {
        border-top: 1px solid #e5e7eb;
        margin-top: 2px;
    }

    .tpx-account .account-dashboard-layout .gift-card-redemption summary {
        padding: 16px 0 2px;
        font-size: 14px;
    }

    .tpx-account .account-dashboard-layout .gift-card-redemption-form {
        grid-template-columns: minmax(0, 1fr) auto;
        max-width: 560px;
        padding-top: 12px;
    }

    .tpx-account .account-dashboard-layout .account-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .tpx-account .account-dashboard-layout .menuItem .menuActionButton {
        gap: 12px;
        padding: 18px;
        font-size: 14px;
    }
}

/* the legacy dashboard / panel icons are very light PNGs - darken them so
   they read on the white cards */
.tpx-account .menuItem .menuActionButton img,
.tpx-account-main .side-panel .title-bar-panel img {
    filter: brightness(0.45);
}

/* createDialog / showConfirmDialog footer buttons: the legacy builder emits
   icon-only sprite divs (tick / cross), so give them button chrome + glyphs */
#dialogOuter .btnInside {
    display: inline-block;
    padding: 12px 24px 16px 24px;
}

#dialogOuter .btnLeftSection {
    float: left;
}

#dialogOuter .btnRightSection {
    float: right;
}

#dialogOuter .btnAction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

#dialogOuter .btnAction.btnAccept {
    background-color: #4f46e5;
    color: #ffffff;
    border: 1px solid #4f46e5;
}

#dialogOuter .btnAction.btnAccept:hover {
    background-color: #6366f1;
    border-color: #6366f1;
}

#dialogOuter .btnAction.btnCancelGrey {
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

#dialogOuter .btnAction.btnCancelGrey:hover {
    color: #dc2626;
    border-color: #dc2626;
}

#dialogOuter .btnConfirmTickLeftImage::before {
    content: '\2713';
}

#dialogOuter .btnCrossImage::before {
    content: '\2715';
}

/* ===== New account page =====
   Two column form built from the shared .account-*-grid helpers. The confirm
   button is a legacy composite (sprite spans whose class names the javascript
   swaps), so the container carries the colour here - the existing
   .contentBtn:has(.btn-disabled-middle) rule above still wins for the
   disabled state because it is the more specific selector. */
.tpx-newaccount-page .newaccount-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tpx-newaccount-page .contentBtn.newaccount-confirm {
    min-height: 42px;
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

.tpx-newaccount-page .contentBtn.newaccount-confirm:hover {
    background-color: #4338ca;
    border-color: #4338ca;
}


/* ==========================================================================
   Compare at ("was") pricing and the remove-item dialog
   --------------------------------------------------------------------------
   Both features arrived with DEV-153 against the legacy _small / _large cart,
   where they are styled in csscustomer_large.css / csscustomer_small.css. The
   responsive checkout loads neither of those, so the same class names are
   re-skinned here against the single page checkout's design tokens (indigo
   primary, gray-200 borders, red-600 destructive, gray-500/75 overlay).

   The markup is NOT duplicated: order/pricewithcompareat.tpl and the dialog
   builder in templates/order/jobticket.tpl are shared with the legacy cart and
   emit exactly these classes. Nothing below may change on the legacy side.
   ========================================================================== */

/* ===== Compare at prices ===== */

.price-was {
    text-decoration: line-through;
    color: #6b7280;
    margin-right: 5px;
    font-weight: 400;
    white-space: nowrap;
}

.flex-col > .price-was {
    margin-right: 0;
}

@media (min-width: 640px) {
    .flex-col.sm\:flex-row > .price-was {
        margin-right: 5px;
    }
}

.price-now {
    font-weight: 600;
    white-space: nowrap;
}

/* The order total is the one place the was price sits next to a 20px figure. At the same
   size the pair is wider than the 400px summary column and the row wrapped, breaking the
   "Amount To Pay:" label mid-phrase. */
#ordertotaltopayvalue .price-was {
    font-size: 14px;
}

/* ===== Remove control on a cart line ===== */

/* The responsive cart uses a trash can drawn inline as an SVG rather than the legacy
   delete_icon_v2.png sprite, which is a red circle-minus and reads as "disabled" next to
   the checkout's flat iconography. The legacy cart keeps the sprite - it styles
   .remove-order-line in csscustomer_large.css / _small.css, which this page never loads. */
.remove-order-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background-color: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.remove-order-line svg {
    width: 1.125rem;
    height: 1.125rem;
}

.remove-order-line:hover {
    color: #dc2626;
    background-color: #fef2f2;
}

.remove-order-line:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* ===== Gift card add / remove control =====

   The legacy carts style #giftbutton with .button-voucher + .class_gift_add /
   .class_gift_delete in csscustomer_large.css, which this page never loads - so the
   control rendered as a 0px wide span and there was no way to remove (or re-add) a
   gift card. Same story, and the same fix, as .remove-order-line above: an inline SVG
   drawn in the checkout's flat iconography rather than the add/delete_icon_v2.png
   sprites.

   The class names have to stay legacy: the changegiftcard handler in
   templates/order/jobticket.tpl reassigns #giftcard.className and
   #giftbutton.className to the legacy strings, so anything hung off a new class name
   would be lost the moment that path ran. For the same reason the row's own layout
   lives on .gift-card-box-button here instead of on utility classes in the template. */
.gift-card-box-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* "No gift card applied": grey the label and the amount the way the legacy cart does,
   so the row reads as the offer to add one rather than a charge. The button keeps its
   own colour below - it is the live control in this state. */
.gift-card-box-button.disabled span {
    color: #9ca3af;
}

.button-voucher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.375rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background-color: transparent;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}

.button-voucher svg {
    width: 1rem;
    height: 1rem;
}

.button-voucher:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Both icons are always in the markup; the state class picks one, so the swap survives
   the className reassignment described above (which replaces classes, not children). */
.class_gift_add .gift-icon-delete,
.class_gift_delete .gift-icon-add {
    display: none;
}

/* Add: the accent used by every other call to action on the page. */
.class_gift_add {
    color: #4f46e5;
}

.class_gift_add:hover {
    background-color: #eef2ff;
}

/* Remove: matches .remove-order-line - resting grey, destructive red on hover. */
.class_gift_delete {
    color: #6b7280;
}

.class_gift_delete:hover {
    color: #dc2626;
    background-color: #fef2f2;
}

/* ===== Remove item dialog =====
   Built with DOM calls by showRemoveOrderLineDialog() in templates/order/jobticket.tpl,
   so every selector here is a hook into markup this stylesheet does not own. */

/* Flex centre so the dialog can be capped to the window and the list of affected
   items scrolls inside it however many there are. Matches #shim's ground.
   Tier 70 of the cart overlay ladder (it was 10000, which put it above the
   validation alert that can be raised over it); it is only ever opened from a
   cart line's remove control, so nothing else is on screen under it. */
.removeLineOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(107, 114, 128, 0.75);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

/* The width is in rem on purpose: everything inside this dialog - the type, the
   padding, the gap between the three choices - is rem, so a fixed px box silently
   stops fitting its own contents the moment the root size moves. It did: at the old
   pinned 14px root (trap 18) the three buttons filled 496.1px of the 498px row, and
   the rootfix grew them 14.3% to 558.6px in 492px, which is the wrapped "buttons have
   shifted right" QA hit. 42rem leaves ~65px of slack in English for translation. */
.removeLineDialog {
    position: relative;
    width: min(42rem, 100%);
    max-height: 100%;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.removeLineDialogTitle {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: #111827;
    background-color: #ffffff;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.removeLineDialogClose {
    width: 2rem;
    height: 2rem;
    margin: -0.5rem -0.5rem -0.5rem 0;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    color: #9ca3af;
    background: transparent;
    font: 1.5rem/1 Arial, sans-serif;
    cursor: pointer;
    transition: color 150ms ease;
}

.removeLineDialogClose:hover,
.removeLineDialogClose:focus {
    color: #4b5563;
}

/* The only part that scrolls, so the title and the choices stay put */
.removeLineDialogBody {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.removeLineDialogIntro {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ===== The affected cross sold items ===== */

.removeCrossSellList {
    margin: 0.875rem 0 0 0;
    padding: 0;
    list-style: none;
}

/* A level below the top is stepped in and hung off a rule, so what came with what is
   visible at a glance without drawing a tree control. */
.removeCrossSellList-nested {
    position: relative;
    margin: 0.5rem 0 0 1.375rem;
    padding-left: 1rem;
    border-left: 2px solid #e5e7eb;
}

/* A single nested item gets one continuous rounded elbow from its parent to the centre
   of its card. Its own connector replaces the generic vertical rule, avoiding a seam. */
.removeCrossSellList-nested.removeCrossSellList-single {
    border-left: 0;
}

.removeCrossSellList-single > .removeCrossSellItem {
    position: relative;
}

.removeCrossSellList-single > .removeCrossSellItem::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: -8px;
    left: -18px;
    width: 16px;
    height: calc(50% + 8px);
    border-left: 2px solid #e5e7eb;
    border-bottom: 2px solid #e5e7eb;
    border-bottom-left-radius: 10px;
}

.removeCrossSellItem {
    margin-bottom: 0.5rem;
}

.removeCrossSellCard {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #f9fafb;
}

.removeCrossSellCard-loses {
    border-color: #e5e7eb;
    background-color: #f9fafb;
}

.removeCrossSellThumbnail {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.removeCrossSellThumbnail img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: #ffffff;
}

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

.removeCrossSellProduct {
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-right: 140px;
}

/* long project names wrap rather than pushing the price column out of the dialog */
.removeCrossSellName {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 2px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-right: 140px;
}

.removeCrossSellOrigin {
    color: #9ca3af;
    font-size: 0.75rem;
    font-style: italic;
    margin-top: 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.removeCrossSellPrices {
    margin-top: 0.375rem;
}

/* Every price is labelled - two figures on their own would not say which is which */
.removeCrossSellPrice {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.75rem;
    line-height: 1.6;
}

.removeCrossSellPriceLabel {
    color: #6b7280;
    padding-right: 0.625rem;
}

.removeCrossSellPriceValue {
    min-width: 64px;
    text-align: right;
    white-space: nowrap;
    color: #111827;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* In the cart a was price sits beside a live price and needs a gap. In this dialog it
   occupies its own row, so that shared spacing would push it out of alignment. */
.removeCrossSellPriceValue > .price-was:only-child {
    margin-right: 0;
}

.removeCrossSellPriceValue > .price-was:not(:only-child) {
    margin-right: 8px;
}

/* Amber reads as "something changes here"; the lines that keep what they are charged
   get the neutral badge so only the real warnings draw the eye. */
.removeCrossSellStatus {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    padding: 0.125rem 0.5rem;
    border: 1px solid #fde68a;
    border-radius: 9999px;
    font-size: 0.6875rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.025em;
    white-space: nowrap;
    color: #92400e;
    background-color: #fffbeb;
}

.removeCrossSellStatus-keeps {
    border-color: #e5e7eb;
    color: #4b5563;
    background-color: #f3f4f6;
}

/* ===== The three choices =====
   The builder appends them keep / cancel / remove; flex order puts Cancel first so the
   destructive choice is furthest from it. Reordering here rather than in the shared
   javascript keeps the legacy cart exactly as it is. */
.removeLineDialogButtons {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background-color: #f9fafb;
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Real buttons, for the keyboard - the sprite buttons the rest of the page uses are
   divs and cannot be tabbed to or pressed with a key. */
.removeLineDialogButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5rem 0.75rem;
    min-height: 2.25rem;
    border: 0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.removeLineDialogButton:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.removeLineDialogButton-cancel {
    order: 0;
    background-color: #ffffff;
    color: #111827;
    box-shadow: inset 0 0 0 1px #d1d5db, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.removeLineDialogButton-cancel:hover {
    background-color: #f9fafb;
}

.removeLineDialogButton-keep {
    order: 1;
    background-color: #4f46e5;
    color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.removeLineDialogButton-keep:hover {
    background-color: #6366f1;
}

.removeLineDialogButton-remove {
    order: 2;
    background-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.removeLineDialogButton-remove:hover {
    background-color: #ef4444;
}

/* Narrow screens. The picture stays beside the name - a full width picture per item
   makes the dialog enormous for the two or three items it shows - but the third column
   has to go, and each choice gets its own full width row. */
@media screen and (max-width: 600px) {
    .removeLineOverlay {
        padding: 0.625rem;
    }

    .removeCrossSellCard {
        position: relative;
        flex-wrap: wrap;
        padding: 0.5rem;
    }

    .removeCrossSellThumbnail {
        flex: 0 0 68px;
        width: 68px;
        height: 68px;
        margin-right: 0.625rem;
    }

    .removeCrossSellInfo {
        flex: 1 1 120px;
        padding-top: 30px;
    }

    .removeCrossSellProduct,
    .removeCrossSellName {
        padding-right: 0;
    }

    .removeCrossSellStatus {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        margin-left: 0;
    }

    .removeCrossSellPrices {
        max-width: none;
    }

    .removeCrossSellList-nested {
        margin-left: 0.5rem;
        padding-left: 0.625rem;
    }

    .removeCrossSellList-single > .removeCrossSellItem::before {
        left: -12px;
        width: 10px;
        border-bottom-left-radius: 8px;
    }
}

/* The three choices need more room than the card rearrangement above does: below about
   638px the dialog is viewport bound and the row wraps to a ragged 2 + 1. Stack them
   from 700px down instead, so there is no band where that ragged state can show. */
@media screen and (max-width: 700px) {
    .removeLineDialogButtons {
        flex-direction: column;
    }

    .removeLineDialogButton {
        width: 100%;
    }
}


/* ===== Share journey message pages =====
   share/previewnotfound_responsive.tpl, previewunavailable_responsive.tpl and
   reorderunavailable_responsive.tpl. They are otherwise carried by the shared
   .tpx-account scaffold plus spc-card, so this is the only rule they need. */
.tpx-share-page .share-page-icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: #6b7280;
}

/* ===== Preview page (share/preview_responsive.tpl) =====
   The account layout rules are scoped to .tpx-account-main, so the preview page needs
   its own shell. The legacy markup is kept as it is - the composite buttons above are
   already skinned under .tpx-account - and only the page chrome is laid out here. The
   viewer itself is left alone: pageflip, galleria and the external iframe each bring
   their own styling and sizing. */
.tpx-account-preview .outer-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
}

.tpx-account-preview #header {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.tpx-account-preview #header .headerinside {
    max-width: 80rem;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* the action bar - order / share - sits in its own strip above the preview */
.tpx-account-preview .contentNavigation {
    max-width: 80rem;
    margin: 0 auto;
    padding: 16px 24px 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.tpx-account-preview .contentNavigation .btnRight {
    float: none;
}

/* the share button here is a bare id rather than one of the .contentBtn shapes the
   skinning above matches, so it is given the same treatment explicitly */
.tpx-account-preview #shareprojectfrompreview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    background-color: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.tpx-account-preview #shareprojectfrompreview:hover {
    color: #4f46e5;
    border-color: #4f46e5;
}

.tpx-account-preview #shareprojectfrompreview .btn-blue-left,
.tpx-account-preview #shareprojectfrompreview .btn-blue-share-right {
    display: none;
}

.tpx-account-preview .contentScroll,
.tpx-account-preview .contentScrollPreview {
    max-width: 80rem;
    margin: 0 auto;
    padding: 16px 24px 40px 24px;
}

/* the project card */
.tpx-account-preview #page {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.tpx-account-preview #page > .title-bar {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    background-color: transparent;
}

.tpx-account-preview #page > .content {
    padding: 20px;
}

.tpx-account-preview #saleMessage {
    margin-bottom: 16px;
    font-size: 14px;
    color: #4b5563;
}

.tpx-account-preview #tframe {
    width: 100% !important;
    max-width: 100%;
    border-radius: 8px;
}

/* the download links and the share strip below the viewer */
.tpx-account-preview .previewBoxLeft,
.tpx-account-preview .previewBoxRight {
    float: none;
    width: auto;
}

.tpx-account-preview .previewBoxLeft {
    margin-top: 20px;
    font-size: 14px;
    color: #4b5563;
}

.tpx-account-preview .ulPreview {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}

.tpx-account-preview .ulPreview li {
    margin-top: 4px;
}

.tpx-account-preview #addtoany_container {
    margin-top: 16px;
}

.tpx-account-preview .previewBoxRight {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.tpx-account-preview .previewBoxRight .buttonBottomInside {
    float: none;
}