/* «كن متحدثاً» v2 (screens 30 / 31 / 32) on top of /css/air.css. Sizes from design/reference-html. */
.sp-hd{height:52px;padding:0 24px;font-size:14px}
.sp-hd .air-i{width:15px;height:15px}
.sp-menu{position:relative}
.sp-menu__p{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:30;min-width:200px;padding:8px;border-radius:20px;background:#1a1a1a;border:1px solid var(--air-border);box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column}
.sp-menu__p[hidden]{display:none}
.sp-menu__p a,.sp-menu__p button{display:block;text-align:start;padding:11px 14px;border-radius:12px;font-size:14px;color:var(--air-text);text-decoration:none;background:none;border:0;cursor:pointer}
.sp-menu__p a:hover,.sp-menu__p button:hover{background:var(--air-block-2)}
.sp-muted{color:var(--air-text-2)}
.sp-opt{color:var(--air-text-2);font-weight:400}
.sp-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* page head + two columns */
.sp-top{padding:24px var(--air-pad) 36px;display:flex;flex-direction:column;gap:16px}
.sp-top p{margin:0;font-size:18px;color:var(--air-text-2);max-width:720px;line-height:1.7}
.sp-top--32{gap:12px}
.sp-top--32 .air-h1{font-size:54px}
.sp-top--32 p{font-size:17px}
.sp-main{padding:0 var(--air-pad) 72px;display:flex;gap:20px;align-items:flex-start}
.sp-main>:first-child{flex:1;min-width:0}
.sp-main--rc{padding-top:24px;align-items:stretch;min-height:620px}
.sp-aside{width:420px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
.sp-aside--32{width:400px}
.sp-card{border-radius:var(--air-radius-xl);background:var(--air-block);padding:28px}

/* fields */
.sp-form{padding:40px;display:flex;flex-direction:column;gap:24px}
.sp-row{display:flex;gap:16px}
.sp-row>.sp-f{flex:1;min-width:0}
.sp-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.sp-l{font-size:14px;font-weight:500}
.sp-page .air-input,.sp-form .air-input,.sp-pick .air-input,.sp-pick .air-select,.sp-pick .air-textarea,.sp-form .air-select{background:var(--air-block-2)}
.sp-in{position:relative;display:block}
.sp-in>.air-i{position:absolute;top:50%;left:20px;transform:translateY(-50%);color:var(--air-text-2);pointer-events:none}
.sp-in>.air-input{padding-left:48px}
[dir="rtl"] .sp-in>.air-i{left:auto;right:20px}
[dir="rtl"] .sp-in>.air-input{padding-left:20px;padding-right:48px;text-align:right}
.sp-sel{position:relative;display:block}
.sp-sel>.air-i{position:absolute;top:50%;inset-inline-end:20px;transform:translateY(-50%);width:16px;height:16px;color:var(--air-text-2);pointer-events:none}
.sp-sel>.air-select{padding-inline-end:46px}
.sp-socs{display:flex;flex-direction:column;gap:8px}
.sp-soc{display:flex;gap:8px;align-items:center}
.sp-soc>.sp-sel{width:190px;flex-shrink:0}
.sp-soc>.air-input{flex:1;min-width:0}
[dir="rtl"] .sp-soc>.air-input{text-align:left}
.sp-x{width:44px;height:44px}
.sp-add{display:inline-flex;align-items:center;gap:8px;margin-top:4px;width:fit-content;padding:0;border:0;background:none;font-size:14px;color:var(--air-green);cursor:pointer}
.sp-add .air-i{width:16px;height:16px}
.sp-add[hidden]{display:none}
.sp-check{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--air-text-2);cursor:pointer;position:relative}
.sp-check input{position:absolute;opacity:0;width:22px;height:22px;margin:0;cursor:pointer}
.sp-check__b{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.35);color:var(--air-on-green)}
.sp-check__b svg{width:14px;height:14px;opacity:0}
.sp-check input:checked+.sp-check__b{background:var(--air-green);border-color:var(--air-green)}
.sp-check input:checked+.sp-check__b svg{opacity:1}
.sp-check input:focus-visible+.sp-check__b{outline:2px solid var(--air-green);outline-offset:3px}
.sp-f.bad .sp-check__b{border-color:var(--air-live)}
.sp-send{display:flex;align-items:center;gap:16px;padding-top:8px;flex-wrap:wrap}
.sp-btn56{height:56px;padding:0 30px;font-size:15px}
.sp-send .sp-muted{font-size:13px}
.sp-alert{padding:14px 18px;border-radius:16px;background:rgba(255,59,48,.12);border:1px solid rgba(255,59,48,.35);color:#FFB4AE;font-size:14px}
.sp-alert[hidden]{display:none}
.sp-alert--on-green{margin-top:14px;background:rgba(10,10,10,.85);color:#FFB4AE}

/* 30 · side */
.sp-steps{padding:36px;display:flex;flex-direction:column;gap:28px}
.sp-steps__t{margin:0;font-size:34px;font-weight:500;line-height:1.25}
.sp-step{display:flex;gap:16px;align-items:flex-start}
.sp-step>span{font-size:13px;font-weight:600;color:var(--air-green);padding-top:3px}
.sp-step b{display:block;font-size:19px;font-weight:600}
.sp-step p{margin:4px 0 0;font-size:14px;color:var(--air-text-2);line-height:1.7}
.sp-days{padding:32px;display:flex;flex-direction:column;gap:8px}
.sp-days>b{font-size:15px;font-weight:600}
.sp-days__v{font-size:44px;font-weight:500;line-height:1.1}
.sp-days__m{font-size:14px}
.sp-days__m[hidden]{display:none}

/* 31 · received */
.sp-rc{flex:1;padding:56px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.sp-rc__t{display:flex;flex-direction:column;gap:20px}
.sp-rc__ic{width:130px;height:130px;object-fit:contain;display:block}
.sp-rc__h{margin:0;font-size:64px;font-weight:500;line-height:1.1;text-shadow:var(--air-glow-white)}
.sp-rc__t>p{margin:0;font-size:18px;opacity:.8;line-height:1.7;max-width:640px}
.sp-rc__a{display:flex;gap:10px;flex-wrap:wrap}
.sp-rc__a .air-btn{height:52px;padding:0 24px;font-size:14px}
.sp-aside--rc .sp-card{background:#1C1C1C}
.sp-ref .sp-muted{font-size:14px}
.sp-ref__n{font-size:44px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
[dir="rtl"] .sp-ref__n{text-align:right}
.sp-ref__at{font-size:13px;margin-top:6px}
.sp-ref[hidden]{display:none}
.sp-next>b{display:block;font-size:16px;font-weight:600;margin-bottom:16px}
.sp-next ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.sp-next li{display:flex;gap:12px;align-items:flex-start}
.sp-next li>span{width:26px;height:26px;border-radius:50%;background:var(--air-block-2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.sp-next li.on>span{background:var(--air-green);color:var(--air-on-green)}
.sp-next li b{display:block;font-size:15px;font-weight:600}
.sp-next li p{margin:3px 0 0;font-size:13px;color:var(--air-text-2);line-height:1.6}

/* 32 · pick a date */
.sp-pick{background:#1C1C1C;padding:36px;display:flex;flex-direction:column;gap:24px}
.sp-cal__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.sp-cal__h h2{margin:0;font-size:24px;font-weight:600}
.sp-cal__nav{display:flex;gap:8px}
#spCal{display:flex;flex-direction:column}
.sp-days4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sp-day{border:0;border-radius:20px;background:var(--air-block-2);color:var(--air-text);padding:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:start;font-family:var(--air-font);cursor:pointer;min-width:0}
.sp-day__w{font-size:13px}
.sp-day__n{font-size:40px;font-weight:500;line-height:1;letter-spacing:-.02em}
.sp-day__s{font-size:12px;opacity:.8}
.sp-day.is-open:hover{background:#2f2f2f}
.sp-day.is-sel,.sp-day.is-sel:hover{background:var(--air-green);color:var(--air-on-green);box-shadow:var(--air-glow-green)}
.sp-day.is-full{background:rgba(20,20,20,.86);color:var(--air-text-3);text-decoration:line-through}
.sp-day.is-full.is-on{outline:1.5px solid rgba(255,255,255,.35)}
.sp-day.is-off{background:transparent;border:1px dashed rgba(255,255,255,.12);color:var(--air-text-3);cursor:default}
.sp-note{margin:16px 0 0;font-size:13px;color:var(--air-text-2)}
.sp-pho{display:flex;align-items:center;gap:20px;padding:20px;border-radius:22px;background:var(--air-block-2)}
.sp-pho__c{width:88px;height:88px;border-radius:50%;flex-shrink:0;padding:0;background:var(--air-block);border:1.5px dashed var(--air-text-3);display:flex;align-items:center;justify-content:center;color:var(--air-text-2);cursor:pointer;overflow:hidden}
.sp-pho__c .air-i{width:26px;height:26px}
.sp-pho__c.has{border:0}
.sp-pho__c img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.sp-pho__c.busy{opacity:.5}
.sp-pho__t{display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-pho__t>b{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-pho__t small{font-size:13px;color:var(--air-text-2)}
.sp-pho__t>div{margin-top:4px}
.air-btn--sp40{height:40px;padding:0 18px;font-size:13px}
.air-btn--sp40 .air-i{width:14px;height:14px}
.sp-tag-sm{height:24px;font-size:11.5px;padding:0 10px}
.sp-tag-sm .air-i{width:12px;height:12px}
.sp-f.bad .sp-pho{box-shadow:inset 0 0 0 1.5px var(--air-live)}
.sp-f--dur{flex:0 0 200px!important}
.sp-sum{min-height:96px;border-radius:48px;padding:20px 28px;resize:none}
.sp-f>small{font-size:12.5px}
.sp-deck{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 20px;border-radius:999px;background:var(--air-block-2);border:1.5px dashed rgba(255,255,255,.18);color:var(--air-text);font:14px var(--air-font);cursor:pointer;text-align:start}
.sp-deck .air-i{color:var(--air-text-2)}
.sp-deck__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-deck small{color:var(--air-text-3);font-size:12.5px}
.sp-deck.has{border-style:solid;border-color:rgba(49,233,49,.45)}
.sp-when{padding:32px;display:flex;flex-direction:column}
.sp-when__k{font-size:14px;font-weight:600}
.sp-when__d{font-size:48px;font-weight:500;line-height:1.1;text-shadow:var(--air-glow-white);margin-top:8px}
.sp-when__m{font-size:14px;margin-top:10px}
.sp-when #spGo{margin-top:22px;height:52px;font-size:14px}
.sp-when #spGo:disabled{opacity:1;background:rgba(10,10,10,.22);color:rgba(10,10,10,.55)}
.sp-who{background:#1C1C1C;display:flex;align-items:center;gap:14px}
.sp-who__av{width:56px;height:56px}
.sp-who__t{flex:1;min-width:0}
.sp-who__t b{display:block;font-size:16px;font-weight:600}
.sp-who__t small{font-size:13px;color:var(--air-text-2)}
.sp-full{background:#1C1C1C;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sp-full h3{margin:6px 0 0;font-size:22px;font-weight:600}
.sp-full__d{font-size:28px;font-weight:500;color:var(--air-text-3);text-decoration:line-through}
.sp-full p{margin:0;font-size:14px;line-height:1.7}
.sp-sug{background:#1C1C1C;display:flex;flex-direction:column;gap:12px}
.sp-sug>b{font-size:16px}
.sp-sug p{margin:0;font-size:14px}
.sp-sug__i{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--air-block-2)}
.sp-sug__d{width:52px;height:52px;border-radius:14px;background:var(--air-block);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;line-height:1.1}
.sp-sug__d b{font-size:20px;font-weight:500}
.sp-sug__d small{font-size:10.5px;color:var(--air-text-2)}
.sp-sug__t{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-sug__t b{font-size:14px;font-weight:600}
.sp-sug__t small{font-size:12.5px;color:var(--air-text-2)}
.sp-rc--done{min-height:520px}
.sp-rc--done .sp-rc__h{font-size:56px}
.sp-kvs{background:#1C1C1C;display:flex;flex-direction:column;gap:16px}
.sp-kvs>div{display:flex;flex-direction:column;gap:4px}
.sp-kvs b{font-size:16px;font-weight:600}
.sp-kvs p{margin:0;font-size:13px;line-height:1.7}
.sp-main--state{justify-content:center;padding-top:48px}
.sp-state{max-width:640px;padding:48px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sp-state img{width:110px;height:110px;object-fit:contain}
.sp-state p{margin:0;font-size:16px;line-height:1.7}
.sp-ok{color:var(--air-green)!important}

/* crop dialog */
.sp-dlg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.sp-dlg__b{width:min(440px,100%);border-radius:var(--air-radius-xl);background:#1C1C1C;border:1px solid var(--air-border);padding:28px;display:flex;flex-direction:column;gap:14px}
.sp-dlg__b h3{margin:0;font-size:22px;font-weight:600}
.sp-dlg__b p{margin:0;font-size:14px;color:var(--air-text-2)}
.sp-crop{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#000}
.sp-crop canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.sp-crop__ring{position:absolute;inset:6%;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.6);pointer-events:none}
.sp-zoom{width:100%;accent-color:var(--air-green)}
.sp-dlg__a{display:flex;gap:10px;justify-content:flex-end}

/* responsive */
@media (max-width:1080px){
  .sp-main{flex-direction:column;align-items:stretch}
  .sp-aside,.sp-aside--32{width:auto}
}
@media (max-width:600px){
  .sp-hd{height:40px;padding:0 16px;font-size:13px}
  .sp-hide-m{display:none!important}
  .sp-top{padding:12px var(--air-pad) 24px}
  .sp-top p{font-size:16px}
  .sp-top--32 .air-h1{font-size:36px}
  .sp-form,.sp-pick{padding:22px}
  .sp-row{flex-direction:column}
  .sp-f--dur{flex:1 1 auto!important}
  .sp-soc>.sp-sel{width:132px}
  .sp-days4{grid-template-columns:repeat(2,1fr)}
  .sp-day__n{font-size:32px}
  .sp-steps{padding:26px}
  .sp-steps__t{font-size:26px}
  .sp-days__v{font-size:34px}
  .sp-rc{padding:28px}
  .sp-rc__h,.sp-rc--done .sp-rc__h{font-size:38px}
  .sp-rc__ic{width:96px;height:96px}
  .sp-ref__n{font-size:34px}
  .sp-when__d{font-size:38px}
  .sp-pho{flex-direction:column;align-items:flex-start}
  .sp-state{padding:28px}
}