/* The one-page configurator (configurator-onepage.njk). Scoped to .op-config so it
   cannot touch the holder, which still uses keyring-configurator.css. Spacing and
   alignment use logical properties (inline-start/end), so the Arabic page mirrors
   without a second rule set; only the arrows are flipped by hand. */
.op-config{--op-brand:var(--concept-brand,#0c596c);--op-wash:#edf5f5;--op-card:var(--white,#fffdf8);--op-soft:var(--soft,#6b6459);--op-line:var(--line,#ded7c9);width:min(calc(100% - 32px),1260px);margin:auto;padding:1.6rem 0 4rem}
.op-config[hidden]{display:none}
.op-config button{font:inherit;color:inherit;cursor:pointer}
.op-config button:disabled{cursor:default;opacity:.4}
.op-config :is(button,input,a):focus-visible{outline:3px solid color-mix(in srgb,var(--op-brand) 45%,transparent);outline-offset:3px}
[dir=rtl] .op-arrow{display:inline-block;transform:scaleX(-1)}
.op-eyebrow{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;font-weight:650;color:var(--op-brand)}
.op-hero{padding:.6rem 0 1.6rem}
.op-hero h1{font-size:clamp(2rem,4.2vw,2.9rem);letter-spacing:-.02em;margin:.5rem 0}
.op-hero p:last-child{color:var(--op-soft);margin:0;font-size:.92rem}
.op-layout{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:2.2rem;align-items:start}
.op-visual{position:sticky;top:calc(var(--header-h,76px) + 16px);min-width:0}
.op-preview{border-radius:20px;background:#ebe5da radial-gradient(ellipse at 45% 40%,#ffffff8c,transparent 70%);padding:1.1rem 1.35rem .9rem}
.op-preview__head,.op-preview__foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.op-live{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:.4rem;color:#5f6b61}
.op-live:before{content:'';width:6px;height:6px;border-radius:50%;background:#5b8064}
.op-stage{height:330px;display:flex;align-items:center;justify-content:center}
.op-face{width:100%;height:100%;max-width:360px;filter:drop-shadow(6px 14px 14px #39261930)}
.op-face text{font-family:var(--sans,system-ui,sans-serif)}
.op-preview__foot{padding-top:.7rem;border-top:1px solid #d9d2c7}
.op-preview__foot strong{font-size:.85rem;font-weight:600}
.op-preview__foot p{margin:0;font-size:.74rem;color:var(--op-soft)}
.op-note{font-size:.68rem;line-height:1.6;text-align:center;color:#7c817b;padding:.6rem .8rem;margin:0}
.op-segmented{display:flex;border:1px solid #dfdbd1;background:#f6f2e9;border-radius:9px;padding:3px;flex:0 0 auto}
.op-segmented button{border:0;background:none;padding:.45rem 1.1rem;border-radius:6px;font-size:.78rem;min-height:36px}
.op-segmented button[aria-pressed=true]{background:#fffefa;box-shadow:0 2px 7px #4638250d;color:var(--op-brand);font-weight:600}
.op-segmented--inline{display:inline-flex;margin-bottom:.8rem}
.op-primary,.op-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.1rem;border-radius:9px;font-size:.8rem;font-weight:600;text-decoration:none}
.op-primary{border:1px solid var(--op-brand);background:var(--op-brand);color:#fff!important}
.op-secondary{border:1px solid #bccccc;background:#fffefa;color:var(--op-brand)!important}
.op-primary--wide{width:100%;justify-content:space-between;margin-top:.9rem;box-shadow:0 8px 20px #0c56651a}
.op-summary{padding:1.1rem 1.35rem;background:var(--op-card);border:1px solid var(--op-line);border-radius:15px}
.op-summary h2,.op-summary h3{font-size:1.3rem;margin:0 0 .6rem}
.op-line{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;padding:.2rem 0;font-size:.78rem}
.op-line>span:first-child{color:#5f6b6a;min-width:0;overflow-wrap:anywhere}
.op-line>span:last-child{white-space:nowrap}
.op-line .is-included{color:#4f6f57}
.op-total{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border-top:1px solid var(--op-line);padding-top:.8rem;margin-top:.6rem}
.op-total span{font-size:.85rem}
.op-total small{display:block;color:var(--op-soft);font-size:.66rem}
.op-total strong{font-size:1.5rem;font-weight:600;white-space:nowrap}
.op-form{min-width:0;background:var(--op-card);border:1px solid var(--op-line);border-radius:18px;padding:0 1.6rem}
.op-step{padding:1.5rem 0;border-bottom:1px solid var(--op-line)}
.op-step:last-child{border-bottom:0}
.op-step[hidden]{display:none}
.op-step__head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.op-step__head h2{font-size:1.45rem;letter-spacing:-.01em}
.op-step__n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f2ece2;color:#7d7568;font-size:.64rem;flex:0 0 auto}
.op-step__aside{margin-inline-start:auto;color:var(--op-brand);font-size:.78rem;font-weight:600;white-space:nowrap}
.op-step__aside--muted{color:var(--op-soft);font-weight:400}
.op-step__intro{font-size:.78rem;color:var(--op-soft);margin:-.4rem 0 .9rem;line-height:1.6}
.op-field{display:flex;justify-content:space-between;gap:.8rem;font-size:.78rem;font-weight:600;margin:1rem 0 .6rem}
.op-field span:last-child{font-weight:400;color:var(--op-soft)}
.op-field--tight{margin-top:0}
.op-choice{border:1px solid var(--op-line);background:#fffefa;border-radius:9px;text-align:start}
.op-choice[aria-pressed=true]{border:1.5px solid var(--op-brand);background:var(--op-wash);box-shadow:0 0 0 .5px var(--op-brand)}
.op-shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.5rem}
.op-shape{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;min-height:56px}
.op-shape svg{width:40px;height:40px;flex:0 0 auto}
.op-shape strong{display:block;font-size:.78rem;font-weight:600}
.op-shape small{display:block;font-size:.66rem;color:var(--op-soft)}
.op-swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.op-swatch{position:relative;border:1px solid transparent;background:none;border-radius:9px;padding:4px;width:44px;height:44px;display:grid;place-items:center}
.op-swatch span{width:32px;height:32px;border-radius:6px;background-size:cover;box-shadow:inset 0 0 0 1px #0000001f}
.op-swatch[aria-pressed=true]{border-color:var(--op-brand);background:var(--op-wash)}
.op-swatch[aria-pressed=true]:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.95rem;text-shadow:0 0 3px #000a}
.op-swatch:disabled:before{content:'';position:absolute;inset-inline:8px;top:50%;border-top:1.5px solid #6a5b52;transform:rotate(-40deg)}
.op-side-controls{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.op-mirror{display:flex;align-items:center;gap:.45rem;font-size:.78rem}
.op-mirror input{accent-color:var(--op-brand);width:17px;height:17px;margin:0}
.op-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.op-type{display:flex;flex-direction:column;padding:.8rem .6rem .75rem;min-height:110px}
.op-type__icon{width:23px;height:23px;margin-bottom:.55rem;fill:none;stroke:var(--op-brand);stroke-width:1.3}
.op-type strong{font-size:.78rem;font-weight:600}
.op-type__price{margin-top:auto;padding-top:.3rem;font-size:.72rem;color:var(--op-brand)}
.op-type__price small{font-size:.62rem;color:var(--op-soft)}
.op-detail{margin-top:.8rem;font-size:.74rem;line-height:1.7}
.op-muted{color:var(--op-soft);margin:0}
.op-detail-box{padding:.85rem .9rem;background:#f4f5f0;border-radius:9px}
.op-detail-box strong{display:block;color:#3e5353;font-weight:600;font-size:.8rem}
.op-detail-box p{margin:.2rem 0 0;color:var(--op-soft)}
.op-detail-box .op-segmented{margin:.7rem 0 0}
.op-input{width:100%;margin-top:.5rem;padding:.7rem .8rem;border:1px solid #c9d4d2;border-radius:8px;background:#fff;font:inherit;font-size:1rem}
.op-count{text-align:end;font-size:.66rem;margin:.2rem 0 0!important}
/* The upload box, top to bottom: title, one line of types and size, the button
   (or what became of the file), a refusal right under it, then the one-tone note.
   Each state is drawn differently so a refused file never looks chosen. */
.op-upload{--up-red:#b3261e;border:1.5px dashed #9db5b7;border-radius:10px;background:#f4f9f8;padding:.9rem;display:flex;flex-direction:column;gap:.55rem}
.op-upload__title{display:block;font-size:.85rem;font-weight:650;color:var(--op-brand)}
.op-upload p{margin:0;line-height:1.5}
.op-upload__types{font-size:.72rem;color:var(--op-soft)}
.op-upload__icon{display:inline-flex;flex:none;width:1.15em;height:1.15em}
.op-upload__icon svg{width:100%;height:100%}
/* Our own translated file button (the browser's says "Choose File" in its own language). The real input stays focusable: hidden visually, not with display:none, and its focus is shown on the label. */
.op-upload__picker{position:relative}
.op-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}
.op-upload__button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1rem;border:1.5px solid #9db5b7;border-radius:8px;background:#fff;color:var(--op-brand);font-size:.95rem;font-weight:650;cursor:pointer}
.op-upload__input:focus-visible+.op-upload__button,.op-upload__input:focus-visible~.op-upload__file .op-upload__actions label{outline:3px solid color-mix(in srgb,var(--op-brand) 45%,transparent);outline-offset:2px}
@media (min-width:700px){.op-upload__button{display:inline-flex;min-width:14rem}}
/* Preparing / uploading */
.op-upload__busy{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1rem;border:1.5px solid #c9d4d2;border-radius:8px;background:#fff;color:var(--op-soft);font-size:.95rem;font-weight:600}
.op-upload__spinner{width:1.1rem;height:1.1rem;border:2.5px solid #c9d4d2;border-top-color:var(--op-brand);border-radius:50%;animation:op-spin .8s linear infinite}
@keyframes op-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.op-upload__spinner{animation-duration:2.4s}}
/* Accepted */
.op-upload.is-accepted{border-style:solid;border-color:#5f9f6e;background:#f1f8f2}
.op-upload__file{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"thumb name" "thumb actions";align-items:center;column-gap:.7rem;row-gap:.2rem;padding:.6rem .7rem;border:1.5px solid #5f9f6e;border-radius:8px;background:#fff}
.op-upload__thumb,.op-upload__type{grid-area:thumb;width:52px;height:52px;border-radius:6px;background:#f4f4f1}
.op-upload__thumb{object-fit:contain}
.op-upload__type{display:flex;align-items:center;justify-content:center;border:1.5px solid #c9d4d2;font-size:.7rem;font-weight:700;letter-spacing:.04em;color:var(--op-brand)}
.op-upload__name{grid-area:name;display:flex;align-items:center;gap:.35rem;min-width:0;font-size:.85rem;font-weight:600;color:#1f3d27;overflow-wrap:anywhere}
.op-upload__ok{color:#2e7d43}
.op-upload__actions{grid-area:actions;display:flex;gap:1.1rem}
.op-upload__actions .op-link{font-size:.85rem;color:var(--op-brand);cursor:pointer}
/* Refused: the box and the button turn red, and the reason sits right under the button */
.op-upload.is-refused{border-style:solid;border-color:var(--up-red);background:#fdf3f2}
.op-upload.is-refused .op-upload__button{border-color:var(--up-red);color:var(--up-red)}
.op-upload__alert{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .8rem;border:1.5px solid var(--up-red);border-radius:8px;background:#fbe4e1;color:#7a1712}
.op-upload__alert:empty{display:none}
.op-upload__alert .op-upload__icon{width:1.35rem;height:1.35rem;margin-top:.05rem;color:var(--up-red)}
.op-upload .op-upload__alert p{font-size:1rem;font-weight:700;line-height:1.45}
/* Colour warning (a hint, never a block) and the one-tone note */
.op-upload__note.is-warning{font-size:.78rem;color:#8a5a14}
.op-upload__info{display:flex;align-items:flex-start;gap:.4rem;font-size:.74rem;color:var(--op-soft)}
.op-upload__info .op-upload__icon{margin-top:.1rem;color:var(--op-brand)}
.op-link{border:0;background:none;padding:.3rem 0;color:var(--op-brand);text-decoration:underline;text-underline-offset:3px;font-size:.74rem;white-space:nowrap}
.op-error{color:#a74231;font-size:.74rem;line-height:1.5;margin:.4rem 0 0}
.op-library{display:flex;flex-wrap:wrap;gap:.45rem}
.op-library .op-choice{width:64px;height:64px;padding:4px}
.op-library img{width:100%;height:100%;object-fit:contain}
.op-strip{display:flex;gap:.5rem;font-size:.74rem;background:#edf3ed;color:#4c6b54;padding:.6rem .75rem;border-radius:7px;margin:0 0 .9rem}
.op-att-types{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.op-att-type{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;min-width:0}
.op-att-type img{width:56px;height:56px;object-fit:cover;border-radius:7px;flex:0 0 auto;background:#f2eee6}
.op-att-type strong{display:block;font-size:.78rem;font-weight:600}
.op-att-type small{display:block;font-size:.66rem;color:var(--op-soft)}
.op-att-picker{display:grid;grid-template-columns:130px 1fr;gap:1.1rem;align-items:center;margin-top:1rem}
.op-att-large{background:#f2eee6;border-radius:10px;overflow:hidden;aspect-ratio:1}
.op-att-large img{width:100%;height:100%;object-fit:cover}
.op-variants{display:flex;flex-wrap:wrap;gap:.4rem}
.op-variant{width:48px;height:48px;padding:3px;border:1px solid var(--op-line);border-radius:8px;background:#fff;overflow:hidden}
.op-variant img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.op-variant[aria-pressed=true]{border:2px solid var(--op-brand)}
.op-picked{display:flex;justify-content:space-between;gap:.8rem;font-size:.74rem;color:#4c6b54;margin:.8rem 0 0}
.op-picked:empty{display:none}
.op-pack{display:flex;align-items:center;gap:.8rem;padding:.4rem 0}
.op-pack img{width:58px;height:58px;object-fit:cover;border-radius:9px;background:#eee9de;flex:0 0 auto}
.op-pack__info{flex:1;min-width:0}
.op-pack__info strong{display:block;font-size:.8rem;font-weight:600}
.op-pack__info small{display:block;font-size:.7rem;color:var(--op-soft)}
.op-pack.is-unavailable{opacity:.5}
.op-included{font-size:.72rem;color:#4f6f57;white-space:nowrap}
.op-qty{display:flex;align-items:center;border:1px solid var(--op-line);border-radius:8px;background:#fff;overflow:hidden;flex:0 0 auto}
.op-qty button{width:36px;min-height:40px;border:0;background:none;font-size:1.05rem;color:var(--op-brand)}
.op-qty output{min-width:26px;text-align:center;font-size:.8rem}
.op-summary--phone{display:none;margin-top:1rem;padding:1rem 0 0;border:0;border-top:1px solid var(--op-line);border-radius:0;background:none}
.op-phonebar{display:none}
.op-review{border:1px solid var(--op-line);background:var(--op-card);color:var(--ink,#23201c);border-radius:18px;padding:1.5rem;width:min(640px,calc(100% - 24px));max-height:92dvh;overflow:auto;box-shadow:0 30px 100px #182b2c50}
.op-review::backdrop{background:#1e2e2daa;backdrop-filter:blur(5px)}
.op-review__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.op-review__head h2{font-size:1.7rem;margin:.35rem 0}
.op-review__head p:last-child{margin:0;font-size:.78rem;color:var(--op-soft)}
.op-close{border:0;background:#eee9de;width:38px;height:38px;border-radius:50%;font-size:1.3rem;flex:0 0 auto}
.op-review__faces{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.2rem 0}
.op-review__face{margin:0;background:#eee8dd;border-radius:12px;padding:.7rem .6rem .8rem;text-align:center;min-width:0}
.op-review__face figcaption{font-size:.78rem;font-weight:600}
.op-review__face .op-face{height:190px;filter:none}
.op-review__face p{margin:0;font-size:.72rem;color:var(--op-soft);overflow-wrap:anywhere}
.op-review__extras{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.op-review__extras img{width:42px;height:42px;object-fit:cover;border-radius:6px}
.op-review__actions{display:flex;gap:.6rem;margin-top:1rem}
.op-review__actions>*{flex:1}
.op-added{margin-top:.8rem;padding:.8rem;background:#e9f2eb;border-radius:9px;color:#42634b;font-size:.8rem}
.op-added[hidden]{display:none}
.op-added div{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.op-added a{flex:1}
@media(max-width:1000px){.op-layout{gap:1.3rem}.op-form{padding:0 1.1rem}.op-stage{height:290px}.op-att-picker{grid-template-columns:100px 1fr}}
@media(max-width:760px){
  .op-config{width:calc(100% - 32px);padding-bottom:6.5rem}
  .op-layout{display:block}
  .op-visual{position:static}
  .op-visual>.op-summary{display:none}
  .op-stage{height:250px}
  .op-form{margin-top:1rem;padding:0 1rem}
  .op-summary--phone{display:block}
  /* Above the page, below the cookie banner (legal.css, 1000) and the menu. */
  .op-phonebar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 1rem max(.7rem,env(safe-area-inset-bottom));border-top:1px solid #d3d8d4;background:#fffefaf5;backdrop-filter:blur(10px)}
  .op-phonebar small{display:block;font-size:.66rem;color:var(--op-soft)}
  .op-phonebar strong{font-size:1.35rem;font-weight:600}
}
@media(max-width:420px){.op-types{gap:.35rem}.op-type{padding:.7rem .4rem}.op-att-types{grid-template-columns:1fr}.op-review{padding:1.1rem}.op-review__faces{grid-template-columns:1fr}.op-review__actions{flex-direction:column}.op-segmented button{padding:.45rem .8rem}}