/*
 * Product show page — order panel.
 * Matches the twelve-product-desktop mockup. Scoped under .tw-pp.
 * Every colour goes through a token so `body.lightMode` can re-theme the page
 * without duplicating a single rule.
 */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');

@keyframes tw-shine {
    0% { transform: translateX(220%); }
    55%, 100% { transform: translateX(-220%); }
}
@keyframes tw-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tw-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tw-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes tw-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 30px) scale(1.15); }
}
@keyframes tw-pop {
    0% { transform: scale(.6); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes tp-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 130, 31, 0); }
    50% { box-shadow: 0 0 20px 2px rgba(246, 130, 31, .35); }
}
@keyframes tp-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.tw-pp,
.tw-pp-modal-backdrop {
    /* Dark palette — the mockup default. Light mode overrides these below.
       The description modal renders outside .tw-pp, so it needs the tokens too. */
    --tw-bg-shell: #151517;
    --tw-bg-card: #1e1e21;
    --tw-bg-field: #151517;
    --tw-bg-modal: #1a1a1e;
    --tw-bg-inset: #151517;
    --tw-shell-rgb: 21, 21, 23;
    --tw-card-rgb: 30, 30, 33;
    --tw-border: #26262b;
    --tw-border-soft: #2c2c31;
    --tw-border-strong: #3a3a40;
    --tw-panel-border: transparent;
    --tw-panel-shadow: none;
    --tw-text: #fff;
    --tw-muted: #8b8b93;
    --tw-muted-2: #a9a9b2;
    --tw-muted-3: #c9c9cf;
    --tw-placeholder: #6b6b73;
    --tw-primary: #F43F5E;
    --tw-primary-2: #fb7185;
    --tw-primary-soft: rgba(244, 63, 94, .1);
    --tw-ok: #4ade80;
    --tw-ok-soft: rgba(74, 222, 128, .1);
    --tw-ok-border: rgba(74, 222, 128, .35);
    --tw-gold: #FFB640;
    --tw-orange: #F6821F;
    --tw-on-primary: #fff;
    --tw-on-gold: #151517;
    --tw-overlay: rgba(10, 10, 12, .72);
    --tw-overlay-2: rgba(10, 10, 12, .65);
    --tw-shadow-sm: rgba(0, 0, 0, .45);
    --tw-shadow-md: rgba(0, 0, 0, .35);
    --tw-shadow-xl: rgba(0, 0, 0, .6);
    --tw-shadow-hero: 0 20px 50px rgba(0, 0, 0, .5);
    --tw-shadow-card: 0 20px 60px rgba(0, 0, 0, .35);
    --tw-grad: linear-gradient(110deg, #F43F5E, #fb7185);
    --tw-grad-ok: linear-gradient(135deg, #16a34a, #4ade80);
}

.tw-pp {
    /* The site header is `position: fixed; height: 100px`, so every page has to
       carry its own clearance — .voucher-container (the page this replaced) used
       130px / 100px under 767px. This page had none, so its content rendered
       under the fixed header. Mirroring those exact values, scoped to .tw-pp only. */
    margin-top: 130px;
    display: flex;
    justify-content: center;
    padding: 36px 16px;
    min-height: 80vh;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
    color: var(--tw-text);
}

body.lightMode .tw-pp,
body.lightMode .tw-pp-modal-backdrop {
    --tw-bg-shell: #ffffff;
    --tw-bg-card: #f3f3f6;
    --tw-bg-field: #ffffff;
    --tw-bg-modal: #ffffff;
    --tw-bg-inset: #f3f3f6;
    --tw-shell-rgb: 255, 255, 255;
    --tw-card-rgb: 243, 243, 246;
    --tw-border: #e5e5ec;
    --tw-border-soft: #dcdce4;
    --tw-border-strong: #c6c6d0;
    --tw-panel-border: #e5e5ec;
    --tw-panel-shadow: 0 10px 40px rgba(24, 24, 40, .07);
    --tw-text: #16161a;
    --tw-muted: #70707a;
    --tw-muted-2: #52525b;
    --tw-muted-3: #3f3f46;
    --tw-placeholder: #a1a1aa;
    --tw-ok: #16a34a;
    --tw-ok-soft: rgba(22, 163, 74, .09);
    --tw-ok-border: rgba(22, 163, 74, .3);
    --tw-gold: #d97706;
    --tw-orange: #c2610a;
    --tw-on-gold: #ffffff;
    --tw-overlay: rgba(24, 24, 30, .48);
    --tw-overlay-2: rgba(24, 24, 30, .42);
    --tw-shadow-sm: rgba(24, 24, 40, .18);
    --tw-shadow-md: rgba(24, 24, 40, .12);
    --tw-shadow-xl: rgba(24, 24, 40, .24);
    --tw-shadow-hero: 0 16px 36px rgba(24, 24, 40, .18);
    --tw-shadow-card: 0 16px 44px rgba(24, 24, 40, .10);
}

/*
 * National Day site theme (App\Support\Storefront\SiteTheme): the accent
 * token follows the active brand color. Discount and cashback badges are
 * deliberately excluded — they stay red/green regardless of theme, since
 * that red-vs-green contrast is how a shopper tells the two apart.
 */
body[data-festive="national"] .tw-pp,
body[data-festive="national"] .tw-pp-modal-backdrop {
    --tw-primary: var(--tw-brand);
    --tw-primary-2: var(--tw-brand-2);
    --tw-primary-soft: rgba(var(--tw-brand-rgb), .1);
    --tw-grad: linear-gradient(110deg, var(--tw-brand), var(--tw-brand-2));
}

body[data-festive="national"] .tw-pp-orb {
    background: radial-gradient(circle, rgba(var(--tw-brand-rgb), .12), transparent 65%);
}

body[data-festive="national"] .tw-pp-type:hover,
body[data-festive="national"] .tw-pp-country:hover,
body[data-festive="national"] .tw-pp-denom:hover,
body[data-festive="national"] .tw-pp-event:hover {
    border-color: rgba(var(--tw-brand-rgb), .5);
}

body[data-festive="national"] .tw-pp-type.is-active {
    box-shadow: 0 10px 28px rgba(var(--tw-brand-rgb), .35);
}

body[data-festive="national"] .tw-pp-denom-label > input:checked + .tw-pp-denom,
body[data-festive="national"] .tw-pp-denom.is-active {
    background: rgba(var(--tw-brand-rgb), .08);
    box-shadow: 0 0 0 3px rgba(var(--tw-brand-rgb), .15), 0 10px 26px rgba(var(--tw-brand-rgb), .18);
}

body[data-festive="national"] #account-info-section.is-blocked {
    box-shadow: 0 0 0 3px rgba(var(--tw-brand-rgb), .12);
}

body[data-festive="national"] .tw-pp-summary {
    border-color: rgba(var(--tw-brand-rgb), .35);
}

body[data-festive="national"] .tw-pp-summary-shine,
body[data-festive="national"] .tw-pp-event-shine {
    background: linear-gradient(100deg, transparent, rgba(var(--tw-brand-rgb), .05), transparent);
}

body[data-festive="national"] .tw-pp-more {
    border-color: rgba(var(--tw-brand-rgb), .35);
}

body[data-festive="national"] .tw-pp-help-num {
    background: rgba(var(--tw-brand-rgb), .15);
}

body[data-festive="national"] .tw-pp-event-bar {
    background: linear-gradient(180deg, var(--tw-brand), var(--tw-brand-2));
}

/* Discount stays red on purpose — see the comment above .tw-pp-line .save--discount. */
body[data-festive="national"] .tw-pp-line .save--discount {
    color: #F43F5E;
}

.tw-pp * {
    box-sizing: border-box;
}

.tw-pp-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(1440px, 100%);
}

