/* Rivmedia Plate Surrounds v1.0.0
 * ================================
 * 1. Standalone configurator ([plate_surround_builder])
 * 2. Surround preview drawing (shared)
 * 3. Builder-mode frame overlay (wraps the live plate preview)
 */

.rpsr{max-width:760px;margin:0 auto;font-family:inherit}
.rpsr-intro{text-align:center;color:#555;margin:0 0 20px}
.rpsr-title{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px}
.rpsr-section{margin-bottom:28px}
.rpsr [hidden]{display:none!important}

/* ── Surround preview drawing ─────────────────────────── */
.rpsr-preview{background:linear-gradient(180deg,#3a3f46 0%,#e8eaee 100%);border-radius:14px;padding:9% 6% 12%;margin-bottom:28px}
.rpsr-surround{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:520/118;background:linear-gradient(180deg,#1b1d20 0%,#050506 55%,#111215 100%);border-radius:3.2%/14%;box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.22)}
.rpsr-surround-recess{position:absolute;inset:5.5% 2.6%;background:linear-gradient(160deg,#26282c 0%,#0c0d0f 60%,#1a1b1e 100%);border-radius:2.6%/12%;box-shadow:inset 0 3px 9px rgba(0,0,0,.85),inset 0 -1px 2px rgba(255,255,255,.06)}
/* Luxury bottom tab: hangs from the surround's bottom edge (top of the
 * tab is flush with the frame edge, wing protrudes below - matching the
 * product design). */
/* The wing shape lives on ::before so its clip-path doesn't clip the
 * logo - the logo is bottom-anchored to the wing and free to extend
 * upward through the surround's bottom rail, matching the physical
 * product where badges span the full tab-to-frame height. */
.rpsr-surround-tab{display:none;position:absolute;left:50%;top:calc(94.5% - 1px);bottom:auto;transform:translateX(-50%);width:58%;height:21.5%;background:none;box-shadow:none;filter:drop-shadow(0 5px 12px rgba(0,0,0,.5))}
.rpsr-surround-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#101114 0%,#040405 70%,#0d0e10 100%);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.rpsr-surround-tab::after{content:'';position:absolute;left:3px;right:3px;top:0;bottom:3px;background:var(--rpsr-tab-bg,transparent);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);z-index:1}
.rpsr-surround-tab .rpsr-tab-logo,.rpsr-surround-tab .rpsr-tab-logo-tint{z-index:2}
.rpsr-surround.__luxury .rpsr-surround-tab{display:block}
/* The tab now includes the old rail band, so logos fit INSIDE it -
 * overflowing above the face read as bursting out once the face
 * could be coloured. */
.rpsr-tab-logo{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-height:82%;max-width:74%;object-fit:contain;display:block}

/* ── Type selector ────────────────────────────────────── */
.rpsr-type-grid,.rpsr-qty-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rpsr-none-row{margin-bottom:12px}
.rpsr-none-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid #d9dde3;border-radius:10px;padding:13px 16px;cursor:pointer;font-weight:700;font-size:14px;transition:border-color .15s,box-shadow .15s;position:relative}
.rpsr-none-btn input{position:absolute;opacity:0;pointer-events:none}
.rpsr-none-btn.__active{border-color:#1d4886;box-shadow:0 0 0 3px rgba(29,72,134,.12)}
.rpsr-type-img{display:block;margin:0 auto 8px;width:100%}
.rpsr-type-img img{display:block;margin:0 auto;max-width:100%;max-height:110px;object-fit:contain;border-radius:6px}
.rpsr-type-item,.rpsr-qty-item{display:flex;flex-direction:column;gap:2px;border:2px solid #d9dde3;border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:center}
.rpsr-type-item input,.rpsr-qty-item input{position:absolute;opacity:0;pointer-events:none}
.rpsr-type-item.__active,.rpsr-qty-item.__active{border-color:#1d4886;box-shadow:0 0 0 3px rgba(29,72,134,.12)}
.rpsr-type-name{font-weight:700;font-size:15px}
.rpsr-type-desc{font-size:12px;color:#666}
.rpsr-type-price{font-weight:700;color:#1d4886;margin-top:4px}
.rpsr-qty-item span{font-weight:600;font-size:14px}

/* ── Logo & colour grids ──────────────────────────────── */
.rpsr-logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.rpsr-logo-item{border:2px solid #d9dde3;border-radius:8px;background:#0d0e10;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;padding:8px;transition:border-color .15s,box-shadow .15s}
.rpsr-logo-item img{max-width:70%;max-height:55%;object-fit:contain}
.rpsr-logo-label{font-size:11px;color:#cfd3d9;text-align:center;line-height:1.2}
.rpsr-logo-none{color:#cfd3d9;font-size:13px;font-weight:600}
.rpsr-logo-item.__active{border-color:#1d4886;box-shadow:0 0 0 3px rgba(29,72,134,.15)}
.rpsr-logo-item:focus-visible{outline:2px solid #1d4886;outline-offset:2px}

.rpsr-colour-grid{display:flex;flex-wrap:wrap;gap:10px}
.rpsr-colour-item{border:2px solid #d9dde3;border-radius:8px;background:#0d0e10;width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rpsr-colour-item img{max-width:64%;max-height:50%;object-fit:contain}
.rpsr-colour-item span{font-size:10px;color:#cfd3d9}
.rpsr-colour-item.__active{border-color:#1d4886;box-shadow:0 0 0 3px rgba(29,72,134,.15)}
.rpsr-colour-item:focus-visible{outline:2px solid #1d4886;outline-offset:2px}

/* ── Checkout ─────────────────────────────────────────── */
.rpsr-checkout{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #e2e5ea;padding-top:18px}
.rpsr-checkout-price{font-size:16px}
.rpsr-checkout-price strong{font-size:22px;color:#1d4886;margin-left:6px}
.rpsr-pair-note{display:block;font-size:12px;color:#666}
.rpsr-add-to-cart{background:#1d4886;color:#fff;border:0;border-radius:8px;padding:14px 28px;font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s}
.rpsr-add-to-cart:hover{opacity:.9}
.rpsr-add-to-cart:disabled{opacity:.6;cursor:default}
.rpsr-error{color:#b32d2e;font-size:13px;margin-top:10px}

@media screen and (max-width:560px){
  .rpsr-type-grid,.rpsr-qty-grid{grid-template-columns:1fr}
  .rpsr-checkout{flex-direction:column;align-items:stretch;text-align:center}
}

/* ── Builder-mode: frame the live plate preview ───────── */
/* JS wraps each .riv-plate in .rpsr-wrap and appends .rpsr-plate-tab.
 * The wrap draws the black surround around the real rendered plate, so
 * the final step literally shows the surround around the number plate. */
.npb .rpsr-wrap{position:relative;width:fit-content;max-width:90%;margin:0 auto}
.npb .rpsr-wrap.__on{background:linear-gradient(180deg,#1b1d20 0%,#050506 55%,#111215 100%);border-radius:24px;padding:12px;box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.22)}
.npb .rpsr-wrap.__on.__luxury{margin-bottom:32px}
/* Inside the wrap the plate fills the wrap; size-variant widths
 * (short/motorcycle/vintage) still apply via the plate's own width. */
.npb .rpsr-wrap .riv-plate{max-width:100%}
/* Tab top edge sits flush with the surround's bottom edge and the wing
 * protrudes below it - inline with the black surround, not above it. */
/* Long, shallow wing matching the physical product: ~55% of the plate
 * width, slim depth, gentle end tapers. Shape on ::before so the
 * clip-path doesn't clip the logo, which is bottom-anchored and can
 * grow upward to the surround's edge. */
/* Wing overlaps the frame's 12px bottom rail so a chosen colour runs
 * flush to the plate edge (matching the physical product); ::before
 * stays the black frame shape, ::after is the colour face inset for a
 * black trim - transparent when standard black is selected. */
.npb .rpsr-plate-tab{display:none;position:absolute;left:50%;top:calc(100% - 13px);bottom:auto;transform:translateX(-50%);width:55%;height:calc(12% + 12px);background:none;box-shadow:none;filter:drop-shadow(0 5px 12px rgba(0,0,0,.5));z-index:3}
.npb .rpsr-plate-tab::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#101114 0%,#040405 70%,#0d0e10 100%);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.npb .rpsr-plate-tab::after{content:'';position:absolute;left:3px;right:3px;top:0;bottom:3px;background:var(--rpsr-tab-bg,transparent);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);z-index:1}
.npb .rpsr-plate-tab img,.npb .rpsr-plate-tab .rpsr-tab-logo-tint{z-index:2}
.npb .rpsr-wrap.__on.__luxury .rpsr-plate-tab{display:block}
/* Cap: bottom-anchored inside the wing, growing upward but staying
 * within the wing + surround-rail band (never past the black). */
.npb .rpsr-plate-tab img{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);max-height:82%;max-width:74%;object-fit:contain;display:block}
/* Hide the wrap when its plate is hidden (front/rear toggle) */
.npb .rpsr-wrap:has(.riv-plate.__hidden){display:none}
.npb .rpsr-wrap.rpsr-hidden{display:none}

/* Builder panel styling reuses .npb styles; small additions: */
.npb .rpsr-builder-note{font-size:13px;color:#666;margin:0 0 14px}
.npb .rpsr-type-grid{margin-bottom:8px}
.npb .rpsr-price-line{font-size:14px;margin:14px 0 0;color:#1d4886;font-weight:700}


/* ═══ LOGO TINT OVERLAY (v1.0.9) ══════════════════════════════════
 * A tinted logo hides the <img> and renders this sibling instead:
 * the transparent artwork becomes a CSS mask filled with the tint
 * colour - one PNG serves every colour. --rpsr-lr (the image's
 * measured aspect ratio) makes it size exactly as the img would
 * under the same height/width caps. */
.rpsr-tab-logo-tint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);height:82%;max-width:74%;aspect-ratio:var(--rpsr-lr,3/1);background:var(--rpsr-tint,#fff);-webkit-mask:var(--rpsr-mask) center/contain no-repeat;mask:var(--rpsr-mask) center/contain no-repeat}
.npb .rpsr-plate-tab .rpsr-tab-logo-tint{height:82%}
/* Tint swatch dot in the colour picker */
.rpsr-colour-item .rpsr-colour-dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:block;box-shadow:0 1px 3px rgba(0,0,0,.4)}


/* ═══ CIRCULAR COLOUR SWATCHES (v1.0.10) ══════════════════════════
 * Matches the plate builder's border colour picker: 44px circles
 * auto-filled with the colour (or the artwork, clipped), name in the
 * tooltip, navy ring + scale on the active swatch. Overrides the old
 * dark square tiles. */
.rpsr-colour-swatch.rpsr-colour-item{width:44px;height:44px;border-radius:50%;border:3px solid #d9dde3;background:#fff;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-direction:row;gap:0;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.rpsr-colour-swatch.rpsr-colour-item:hover{border-color:#9db3d1}
.rpsr-colour-swatch.rpsr-colour-item.__active{border-color:#1d4886!important;transform:scale(1.1);box-shadow:0 0 0 3px rgba(29,72,134,.12),inset 0 0 0 1px rgba(0,0,0,.06)}
.rpsr-colour-swatch.rpsr-colour-item img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:50%}
.rpsr-colour-swatch .rpsr-swatch-name{font-size:8px;color:#5b6472;text-align:center;line-height:1.1;padding:2px}
@media screen and (max-width:600px){.rpsr-colour-swatch.rpsr-colour-item{width:38px;height:38px}}


/* ═══ CUSTOM LOGO NOTICE (v1.0.12) ════════════════════════════════ */
.rpsr-logo-notice{margin:16px 0 0}
.rpsr-logo-notice-text{margin:0;font-size:14px;line-height:1.6;color:#31343d;background:#fff7dd;border:1px solid #f2d47a;border-left:4px solid #f0b400;border-radius:10px;padding:12px 16px;box-shadow:0 1px 4px rgba(16,27,51,.06)}
.rpsr-logo-notice-text a{color:#1d4886;font-weight:800;text-decoration:none;white-space:nowrap}
.rpsr-logo-notice-text a:hover{text-decoration:underline}


/* ═══ SEO LANDING PAGE (v1.0.13) ══════════════════════════════════
 * Styles for the "Plate Surrounds Landing (Plugin)" page template -
 * navy hero + yellow accents matching the site's landing language. */
.rpsr-landing{--rpsr-navy:#101b33;--rpsr-navy-2:#1b2a4a;--rpsr-yellow:#ffd42e;--rpsr-text:#31343d;--rpsr-muted:#5b6472}
.rpsr-landing .container{max-width:1140px;margin:0 auto;padding:0 20px}
.rpsr-landing-narrow{max-width:820px!important}
.rpsr-landing-center{text-align:center}

.rpsr-landing-hero{background:linear-gradient(160deg,var(--rpsr-navy) 0%,var(--rpsr-navy-2) 100%);color:#fff;text-align:center;padding:64px 0 56px;border-bottom:4px solid var(--rpsr-yellow)}
.rpsr-landing-badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:800;letter-spacing:2px;border-radius:999px;padding:6px 16px;margin-bottom:18px}
.rpsr-landing-hero h1{color:#fff;font-size:clamp(28px,4.5vw,44px);line-height:1.15;margin:0 0 16px;font-weight:800}
.rpsr-landing-sub{max-width:720px;margin:0 auto 22px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.85)}
.rpsr-landing-ticks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:0 0 28px;padding:0}
.rpsr-landing-ticks li{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
.rpsr-landing-ticks li::before{content:'\2713';color:var(--rpsr-yellow);font-weight:800;margin-right:8px}
.rpsr-landing-cta{display:inline-block;background:var(--rpsr-yellow);color:#111;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.6px;padding:15px 34px;border-radius:10px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .12s,box-shadow .15s}
.rpsr-landing-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.3);color:#111}

.rpsr-landing-configurator{background:#f4f5f7;padding:48px 0}
.rpsr-landing-section{padding:56px 0}
.rpsr-landing-alt{background:#f4f5f7}
.rpsr-landing-section h2{color:var(--rpsr-navy);font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 18px}
.rpsr-landing-section p{color:var(--rpsr-text);font-size:16px;line-height:1.75;margin:0 0 16px}
.rpsr-landing-section a{color:#1d4886;font-weight:700}

.rpsr-landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:28px}
.rpsr-landing-card{background:#fff;border:1px solid #e8ebf1;border-radius:14px;padding:26px 24px;box-shadow:0 2px 10px rgba(16,27,51,.05)}
.rpsr-landing-alt .rpsr-landing-card{border-color:#e2e6ee}
.rpsr-landing-card h3{color:var(--rpsr-navy);font-size:17px;font-weight:800;margin:0 0 10px}
.rpsr-landing-card p{font-size:14px;line-height:1.65;color:var(--rpsr-muted);margin:0}

.rpsr-landing-steps{margin:8px 0 0;padding-left:22px}
.rpsr-landing-steps li{font-size:16px;line-height:1.7;color:var(--rpsr-text);margin:0 0 12px}

.rpsr-landing-faq{border-bottom:1px solid #e8ebf1;padding:18px 0}
.rpsr-landing-faq h3{color:var(--rpsr-navy);font-size:16px;font-weight:800;margin:0 0 8px}
.rpsr-landing-faq p{font-size:15px;line-height:1.7;color:var(--rpsr-muted);margin:0}

.rpsr-landing-final{background:linear-gradient(160deg,var(--rpsr-navy) 0%,var(--rpsr-navy-2) 100%);color:#fff;text-align:center;padding:56px 0;border-top:4px solid var(--rpsr-yellow)}
.rpsr-landing-final h2{color:#fff;font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 12px}
.rpsr-landing-final p{color:rgba(255,255,255,.85);font-size:16px;margin:0 0 24px}

@media screen and (max-width:600px){
.rpsr-landing-hero{padding:44px 0 40px}
.rpsr-landing-section{padding:38px 0}
.rpsr-landing-configurator{padding:28px 0}
}


/* Landing: custom-holders enquiry */
.rpsr-landing-form{background:#fff;border:1px solid #e8ebf1;border-radius:14px;padding:28px;margin-top:28px;box-shadow:0 2px 10px rgba(16,27,51,.05)}
.rpsr-landing-form h3{color:#101b33;font-size:18px;font-weight:800;margin:0 0 16px}
.rpsr-landing-cta-navy{background:#101b33;color:#fff}
.rpsr-landing-cta-navy:hover{color:#fff;background:#1b2a4a}


/* Logo tile thumbs honour the default tint - a dark logo on the dark
 * tile is invisible otherwise. Same footprint as the <img>. */
.rpsr-logo-item .rpsr-logo-thumb-tint{display:block;width:70%;height:55%;background:var(--rpsr-tint,#fff);-webkit-mask:var(--rpsr-mask) center/contain no-repeat;mask:var(--rpsr-mask) center/contain no-repeat}


/* Landing: marque pill list (auto-generated from the Logos Manager) */
.rpsr-landing-logos{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 22px}
.rpsr-landing-logo-pill{background:#fff;border:1px solid #dfe4ec;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:#101b33;box-shadow:0 1px 4px rgba(16,27,51,.05)}
.rpsr-landing-alt .rpsr-landing-logo-pill{border-color:#d7dde8}


/* Logo surcharge badge on the tiles - the price rise is visible
 * before selecting, not a silent total change. */
.rpsr-logo-item .rpsr-logo-price{font-size:11px;font-weight:800;color:#ffd42e;line-height:1}


/* Tab Colour visible pricing caption */
.rpsr-tab-price-note{margin:2px 0 10px;font-size:12px;font-weight:600;color:#5b6472}


/* ═══ CLOSE-UP LINKS + MODAL (v1.0.20) ════════════════════════════ */
.rpsr-type-item .rpsr-closeup-link{background:none;border:0;padding:2px 0;margin:2px 0 0;font-size:12px;font-weight:700;color:#1d4886;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rpsr-type-item .rpsr-closeup-link:hover{color:#12315e}
.rpsr-closeup-overlay{position:fixed;inset:0;z-index:99999;background:rgba(10,14,25,.82);display:none;align-items:center;justify-content:center;padding:24px}
.rpsr-closeup-overlay.__open{display:flex}
.rpsr-closeup-box{position:relative;background:#fff;border-radius:14px;padding:14px;max-width:min(860px,94vw);max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column}
.rpsr-closeup-box img{display:block;max-width:100%;max-height:calc(92vh - 90px);object-fit:contain;border-radius:8px}
.rpsr-closeup-caption{margin:10px 4px 2px;font-size:13px;font-weight:700;color:#101b33;text-align:center}
.rpsr-closeup-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;border:0;background:#101b33;color:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.rpsr-closeup-close:hover{background:#1d4886}