/* واحد العين — orders / wallet / reviews */

/* order box (single page, services) */
.wain-order-box{background:#fff;border:1px solid var(--wain-line);border-radius:var(--r-lg);padding:18px}
.wain-order-box b.h{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px}
.wain-pkg-pick{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.wain-pkg-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--wain-line);border-radius:var(--r);padding:11px 13px;cursor:pointer;position:relative}
.wain-pkg-opt:hover{border-color:var(--wain-accent)}
.wain-pkg-opt input{accent-color:var(--wain-accent);width:17px;height:17px}
.wain-pkg-opt .nm{font-weight:700;font-size:14px}
.wain-pkg-opt .pr{margin-inline-start:auto;font-weight:800;color:var(--wain-accent)}
.wain-pkg-opt:has(input:checked){border-color:var(--wain-accent);background:color-mix(in srgb,var(--wain-accent) 6%,#fff)}

/* order rows (dashboard) */
.wain-order{background:#fff;border:1px solid var(--wain-line);border-radius:var(--r);padding:14px;margin-bottom:11px}
.wain-order .top{display:flex;align-items:center;gap:12px}
.wain-order .th{width:54px;height:44px;border-radius:8px;overflow:hidden;background:#E2E8F0;flex:none}
.wain-order .th img{width:100%;height:100%;object-fit:cover}
.wain-order .info{flex:1;min-width:0}
.wain-order .info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wain-order .info .sub{font-size:12px;color:var(--wain-muted);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.wain-order .amt{font-weight:800;color:var(--wain-accent);flex:none}
.wain-order .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding-top:11px;border-top:1px solid var(--wain-line);flex-wrap:wrap}
.wain-order .acts{display:flex;gap:7px;flex-wrap:wrap}
.wain-order form{display:inline}
.wstatus{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:998px}
.wstatus svg{width:13px;height:13px}
.wstatus.held{background:#fef3c7;color:#92400e}
.wstatus.delivered{background:#dbeafe;color:#1e40af}
.wstatus.completed{background:#dcfce7;color:#166534}
.wstatus.cancelled{background:#f1f5f9;color:#64748b}
.wstatus.disputed{background:#fee2e2;color:#C1121A}

/* wallet */
.wain-wallet-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media(max-width:640px){.wain-wallet-cards{grid-template-columns:1fr}}
.wain-wallet-card{background:#fff;border:1px solid var(--wain-line);border-radius:var(--r-lg);padding:18px}
.wain-wallet-card.main{background:linear-gradient(120deg,var(--wain-ink),#1e293b);color:#fff;border:0}
.wain-wallet-card .lbl{font-size:13px;opacity:.8;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.wain-wallet-card .val{font-size:28px;font-weight:800}
.wain-wallet-card.main .val{color:#fff}
.wain-ledger{width:100%;border-collapse:collapse;font-size:14px}
.wain-ledger th,.wain-ledger td{text-align:right;padding:10px;border-bottom:1px solid var(--wain-line)}
.wain-ledger th{color:var(--wain-muted);font-weight:700;font-size:12px}

/* reviews + stars */
.wain-stars{display:inline-flex;gap:2px;color:#f59e0b}
.wain-stars svg{width:16px;height:16px;fill:currentColor;stroke:currentColor}
.wain-stars .empty{color:#cbd5e1;fill:#cbd5e1;stroke:#cbd5e1}
.wain-rating-sum{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.wain-rating-sum .big{font-size:36px;font-weight:800;line-height:1}
.wain-rating-sum .cnt{font-size:13px;color:var(--wain-muted)}
.wain-review{border-top:1px solid var(--wain-line);padding:14px 0;display:flex;gap:12px}
.wain-review .av{width:42px;height:42px;border-radius:50%;background:var(--wain-accent);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.wain-review .who{font-weight:700;font-size:14px}
.wain-review .when{font-size:12px;color:var(--wain-muted)}
.wain-review .body{color:var(--wain-slate);font-size:14px;margin-top:5px}
.wain-star-input{display:inline-flex;flex-direction:row-reverse;gap:4px}
.wain-star-input input{display:none}
.wain-star-input label{cursor:pointer;color:#cbd5e1}
.wain-star-input label svg{width:30px;height:30px;fill:currentColor;stroke:currentColor}
.wain-star-input input:checked ~ label,.wain-star-input label:hover,.wain-star-input label:hover ~ label{color:#f59e0b}

/* mini star summary on cards/seller */
.wain-mini-rate{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--wain-slate)}
.wain-mini-rate svg{width:14px;height:14px;fill:#f59e0b;stroke:#f59e0b}

/* provider verification fields (shown only when provider role selected) */
.wain-prov-fields{display:none;border-top:1px dashed var(--wain-line);margin-top:8px;padding-top:14px}
.wain-auth-form:has(input[name="acct"][value="provider"]:checked) .wain-prov-fields{display:block}
.prov-req{display:none}
.wain-auth-form:has(input[name="acct"][value="provider"]:checked) .prov-req{display:inline}

/* ===== Notifications ===== */
.wain-bell{position:relative}
.wain-bell-count{position:absolute;top:3px;inset-inline-end:3px;background:var(--wain-brand);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:998px;display:grid;place-items:center;padding:0 3px;line-height:1}
.wain-bell-panel{position:absolute;top:50px;inset-inline-end:0;width:340px;max-width:90vw;background:#fff;border:1px solid var(--wain-line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:90;overflow:hidden}
.wain-bell-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--wain-line);font-size:14px}
.wain-bell-head a{color:var(--wain-brand);font-size:12px;font-weight:700}
.wain-bell-list{max-height:360px;overflow:auto}
.wain-bell-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--wain-line)}
.wain-bell-item:hover{background:var(--wain-bg)}
.wain-bell-item.unread{background:color-mix(in srgb,var(--wain-brand) 6%,#fff)}
.wain-bell-item .ic{width:34px;height:34px;border-radius:12px;background:var(--wain-bg);color:var(--wain-accent);display:grid;place-items:center;flex:none}
.wain-bell-item .ic svg{width:18px;height:18px}
.wain-bell-item .tx{font-size:14px;color:var(--wain-ink);line-height:1.5}
.wain-bell-item .tm{display:block;font-size:11px;color:var(--wain-muted);margin-top:2px}
.wain-bell-empty{padding:30px;text-align:center;color:var(--wain-muted)}
.wain-bell-empty svg{width:34px;height:34px;display:block;margin:0 auto 8px;color:#cbd5e1}
.wain-bell-foot{display:block;text-align:center;padding:11px;font-size:13px;font-weight:700;color:var(--wain-brand);border-top:1px solid var(--wain-line)}
.wain-notif-list{background:#fff;border:1px solid var(--wain-line);border-radius:var(--r-lg);overflow:hidden}
.wain-notif-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--wain-line)}
.wain-notif-row:last-child{border-bottom:0}
.wain-notif-row:hover{background:var(--wain-bg)}
.wain-notif-row.unread{background:color-mix(in srgb,var(--wain-brand) 6%,#fff)}
.wain-notif-row .ic{width:38px;height:38px;border-radius:12px;background:var(--wain-bg);color:var(--wain-accent);display:grid;place-items:center;flex:none}
.wain-notif-row .ic svg{width:19px;height:19px}
.wain-notif-row .tx{flex:1;font-size:14px;color:var(--wain-ink)}
.wain-notif-row .tm{font-size:12px;color:var(--wain-muted);flex:none}

/* ===== Modal (report) ===== */
.wain-modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px}
.wain-modal.open{display:flex}
.wain-modal .bg{position:absolute;inset:0;background:rgba(15,23,42,.5)}
.wain-modal .box{position:relative;background:#fff;border-radius:16px;max-width:440px;width:100%;padding:24px;box-shadow:var(--shadow-lg)}
.wain-modal h3{margin:0 0 4px;font-size:18px;display:flex;align-items:center;gap:8px}
.wain-modal h3 svg{width:20px;height:20px;color:var(--wain-brand)}
.wain-modal .sub{color:var(--wain-muted);font-size:14px;margin-bottom:16px}
.wain-modal select,.wain-modal textarea{width:100%;border:1.5px solid var(--wain-line);border-radius:8px;padding:11px;font-family:var(--font);font-size:14px;outline:0;margin-bottom:12px}
.wain-modal select:focus,.wain-modal textarea:focus{border-color:var(--wain-brand)}
.wain-modal textarea{min-height:84px;resize:vertical}
.wain-modal .x{position:absolute;top:14px;inset-inline-end:14px;cursor:pointer;color:var(--wain-muted);width:28px;height:28px;display:grid;place-items:center;border-radius:8px}
.wain-modal .x:hover{background:var(--wain-bg)}

/* ===== Order timeline ===== */
.wain-timeline{display:flex;flex-direction:column;gap:12px}
.wt-step{display:flex;align-items:flex-start;gap:12px;padding:6px 0}
.wt-step .dot{width:36px;height:36px;border-radius:50%;background:var(--wain-bg);border:2px solid var(--wain-line);color:var(--wain-muted);display:grid;place-items:center;flex:none}
.wt-step .dot svg{width:17px;height:17px}
.wt-step.on .dot{background:#dcfce7;border-color:#0E9F6E;color:#0E9F6E}
.wt-step.cancelled .dot{background:#f1f5f9;border-color:#94a3b8;color:#64748b}
.wt-step.disputed .dot{background:#fee2e2;border-color:var(--wain-brand);color:var(--wain-brand)}
.wt-step b{display:block;font-size:14px;color:var(--wain-ink)}
.wt-step span{display:block;font-size:12px;color:var(--wain-muted);margin-top:2px}

/* ===== Image grid (edit) ===== */
.wain-imggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:560px){.wain-imggrid{grid-template-columns:repeat(3,1fr)}}
.wain-imgthumb{position:relative;cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid var(--wain-line);aspect-ratio:1;display:block}
.wain-imgthumb img{width:100%;height:100%;object-fit:cover;transition:.2s}
.wain-imgthumb input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wain-imgthumb .rm{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;background:rgba(15,23,42,.7);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1;transition:.15s}
.wain-imgthumb:has(input:checked){border-color:var(--wain-brand)}
.wain-imgthumb:has(input:checked) img{opacity:.4;filter:grayscale(1)}
.wain-imgthumb:has(input:checked) .rm{background:var(--wain-brand)}