.tw-pp-panel {
    position: relative;
    background: var(--tw-bg-shell);
    border: 1px solid var(--tw-panel-border);
    box-shadow: var(--tw-panel-shadow);
    border-radius: 24px;
    overflow: hidden;
}

.tw-pp-orb {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 63, 94, .12), transparent 65%);
    animation: tw-orb 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.tw-pp-inner {
    /* No z-index here on purpose: a stacking context would trap the fixed
       direct-pay overlay — and the gateway 3DS iframes inside it — below the
       site header. Painting above .tw-pp-orb comes from DOM order. */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Banner */
.tw-pp-banner {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.tw-pp-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.tw-pp-banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(var(--tw-shell-rgb)) 4%, rgba(var(--tw-shell-rgb), .45) 45%, transparent);
    pointer-events: none;
}

.tw-pp-crumbs {
    position: absolute;
    top: 16px;
    inset-inline-start: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

.tw-pp-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.tw-pp-crumbs a:hover {
    color: var(--tw-primary-2);
}

.tw-pp-crumbs .sep {
    opacity: .5;
}

.tw-pp-crumbs .current {
    color: var(--tw-primary-2);
}

/* Hero row */
.tw-pp-hero {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    padding: 0 28px;
    margin-top: -64px;
    position: relative;
    z-index: 2;
}

.tw-pp-hero-img {
    width: 128px;
    height: 128px;
    border-radius: 26px;
    border: 3px solid var(--tw-bg-shell);
    box-shadow: var(--tw-shadow-hero);
    object-fit: cover;
    animation: tw-up .6s ease-out both;
    background: var(--tw-bg-card);
}

.tw-pp-hero-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
    animation: tw-up .6s ease-out .1s both;
    min-width: 0;
}

