/* Occasion cards (/occasions/). Production CSP allows only same-origin stylesheets: keep page CSS here. */
.oc-wrap{max-width:1120px;margin:0 auto;gap:48px;grid-template-columns:minmax(0,1fr)}
.oc-hero{text-align:center;margin:36px 0 0;display:grid;gap:12px;justify-items:center}
.oc-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3.2rem);margin:0;max-width:22ch}
[dir="rtl"] .oc-hero h1{font-family:var(--kufi);font-weight:600}
.oc-h3{font-family:var(--body);font-size:1.05rem;font-weight:600;letter-spacing:0}
[dir="rtl"] .oc-h3{font-family:var(--body)}

/* Calendar */
.oc-cal{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:stretch}
.oc-next{display:grid;gap:8px;align-content:start;justify-items:start;padding:22px;border-radius:20px;border:1px solid var(--gold);background:linear-gradient(180deg,#1b2147,#141936);box-shadow:0 30px 90px -50px rgba(227,184,102,.5)}
.oc-next h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.oc-next p{color:var(--muted)}
.oc-next .btn{margin-top:6px}
.oc-plan{display:grid;gap:10px;align-content:start;padding:18px 20px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.oc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:8px}
.oc-list button{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;text-align:start;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--field);color:var(--fg)}
.oc-list button:hover,.oc-list button[aria-current="true"]{border-color:var(--gold)}
.oc-list .sw{grid-row:1/3;width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.15)}
.oc-list b{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-list small{color:var(--muted);font-size:.8rem}
.oc-note,.oc-free{font-size:.82rem;color:var(--muted)}

/* Builder */
.oc-builder{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start}
.oc-form{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}
.oc-form fieldset{border:0;margin:0;padding:0}
.oc-form legend,.oc-form .lbl{font-size:.82rem;color:var(--muted);padding:0;margin-bottom:5px}
.oc-form textarea,.oc-cap textarea{font:inherit;font-size:.95rem;color:var(--fg);background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;resize:vertical}
.oc-form textarea:focus,.oc-cap textarea:focus{border-color:var(--gold);outline:none}
.oc-greets{display:grid;gap:6px}
.oc-greets label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--field);cursor:pointer;font-size:.92rem;line-height:1.45}
.oc-greets label:has(input:checked){border-color:var(--gold)}
.oc-greets input{margin-top:4px;accent-color:var(--gold);width:auto!important;flex:0 0 auto;padding:0}
.chk input{width:auto!important;flex:0 0 auto}
.oc-greets label>span{min-width:0;overflow-wrap:anywhere}
.oc-greets .g2{display:block;color:var(--muted);font-size:.85rem}
.oc-custom{display:grid;gap:5px;margin-top:8px}
.oc-custom label{font-size:.82rem;color:var(--muted)}
.oc-count{justify-self:end;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}
.oc-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--field)}
.oc-seg label{cursor:pointer}
.oc-seg input{position:absolute;opacity:0;width:1px;height:1px}
.oc-seg span{display:inline-block;padding:6px 16px;border-radius:999px;font-size:.9rem;color:var(--muted)}
.oc-seg input:checked+span{background:var(--gold);color:#1a1630;font-weight:600}
.oc-seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.oc-drop{position:relative;display:flex;gap:12px;align-items:center;border:1.5px dashed var(--line);border-radius:14px;padding:14px;cursor:pointer;background:var(--field);font-size:.9rem;color:var(--muted)}
.oc-drop:hover,.oc-drop.over{border-color:var(--gold)}
.oc-drop input{position:absolute;width:1px;height:1px;opacity:0}
.oc-drop img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.oc-drop b{color:var(--gold-2);font-weight:600}
.oc-row{display:flex;gap:8px;align-items:center}
.oc-row input{flex:1 1 auto;min-width:0;font:inherit;font-size:.95rem;color:var(--fg);background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.oc-row input:focus{border-color:var(--gold);outline:none}
.oc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oc-msg{font-size:.85rem;color:var(--muted);min-height:1em}
.oc-msg.ok{color:#8FD1A8}.oc-msg.bad{color:var(--ember)}
.chk{display:flex;gap:8px;align-items:center;font-size:.88rem;cursor:pointer}
.chk input{accent-color:var(--gold)}

.oc-preview{display:grid;gap:12px;position:sticky;top:12px;min-width:0}
.oc-fmts{display:flex;flex-wrap:wrap;gap:6px}
.oc-fmts button{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:.84rem}
.oc-fmts button[aria-selected="true"]{border-color:var(--gold);color:var(--fg)}
.oc-fmts .lock{opacity:.7;margin-inline-start:4px;font-size:.75rem}
.oc-stage{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-width:0;place-items:center;background:repeating-conic-gradient(#12162f 0 25%,#0f1329 0 50%) 0 0/24px 24px;border:1px solid var(--line);border-radius:18px;padding:16px;min-height:300px}
.oc-stage canvas{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 70px -35px rgba(0,0,0,.8)}
.oc-size{font-size:.8rem;color:var(--muted);text-align:center;direction:ltr}
.oc-acts{display:flex;flex-wrap:wrap;gap:10px}
.oc-cap{display:grid;gap:6px}
.oc-cap label{font-size:.82rem;color:var(--muted)}
.oc-cap .linkbtn{justify-self:start;font-size:.92rem}
.oc-preview .eg{margin-top:0}

/* Seasonal logo edition */
.oc-edition{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;padding:22px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.oc-edition canvas{width:100%;height:auto;border-radius:16px}
.oc-ed-side{display:grid;gap:10px;justify-items:start}
.oc-ed-side h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.oc-ai{display:grid;gap:8px;justify-items:start;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);width:100%}
.oc-ai h3{font-size:1rem}
.oc-ai-out{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.oc-ai-out img{width:120px;height:120px;border-radius:14px;object-fit:cover;background:#fff}

/* Pack */
.oc-pack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:28px;padding:28px 24px;border-radius:22px;border:1px solid var(--gold);background:linear-gradient(180deg,#1b2147,#141936);box-shadow:0 30px 90px -40px rgba(227,184,102,.45)}
.oc-pack h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:6px 0 12px}
.oc-pack .ticks{margin:0 0 12px;padding-inline-start:20px;display:grid;gap:4px}
.oc-pack-act{display:grid;gap:10px;align-content:start}
.oc-pack-act label{font-size:.82rem;color:var(--muted)}
.oc-price{font-family:var(--display);font-size:2rem;color:var(--gold);direction:ltr;unicode-bidi:isolate;min-height:0}
.oc-price:empty{display:none}
.oc-cust{font-size:.9rem;color:var(--gold-2)}
#soon{display:grid;gap:8px;justify-items:start}

@media (max-width:900px){
  .oc-builder,.oc-cal,.oc-pack,.oc-edition{grid-template-columns:minmax(0,1fr)}
  .oc-preview{position:static;order:-1}
  .oc-edition canvas{max-width:300px}
}
@media (max-width:520px){.oc-two{grid-template-columns:1fr}.oc-stage{padding:10px;min-height:0}}
/* Phone widths: the long key placeholder must not push the unlock row past the screen edge. */
.oc-pack>*,.oc-pack-act>*{min-width:0}
.oc-pack-act .oc-row input{width:100%}