.asf-wrapper { --asf-accent:#2563eb; --asf-ink:#10213a; --asf-muted:#637086; color:var(--asf-ink); font-family:'Tajawal','Segoe UI',Tahoma,sans-serif; font-size:15px; line-height:1.65; text-align:start; width:100%; max-width:1400px; margin:24px auto; padding:30px; background:#f3f4f6; border-radius:12px; container-type:inline-size;border:1px solid #ccc; }
.asf-wrapper, .asf-wrapper * { box-sizing:border-box; }
.asf-wrapper [hidden] { display:none !important; }
.asf-wrapper :is(button,input,select) { font:inherit; }
.asf-wrapper button { cursor:pointer; text-transform:none; letter-spacing:normal; }
.asf-wrapper :is(button,a,input,select):focus-visible { outline:3px solid #93c5fd; outline-offset:4px; }
.asf-wrapper h2 { font:inherit; font-size:24px; line-height:1.4; font-weight:700; color:var(--asf-ink); margin:0 0 8px; }
.asf-wrapper p { margin:0; }
.asf-wrapper .asf-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
.asf-wrapper .asf-progress { display:flex; align-items:center; gap:12px; }
.asf-wrapper .asf-progress-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--asf-muted); }
.asf-wrapper .asf-progress-item b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e5e7eb; font-size:12px; flex-shrink:0; }
.asf-wrapper .asf-progress-item.is-current { color:var(--asf-accent); font-weight:600; }
.asf-wrapper .asf-progress-item.is-current b { color:#fff; background:var(--asf-accent); }
.asf-wrapper .asf-progress-line { width:36px; height:1px; background:#d5dbe5; }
.asf-wrapper .asf-language-toggle { background:#fff; color:var(--asf-accent); border:1px solid #d7e2f5; border-radius:8px; padding:8px 14px; min-height:44px; flex-shrink:0; }
.asf-wrapper .asf-selection-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:28px; align-items:start; }
.asf-wrapper .asf-catalog { min-width:0; }
.asf-wrapper .asf-hint { color:var(--asf-muted); font-size:14px; margin-bottom:24px; }
.asf-wrapper .asf-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.asf-wrapper .asf-card { appearance:none; width:100%; min-width:0; min-height:76px; display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:18px; margin:0; position:relative; background:#fff; color:var(--asf-ink); border:1px solid transparent; border-radius:9px; box-shadow:0 2px 4px #10213a0c; text-align:start; font-size:15px; font-weight:500; line-height:1.5; transition:background .18s,border-color .18s,box-shadow .18s; }
.asf-wrapper .asf-card-title { overflow-wrap:anywhere; }
.asf-wrapper .asf-card:hover { border-color:#93c5fd; box-shadow:0 3px 9px #2563eb12; }
.asf-wrapper .asf-card.selected { border-color:var(--asf-accent); background:#eff6ff; box-shadow:inset 0 0 0 1px var(--asf-accent),0 2px 4px #10213a0c; }
.asf-wrapper .asf-card.selected::after { content:'✓'; position:absolute; inset-inline-end:-8px; top:-10px; display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--asf-accent); border-radius:50%; background:#f3f4f6; color:var(--asf-accent); font-size:14px; font-weight:700; }
.asf-wrapper .asf-card-img { width:34px; height:34px; object-fit:contain; flex-shrink:0; }
.asf-wrapper .asf-card .dashicons { width:34px; height:34px; font-size:30px; color:var(--asf-accent); flex-shrink:0; }
.asf-wrapper .asf-summary { position:sticky; top:24px; padding:20px; background:#f9fafb; border-radius:10px; }
.asf-wrapper .asf-selected-count { font:inherit; font-size:18px; font-weight:600; color:var(--asf-ink); margin:0 0 18px; }
.asf-wrapper .asf-empty { font-size:13px; color:var(--asf-muted); margin-bottom:22px; }
.asf-wrapper .asf-selected-list { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px; }
.asf-wrapper .asf-selected-list:empty { display:none; }
.asf-wrapper .asf-selected-list li { display:flex; align-items:center; gap:10px; font-size:13px; margin:0; padding:0; }
.asf-wrapper .asf-selected-list :is(img,.dashicons) { width:30px; height:30px; font-size:24px; object-fit:contain; color:var(--asf-accent); flex-shrink:0; }
.asf-wrapper .asf-summary-title { flex:1; overflow-wrap:anywhere; }
.asf-wrapper .asf-remove { display:grid; place-items:center; width:32px; height:36px; flex-shrink:0; padding:0; border:0; background:transparent; color:var(--asf-muted); font-size:22px; border-radius:6px; }
.asf-wrapper .asf-remove:hover { background:#e8edf5; color:var(--asf-ink); }
.asf-wrapper .asf-trial-box { display:grid; gap:2px; text-align:center; padding:16px 12px; border:1px solid #a7dbb7; border-radius:10px; background:#dff2e5; color:#215b37; font-size:13px; line-height:1.7; margin-bottom:16px; }
.asf-wrapper .asf-btn { appearance:none; display:block; width:100%; min-height:54px; border:1px solid transparent; border-radius:8px; padding:14px 22px; font-weight:700; color:#fff; background:var(--asf-accent); box-shadow:none; line-height:1.5; }
.asf-wrapper .asf-btn:hover:not(:disabled) { background:#1d4ed8; }
.asf-wrapper .asf-btn:disabled { background:#dce2eb; color:#677387; cursor:not-allowed; }
.asf-wrapper .asf-selection-error:not(:empty), .asf-wrapper .asf-submit-error:not(:empty) { font-size:14px; color:#b42318; background:#fff1f0; border-radius:8px; padding:12px; margin-top:16px; }
.asf-wrapper .asf-step-2 { max-width:760px; margin:auto; background:#fff; border-radius:12px; padding:32px; }
.asf-wrapper .asf-header-row { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:12px; }
.asf-wrapper .asf-header-row .asf-selected-count { font-size:14px; margin:0; color:var(--asf-muted); }
.asf-wrapper .asf-back-btn { background:transparent; color:var(--asf-accent); border:0; border-radius:4px; padding:8px 0; font-size:13px; text-decoration:underline; text-underline-offset:4px; flex-shrink:0; }
.asf-wrapper .asf-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.asf-wrapper .asf-field-wide { grid-column:1 / -1; }
.asf-wrapper .asf-field { min-width:0; }
.asf-wrapper label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.asf-wrapper .asf-field :is(input,select) { width:100%; min-width:0; height:52px; padding:12px 14px; border:1px solid #d8dfe9; border-radius:8px; background:#fff; color:var(--asf-ink); font-size:15px; box-shadow:none; margin:0; text-align:start; }
.asf-wrapper input::placeholder { color:#7b8595; opacity:1; }
.asf-wrapper input:is([type=tel],[type=email]) { direction:ltr; }
.asf-wrapper[dir=rtl] input:is([type=tel],[type=email]) { text-align:right; }
.asf-wrapper[dir=ltr] input:is([type=tel],[type=email]) { text-align:left; }
.asf-wrapper[dir=rtl] input:is([type=tel],[type=email]):placeholder-shown { direction:rtl; }
.asf-wrapper .asf-terms { font-size:12px; color:var(--asf-muted); text-align:center; margin:24px 0 18px; }
.asf-wrapper .asf-submit-error:not(:empty) { margin-bottom:16px; }
.asf-wrapper .asf-success { text-align:center; padding:48px 16px; }
.asf-wrapper .asf-success-icon { display:grid; place-items:center; margin:0 auto 20px; width:64px; height:64px; border-radius:50%; background:#dff2e5; color:#215b37; font-size:28px; }
@container (max-width:1050px) { .asf-wrapper .asf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (max-width:760px) {
    .asf-wrapper .asf-selection-layout { grid-template-columns:1fr; gap:20px; }
    .asf-wrapper .asf-summary { position:static; }
    .asf-wrapper .asf-selected-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .asf-wrapper .asf-step-2 { padding:24px; }
}
@container (max-width:460px) {
    .asf-wrapper .asf-grid,.asf-wrapper .asf-fields,.asf-wrapper .asf-selected-list { grid-template-columns:1fr; }
    .asf-wrapper .asf-header-row { flex-direction:column; align-items:flex-start; }
    .asf-wrapper .asf-toolbar { flex-wrap:wrap; }
    .asf-wrapper .asf-progress { gap:8px; }
    .asf-wrapper .asf-progress-line { width:16px; }
    .asf-wrapper .asf-progress-item { font-size:12px; }
    .asf-wrapper .asf-step-2 { padding:20px 16px; }
}
@media (max-width:600px) { .asf-wrapper { padding:16px; margin:12px auto; } }
@media (prefers-reduced-motion:reduce) { .asf-wrapper * { transition:none !important; } }