.tw-pp-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-pp-title {
    color: var(--tw-text);
    font-size: 26px;
    font-family: 'Baloo 2', 'Tajawal', sans-serif;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.tw-pp-badge {
    border-radius: 999px;
    padding: 2px 11px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tw-pp-badge--ok {
    background: rgba(74, 222, 128, .12);
    border: 1px solid rgba(74, 222, 128, .35);
    color: var(--tw-ok);
}

.tw-pp-badge--tp {
    background: rgba(246, 130, 31, .12);
    border: 1px solid rgba(246, 130, 31, .35);
    color: var(--tw-orange);
}

.tw-pp-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--tw-muted);
    font-size: 12.5px;
    flex-wrap: wrap;
}

.tw-pp-stats .stars {
    color: var(--tw-gold);
}

.tw-pp-stats .stars b {
    color: var(--tw-text);
}

.tw-pp-hero-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 10px;
}

.tw-pp-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--tw-bg-card);
    border: 1px solid var(--tw-border);
    display: grid;
    place-items: center;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s;
    color: var(--tw-text);
    text-decoration: none;
}

.tw-pp-icon-btn:hover {
    border-color: var(--tw-primary);
    color: var(--tw-text);
}

/* Main grid */
.tw-pp-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 18px;
    padding: 22px 28px 28px;
}

