/* Seller Pro popup surfaces reproduce the finished Fan Zone seller dialogs while remaining application-owned and shell-independent. */ .seller-pro-modal, .seller-pro-membership-action-layer { /* Rose is the safe fallback when the host has not selected a valid theme yet. */ --seller-pro-panel: rgba(13, 8, 11, .76); --seller-pro-surface-strong: rgba(18, 10, 14, .88); --seller-pro-surface-soft: rgba(28, 14, 20, .62); --seller-pro-text: #ffe8f0; --seller-pro-muted: #fbd1dd; --seller-pro-accent: #f78fb3; --seller-pro-accent-strong: #ff3a66; --seller-pro-accent-soft: #ffd3df; --seller-pro-border: rgba(247, 143, 179, .22); --seller-pro-border-active: rgba(255, 111, 145, .72); --seller-pro-shadow: rgba(231, 76, 60, .18); --seller-pro-glow: rgba(247, 143, 179, .13); --seller-pro-line-soft: color-mix(in srgb, var(--seller-pro-border) 70%, transparent); } .seller-pro-modal[data-theme="crimson"], .seller-pro-membership-action-layer[data-theme="crimson"] { --seller-pro-panel: rgba(16, 7, 9, .77); --seller-pro-surface-strong: rgba(24, 9, 12, .89); --seller-pro-surface-soft: rgba(34, 12, 16, .62); --seller-pro-text: #ffe9eb; --seller-pro-muted: #f6cdd2; --seller-pro-accent: #ef6d78; --seller-pro-accent-strong: #d92e4b; --seller-pro-accent-soft: #ffd3d7; --seller-pro-border: rgba(239, 109, 120, .23); --seller-pro-border-active: rgba(239, 109, 120, .76); --seller-pro-shadow: rgba(217, 46, 75, .20); --seller-pro-glow: rgba(239, 109, 120, .13); } .seller-pro-modal[data-theme="berry"], .seller-pro-membership-action-layer[data-theme="berry"] { --seller-pro-panel: rgba(12, 7, 13, .77); --seller-pro-surface-strong: rgba(20, 9, 22, .89); --seller-pro-surface-soft: rgba(30, 13, 32, .62); --seller-pro-text: #fceafa; --seller-pro-muted: #eacbe7; --seller-pro-accent: #d98ad8; --seller-pro-accent-strong: #b944a8; --seller-pro-accent-soft: #f8d7f5; --seller-pro-border: rgba(217, 138, 216, .22); --seller-pro-border-active: rgba(217, 138, 216, .72); --seller-pro-shadow: rgba(185, 68, 168, .19); --seller-pro-glow: rgba(217, 138, 216, .12); } .seller-pro-modal[data-theme="warm-gold"], .seller-pro-membership-action-layer[data-theme="warm-gold"] { --seller-pro-panel: rgba(14, 10, 7, .77); --seller-pro-surface-strong: rgba(22, 14, 8, .89); --seller-pro-surface-soft: rgba(32, 20, 11, .62); --seller-pro-text: #fff3df; --seller-pro-muted: #ead9bd; --seller-pro-accent: #e3b36e; --seller-pro-accent-strong: #c87c3d; --seller-pro-accent-soft: #f9e2bc; --seller-pro-border: rgba(227, 179, 110, .22); --seller-pro-border-active: rgba(227, 179, 110, .72); --seller-pro-shadow: rgba(200, 124, 61, .18); --seller-pro-glow: rgba(227, 179, 110, .12); } .seller-pro-modal { position: fixed; inset: 0; z-index: 16000; display: grid; place-items: center; width: auto; max-height: none; padding: 24px; pointer-events: auto; background: transparent; color: var(--seller-pro-text); font-family: inherit; isolation: isolate; } /* Seller Pro owns a real viewport modal layer. The dialog remains visually unchanged while the layer blocks the page below and provides a reliable outside-tap target without changing / overflow. */ .seller-pro-modal > .seller-pro-dialog, .seller-pro-modal > .seller-pro-dialog-wide { width: min(820px, 100%); max-height: calc(100dvh - 48px); } /* Shared Fan Zone modal geometry: fixed header, body-only scrolling. */ .seller-pro-dialog { width: min(820px, 100%); max-height: calc(100dvh - 48px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--seller-pro-border-active); border-radius: 22px; background: color-mix(in srgb, var(--seller-pro-surface-strong) 98%, transparent); color: var(--seller-pro-text); box-shadow: 0 30px 86px rgba(0, 0, 0, .48), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .seller-pro-dialog-wide { width: min(820px, 100%); } .seller-pro-head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; border-bottom: 1px solid var(--seller-pro-border); background: color-mix(in srgb, var(--seller-pro-surface-strong) 99%, transparent); } .seller-pro-head h3 { margin: 0; color: var(--seller-pro-text); font-size: 21px; line-height: 1.15; letter-spacing: -.02em; } .seller-pro-kicker { display: block; margin-bottom: 4px; color: var(--seller-pro-accent); font-size: 10px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; } .seller-pro-close { appearance: none; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--seller-pro-border); border-radius: 50%; background: color-mix(in srgb, var(--seller-pro-surface-soft) 96%, transparent); color: var(--seller-pro-text); font: inherit; font-size: 22px; font-weight: 850; line-height: 35px; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .seller-pro-close:hover, .seller-pro-close:focus-visible { color: var(--seller-pro-text); border-color: var(--seller-pro-border-active); background: color-mix(in srgb, var(--seller-pro-accent) 8%, var(--seller-pro-surface-soft)); outline: none; } .seller-pro-body { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--seller-pro-accent) 78%, transparent) color-mix(in srgb, var(--seller-pro-surface-soft) 38%, transparent); scrollbar-gutter: stable; } .seller-pro-body::-webkit-scrollbar { width: 8px; height: 8px; } .seller-pro-body::-webkit-scrollbar-track { border-radius: 999px; background: color-mix(in srgb, var(--seller-pro-surface-soft) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seller-pro-accent) 10%, transparent); } .seller-pro-body::-webkit-scrollbar-thumb { border: 2px solid color-mix(in srgb, var(--seller-pro-surface-strong) 80%, transparent); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--seller-pro-accent) 86%, transparent), color-mix(in srgb, var(--seller-pro-accent-soft) 68%, transparent)); } .seller-pro-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--seller-pro-accent), var(--seller-pro-accent-soft)); } /* Stream Pro +10 videos seller surface. */ .seller-pro-pack-modal .seller-pro-head p { max-width: 660px; margin: 8px 34px 0 0; color: var(--seller-pro-muted); font-size: 14.5px; line-height: 1.5; font-weight: 700; } .seller-pro-pack-body { display: block; padding: 0 22px 22px; } .seller-pro-pack-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; padding: 15px 1px 17px; border-bottom: 1px solid var(--seller-pro-line-soft); } .seller-pro-pack-overview > span { color: var(--seller-pro-muted); font-size: 12px; font-weight: 800; line-height: 1.25; } .seller-pro-pack-status { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-width: 0; text-align: right; } .seller-pro-pack-status strong { color: var(--seller-pro-text); font-size: 18px; font-weight: 950; line-height: 1.2; } .seller-pro-pack-status i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: var(--seller-pro-accent); transform: translateY(-2px); } .seller-pro-pack-status small { color: var(--seller-pro-muted); font-size: 13px; font-weight: 750; line-height: 1.35; } .seller-pro-benefits { padding: 19px 0 20px; border-bottom: 1px solid var(--seller-pro-line-soft); } .seller-pro-benefits h4, .seller-pro-quality-section h4 { margin: 0 0 14px; color: var(--seller-pro-accent-soft); font-size: 16px; font-weight: 950; line-height: 1.25; } .seller-pro-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .seller-pro-benefit { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; color: var(--seller-pro-muted); font-size: 13.5px; line-height: 1.48; } .seller-pro-benefit > i { position: relative; width: 24px; height: 24px; margin-top: 1px; border: 1px solid color-mix(in srgb, var(--seller-pro-accent) 56%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--seller-pro-accent) 10%, var(--seller-pro-surface-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .seller-pro-benefit > i::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--seller-pro-accent-soft); font-size: 12px; font-style: normal; font-weight: 950; line-height: 1; } .seller-pro-benefit strong { display: block; margin: 0 0 3px; color: var(--seller-pro-text); font-size: 14.5px; font-weight: 950; line-height: 1.28; } .seller-pro-benefit span { display: block; } .seller-pro-purchase-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 22px; align-items: center; margin: 20px 0 0; padding: 18px 19px; border: 1px solid color-mix(in srgb, var(--seller-pro-accent) 58%, var(--seller-pro-border)); border-radius: 17px; background: linear-gradient(110deg, color-mix(in srgb, var(--seller-pro-accent) 10%, var(--seller-pro-surface-soft)), color-mix(in srgb, var(--seller-pro-panel) 90%, transparent) 58%), color-mix(in srgb, var(--seller-pro-surface-soft) 68%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .16); } .seller-pro-purchase-copy strong { display: block; color: var(--seller-pro-accent-soft); font-size: 18px; font-weight: 950; line-height: 1.2; } .seller-pro-purchase-copy p { max-width: 470px; margin: 7px 0 0; color: var(--seller-pro-muted); font-size: 13.5px; line-height: 1.5; font-weight: 700; } .seller-pro-purchase-side { display: grid; gap: 8px; justify-items: stretch; } .seller-pro-price { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--seller-pro-text); } .seller-pro-price img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); } .seller-pro-price span { color: var(--seller-pro-text); font-size: 16px; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; } .seller-pro-price s, .seller-pro-resolution-price s { opacity: .58; } .seller-pro-balance { display: block; color: var(--seller-pro-muted); font-size: 12.5px; font-weight: 750; line-height: 1.35; text-align: right; } .seller-pro-balance.seller-pro-is-low { color: #ffb8c0; } .seller-pro-primary { appearance: none; width: 100%; min-height: 47px; margin: 0; padding: 11px 16px; border: 1px solid var(--seller-pro-accent); border-radius: 12px; background: linear-gradient(135deg, var(--seller-pro-glow), var(--seller-pro-panel)); color: var(--seller-pro-text); font: inherit; font-size: 14px; font-weight: 950; line-height: 1.2; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px color-mix(in srgb, var(--seller-pro-shadow) 65%, transparent); transition: transform .16s ease, border-color .16s ease, background .16s ease; } .seller-pro-primary:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--seller-pro-accent); background: var(--seller-pro-glow); } .seller-pro-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; border-color: var(--seller-pro-border); background: var(--seller-pro-panel); } .seller-pro-copy { color: var(--seller-pro-muted); line-height: 1.48; font-weight: 700; } .seller-pro-pack-modal .seller-pro-note { margin: 15px 1px 0; font-size: 12.5px; } /* Video purchase seller surface. The final original cascade intentionally gives this popup a larger header than the shared +10 dialog. */ .seller-pro-video-head { padding: 20px 22px 18px; } .seller-pro-video-head h3 { font-size: 24px; line-height: 1.12; } .seller-pro-video-title { margin: 6px 34px 0 0 !important; color: var(--seller-pro-accent-soft) !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1.35 !important; } .seller-pro-video-head p:not(.seller-pro-video-title) { max-width: 670px; margin: 7px 34px 0 0; color: var(--seller-pro-muted); font-size: 14.5px; line-height: 1.5; } .seller-pro-video-body { display: block; padding: 0 22px 22px; } .seller-pro-video-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 15px 1px 17px; border-bottom: 1px solid var(--seller-pro-border); } .seller-pro-video-overview > div { min-width: 0; } .seller-pro-video-overview > div > span { display: block; color: var(--seller-pro-muted); font-size: 12px; font-weight: 800; line-height: 1.25; } .seller-pro-video-overview strong { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--seller-pro-text); font-size: 17px; font-weight: 950; line-height: 1.25; } .seller-pro-video-overview img, .seller-pro-resolution-price img { width: 23px; height: 23px; flex: 0 0 23px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); } .seller-pro-video-overview .seller-pro-is-quality { text-align: right; } .seller-pro-video-overview .seller-pro-is-quality strong { justify-content: flex-end; color: var(--seller-pro-accent-soft); } .seller-pro-quality-section { padding: 19px 0 0; } .seller-pro-quality-section h4 { margin-bottom: 13px; } .seller-pro-resolutions { display: block; overflow: hidden; border: 1px solid var(--seller-pro-border); border-radius: 16px; background: color-mix(in srgb, var(--seller-pro-surface-soft) 46%, transparent); } .seller-pro-resolution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto); gap: 18px; align-items: center; min-height: 86px; padding: 14px 15px; background: transparent; } .seller-pro-resolution + .seller-pro-resolution { border-top: 1px solid var(--seller-pro-border); } .seller-pro-resolution.seller-pro-state-available { background: linear-gradient(90deg, color-mix(in srgb, var(--seller-pro-accent) 5%, transparent), transparent 52%); } .seller-pro-resolution.seller-pro-state-already_owned, .seller-pro-resolution.seller-pro-state-not_available, .seller-pro-resolution.seller-pro-state-source_not_scanned, .seller-pro-resolution.seller-pro-state-source_unavailable { opacity: 1; background: color-mix(in srgb, var(--seller-pro-surface-soft) 30%, transparent); } .seller-pro-resolution-copy { display: grid; gap: 4px; } .seller-pro-resolution-copy strong { color: var(--seller-pro-text); font-size: 19px; font-weight: 950; line-height: 1.2; } .seller-pro-resolution-copy span { color: var(--seller-pro-muted); font-size: 13.5px; font-weight: 700; line-height: 1.45; } .seller-pro-resolution-action { display: grid; grid-template-columns: minmax(100px, auto) minmax(118px, auto); gap: 12px; align-items: center; justify-content: end; } .seller-pro-resolution-price { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--seller-pro-text); font-variant-numeric: tabular-nums; } .seller-pro-resolution-price strong { color: var(--seller-pro-text); font-size: 15px; font-weight: 950; line-height: 1; } .seller-pro-resolution button { appearance: none; min-height: 42px; padding: 9px 13px; border: 1px solid var(--seller-pro-border-active); border-radius: 11px; background: color-mix(in srgb, var(--seller-pro-accent) 10%, var(--seller-pro-surface-soft)); color: var(--seller-pro-text); font: inherit; font-size: 13px; font-weight: 950; line-height: 1.2; cursor: pointer; white-space: nowrap; } .seller-pro-resolution.seller-pro-state-available button { border-color: color-mix(in srgb, var(--seller-pro-accent) 68%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--seller-pro-accent-soft) 18%, var(--seller-pro-surface-soft)), color-mix(in srgb, var(--seller-pro-accent) 12%, var(--seller-pro-surface-soft))); } .seller-pro-resolution button:hover:not(:disabled) { background: color-mix(in srgb, var(--seller-pro-accent) 19%, var(--seller-pro-surface-soft)); } .seller-pro-resolution button:disabled { opacity: .48; cursor: not-allowed; } .seller-pro-resolution.seller-pro-is-low-balance .seller-pro-resolution-price strong { color: #ffb8c0; } .seller-pro-video-modal .seller-pro-note { margin: 16px 1px 0; color: var(--seller-pro-muted); font-size: 13px; line-height: 1.5; font-weight: 400; } .seller-pro-feedback { min-height: 0; margin-top: 0; color: var(--seller-pro-muted); font-size: 13.5px; font-weight: 800; line-height: 1.45; } .seller-pro-feedback:not(:empty) { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--seller-pro-border); border-radius: 12px; background: color-mix(in srgb, var(--seller-pro-surface-soft) 52%, transparent); } .seller-pro-feedback.seller-pro-is-error:not(:empty) { color: #ffb8c0; border-color: color-mix(in srgb, #e74c3c 52%, transparent); background: color-mix(in srgb, #e74c3c 10%, transparent); } .seller-pro-feedback.seller-pro-is-success:not(:empty) { color: #bdf2cf; border-color: color-mix(in srgb, #2ecc71 44%, transparent); background: color-mix(in srgb, #2ecc71 8%, transparent); } @media (max-width: 760px) { .seller-pro-pack-body { padding: 0 18px 19px; } .seller-pro-pack-modal .seller-pro-head p { margin-right: 24px; font-size: 14px; } .seller-pro-benefit-grid { grid-template-columns: 1fr; gap: 13px; } .seller-pro-purchase-panel { grid-template-columns: 1fr; gap: 15px; padding: 16px; } .seller-pro-purchase-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .seller-pro-price { justify-content: flex-start; } .seller-pro-primary { grid-column: 1 / -1; grid-row: 2; } .seller-pro-balance { text-align: right; } .seller-pro-video-head { padding: 18px 18px 16px; } .seller-pro-video-head h3 { font-size: 22px; } .seller-pro-video-head p:not(.seller-pro-video-title) { margin-right: 24px; font-size: 14px; } .seller-pro-video-body { padding: 0 18px 19px; } .seller-pro-resolution { grid-template-columns: 1fr; gap: 11px; } .seller-pro-resolution-action { grid-template-columns: auto minmax(130px, 180px); justify-content: space-between; } .seller-pro-resolution-price { justify-content: flex-start; } } @media (max-width: 720px) { .seller-pro-modal { width: auto; max-height: none; padding: 10px; } .seller-pro-modal > .seller-pro-dialog, .seller-pro-modal > .seller-pro-dialog-wide { width: min(820px, 100%); max-height: calc(100dvh - 20px); } .seller-pro-modal > .seller-pro-dialog, .seller-pro-modal > .seller-pro-dialog-wide, .seller-pro-membership-action-dialog { border-radius: 18px; } .seller-pro-close { width: 44px; height: 44px; flex-basis: 44px; font-size: 24px; line-height: 39px; } /* Shared modal rules load after Stream Pro in the finished Fan Zone. */ .seller-pro-pack-modal .seller-pro-head { padding: 15px 16px 13px; } .seller-pro-pack-modal .seller-pro-head h3 { font-size: 19px; } } @media (max-width: 520px) { .seller-pro-pack-overview { align-items: flex-start; flex-direction: column; gap: 7px; } .seller-pro-pack-status { justify-content: flex-start; text-align: left; flex-wrap: wrap; } .seller-pro-purchase-side { grid-template-columns: 1fr; } .seller-pro-primary { grid-column: auto; grid-row: auto; } .seller-pro-balance { text-align: left; } .seller-pro-video-overview { grid-template-columns: 1fr; gap: 10px; } .seller-pro-video-overview .seller-pro-is-quality { text-align: left; } .seller-pro-video-overview .seller-pro-is-quality strong { justify-content: flex-start; } .seller-pro-resolution-action { grid-template-columns: 1fr; } .seller-pro-resolution button { width: 100%; } } /* Standard / Gold membership seller surface. */ .seller-pro-membership-modal { --seller-pro-membership-gold: #d6ad49; --seller-pro-membership-gold-bright: #f3dc8c; --seller-pro-membership-gold-deep: #4e3811; } .seller-pro-membership-intro { max-width: 670px; margin: 8px 34px 0 0; color: var(--seller-pro-muted); font-size: 14.5px; line-height: 1.5; font-weight: 700; } .seller-pro-membership-body { display: block; padding: 0 22px 22px; } .seller-pro-membership-overview { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 15px 0 17px; border-bottom: 1px solid var(--seller-pro-border); } .seller-pro-membership-overview.seller-pro-is-gold { border-bottom-color: color-mix(in srgb, var(--seller-pro-membership-gold) 35%, var(--seller-pro-border)); } .seller-pro-membership-status-copy > span { display: block; color: var(--seller-pro-muted); font-size: 12px; font-weight: 750; line-height: 1.25; } .seller-pro-membership-status-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 4px; } .seller-pro-membership-status-line strong { flex: 0 0 auto; color: var(--seller-pro-text); font-size: 18px; font-weight: 950; line-height: 1.2; } .seller-pro-membership-overview.seller-pro-is-gold .seller-pro-membership-status-line strong { color: var(--seller-pro-membership-gold-bright); } .seller-pro-membership-status-line small { min-width: 0; color: var(--seller-pro-muted); font-size: 13px; line-height: 1.35; } .seller-pro-membership-status-dot { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: var(--seller-pro-accent); transform: translateY(-2px); } .seller-pro-membership-overview.seller-pro-is-gold .seller-pro-membership-status-dot { background: var(--seller-pro-membership-gold-bright); } .seller-pro-membership-benefits-section { display: block; padding: 19px 0 20px; border-bottom: 1px solid var(--seller-pro-border); } .seller-pro-membership-benefits-section > h4 { margin: 0 0 14px; color: var(--seller-pro-accent-soft); font-size: 16px; font-weight: 900; line-height: 1.25; } .seller-pro-membership-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .seller-pro-membership-benefit { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; color: var(--seller-pro-muted); font-size: 13.5px; line-height: 1.48; } .seller-pro-membership-benefit > i { position: relative; width: 24px; height: 24px; margin-top: 1px; border: 1px solid color-mix(in srgb, var(--seller-pro-accent) 56%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--seller-pro-accent) 10%, var(--seller-pro-surface-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .seller-pro-membership-benefit > i::before { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--seller-pro-accent-soft); font-size: 12px; font-style: normal; font-weight: 950; line-height: 1; } .seller-pro-membership-benefit strong { display: block; margin: 0 0 3px; color: var(--seller-pro-text); font-size: 14.5px; font-weight: 900; line-height: 1.28; } .seller-pro-membership-benefit span { display: block; } .seller-pro-membership-purchase-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 280px); gap: 22px; align-items: center; margin: 20px 0 0; padding: 18px 19px; border: 1px solid color-mix(in srgb, var(--seller-pro-membership-gold) 58%, var(--seller-pro-border)); border-radius: 17px; background: linear-gradient(110deg, color-mix(in srgb, var(--seller-pro-membership-gold) 10%, var(--seller-pro-surface-soft)), color-mix(in srgb, var(--seller-pro-surface-strong) 90%, transparent) 58%), color-mix(in srgb, var(--seller-pro-surface-soft) 68%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 32px rgba(0,0,0,.16); } .seller-pro-membership-purchase-copy strong { display: block; color: var(--seller-pro-membership-gold-bright); font-size: 18px; font-weight: 950; line-height: 1.2; } .seller-pro-membership-purchase-copy p { max-width: 470px; margin: 7px 0 0; color: var(--seller-pro-muted); font-size: 13.5px; line-height: 1.5; } .seller-pro-membership-purchase-side { display: grid; gap: 8px; justify-items: stretch; } .seller-pro-membership-price { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--seller-pro-text); font-size: 16px; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; } .seller-pro-membership-price img { width: 25px; height: 25px; flex: 0 0 25px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); } .seller-pro-membership-price s { opacity: .58; } .seller-pro-membership-buy { appearance: none; width: 100%; min-height: 47px; padding: 11px 16px; border: 1px solid color-mix(in srgb, var(--seller-pro-membership-gold) 70%, transparent); border-radius: 12px; background: linear-gradient(180deg, var(--seller-pro-membership-gold-bright), var(--seller-pro-membership-gold)); color: #2f2209; font: inherit; font-size: 14px; font-weight: 950; line-height: 1.2; letter-spacing: .005em; cursor: pointer; box-shadow: 0 9px 24px color-mix(in srgb, var(--seller-pro-membership-gold) 16%, transparent); } .seller-pro-membership-buy:hover:not(:disabled), .seller-pro-membership-buy:focus-visible:not(:disabled) { filter: brightness(1.05); outline: none; } .seller-pro-membership-buy:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; } .seller-pro-membership-balance { display: block; color: var(--seller-pro-muted); font-size: 12.5px; line-height: 1.35; text-align: right; } .seller-pro-membership-balance.seller-pro-is-low { color: #ffb8c0; } .seller-pro-membership-earn-section { padding: 19px 1px 2px; } .seller-pro-membership-earn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .seller-pro-membership-earn-head strong { color: var(--seller-pro-text); font-size: 15px; font-weight: 900; line-height: 1.25; } .seller-pro-membership-earn-head span { flex: 0 0 auto; color: var(--seller-pro-accent-soft); font-size: 12.5px; font-weight: 850; line-height: 1.25; font-variant-numeric: tabular-nums; } .seller-pro-membership-earn-section p { max-width: 650px; margin: 6px 0 11px; color: var(--seller-pro-muted); font-size: 13px; line-height: 1.48; } .seller-pro-membership-progress { height: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--seller-pro-border) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--seller-pro-surface-soft) 76%, transparent); } .seller-pro-membership-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--seller-pro-accent-strong), var(--seller-pro-accent), var(--seller-pro-membership-gold)); } /* Membership-only confirmation and insufficient-funds dialogs. */ .seller-pro-membership-action-layer { --seller-pro-membership-gold: #d6ad49; --seller-pro-membership-gold-bright: #f3dc8c; position: fixed; z-index: 16100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.34); color: var(--seller-pro-text); font-family: inherit; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .seller-pro-membership-action-dialog { width: min(520px, calc(100vw - 48px)); } .seller-pro-membership-action-body { padding: 18px 20px 20px; } .seller-pro-membership-action-body p { margin: 0; color: var(--seller-pro-text); font-size: 15px; line-height: 1.6; } .seller-pro-membership-action-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; } .seller-pro-membership-action-button { appearance: none; min-height: 42px; padding: 9px 16px; border: 1px solid var(--seller-pro-border); border-radius: 11px; background: color-mix(in srgb, var(--seller-pro-surface-soft) 96%, transparent); color: var(--seller-pro-text); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; } .seller-pro-membership-action-button:hover, .seller-pro-membership-action-button:focus-visible { border-color: var(--seller-pro-border-active); outline: none; } .seller-pro-membership-action-button.seller-pro-is-primary { border-color: color-mix(in srgb, var(--seller-pro-membership-gold) 70%, transparent); background: linear-gradient(180deg, var(--seller-pro-membership-gold-bright), var(--seller-pro-membership-gold)); color: #241309; } @media (max-width: 760px) { .seller-pro-membership-intro { margin-right: 24px; font-size: 14px; } .seller-pro-membership-body { padding: 0 18px 19px; } .seller-pro-membership-overview { min-height: 68px; padding: 13px 0 15px; } .seller-pro-membership-benefits { gap: 13px 20px; } .seller-pro-membership-purchase-panel { grid-template-columns: 1fr; gap: 15px; padding: 16px; } .seller-pro-membership-purchase-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .seller-pro-membership-price { justify-content: flex-start; } .seller-pro-membership-buy { grid-column: 1 / -1; grid-row: 2; } .seller-pro-membership-balance { text-align: right; } } @media (max-width: 720px) { .seller-pro-membership-action-layer { padding: 10px; } .seller-pro-membership-action-dialog { width: calc(100vw - 20px); } .seller-pro-membership-action-actions { align-items: stretch; flex-direction: column-reverse; } .seller-pro-membership-action-button { width: 100%; } } @media (max-width: 560px) { .seller-pro-membership-status-line { align-items: flex-start; flex-wrap: wrap; gap: 5px 7px; } .seller-pro-membership-status-dot { margin-top: 7px; transform: none; } .seller-pro-membership-benefits { grid-template-columns: 1fr; gap: 13px; } .seller-pro-membership-purchase-side { grid-template-columns: 1fr; } .seller-pro-membership-price { justify-content: flex-start; } .seller-pro-membership-buy { grid-column: auto; grid-row: auto; } .seller-pro-membership-balance { text-align: left; } .seller-pro-membership-earn-head { align-items: flex-start; flex-direction: column; gap: 5px; } }