/* تعليقات عكا نت 1.1 - visitor UI. Cairo (self-hosted, OFL), RTL, mobile first. --akc-accent comes from the settings. */
@font-face{font-family:"AKC Cairo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/cairo-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"AKC Cairo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/cairo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"AKC Cairo";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/cairo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.akc{--akc-accent:#0047ac;--akc-ink:#0f172a;--akc-text:#1e293b;--akc-muted:#5b6475;--akc-line:#e5e8ee;--akc-soft:#f4f6f9;--akc-r:16px;
  --akc-tint:color-mix(in srgb,var(--akc-accent) 7%,#fff);
  position:relative;direction:rtl;text-align:right;color:var(--akc-text);margin:44px 0 28px;
  font-family:"AKC Cairo",Tahoma,Arial,sans-serif;font-size:16px;line-height:1.75;font-feature-settings:"kern"}
.akc *,.akc *::before,.akc *::after{box-sizing:border-box}
.akc button,.akc input,.akc textarea{font-family:inherit}
.akc button{font-size:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;line-height:1.2;box-shadow:none;text-transform:none;letter-spacing:0;min-height:0;-webkit-tap-highlight-color:transparent}
.akc button:focus-visible,.akc textarea:focus-visible,.akc input:focus-visible{outline:2px solid var(--akc-accent);outline-offset:2px}
.akc svg{width:18px;height:18px;fill:currentColor;flex:none}
/* visually hidden, never pushed off-screen: on an RTL page a far-left offset widens the page (found on staging: +9989 px) */
.akc-sr,.akc-hp{position:absolute!important;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}

/* header: title + count on one side, sort on the other */
.akc-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.akc .akc-title{margin:0!important;font-family:inherit!important;font-size:22px!important;font-weight:800!important;color:var(--akc-ink)!important;display:flex;align-items:center;gap:10px;line-height:1.35!important;letter-spacing:0!important}
.akc-count{font-size:13px;font-weight:700;color:var(--akc-accent);background:var(--akc-tint);border-radius:999px;padding:2px 10px;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.akc-sort{display:inline-flex;background:var(--akc-soft);border-radius:999px;padding:4px;gap:2px}
.akc .akc-sort button{font-size:13.5px;font-weight:600;color:var(--akc-muted);height:34px;padding:0 14px;border-radius:999px;transition:background .2s,color .2s,box-shadow .2s}
.akc .akc-sort button:hover{color:var(--akc-ink)}
.akc .akc-sort button[aria-pressed="true"]{background:#fff;color:var(--akc-ink);box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 6px rgba(15,23,42,.05)}

/* composer */
.akc-form{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;background:#fff;border:1px solid var(--akc-line);border-radius:var(--akc-r);padding:14px 14px 14px 16px;margin-bottom:22px;transition:border-color .2s,box-shadow .2s}
.akc-form.is-active,.akc-form:focus-within{border-color:color-mix(in srgb,var(--akc-accent) 45%,var(--akc-line));box-shadow:0 8px 28px -14px color-mix(in srgb,var(--akc-accent) 50%,transparent)}
.akc-fields{flex:1;min-width:0}
.akc .akc-form textarea{display:block;width:100%;border:0!important;outline:0;resize:none;background:transparent!important;box-shadow:none!important;padding:7px 2px!important;margin:0;min-height:42px;font-size:16px;line-height:1.7;color:var(--akc-ink);overflow:hidden;unicode-bidi:plaintext;text-align:right}
.akc .akc-form textarea::placeholder{color:#8a93a3;opacity:1}
.akc-form-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin .2s}
.akc-form.is-active .akc-form-foot,.akc-form:focus-within .akc-form-foot,.akc-form--reply .akc-form-foot{max-height:260px;opacity:1;margin-top:10px;overflow:visible}
.akc .akc-form input[name="name"]{flex:1 1 160px;min-width:0;height:42px;border:1px solid var(--akc-line)!important;border-radius:999px!important;padding:0 16px!important;font-size:15px;background:var(--akc-soft)!important;color:var(--akc-ink);box-shadow:none!important;margin:0;unicode-bidi:plaintext;text-align:right}
.akc .akc-form input[name="name"]:focus{background:#fff!important;border-color:var(--akc-accent)!important}
.akc .akc-form input[name="name"]::placeholder{color:#8a93a3;opacity:1}
.akc-counter{font-size:12px;color:var(--akc-muted);font-variant-numeric:tabular-nums;min-width:0;text-align:center}
.akc-counter:empty{display:none}
.akc-counter.is-near{color:#b42318;font-weight:700}
.akc .akc-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:var(--akc-accent);color:#fff;font-weight:700;font-size:15px;transition:transform .15s,filter .2s,opacity .2s}
.akc .akc-send svg{transform:scaleX(-1);width:17px;height:17px}
.akc .akc-send:hover{filter:brightness(1.1)}
.akc .akc-send:active{transform:scale(.97)}
.akc .akc-send:disabled{opacity:.65;cursor:progress}
.akc .akc-send:focus-visible{outline-offset:3px}
.akc .akc-cancel{height:42px;padding:0 14px;border-radius:999px;color:var(--akc-muted);font-size:14.5px;font-weight:600}
.akc .akc-cancel:hover{background:var(--akc-soft);color:var(--akc-ink)}
.akc-kbd{font-size:12px;color:#8a93a3;margin-inline-start:auto}
.akc-kbd:empty{display:none}
.akc-note{flex-basis:100%;margin:0!important;font-size:14px;color:var(--akc-muted);display:flex;align-items:center;gap:8px}
.akc-note:empty{display:none}
.akc-note svg{width:18px;height:18px}
.akc-note.is-ok{color:#05603a;background:#ecfdf3;border-radius:12px;padding:9px 12px}
.akc-note.is-err{color:#a01b11;background:#fef3f2;border-radius:12px;padding:9px 12px}
.akc-state{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--akc-muted);background:var(--akc-soft);border-radius:var(--akc-r);padding:18px;margin:0 0 18px;text-align:center;font-size:15px}
.akc-state svg{width:20px;height:20px;opacity:.75}

/* avatar: the first letter on a colour taken from the name */
.akc-avatar{--h:215;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;line-height:1;
  background:hsl(var(--h) 72% 93%);color:hsl(var(--h) 48% 30%);user-select:none}
.akc-avatar svg{width:22px;height:22px}
.akc-avatar--me{background:var(--akc-soft);color:#8a93a3}

/* list: one hairline between conversations, threads drawn with a quiet line */
.akc-list,.akc-replies{list-style:none!important;margin:0!important;padding:0!important}
.akc-item{margin:0!important;padding:0!important}
.akc-item::before,.akc-item::marker{content:none}
.akc-list > .akc-item + .akc-item{border-top:1px solid var(--akc-line)}
.akc-c{display:flex;gap:12px;padding:14px 10px;border-radius:var(--akc-r);transition:background .3s}
.akc-body{flex:1;min-width:0}
.akc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:1px;line-height:1.5}
.akc-name{color:var(--akc-ink);font-weight:700;font-size:15.5px;unicode-bidi:plaintext}
.akc-meta time{color:var(--akc-muted);font-size:13px}
.akc-meta time::before{content:"·";margin-inline-end:8px;color:#b8bfca}
.akc-badge{font-size:11.5px;font-weight:700;color:#fff;background:var(--akc-accent);border-radius:999px;padding:1px 9px}
.akc-verified{display:inline-flex;color:var(--akc-accent)}
.akc-verified svg{width:16px;height:16px}
.akc-pin{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--akc-accent);background:var(--akc-tint);border-radius:999px;padding:1px 8px 1px 9px}
.akc-pin svg{width:12px;height:12px}
.akc-text{color:var(--akc-text);overflow-wrap:anywhere;white-space:normal;unicode-bidi:plaintext;text-align:right;font-size:16px;line-height:1.8}
.akc-text.is-clamped{max-height:calc(1.8em * 7);overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.akc .akc-expand{margin-top:2px;font-size:14px;font-weight:700;color:var(--akc-accent);height:32px;padding:0 2px}
.akc .akc-expand:hover{text-decoration:underline;text-underline-offset:3px}
.akc-actions{display:flex;align-items:center;gap:2px;margin-top:4px;margin-inline-start:-10px}
.akc .akc-actions button{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:36px;justify-content:center;padding:0 10px;border-radius:999px;color:var(--akc-muted);font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.akc .akc-actions button:hover{background:var(--akc-soft);color:var(--akc-ink)}
.akc .akc-actions svg{width:17px;height:17px}
.akc .akc-actions span{font-variant-numeric:tabular-nums}
.akc .akc-up[aria-pressed="true"]{color:var(--akc-accent);background:var(--akc-tint)}
.akc .akc-down[aria-pressed="true"]{color:#b42318;background:#fef3f2}
.akc .akc-actions button span:empty{display:none}
.akc .akc-reply svg{transform:scaleX(-1)} /* a reply arrow is mirrored in RTL, like the dashboard icon */
.akc .akc-reply[aria-expanded="true"]{color:var(--akc-accent);background:var(--akc-tint)}
.akc .pop svg{animation:akc-pop .35s ease}
.akc .shake{animation:akc-shake .4s ease}

/* replies thread */
.akc-replies{margin-inline-start:28px!important;padding-inline-start:16px!important;border-inline-start:2px solid var(--akc-line)}
.akc-replies .akc-c{padding-top:10px;padding-bottom:10px}
.akc-replies .akc-avatar{width:32px;height:32px;font-size:14px}
.akc-form--reply{margin:8px 0 6px;padding:10px 12px;border-radius:14px;box-shadow:none}
.akc-form--reply .akc-avatar{width:32px;height:32px;font-size:14px}
.akc-form--reply .akc-avatar svg{width:18px;height:18px}

/* states */
.akc-item.is-pinned > .akc-c{background:var(--akc-tint)}
.akc-item.is-staff > .akc-c .akc-name{color:var(--akc-accent)}
.akc-item.is-new > .akc-c{animation:akc-in .5s ease both;background:var(--akc-tint)}
.akc .akc-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;height:46px;border:1px solid var(--akc-line);border-radius:999px;font-weight:700;color:var(--akc-ink);font-size:15px;transition:background .2s,border-color .2s}
.akc .akc-more:hover{background:var(--akc-soft);border-color:#d5dae2}
.akc .akc-more[hidden]{display:none}
.akc .akc-more:disabled{opacity:.6;cursor:progress}
.akc.is-loading .akc-list{opacity:.5;transition:opacity .2s}

@keyframes akc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes akc-pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes akc-shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* touch screens: every control at least 40 px */
@media (pointer:coarse){
  .akc .akc-actions button{height:40px;min-width:40px}
  .akc .akc-sort button{height:38px}
  .akc-kbd{display:none}
}
/* phones */
@media (max-width:600px){
  .akc{margin-top:30px}
  .akc .akc-title{font-size:20px!important}
  .akc-sort{width:100%}
  .akc .akc-sort button{flex:1;padding:0 6px}
  .akc-form{padding:12px;gap:10px}
  .akc-avatar{width:36px;height:36px;font-size:15px}
  .akc .akc-form input[name="name"]{flex-basis:100%}
  .akc .akc-send{flex:1}
  .akc-c{padding:12px 2px;gap:10px}
  .akc-replies{margin-inline-start:16px!important;padding-inline-start:10px!important}
  .akc-replies .akc-avatar{width:30px;height:30px;font-size:13px}
}
@media (forced-colors:active){.akc-form,.akc .akc-more{border:1px solid CanvasText}.akc .akc-send{border:1px solid ButtonText}}
@media (prefers-reduced-motion:reduce){.akc *{animation:none!important;transition:none!important}}