.tw-pp-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tw-pp-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Step cards */
.tw-pp-card {
    background: var(--tw-bg-card);
    border: 1px solid var(--tw-border);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.tw-pp-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tw-pp-step-head--between {
    justify-content: space-between;
}

.tw-pp-step-num {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--tw-grad);
    color: var(--tw-on-primary);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.tw-pp-step-title {
    color: var(--tw-text);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.tw-pp-step-hint {
    color: var(--tw-muted);
    font-size: 11px;
}

.tw-pp-step-meta {
    color: var(--tw-muted);
    font-size: 11.5px;
}

.tw-pp-step-meta b {
    color: var(--tw-ok);
}

/* Type chips */
.tw-pp-types {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-pp-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 17px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
    transition: all .25s;
    border: 1px solid var(--tw-border);
    background: var(--tw-bg-field);
    color: var(--tw-text);
    text-decoration: none;
    min-width: 160px;
}

.tw-pp-type:hover {
    border-color: rgba(244, 63, 94, .5);
    color: var(--tw-text);
}

.tw-pp-type.is-active {
    border: 1.5px solid var(--tw-primary);
    background: var(--tw-grad);
    color: var(--tw-on-primary);
    box-shadow: 0 10px 28px rgba(244, 63, 94, .35);
}

.tw-pp-type-info {
    position: absolute;
    top: -8px;
    inset-inline-end: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--tw-gold);
    color: var(--tw-on-gold);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 800;
    font-family: Georgia, serif;
    font-style: italic;
    cursor: pointer;
    transition: transform .2s;
    box-shadow: 0 4px 10px var(--tw-shadow-sm);
    border: 2px solid var(--tw-bg-card);
    z-index: 2;
    text-decoration: none;
}

.tw-pp-type-info:hover {
    transform: scale(1.25);
    color: var(--tw-on-gold);
}

.tw-pp-type-emoji {
    font-size: 22px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tw-pp-type-emoji img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tw-pp-type-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tw-pp-type-text b {
    font-size: 13px;
}

.tw-pp-type-text span {
    font-size: 10.5px;
    opacity: .75;
}

.tw-pp-type-check {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 9.5px;
    font-weight: 800;
    margin-inline-start: auto;
    background: transparent;
    color: transparent;
    border: 1.5px solid var(--tw-border-strong);
}

.tw-pp-type.is-active .tw-pp-type-check {
    background: var(--tw-on-primary);
    color: var(--tw-primary);
    border: none;
}

/* Countries */
.tw-pp-countries {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tw-pp-country {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 17px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 12.5px;
    font-weight: 800;
    transition: all .25s;
    border: 1px solid var(--tw-border);
    background: var(--tw-bg-field);
    color: var(--tw-text);
    text-decoration: none;
}

.tw-pp-country img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.tw-pp-country:hover {
    border-color: rgba(244, 63, 94, .5);
    color: var(--tw-text);
}

.tw-pp-country.is-active {
    border: 1.5px solid var(--tw-primary);
    background: var(--tw-primary-soft);
    color: var(--tw-primary);
}

/* Denominations */
.tw-pp-denoms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.tw-pp-denom-label {
    margin: 0;
    cursor: pointer;
    display: block;
}

.tw-pp-denom-label > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.tw-pp-denom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 13px 8px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
    transition: all .25s;
    border: 1px solid var(--tw-border);
    background: var(--tw-bg-field);
    color: var(--tw-text);
    text-align: center;
    min-height: 110px;
    justify-content: center;
}

.tw-pp-denom:hover {
    border-color: rgba(244, 63, 94, .45);
}

.tw-pp-denom-label > input:checked + .tw-pp-denom,
.tw-pp-denom.is-active {
    border: 1.5px solid var(--tw-primary);
    background: rgba(244, 63, 94, .08);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, .15), 0 10px 26px rgba(244, 63, 94, .18);
    transform: translateY(-3px);
}

/* Discount (red) stacked over cashback (green) in the corner, as in the design. */
.tw-pp-denom-badges {
    position: absolute;
    top: -1px;
    inset-inline-end: -1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 1;
}

.tw-pp-denom-disc,
.tw-pp-denom-cb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.tw-pp-denom-disc {
    background: linear-gradient(135deg, #e11d48, #fb7185);
    border-radius: 14px 0 0 0;
    padding: 3px 9px 4px;
    font-size: 9.5px;
    box-shadow: 0 5px 12px rgba(244, 63, 94, .18);
}

.tw-pp-denom-cb {
    background: var(--tw-grad-ok);
    border-radius: 0 0 12px 0;
    padding: 3px 8px 4px;
    font-size: 9px;
    box-shadow: 0 5px 12px rgba(74, 222, 128, .18);
}

.tw-pp-denom-badges > :only-child {
    border-radius: 14px 0 12px 0;
}

[dir="ltr"] .tw-pp-denom-disc {
    border-radius: 0 14px 0 0;
}

[dir="ltr"] .tw-pp-denom-cb {
    border-radius: 0 0 0 12px;
}

[dir="ltr"] .tw-pp-denom-badges > :only-child {
    border-radius: 0 14px 0 12px;
}

.tw-pp-denom-icon {
    font-size: 19px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}

.tw-pp-denom-icon img {
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
}

.tw-pp-denom-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.tw-pp-denom-price {
    color: var(--tw-primary);
    font-size: 13px;
    font-weight: 800;
}

.tw-pp-denom-old {
    font-size: 10px;
    opacity: .5;
    text-decoration: line-through;
}

.tw-pp-denom .out-of-stock-message {
    font-size: 10px;
    color: var(--tw-primary);
}

/* A denomination the server refuses to sell: still visible, plainly not choosable.
   The radio itself carries `disabled`, so pointer and keyboard selection are already
   impossible; this only makes that state legible. Enforcement is server-side. */
.tw-pp-denom-label.is-unavailable {
    cursor: not-allowed;
}

.tw-pp-denom.is-unavailable {
    opacity: .45;
    filter: grayscale(1);
    pointer-events: none;
}

.tw-pp-denom.is-unavailable .out-of-stock-message {
    opacity: 1;
    font-weight: 600;
}

/* The shared FX spinner overlay is square by default — match the card radius. */
.tw-pp .currency-change-spinner {
    border-radius: 18px;
}

/* Account fields */
.tw-pp-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tw-pp-fields-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-pp-field {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tw-bg-field);
    border: 1px solid var(--tw-border);
    border-radius: 12px;
    padding: 0 14px;
    transition: all .3s;
}

.tw-pp-field:focus-within,
.tw-pp-field:hover {
    border-color: var(--tw-primary);
}

.tw-pp-field .ico {
    opacity: .5;
    font-size: 13px;
    flex-shrink: 0;
}

.tw-pp-field input,
.tw-pp-field select {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--tw-text);
    padding: 12px 0;
    min-width: 0;
    width: 100%;
}

.tw-pp-field input::placeholder {
    color: var(--tw-placeholder);
}

/* Browser autofill forces its own background (usually white/yellow) that a plain
   `background: transparent` cannot override — needs the inset-box-shadow trick to
   repaint it as the field's real surface, in both light and dark mode. Covers every
   text input on this page (account fields, coupon field), not just one field. */
