/* Proclick Wedding invitation — page styles (matches the proclick.se look) */
.pcx { --ink: #151413; --bg: #f7f5f0; --beige: #ece6dc; --muted: #6b645c; --line: rgba(21,20,19,.14); --gold: #b08d57; --red: #d40000;
  --serif: 'Cormorant Garamond', 'Amiri', Georgia, serif; --sans: 'Jost', 'Tajawal', system-ui, sans-serif;
  font-family: var(--sans); color: var(--ink); background: var(--bg); font-weight: 300; font-size: 15px; line-height: 1.7; overflow-x: clip; }
.pcx.pcx-ui-ar { --serif: 'Amiri', 'Cormorant Garamond', serif; --sans: 'Tajawal', 'Jost', sans-serif; font-size: 16px; }
.pcx *, .pcx *::before, .pcx *::after { box-sizing: border-box; }
.pcx h1, .pcx h2, .pcx h3 { font-family: var(--serif); font-weight: 300; line-height: 1.1; margin: 0; color: var(--ink); letter-spacing: .01em; }
.pcx-ui-ar h1, .pcx-ui-ar h2, .pcx-ui-ar h3 { font-weight: 400; line-height: 1.45; letter-spacing: 0; }
:where(.pcx) a { color: inherit; }
.pcx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.pcx-narrow { max-width: 640px; }
.pcx-eyebrow { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.pcx-ui-ar .pcx-eyebrow { letter-spacing: 0; font-size: 14px; }
.pcx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 0; font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid var(--ink); transition: background .25s, color .25s, transform .2s; }
.pcx-ui-ar .pcx-btn { letter-spacing: 0; font-size: 15px; }
.pcx-btn-dark { background: var(--ink); color: #fff; } .pcx-btn-dark:hover { background: #2a2522; }
.pcx-btn-line { background: transparent; color: var(--ink); } .pcx-btn-line:hover { background: var(--ink); color: #fff; }
.pcx-btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.pcx-btn-wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.pcx-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 11px; }
.pcx-ui-ar .pcx-btn-sm { font-size: 14px; }
.pcx-btn:disabled { opacity: .45; cursor: not-allowed; }
.pcx-btn:focus-visible, .pcx button:focus-visible, .pcx input:focus-visible, .pcx select:focus-visible, .pcx textarea:focus-visible, .pcx a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pcx-link { background: none; border: 0; padding: 4px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 14px; }
.pcx-langs { display: inline-flex; border: 1px solid var(--line); margin-bottom: 26px; }
.pcx-langs button { background: none; border: 0; padding: 7px 14px; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; cursor: pointer; color: var(--muted); }
.pcx-langs button + button { border-inline-start: 1px solid var(--line); }
.pcx-langs button.on { background: var(--ink); color: #fff; }
.pcx-langs button[lang=ar], .pcx-langs button[data-ui=ar], .pcx-langs button[data-l=ar] { font-family: 'Tajawal', sans-serif; letter-spacing: 0; font-size: 14px; }
/* hero */
.pcx-hero { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 46px 22px 30px; }
.pcx-title { font-size: clamp(44px, 11vw, 92px); margin-bottom: 18px !important; }
.pcx-lead { font-size: 16px; color: var(--muted); max-width: 52ch; margin: 0 0 26px; }
.pcx-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pcx-resume { margin: 16px 0 0; font-size: 14px; }
.pcx-feats { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pcx-feats li { border: 1px solid var(--line); padding: 4px 12px; font-size: 12px; letter-spacing: .06em; color: var(--muted); background: rgba(255,255,255,.5); }
.pcx-hero-art { position: relative; height: 430px; }
.pcx-phone { position: absolute; width: 200px; aspect-ratio: 9/18.5; border-radius: 30px; padding: 7px; background: #151413; box-shadow: 0 30px 60px -24px rgba(21,20,19,.45); left: 50%; top: 0; transform: translateX(-80%) rotate(-5deg); }
.pcx-phone-b { transform: translateX(-10%) translateY(40px) rotate(6deg); }
.pcx-phone .pcx-poster { border-radius: 24px; height: 100%; aspect-ratio: auto; }
/* poster (scaled real opening scene) */
.pcx-poster { position: relative; display: block; width: 100%; aspect-ratio: 9/16; overflow: hidden; background: var(--beige); }
.pcx-poster-in { position: absolute; left: 0; top: 0; width: 390px; height: 693px; transform-origin: 0 0; }
.pcx-phone .pcx-poster-in { height: 801px; }
.pcx-poster .pi { min-height: 0; font-size: 18px; }
/* gallery */
.pcx-gallery { padding: 60px 0 40px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pcx-head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.pcx-head h2, .pcx-how h2, .pcx-start h2 { font-size: clamp(36px, 7vw, 56px); margin-bottom: 10px; }
.pcx-head p { color: var(--muted); margin: 0; }
.pcx-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 14px; margin: 0 0 18px; scrollbar-width: none; justify-content: flex-start; }
.pcx-tabs::-webkit-scrollbar { display: none; }
.pcx-tabs button { flex: 0 0 auto; background: none; border: 1px solid var(--line); padding: 8px 16px; border-radius: 30px; font-family: var(--sans); font-size: 13px; color: var(--muted); cursor: pointer; transition: all .2s; }
.pcx-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pcx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.pcx-card { display: flex; flex-direction: column; min-width: 0; }
.pcx-card[hidden] { display: none; }
.pcx-card-media { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -26px rgba(21,20,19,.55); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.pcx-card-media:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(21,20,19,.6); }
.pcx-play { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(255,255,255,.92); color: var(--ink); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 7px 14px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.pcx-ui-ar .pcx-play { letter-spacing: 0; font-size: 13px; }
.pcx-card-body { padding: 14px 2px 0; display: flex; flex-direction: column; flex: 1; }
.pcx-card-body h3 { font-size: 24px; margin-bottom: 4px; }
.pcx-card-body p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.pcx-card-btns { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pcx-card-btns .pcx-btn { width: 100%; padding: 8px 6px; }
/* how */
.pcx-how { padding: 60px 0; text-align: center; }
.pcx-how ol { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 26px; }
.pcx-how li span { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--gold); border-radius: 50%; font-family: var(--serif); font-size: 22px; color: var(--gold); margin-bottom: 10px; }
.pcx-how h3 { font-size: 26px; margin-bottom: 6px; }
.pcx-how p { color: var(--muted); margin: 0 auto; max-width: 34ch; }
/* start */
.pcx-start { padding: 56px 0 70px; background: var(--beige); }
.pcx-start h2 { text-align: center; }
.pcx-chosen { text-align: center; margin: 0 0 18px; }
.pcx-start-grid { display: grid; gap: 16px; margin-top: 22px; }
.pcx-panel { background: #fff; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); }
.pcx-panel h3 { font-size: 28px; }
.pcx-panel p { margin: 0; color: var(--muted); }
.pcx-code input[name=code] { font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.pcx input, .pcx select, .pcx textarea { width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 11px 12px; -webkit-appearance: none; appearance: none; }
.pcx select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 30px; }
.pcx-ui-ar select { background-position: 16px 55%, 11px 55%; }
.pcx input[type=checkbox], .pcx input[type=radio] { width: auto; -webkit-appearance: auto; appearance: auto; }
.pcx label > span, .pcx .pcx-f > span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pcx-ui-ar label > span, .pcx-ui-ar .pcx-f > span { letter-spacing: 0; font-size: 14px; }
.pcx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcx-msg { color: var(--red); min-height: 1.2em; margin: 0 !important; font-size: 14px; }
.pcx-ok { color: #1f7a4d !important; font-size: 16px; }
.pcx-warn { color: var(--red); }
.pcx-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
/* modal preview */
html.pcx-noscroll, html.pcx-noscroll body { overflow: hidden; }
.pcx-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(12,10,8,.92); display: flex; flex-direction: column; opacity: 0; transition: opacity .3s; }
.pcx-modal.in { opacity: 1; }
.pcx-modal-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pcx-modal .pcx-langs { margin: 0; border-color: rgba(255,255,255,.3); }
.pcx-modal .pcx-langs button { color: rgba(255,255,255,.75); }
.pcx-modal .pcx-langs button.on { background: #fff; color: #151413; }
.pcx-modal-bar [data-use] { margin-inline-start: auto; }
.pcx-x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.pcx-modal-frame { flex: 1; display: flex; justify-content: center; padding: 0 0 10px; min-height: 0; }
.pcx-modal-frame iframe { width: 100%; max-width: 440px; height: 100%; border: 0; background: #111; border-radius: 0; }
/* builder */
.pcx-builder { padding: 26px 0 110px; }
.pcx-b-top { max-width: 1200px; margin: 0 auto; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pcx-b-top .pcx-langs { margin: 0; }
.pcx-b-grid { max-width: 1200px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.pcx-b-form { min-width: 0; }
.pcx-b-title { font-size: clamp(36px, 8vw, 54px); margin: 16px 0 10px !important; }
.pcx-b-form fieldset { border: 0; border-top: 1px solid var(--line); padding: 22px 0 8px; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pcx-b-form legend { font-family: var(--serif); font-size: 24px; padding: 0 0 10px; }
.pcx-ui-ar .pcx-b-form legend { font-size: 22px; }
.pcx-f small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.pcx-tpl-row { display: flex; gap: 10px; overflow-x: auto; max-width: 100%; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.pcx-tpl { flex: 0 0 92px; scroll-snap-align: start; cursor: pointer; text-align: center; }
.pcx-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.pcx-tpl-p { display: block; border-radius: 12px; overflow: hidden; border: 2px solid transparent; transition: border-color .2s, transform .2s; }
.pcx-tpl input:checked + .pcx-tpl-p { border-color: var(--ink); transform: translateY(-2px); }
.pcx-tpl input:focus-visible + .pcx-tpl-p { outline: 2px solid var(--gold); }
.pcx-tpl b { display: block; font-weight: 400; font-size: 12px; line-height: 1.3; margin-top: 6px; }
.pcx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pcx-seg label { position: relative; }
.pcx-seg input { position: absolute; opacity: 0; }
.pcx-seg span { display: flex !important; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; margin: 0 !important; cursor: pointer; background: #fff; }
.pcx-seg span[lang=ar] { font-family: 'Tajawal', sans-serif; }
.pcx-seg input:checked + span { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.pcx-check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pcx-check span { margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--ink) !important; }
.pcx-check input { width: 20px; height: 20px; accent-color: var(--ink); flex: 0 0 auto; }
.pcx-sched { display: flex; flex-direction: column; gap: 8px; }
.pcx-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 6px; }
.pcx-row button { border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 20px; color: var(--muted); }
.pcx-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pcx-photo img { width: 74px; height: 94px; object-fit: cover; border-radius: 40px 40px 4px 4px; }
.pcx-up { cursor: pointer; }
.pcx-galed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pcx-galed figure { position: relative; margin: 0; aspect-ratio: 1; }
.pcx-galed img { width: 100%; height: 100%; object-fit: cover; }
.pcx-galed figure button { position: absolute; top: 3px; inset-inline-end: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; line-height: 1; }
.pcx-galadd { aspect-ratio: 1; border: 1px dashed var(--muted); display: flex !important; align-items: center; justify-content: center; font-size: 28px !important; cursor: pointer; margin: 0 !important; color: var(--muted) !important; }
.pcx-music { display: flex; flex-direction: column; gap: 6px; }
.pcx-mus { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.pcx-mus span { margin: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--ink) !important; }
.pcx-mus input { width: 18px; height: 18px; accent-color: var(--ink); }
.pcx-mus:has(input:checked) { border-color: var(--ink); }
.pcx-playbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12px; }
.pcx-b-prev { display: none; }
.pcx-device { width: 100%; max-width: 360px; aspect-ratio: 9/18.5; margin: 0 auto; border-radius: 36px; padding: 9px; background: #151413; box-shadow: 0 30px 60px -24px rgba(21,20,19,.5); }
.pcx-live { width: 100%; height: 100%; border: 0; border-radius: 28px; background: #111; display: block; }
.pcx-replay { display: block; margin: 12px auto 0; }
.pcx-prev-x { display: none; }
.pcx-b-prev.is-full { display: flex; position: fixed; inset: 0; z-index: 99999; background: rgba(12,10,8,.95); flex-direction: column; align-items: center; justify-content: center; padding: 56px 10px 10px; }
.pcx-b-prev.is-full .pcx-device { max-width: 420px; height: 100%; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.pcx-b-prev.is-full .pcx-live { border-radius: 0; }
.pcx-b-prev.is-full .pcx-prev-x { display: block; position: absolute; top: 8px; inset-inline-end: 10px; }
.pcx-b-prev.is-full .pcx-replay { color: #fff; position: absolute; top: 14px; inset-inline-start: 14px; margin: 0; }
.pcx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(247,245,240,.96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body:has(#pcx-app) .pc-sticky-cta { display: none !important; }
body:has(.pcx-v-builder) .ht-ctc, body:has(.pcx-v-builder) .ht_ctc_style, html.pcx-noscroll .ht-ctc { display: none !important; }
/* done + manage */
.pcx-done, .pcx-manage { padding: 40px 0 70px; }
.pcx-done { text-align: center; }
.pcx-done-ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.pcx-done h1 { font-size: clamp(38px, 8vw, 58px); margin-bottom: 12px; }
.pcx-done .pcx-lead { margin: 0 auto 24px; }
.pcx-done .pcx-cta { justify-content: center; margin-top: 22px; }
.pcx-share { background: #fff; border: 1px solid var(--line); padding: 18px; margin: 14px 0; text-align: start; }
.pcx-share > span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pcx-ui-ar .pcx-share > span { letter-spacing: 0; font-size: 14px; }
.pcx-copy { display: flex; gap: 6px; }
.pcx-copy input { flex: 1; min-width: 0; font-size: 14px; background: var(--bg); }
.pcx-share-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pcx-share small { display: block; color: var(--muted); margin-top: 8px; }
.pcx-share-private { background: var(--beige); }
.pcx-m-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.pcx-m-head h1 { font-size: clamp(36px, 8vw, 56px); }
.pcx-m-head p { margin: 4px 0 0; color: var(--muted); }
.pcx-m-act { display: flex; gap: 8px; flex-wrap: wrap; }
.pcx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.pcx-stats div { background: #fff; border: 1px solid var(--line); padding: 14px 10px; text-align: center; }
.pcx-stats b { display: block; font-family: var(--serif); font-size: 40px; font-weight: 400; line-height: 1; }
.pcx-stats span { font-size: 12px; color: var(--muted); }
.pcx-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); margin-top: 14px; }
.pcx-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.pcx-table th { text-align: start; font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pcx-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pcx-pill { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; white-space: nowrap; }
.pcx-pill.y { background: #e6f4ea; color: #1e6b3a; } .pcx-pill.n { background: #f6e3e3; color: #9a2424; }
.pcx-empty { padding: 26px; text-align: center; color: var(--muted); margin: 0; }
.pcx-m-foot { font-size: 13px; color: var(--muted); }
.pcx-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1f7a4d; margin-inline-end: 8px; animation: pcxDot 2s infinite; }
@keyframes pcxDot { 50% { opacity: .3; } }
/* breakpoints */
@media (min-width: 720px) {
  .pcx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; }
  .pcx-card-btns { grid-template-columns: 1fr 1fr; }
  .pcx-how ol { grid-template-columns: repeat(3, 1fr); }
  .pcx-start-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (min-width: 980px) {
  .pcx-hero { grid-template-columns: 1.1fr .9fr; padding: 70px 22px 50px; }
  .pcx-hero-art { height: 520px; }
  .pcx-phone { width: 240px; }
  .pcx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcx-b-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .pcx-b-prev { display: block; position: sticky; top: 110px; }
  .pcx-bar { position: sticky; grid-template-columns: auto auto; justify-content: end; background: none; border: 0; backdrop-filter: none; max-width: 1200px; margin: 0 auto; }
  .pcx-bar [data-openprev] { display: none; }
}

.pcx-seg5 { grid-template-columns: repeat(3, 1fr); }
.pcx-seg5 label:nth-child(n+4) { grid-column: span 1; }
.pcx-seg5 label:nth-child(4) { grid-column: 1 / span 2; } .pcx-seg5 label:nth-child(5) { grid-column: 3 / span 1; }
@media (max-width: 719px) { .pcx-seg5 label:nth-child(4) { grid-column: 1 / span 3; } .pcx-seg5 label:nth-child(5) { grid-column: 1 / span 3; } }
@media (min-width: 720px) { .pcx-seg5 label:nth-child(4) { grid-column: 1 / span 2; } .pcx-seg5 label:nth-child(5) { grid-column: 3 / span 1; } }
.pcx-envc { display: flex; flex-wrap: wrap; gap: 10px; }
.pcx-envc label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 54px; }
.pcx-envc input { position: absolute; opacity: 0; }
.pcx-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); display: block; }
.pcx-envc input:checked + .pcx-sw { box-shadow: 0 0 0 2px var(--ink); }
.pcx-envc em { font-style: normal; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
.pcx-sw-std { background: linear-gradient(135deg, #f4dcd6 50%, #7d2a3b 50%); } .pcx-sw-ivory { background: linear-gradient(135deg, #fbf6ec 50%, #c9b48a 50%); }
.pcx-sw-blush { background: linear-gradient(135deg, #f4dcd6 50%, #8c1d2e 50%); } .pcx-sw-burgundy { background: linear-gradient(135deg, #7a1f30 50%, #c79a4a 50%); }
.pcx-sw-sage { background: linear-gradient(135deg, #dfe6d6 50%, #5d6e4f 50%); } .pcx-sw-navy { background: linear-gradient(135deg, #22304d 50%, #d9c08a 50%); }
.pcx-sw-black { background: linear-gradient(135deg, #232020 50%, #c9a25c 50%); }
.pcx-row-bi { grid-template-columns: 96px 1fr 40px; }
.pcx-row-bi [name=sx2] { grid-column: 2 / 3; }
.pcx-plink-out:not(:empty) { margin-top: 10px; }

@media (max-width: 979px) {
  .pcx-bar { padding-inline-end: 78px; }
  .pcx-bar .pcx-btn { letter-spacing: .06em; padding: 10px 8px; font-size: 11px; }
  .pcx-ui-ar .pcx-bar .pcx-btn { letter-spacing: 0; font-size: 14px; }
}

/* v1.2: luxury showcase */
.pcx-card { container-type: inline-size; }
.pcx-card-btns { grid-template-columns: 1fr !important; }
@container (min-width: 250px) { .pcx-card-btns { grid-template-columns: 1fr 1fr !important; } }
.pcx-lux { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; padding: 5px 11px 4px; border-radius: 20px; font: 600 10px/1 'Cinzel', 'Tajawal', serif; letter-spacing: .18em; text-transform: uppercase; color: #2a1a0c; background: linear-gradient(135deg, #9a6f28, #f1d58e 45%, #c39a48 70%, #8a6122); box-shadow: 0 4px 12px -4px rgba(0,0,0,.45); pointer-events: none; }
[dir=rtl] .pcx-lux { letter-spacing: 0; font-size: 12px; }

/* v1.2: what to show on the card (section switches) */
.pcx-sec-hint { margin: -2px 0 12px; font-size: 13px; color: var(--muted); }
.pcx-togs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.pcx-tog { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px solid rgba(21,20,19,.12); border-radius: 12px; cursor: pointer; font-size: 14px; line-height: 1.25; background: #fff; }
.pcx-tog input { position: absolute; opacity: 0; pointer-events: none; }
.pcx-tog i { position: relative; flex: 0 0 34px; height: 20px; border-radius: 20px; background: #d9d3c9; transition: background .2s; }
.pcx-tog i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.pcx-tog input:checked + i { background: linear-gradient(135deg, #9a6f28, #d9b25e); }
.pcx-tog input:checked + i::after { transform: translateX(14px); }
[dir=rtl] .pcx-tog input:checked + i::after { transform: translateX(-14px); }
.pcx-tog input:focus-visible + i { outline: 2px solid #b08d57; outline-offset: 2px; }
.pcx-tog input:not(:checked) ~ span { color: var(--muted); }
@media (max-width: 380px) { .pcx-togs { grid-template-columns: 1fr; } }

.pcx-card-body h3 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

.pcx-mus-own span { font-weight: 600; }
.pcx-own { margin: 10px 0 4px; padding: 14px; border: 1px dashed rgba(176,141,87,.6); border-radius: 14px; background: rgba(176,141,87,.06); display: grid; gap: 10px; }
.pcx-own .pcx-check span { font-size: 13.5px; line-height: 1.4; }
.pcx-own-up.is-off { opacity: .45; }
.pcx-own small { color: var(--muted); font-size: 12px; }
.pcx-own-f { margin: 0; font-size: 14px; color: #2f6b3a; }
.pcx-own input[type=number] { max-width: 120px; }

/* v1.5 seal choices */
.pcx-seal-rosette, .pcx-seal-bismillah, .pcx-seal-initials { background: radial-gradient(circle at 38% 34%, #f6dd98, #b8862f 55%, #6e4a14); position: relative; }
.pcx-seal-rosette::after, .pcx-seal-bismillah::after, .pcx-seal-initials::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5a3a0c; text-shadow: 0 1px 0 rgba(255,240,200,.7); }
.pcx-seal-rosette::after { content: '\2740'; font-size: 20px; }
.pcx-seal-bismillah::after { content: '\FDFD'; font-size: 13px; font-family: 'Amiri', serif; }
.pcx-seal-initials::after { content: 'S&A'; font-family: 'Great Vibes', cursive; font-size: 15px; }
.pcx-wax-gold { background: radial-gradient(circle at 38% 34%, #f6dd98, #b8862f 55%, #6e4a14); }
.pcx-wax-red { background: radial-gradient(circle at 38% 34%, #e8545a, #9b0f18 55%, #3d0306); }
.pcx-wax-burgundy { background: radial-gradient(circle at 38% 34%, #b5394f, #6a0f22 55%, #24040b); }
.pcx-wax-ivory { background: radial-gradient(circle at 38% 34%, #fff, #e6dcc8 55%, #a89a82); }
.pcx-wax-emerald { background: radial-gradient(circle at 38% 34%, #3fa57a, #0d5a3a 55%, #022014); }
.pcx-wax-navy { background: radial-gradient(circle at 38% 34%, #6f8ad0, #12275e 55%, #03081c); }
.pcx-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 10px; font-size: 11px; color: var(--muted); }
.pcx-chips span { width: 100%; }
.pcx-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 7px 3px 4px; font: inherit; font-size: 11px; color: inherit; cursor: pointer; }
.pcx-chip i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.pcx-chip:hover { border-color: var(--ink); }

/* v1.6 gallery groups */
.pcx-grp { grid-column: 1 / -1; margin: 22px 0 2px; font: 600 13px/1.2 'Cinzel', 'Cormorant Garamond', serif; letter-spacing: .18em; text-transform: uppercase; color: #8a6a3a; display: flex; align-items: center; gap: 14px; }
.pcx-grp::before, .pcx-grp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(167,122,44,.5), transparent); }
.pcx-grp:first-child { margin-top: 0; }
.pcx-dopt .pcx-sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pcx-chip i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-inline-end: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pcx-monotog { margin-top: 10px; }

/* v1.7 countdown style select */
.pcx-cstyle { display: block; margin-top: 14px; }

/* v1.8 public sales (only rendered when Läge = Offentlig försäljning) */
.pcx-head .pcx-price { display: inline-block; margin-top: 12px; padding: 6px 16px; border: 1px solid var(--gold); color: var(--ink, #2b2622); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pcx-ui-ar .pcx-head .pcx-price { letter-spacing: 0; font-size: 15px; text-transform: none; }
.pcx-price-big { font-size: 34px; line-height: 1.1; color: var(--gold) !important; margin: 0; font-family: inherit; }
.pcx-buy-on { border-color: var(--gold); }
.pcx-final-box { border: 1px solid var(--gold); background: #fffdf8; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.pcx-final-btns { display: grid; gap: 10px; margin-top: 12px; }
.pcx-order, .pcx-tcode { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pcx-order[hidden], .pcx-tcode[hidden] { display: none; }
.pcx-tcode input[name=tcode] { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
/* v1.8 fix: the hidden template radios are absolute; anchor them in their label so they can't widen the page on phones (the builder zoomed out and the sticky Save/Buy bar slid off-screen in LTR) */
.pcx-tpl { position: relative; }

/* v1.8.1: the preview bar's Buy button stays on one line on phones */
.pcx-modal-bar [data-use] { white-space: nowrap; }
@media (max-width: 480px) { .pcx-modal-bar { gap: 8px; padding: 8px 10px; } .pcx-modal .pcx-langs-sm button { padding: 7px 8px; letter-spacing: .06em; } .pcx-modal-bar [data-use] { padding: 8px 12px; } }

/* v1.9: meeting points, venues and account rows */
.pcx-nl { display: grid; gap: 8px; }
.pcx-nlrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.6); }
.pcx-nlrow input { min-width: 0; }
.pcx-nlrow input[type=time] { max-width: none; }
.pcx-nlrow [data-nl=map], .pcx-nlrow [data-nl=address] { grid-column: 1 / -1; }
.pcx-nlacc { grid-template-columns: 1fr 1.3fr; }
.pcx-nlacc [data-nl=label2] { grid-column: 1 / 2; }

/* ===================== v1.9 gallery: one big card per row on phones, phone mock-up with a silent looping preview, style words, Try it / Choose ===================== */
.pcx-gallery .pcx-grid { grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 600px) { .pcx-gallery .pcx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1020px) { .pcx-gallery .pcx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 28px; } }
.pcx-gallery .pcx-grp { grid-column: 1 / -1; }
.pcx-card-pv .pcx-card-media { display: flex; justify-content: center; align-items: center; padding: 28px 0 46px; border-radius: 22px;
  background: radial-gradient(110% 80% at 50% 12%, #fffdf9 0%, #f3ebe0 55%, #e6d8c4 100%); box-shadow: 0 18px 40px -30px rgba(21,20,19,.5); }
.pcx-mock { position: relative; width: 62%; max-width: 236px; padding: 8px; border-radius: 36px; background: #141312;
  box-shadow: 0 28px 50px -22px rgba(21,20,19,.55), inset 0 0 0 1.5px #3a3733; }
.pcx-mock-scr { position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #0f0e0d; }
.pcx-mock-scr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pcx-mock-cam { position: absolute; top: 15px; left: 50%; width: 46px; height: 12px; margin-left: -23px; border-radius: 8px; background: #141312; z-index: 2; }
.pcx-card-pv .pcx-play { bottom: 12px; }
.pcx-card-pv .pcx-card-media:hover { transform: none; }
.pcx-card-pv .pcx-card-media:hover .pcx-mock { transform: translateY(-4px); }
.pcx-mock { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pcx-card-body .pcx-style { flex: 0 0 auto; margin: 2px 0 4px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9a7b45; line-height: 1.4; }
[dir=rtl] .pcx-card-body .pcx-style, .pcx-ar .pcx-card-body .pcx-style { letter-spacing: 0; font-size: 13px; }
.pcx-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcx-card-btns .pcx-btn { width: 100%; justify-content: center; text-align: center; }
.pcx-phone video.pcx-pv-hero { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; background: #0f0e0d; }
.pcx-nlrow [data-nl=name] { grid-column: 1 / -1; }

/* v1.9.1: the demo modal's backdrop is solid, so the page behind never ghosts through the top language / Choose & buy bar */
.pcx-modal { background: #0c0a08; }
.pcx-modal-bar { background: #0c0a08; position: relative; z-index: 2; }

/* v1.9.6: locked names/date */
#pcx-app .pcx-nlock{background:#f1efea!important;color:#8a857c!important;cursor:not-allowed;border-style:dashed!important}
#pcx-app .pcx-nlock-note{margin:2px 0 12px;font-size:12.5px;color:#8a6d3b;line-height:1.4}

/* v1.9.9 share a design: a quiet gold line under each card's buttons (the preview modal's demo carries its own button) */
.pcx-card-btns .pcx-share { grid-column: 1 / -1; }
.pcx-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; margin-top: 2px; padding: 6px 10px; border: 0; border-top: 1px solid rgba(176,141,87,.28); background: transparent; color: #9a7a45; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .25s, background .25s; }
.pcx-share .pci-sh-ic { width: 16px; height: 16px; flex: none; margin: 0; }
.pcx .pcx-share span { display: inline; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; line-height: 1.2; }
@media (hover: hover) { .pcx-share:hover { color: #6e5428; background: rgba(176,141,87,.07); } }
.pcx-share:active { background: rgba(176,141,87,.12); }
.pcx-ui-ar .pcx-share { letter-spacing: 0; font-size: 14px; }
.pcx .pcx-share, .pcx .pcx-share:hover, .pcx .pcx-share:focus, .pcx .pcx-share:active { background: transparent; color: #9a7a45; box-shadow: none; text-decoration: none; border: 0; border-top: 1px solid rgba(176,141,87,.28); border-radius: 0; }
@media (hover: hover) { .pcx .pcx-share:hover { color: #6e5428; background: rgba(176,141,87,.07); } }
.pcx .pcx-share:active { background: rgba(176,141,87,.12); }

/* v1.9.11 name order (groom first / bride first) */
.pcx-seg2 { grid-template-columns: repeat(2, 1fr); }
.pcx-order { margin-bottom: 4px; }
.pcx-order .pcx-seg span { min-height: 40px; font-size: 13px !important; }