.tw-pp input:-webkit-autofill,
.tw-pp input:-webkit-autofill:hover,
.tw-pp input:-webkit-autofill:focus,
.tw-pp input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--tw-text);
    -webkit-box-shadow: 0 0 0 1000px var(--tw-bg-field) inset;
    box-shadow: 0 0 0 1000px var(--tw-bg-field) inset;
    caret-color: var(--tw-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* Blocked account step: the reason is spelled out next to the verify button
   and the offending fields are outlined. */
#account-info-section.is-blocked {
    border-color: var(--tw-primary);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, .12);
}

.tw-pp-field.is-invalid {
    border-color: var(--tw-primary);
    background: var(--tw-primary-soft);
}

.tw-pp .invalid-feedback.d-block {
    display: block !important;
}

.tw-pp-verify-btn,
#validate-submit {
    background: var(--tw-grad);
    color: var(--tw-on-primary) !important;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .2s;
    font-family: inherit;
}

.tw-pp-verify-btn:hover,
#validate-submit:hover {
    transform: translateY(-1px);
}

.tw-pp-verified {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tw-ok-soft);
    border: 1px solid var(--tw-ok-border);
    border-radius: 12px;
    padding: 9px 14px;
    color: var(--tw-ok);
    font-size: 12.5px;
    font-weight: 700;
    animation: tw-pop .4s ease-out;
}

.tw-pp-fields .verify-account-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Fixed footprint in .tw-pp-fields-row: does not grow with its own content, so the
   verify message appearing/growing can never take width away from the fields next
   to it — it wraps to its own line(s) inside this box instead. */
.tw-pp-verify-wrap {
    flex: 0 0 auto;
    max-width: 260px;
}

.tw-pp-fields .verify-account-info .info {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.account-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.account-name.d-none {
    display: none;
}

.account-name .another {
    color: var(--tw-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
}

.tw-pp-save {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tw-muted);
    font-size: 12px;
    cursor: pointer;
    margin: 0;
}

.tw-pp-save input {
    width: 16px;
    height: 16px;
    accent-color: var(--tw-primary);
}

.tw-pp-save a {
    color: var(--tw-primary);
    font-weight: 700;
    text-decoration: none;
}

.tw-pp-saved-link {
    color: var(--tw-primary);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
}

.tw-pp-saved-link:hover {
    color: var(--tw-primary-2);
}

/* Order summary */
.tw-pp-summary {
    position: relative;
    overflow: hidden;
    background: var(--tw-bg-card);
    border: 1px solid rgba(244, 63, 94, .35);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    box-shadow: var(--tw-shadow-card);
}

.tw-pp-summary-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(244, 63, 94, .05), transparent);
    animation: tw-shine 4s ease-in-out infinite;
    pointer-events: none;
}

.tw-pp-summary-title {
    color: var(--tw-text);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    position: relative;
}

.tw-pp-sum-product {
    display: flex;
    align-items: center;
    background: var(--tw-bg-field);
    border-radius: 14px;
    padding: 11px 13px;
    position: relative;
}

/* Image + name stay as one horizontal group (name beside the image). */
.tw-pp-sum-product-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1 1 auto;
}

.tw-pp-sum-product img {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    object-fit: cover;
    flex-shrink: 0;
}

.tw-pp-sum-product-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.tw-pp-sum-product-text b {
    color: var(--tw-text);
    font-size: 12.5px;
}

.tw-pp-sum-product-text span {
    color: var(--tw-muted);
    font-size: 10.5px;
}

.tw-pp-sum-badges {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 1;
}

.tw-pp-sum-disc,
.tw-pp-sum-cb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
}

.tw-pp-sum-disc {
    background: linear-gradient(135deg, #e11d48, #fb7185);
    border-radius: 14px 0 0 0;
    padding: 2px 10px 3px;
    font-size: 10px;
    box-shadow: 0 6px 14px rgba(244, 63, 94, .22);
}

.tw-pp-sum-cb {
    background: var(--tw-grad-ok);
    border-radius: 0 0 14px 0;
    padding: 2px 9px 3px;
    font-size: 9.5px;
    box-shadow: 0 6px 14px rgba(22, 163, 74, .22);
}

/* Either badge alone (the other hidden with .d-none) keeps the full ribbon corners. */
.tw-pp-sum-disc:has(+ .tw-pp-sum-cb.d-none),
.tw-pp-sum-disc.d-none + .tw-pp-sum-cb {
    border-radius: 14px 0 14px 0;
}

[dir="ltr"] .tw-pp-sum-disc {
    border-radius: 0 14px 0 0;
}

[dir="ltr"] .tw-pp-sum-cb {
    border-radius: 0 0 0 14px;
}

[dir="ltr"] .tw-pp-sum-disc:has(+ .tw-pp-sum-cb.d-none),
[dir="ltr"] .tw-pp-sum-disc.d-none + .tw-pp-sum-cb {
    border-radius: 0 14px 0 14px;
}

.tw-pp-rank-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.tw-pp-rank-badge.d-none {
    display: none;
}

.tw-pp-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

.tw-pp-rank-pill.d-none {
    display: none;
}

.tw-pp-rank-cashback-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--tw-muted);
    margin-top: -3px;
    position: relative;
}

.tw-pp-rank-cashback-note.d-none {
    display: none;
}

.tw-pp-lines {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
    position: relative;
}

.tw-pp-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.tw-pp-line .label {
    color: var(--tw-muted);
}

.tw-pp-line .old {
    color: var(--tw-muted);
    text-decoration: line-through;
}

.tw-pp-line .save {
    color: var(--tw-ok);
    font-weight: 700;
}

/* Discount rows specifically (coupon / rank) read as red, matching the brand's
   discount color elsewhere — "you saved" and cashback stay green/gold, they're
   a different concept from a discount. */
.tw-pp-line .save--discount {
    color: var(--tw-primary);
}

.tw-pp-line-dash {
    border-top: 1.5px dashed var(--tw-border-soft);
    margin: 3px 0;
}

.tw-pp-line--total .label {
    color: var(--tw-text);
    font-size: 14px;
    font-weight: 700;
}

.tw-pp-line--total .value {
    color: var(--tw-primary);
    font-size: 21px;
    font-family: 'Baloo 2', 'Tajawal', sans-serif;
    font-weight: 800;
}

.tw-pp-reward {
    border: 1.5px dashed rgba(246, 130, 31, .5);
    border-radius: 10px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: tp-glow 2.4s ease-in-out infinite;
    position: relative;
}

.tw-pp-reward .left {
    color: var(--tw-muted-3);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tw-pp-reward .left svg {
    color: var(--tw-gold);
    animation: tp-wiggle 2.4s ease-in-out infinite;
    transform-origin: center;
}

.tw-pp-reward .pts {
    color: var(--tw-gold);
    font-size: 12.5px;
    font-weight: 700;
}

.tw-pp-btn-cart,
.tw-pp-summary .add-to-cart,
.go-to-cart.add-to-cart {
    position: relative;
    overflow: hidden;
    background: var(--tw-grad) !important;
    color: var(--tw-on-primary) !important;
    font-weight: 800;
    border-radius: 999px !important;
    padding: 13px !important;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s;
    border: none !important;
    width: 100%;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tw-pp-btn-cart-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.tw-pp-btn-cart:hover,
.tw-pp-summary .add-to-cart:hover {
    transform: translateY(-2px);
}

.tw-pp-btn-cart::after,
.tw-pp-summary .add-to-cart::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: tw-shine 2.6s ease-in-out infinite;
    pointer-events: none;
}

.tw-pp-btn-pay,
.tw-pp-summary .direct-pay {
    border: 1.5px solid var(--tw-primary) !important;
    color: var(--tw-primary) !important;
    background: transparent !important;
    font-weight: 800;
    border-radius: 999px !important;
    padding: 12px !important;
    text-align: center;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .25s;
    width: 100%;
    font-family: inherit;
    display: block;
}

.tw-pp-btn-pay:hover,
.tw-pp-summary .direct-pay:hover {
    background: var(--tw-primary-soft) !important;
}

.tw-pp-pay-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    position: relative;
}

.tw-pp-pay-logos img {
    height: 16px;
    width: auto;
    max-width: 42px;
    background: #fff;
    border: 1px solid var(--tw-border);
    border-radius: 5px;
    padding: 2px 5px;
    object-fit: contain;
}

/* Info tabs */
.tw-pp-tabs-card {
    background: var(--tw-bg-card);
    border: 1px solid var(--tw-border);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.tw-pp-tabs {
    display: flex;
    background: var(--tw-bg-field);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.tw-pp-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: all .25s;
    color: var(--tw-muted);
    background: transparent;
    border: none;
    font-family: inherit;
}

.tw-pp-tab.is-active {
    color: var(--tw-on-primary);
    background: var(--tw-grad);
}

.tw-pp-tab-pane {
    display: none;
    animation: tw-in .3s ease-out;
}

.tw-pp-tab-pane.is-active {
    display: block;
}

.tw-pp-desc-wrap {
    position: relative;
}

.tw-pp-desc {
    color: var(--tw-muted-2);
    font-size: 12.5px;
    line-height: 1.9;
    max-height: 68px;
    overflow: hidden;
}

.tw-pp-desc.is-expanded {
    max-height: none;
}

.tw-pp-desc-fade {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 36px;
    background: linear-gradient(to top, rgb(var(--tw-card-rgb)), rgba(var(--tw-card-rgb), 0));
    pointer-events: none;
}

.tw-pp-desc-wrap.is-expanded .tw-pp-desc-fade {
    display: none;
}

.tw-pp-more {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tw-primary);
    font-size: 11.5px;
    font-weight: 800;
    border: 1px solid rgba(244, 63, 94, .35);
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    transition: all .25s;
    background: transparent;
    font-family: inherit;
    margin: 8px auto 0;
}

.tw-pp-more:hover {
    background: var(--tw-primary-soft);
}

.tw-pp-rating-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tw-pp-rating-head .avg {
    color: var(--tw-text);
    font-size: 26px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
}

.tw-pp-rating-stars {
    color: var(--tw-gold);
    font-size: 13px;
    letter-spacing: 1px;
}

.tw-pp-rating-count {
    color: var(--tw-muted);
    font-size: 10.5px;
}

.tw-pp-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.tw-pp-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--tw-muted);
}

.tw-pp-bar .n {
    width: 30px;
    flex-shrink: 0;
    color: var(--tw-gold);
    font-weight: 700;
}

.tw-pp-bar .track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--tw-bg-field);
    border: 1px solid var(--tw-border);
    overflow: hidden;
}

.tw-pp-bar .fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--tw-grad);
    transition: width .4s ease;
}

.tw-pp-bar .pct {
    width: 34px;
    flex-shrink: 0;
    text-align: end;
}

.tw-pp-rate-form {
    margin-top: 10px;
}

.tw-pp-rate-form .add-review-title {
    color: var(--tw-text);
    font-size: 12px;
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

/* Star picker: labels follow their input, so `input:checked ~ label` paints the
   lower stars. row-reverse keeps 1..5 reading order on screen. */
.tw-pp-rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tw-pp-stars-input {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
}

.tw-pp-stars-input input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tw-pp-stars-input label {
    color: var(--tw-border-strong);
    cursor: pointer;
    font-size: 16px;
    margin: 0;
    transition: color .2s, transform .2s;
}

.tw-pp-stars-input label:hover,
.tw-pp-stars-input label:hover ~ label,
.tw-pp-stars-input input:checked ~ label {
    color: var(--tw-gold);
}

.tw-pp-stars-input label:hover {
    transform: scale(1.15);
}

.tw-pp-rate-btn {
    margin-inline-start: auto;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    background: var(--tw-grad);
    color: var(--tw-on-primary);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform .2s, opacity .2s;
}

.tw-pp-rate-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tw-pp-rate-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.tw-pp-help {
    color: var(--tw-muted-2);
    font-size: 12px;
    line-height: 1.8;
}

.tw-pp-help p,
.tw-pp-desc p,
.tw-pp-modal-body p {
    margin: 0 0 6px;
}

.tw-pp-help b,
.tw-pp-desc b,
.tw-pp-modal-body b,
.tw-pp-help strong,
.tw-pp-desc strong,
.tw-pp-modal-body strong {
    color: var(--tw-text);
}

.tw-pp-review {
    background: var(--tw-bg-field);
    border-radius: 12px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.tw-pp-review-top {
    display: flex;
    justify-content: space-between;
}

.tw-pp-review-top b {
    color: var(--tw-text);
    font-size: 11.5px;
}

.tw-pp-review-top .stars {
    color: var(--tw-gold);
    font-size: 10px;
}

.tw-pp-review p {
    color: var(--tw-muted);
    font-size: 11px;
    margin: 0;
}

.tw-pp-help-step {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 9px;
}

.tw-pp-help-num {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(244, 63, 94, .15);
    color: var(--tw-primary);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.tw-pp-help-step span {
    color: var(--tw-muted-2);
    font-size: 12px;
    line-height: 1.7;
}

/* Event card */
.tw-pp-event {
    position: relative;
    overflow: hidden;
    background: var(--tw-bg-card);
    border: 1px solid var(--tw-border);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
    text-decoration: none;
    color: inherit;
}

.tw-pp-event:hover {
    border-color: rgba(244, 63, 94, .5);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px var(--tw-shadow-md);
    color: inherit;
}

.tw-pp-event-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 4px;
    background: linear-gradient(180deg, #F43F5E, #c026d3);
}

.tw-pp-event-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(244, 63, 94, .05), transparent);
    animation: tw-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}

.tw-pp-event img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #fff;
    object-fit: cover;
    animation: tw-float 3.5s ease-in-out infinite;
}

.tw-pp-event-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tw-pp-event-title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.tw-pp-event-title b {
    color: var(--tw-text);
    font-size: 12.5px;
}

.tw-pp-event-status {
    background: var(--tw-bg-field);
    color: var(--tw-muted);
    border: 1px solid var(--tw-border);
    border-radius: 999px;
    padding: 0 9px;
    font-size: 9.5px;
    font-weight: 800;
}

.tw-pp-event-status.live {
    color: var(--tw-ok);
    border-color: rgba(74, 222, 128, .35);
}

.tw-pp-event-status.upcoming {
    color: var(--tw-gold);
    border-color: rgba(255, 182, 64, .35);
}

.tw-pp-event-text > span {
    color: var(--tw-muted);
    font-size: 10.5px;
}

/* Desc modal */
.tw-pp-modal-backdrop {
    font-family: 'Tajawal', sans-serif;
    position: fixed;
    inset: 0;
    z-index: 1000001;
    background: var(--tw-overlay-2);
    backdrop-filter: blur(6px);
    display: none;
    place-items: center;
    padding: 28px;
    animation: tw-in .2s ease-out;
}

.tw-pp-modal-backdrop.is-open {
    display: grid;
}

.tw-pp-modal {
    width: min(520px, 100%);
    max-height: 100%;
    overflow-y: auto;
    background: var(--tw-bg-modal);
    border: 1px solid var(--tw-border-soft);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 30px 80px var(--tw-shadow-xl);
    animation: tw-pop .4s ease-out;
}

.tw-pp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tw-pp-modal-head .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-pp-modal-head img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.tw-pp-modal-head b {
    color: var(--tw-text);
    font-size: 16px;
}

.tw-pp-modal-body {
    color: var(--tw-muted-2);
    font-size: 13.5px;
    line-height: 2;
}

/* Similar products below */
.tw-pp-similar {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 0 0 40px;
}

.tw-pp-similar h3 {
    color: var(--tw-text);
    margin-bottom: 16px;
}

/* The form wraps the whole panel body; `display: contents` keeps the grid
   layout intact while form association (and submission) stays untouched. */
.tw-pp-form {
    display: contents;
}

.tw-pp .invalid-feedback {
    color: var(--tw-primary) !important;
    font-size: 12px;
}

/* Select2 dark */
.tw-pp .select2-container .select2-selection--single {
    background: transparent !important;
    border: none !important;
    height: auto !important;
}

.tw-pp .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--tw-text) !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .tw-pp-grid {
        grid-template-columns: 1fr;
    }

    .tw-pp-denoms {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .tw-pp {
        /* Site-wide mobile header clearance is 100px (see .voucher-container);
           this file already runs its own mobile overrides from 720px, so the
           value is applied at that same breakpoint to stay self-consistent. */
        margin-top: 100px;
        padding: 12px 10px;
    }

    .tw-pp-banner {
        height: 160px;
    }

    .tw-pp-hero {
        padding: 0 16px;
        margin-top: -48px;
        flex-wrap: wrap;
    }

    .tw-pp-hero-img {
        width: 88px;
        height: 88px;
        border-radius: 18px;
    }

    .tw-pp-title {
        font-size: 20px;
    }

    /* Same segments as desktop, just tighter — the wider desktop gap/font-size
       wraps this row across multiple lines on a phone-width .tw-pp-hero-meta. */
    .tw-pp-stats {
        font-size: 11px;
        gap: 5px;
        row-gap: 3px;
    }

    .tw-pp-hero-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .tw-pp-grid {
        padding: 16px;
        gap: 14px;
    }

    .tw-pp-denoms {
        grid-template-columns: repeat(2, 1fr);
    }

    .tw-pp-fields-row {
        flex-direction: column;
    }

    .tw-pp-field {
        width: 100%;
    }

    .tw-pp-verify-wrap {
        max-width: none;
        width: 100%;
    }

    .tw-pp-verify-btn,
    #validate-submit {
        width: 100%;
    }

    .tw-pp-type {
        min-width: 100%;
    }

    .tw-pp-modal {
        padding: 20px 18px;
    }
}