@import url("typography.css");
@import url("registration.css");

:root{--auth-green:#00845a;--auth-green-dark:#006b49;--auth-soft:#e9f7f2;--auth-ink:#172725;--auth-muted:#687875;--auth-line:#dfe9e5;--auth-bg:#f5f9f7;--auth-danger:#b83f3a;--auth-warning:#a76500}
*{box-sizing:border-box}body{margin:0;background:var(--auth-bg);color:var(--auth-ink);font-family:"Tajawal",Arial,sans-serif}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(300px,42%) 1fr}.auth-aside{position:relative;overflow:hidden;padding:42px clamp(28px,5vw,76px);background:linear-gradient(145deg,#006b49,#00845a);color:#fff;display:flex;flex-direction:column;justify-content:space-between}.auth-aside:before,.auth-aside:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%}.auth-aside:before{width:360px;height:360px;left:-170px;top:-80px}.auth-aside:after{width:520px;height:520px;right:-310px;bottom:-280px}.auth-brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:22px;font-weight:900}.auth-mark{width:42px;height:42px;border:2px solid #fff;border-radius:14px;display:grid;place-items:center}.auth-mark:after{content:"ER";font-size:13px}.auth-aside-copy{position:relative;z-index:1;max-width:480px}.auth-aside-copy span{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.13);font-weight:700}.auth-aside h1{font-size:clamp(34px,4vw,54px);line-height:1.25;margin:20px 0 14px}.auth-aside p{font-size:17px;color:rgba(255,255,255,.82)}.auth-points{position:relative;z-index:1;display:grid;gap:12px}.auth-points div{display:flex;gap:10px;align-items:center}.auth-points i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}
.auth-main{padding:36px clamp(22px,5vw,72px);display:flex;flex-direction:column}.auth-top{display:flex;justify-content:flex-end;align-items:center;gap:8px;color:var(--auth-muted)}.auth-top a{color:var(--auth-green);font-weight:800;text-decoration:none}.auth-card{width:min(680px,100%);margin:auto}.auth-card--narrow{max-width:520px}.auth-back{display:inline-flex;gap:7px;color:var(--auth-muted);text-decoration:none;margin-bottom:22px}.auth-card h2{font-size:clamp(28px,4vw,40px);margin:0 0 8px;line-height:1.3}.auth-lead{color:var(--auth-muted);margin:0 0 26px}.role-grid{display:grid;gap:14px}.role-card{border:1px solid var(--auth-line);background:#fff;border-radius:18px;padding:22px;text-decoration:none;color:inherit;display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;box-shadow:0 4px 18px rgba(17,61,50,.03)}.role-card:hover{border-color:var(--auth-green);transform:translateY(-2px);box-shadow:0 14px 32px rgba(17,61,50,.09)}.role-icon{width:52px;height:52px;border-radius:15px;background:var(--auth-soft);display:grid;place-items:center;color:var(--auth-green);font-size:24px;font-style:normal}.role-card h3{font-size:19px;margin:0 0 4px}.role-card p{font-size:14px;color:var(--auth-muted);margin:0}.role-arrow{color:var(--auth-green);font-size:22px}.role-card.soon{opacity:.72;cursor:default}.soon-badge{font-size:12px;color:var(--auth-warning);background:#fff5df;padding:6px 9px;border-radius:999px;font-weight:700}
.steps-indicator{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 30px}.steps-indicator span{height:5px;background:var(--auth-line);border-radius:9px}.steps-indicator span.active{background:var(--auth-green)}.step-label{display:flex;justify-content:space-between;color:var(--auth-muted);font-size:13px;margin-bottom:8px}.form-step{display:none}.form-step.active{display:block}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;align-items:start}.field{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:14px;line-height:1.4;margin:0;display:block}.field input,.field select{width:100%;height:50px;border:1px solid var(--auth-line);border-radius:11px;background:#fff;padding:0 14px;color:var(--auth-ink);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.field input:focus,.field select:focus{outline:3px solid rgba(0,132,90,.12);border-color:var(--auth-green)}.field small{color:var(--auth-muted);font-size:12px;line-height:1.4;margin:0}.field-error{min-height:18px;line-height:1.4;color:var(--auth-danger);font-size:12px;font-weight:600;margin:0;display:block}.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"],.password-wrap:has(input[aria-invalid="true"]) input{border-color:var(--auth-danger)!important;background-color:#fffbfa}.field input[aria-invalid="true"]:focus,.field select[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus,.password-wrap:has(input[aria-invalid="true"]) input:focus{outline:3px solid rgba(184,63,58,.16)!important;border-color:var(--auth-danger)!important}.field.has-error label{color:var(--auth-ink)}.form-alert{display:none;margin:16px 0;padding:13px 15px;border-radius:11px;background:#fff1f0;color:var(--auth-danger);font-weight:700}.form-alert.show{display:block}.minor-panel{display:none;margin-top:22px;padding:20px;border:1px solid #eed6a6;background:#fffaf0;border-radius:14px}.minor-panel.show{display:block}.minor-panel h3{margin:0 0 4px}.minor-panel>p{margin:0 0 17px;color:var(--auth-muted);font-size:14px}.check{display:flex;align-items:flex-start;gap:10px;margin-top:17px;color:var(--auth-muted);font-size:14px}.check input{width:18px;height:18px;margin-top:4px}.form-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.auth-btn{border:0;border-radius:11px;padding:13px 22px;min-height:48px;font-family:inherit;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.auth-btn.primary{background:var(--auth-green);color:#fff}.auth-btn.primary:hover{background:var(--auth-green-dark)}.auth-btn.secondary{background:#fff;color:var(--auth-ink);border:1px solid var(--auth-line)}.auth-btn.full{width:100%}.password-wrap{position:relative}.password-wrap input{padding-left:48px}.toggle-password{cursor:pointer;position:absolute;left:7px;top:7px;height:36px;border:0;background:transparent;color:var(--auth-muted);font-family:inherit}.login-options{display:flex;justify-content:space-between;align-items:center;margin:12px 0 20px}.login-options a{color:var(--auth-green);text-decoration:none;font-weight:700;font-size:14px}.demo-note{margin-top:18px;padding:14px;border:1px dashed #bcd9cf;border-radius:12px;background:var(--auth-soft);font-size:13px;color:#41635b}.success-icon{width:70px;height:70px;margin:0 auto 18px;border-radius:50%;background:var(--auth-soft);color:var(--auth-green);display:grid;place-items:center;font-size:32px}.status-pill{display:inline-block;margin:8px 0 20px;padding:7px 12px;border-radius:999px;background:#fff5df;color:var(--auth-warning);font-weight:800;font-size:13px}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-aside{min-height:260px;padding:28px}.auth-aside h1{font-size:32px}.auth-points{display:none}.auth-main{padding:28px 20px}.auth-card{margin:42px auto}}@media(max-width:560px){.auth-aside{min-height:220px}.auth-aside-copy p{font-size:15px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.role-card{grid-template-columns:46px 1fr;padding:17px}.role-arrow,.soon-badge{grid-column:2}.auth-top{font-size:13px}.form-actions{flex-direction:column-reverse}.auth-btn{width:100%}}

/* Guardian dashboard */
.dashboard-body{background:#f4f8f6}.dash-header{height:76px;background:#fff;border-bottom:1px solid var(--auth-line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,70px);position:sticky;top:0;z-index:5}.dash-header .auth-brand{color:var(--auth-ink)}.dash-header .auth-mark{border-color:var(--auth-green);color:var(--auth-green)}.dash-user{display:flex;align-items:center;gap:12px}.dash-avatar{width:42px;height:42px;border-radius:50%;background:var(--auth-soft);color:var(--auth-green);display:grid;place-items:center;font-weight:900}.dash-container{width:min(1180px,calc(100% - 40px));margin:34px auto 70px}.dash-welcome{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}.dash-welcome h1{font-size:34px;margin:0 0 5px}.dash-welcome p{margin:0;color:var(--auth-muted)}.dash-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}.dash-panel{background:#fff;border:1px solid var(--auth-line);border-radius:18px;padding:22px}.dash-panel h2{margin:0 0 5px;font-size:21px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.panel-head p{margin:0;color:var(--auth-muted);font-size:14px}.request-card,.child-card{border:1px solid var(--auth-line);border-radius:14px;padding:17px;margin-top:12px}.request-card{border-color:#ead9af;background:#fffdf7}.request-top,.child-top{display:flex;justify-content:space-between;gap:12px;align-items:start}.request-card h3,.child-card h3{margin:0 0 4px;font-size:18px}.request-card p,.child-card p{margin:0;color:var(--auth-muted);font-size:14px}.request-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.request-meta span,.mini-pill{padding:6px 9px;border-radius:999px;background:#f0f5f3;color:#48615b;font-size:12px}.request-actions{display:flex;gap:9px}.request-actions button{border:0;border-radius:9px;padding:10px 15px;font-family:inherit;font-weight:800}.approve{background:var(--auth-green);color:#fff}.reject{background:#fff;color:var(--auth-danger);border:1px solid #efd1cf!important}.status-active{color:var(--auth-green);background:var(--auth-soft);padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}.dash-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.dash-stat{padding:16px;background:#f7faf9;border-radius:13px}.dash-stat b{display:block;font-size:25px;color:var(--auth-green)}.dash-stat span{font-size:13px;color:var(--auth-muted)}.empty-note{padding:20px;text-align:center;color:var(--auth-muted);border:1px dashed var(--auth-line);border-radius:12px}.dash-toast{position:fixed;left:24px;bottom:24px;background:var(--auth-ink);color:#fff;padding:13px 17px;border-radius:11px;box-shadow:0 14px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(15px);pointer-events:none}.dash-toast.show{opacity:1;transform:none}.logout{color:var(--auth-muted);background:transparent;border:0;font-family:inherit;font-weight:700}
@media(max-width:800px){.dash-grid{grid-template-columns:1fr}.dash-welcome{align-items:start;flex-direction:column}.dash-user>div:not(.dash-avatar){display:none}}@media(max-width:520px){.dash-container{width:min(100% - 24px,1180px)}.dash-header{padding:0 14px}.request-top,.child-top{flex-direction:column}.request-actions{flex-direction:column}.request-actions button{width:100%}}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice-grid label{position:relative;display:flex;gap:10px;align-items:flex-start;padding:15px;border:1px solid var(--auth-line);border-radius:12px;background:#fff;cursor:pointer}.choice-grid label:has(input:checked){border-color:var(--auth-green);background:var(--auth-soft)}.choice-grid input{margin-top:4px}.choice-grid b{display:block}.choice-grid small{color:var(--auth-muted)}.choice-grid label[hidden],.specialty-service-option[hidden],.specialty-services-block[hidden],#specialtyServicesEmpty[hidden]{display:none!important}.specialty-services-block{margin:14px 0 4px}.specialty-services-lead{margin:0 0 12px!important}.audience-block{margin-top:18px}.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.upload-box{border:1px dashed #a9cfc1;border-radius:14px;padding:18px;background:#fbfefd}.upload-box label{font-weight:800;display:block;margin-bottom:5px}.upload-box .req,.field .req{color:#d92d20;font-weight:800;margin-inline-start:2px}.upload-box p{font-size:13px;color:var(--auth-muted);margin:0 0 12px}.upload-box input{max-width:100%;font-size:13px}.upload-state{display:block;margin-top:8px;color:var(--auth-green);font-weight:700;font-size:12px}.review-list{display:grid;gap:11px;margin:18px 0}.review-list div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--auth-line)}.review-list span{color:var(--auth-muted)}.timeline{display:grid;gap:0;margin:24px 0}.timeline article{position:relative;padding:0 38px 24px 0}.timeline article:before{content:"";position:absolute;right:11px;top:22px;bottom:0;width:2px;background:var(--auth-line)}.timeline article:last-child:before{display:none}.timeline i{position:absolute;right:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--auth-line);display:grid;place-items:center;font-size:12px;font-style:normal}.timeline article.done i{background:var(--auth-green);color:#fff}.timeline article.current i{background:#fff5df;color:var(--auth-warning);border:2px solid #e7bd69}.timeline h3{margin:0 0 3px;font-size:17px}.timeline p{margin:0;color:var(--auth-muted);font-size:14px}@media(max-width:560px){.choice-grid,.upload-grid{grid-template-columns:1fr}}

.form-notice{display:block;margin:0 0 18px;padding:13px 15px;border-radius:11px;background:#e9f7f2;color:#006b49;font-weight:700}

/* Document selection: pending, invalid and complete states. */
#specialistRegister .upload-box { min-width:0; border-style:solid; background:#fff; transition:border-color .15s,background .15s; }
#specialistRegister .upload-box.is-complete { border-color:#85bba3; background:#f4faf6; }
#specialistRegister .upload-box.has-error { border-color:#d92d20; }
#specialistRegister .upload-box [hidden] { display:none!important; }
#specialistRegister .document-input { display:block; width:100%; min-height:48px; padding:8px; border:1px solid #d7e5dd; border-radius:10px; background:#f7faf8; font:inherit; font-size:14px; color:#52655c; }
#specialistRegister .document-input::file-selector-button { min-height:36px; margin-inline-end:12px; padding:8px 14px; border:0; border-radius:7px; background:#e1eee6; color:#075c42; font:inherit; font-weight:700; cursor:pointer; }
#specialistRegister .document-input:focus-visible,#specialistRegister .upload-clear:focus-visible { outline:3px solid #83baa0; outline-offset:3px; }
#specialistRegister .upload-help { margin-top:8px; font-size:12px; }
#specialistRegister .upload-state { overflow-wrap:anywhere; line-height:1.7; }
#specialistRegister .upload-state ul { margin:8px 0; padding-inline-start:18px; color:#52655c; font-weight:400; }
#specialistRegister .upload-box.has-error .upload-state { color:#a83428; }
#specialistRegister .upload-box .field-error { color:#b42318; margin:8px 0 0; }
#specialistRegister .upload-clear { min-height:44px; border:0; background:transparent; color:#52655c; text-decoration:underline; font:inherit; font-size:13px; cursor:pointer; padding:8px 0; }

/* Registration support stays in the page flow, clear of next/submit controls. */
#er_live_chat_root.er-registration-support { position:relative; inset:auto; z-index:20; display:flex; justify-content:flex-end; margin:20px 0 0; width:100%; }
#er_live_chat_root.er-registration-support .er-mascot-wrapper,
#er_live_chat_root.er-registration-support .er-resize-btn { display:none; }
#er_live_chat_root.er-registration-support .er-support-widget { transform:none; }

.register-loading{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(15,36,31,.45);backdrop-filter:blur(2px)}
.register-loading[hidden]{display:none!important}
.register-loading__panel{width:min(340px,calc(100% - 32px));padding:28px 22px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 18px 48px rgba(10,40,32,.22)}
.register-loading__spinner{width:42px;height:42px;margin:0 auto 14px;border:3px solid #d7ebe3;border-top-color:var(--auth-green);border-radius:50%;animation:er-spin .8s linear infinite}
.register-loading__title{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--auth-ink)}
.register-loading__hint{margin:0;font-size:13px;color:var(--auth-muted)}
@keyframes er-spin{to{transform:rotate(360deg)}}
.field.is-checking .field-error{color:var(--auth-muted)}

/* Searchable select: the native control keeps the value, the trigger is what the user sees. */
.ss{position:relative;width:100%}
.ss__native{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;opacity:0;pointer-events:none;overflow:hidden}
.ss__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:50px;padding:0 14px;border:1px solid var(--auth-line);border-radius:11px;background:#fff;color:var(--auth-ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.ss__trigger:hover{border-color:#bcd9cf}
.ss__trigger:focus-visible,.ss.is-open .ss__trigger{outline:3px solid rgba(0,132,90,.12);border-color:var(--auth-green)}
.ss__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss__value.is-placeholder{color:var(--auth-muted)}
.ss__caret{flex:0 0 auto;width:9px;height:9px;margin-block-start:-5px;border-inline-end:2px solid var(--auth-muted);border-bottom:2px solid var(--auth-muted);transform:rotate(45deg);transition:transform .15s ease,margin .15s ease}
.ss.is-open .ss__caret{margin-block-start:4px;transform:rotate(225deg)}
.ss__panel{position:absolute;z-index:30;inset-inline:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:8px;max-height:min(320px,60vh);padding:10px;border:1px solid var(--auth-line);border-radius:12px;background:#fff;box-shadow:0 18px 38px rgba(17,61,50,.14)}
.ss__panel[hidden]{display:none!important}
.ss__search{width:100%;height:42px;padding:0 12px;border:1px solid var(--auth-line);border-radius:9px;background:#f7faf8;color:var(--auth-ink);font:inherit}
.ss__search:focus{outline:3px solid rgba(0,132,90,.12);border-color:var(--auth-green)}
.ss__list{margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.ss__list[hidden]{display:none!important}
.ss__option{padding:11px 12px;border-radius:9px;line-height:1.5;cursor:pointer}
.ss__option[hidden]{display:none!important}
.ss__option.is-active{background:var(--auth-soft)}
.ss__option.is-selected{color:var(--auth-green);font-weight:700}
.ss__option.is-selected:after{content:"✓";margin-inline-start:8px}
.ss__empty{margin:0;padding:10px 12px;color:var(--auth-muted);font-size:13px}
.ss__empty[hidden]{display:none!important}
.field.has-error .ss__trigger{border-color:var(--auth-danger);background-color:#fffbfa}
.field.has-error .ss__trigger:focus-visible{outline:3px solid rgba(184,63,58,.16);border-color:var(--auth-danger)}

/* The widest document box keeps its own row so the pairs above stay aligned. */
#specialistRegister .upload-box.is-wide{grid-column:1/-1}

/* Registration receipt. One centred panel, no marketing column beside it: the applicant came here
   for one answer — where the application stands and what happens next — and on a phone a second
   column only pushes that answer below the fold. The two inner panels sit side by side on a laptop
   so the whole receipt is one screen, and stack on a narrow one. */
.receipt-shell{display:grid;place-items:center;min-height:72vh;padding:clamp(22px,5vw,56px) 16px}
.receipt{width:min(880px,100%);padding:clamp(24px,4vw,40px);border:1px solid var(--auth-line);border-radius:22px;background:#fff;box-shadow:0 20px 55px rgba(17,61,50,.08)}
.receipt__brand{display:flex;justify-content:center;margin-bottom:18px}
.receipt .success-icon{margin:0 auto 16px}
.receipt h1{margin:0 0 12px;font-size:clamp(23px,3.2vw,33px);line-height:1.35;text-align:center}
.receipt .status-pill{display:block;width:fit-content;margin:0 auto 16px}
.receipt__lead{max-width:60ch;margin:0 auto 28px;color:var(--auth-muted);line-height:1.8;text-align:center}
.receipt__columns{display:grid;gap:clamp(18px,3vw,32px);align-items:start}
.receipt__title{margin:0 0 14px;font-size:16px;color:var(--auth-muted);font-weight:700}
.receipt__facts{display:grid;gap:0;margin:0;padding:2px 16px;border:1px solid var(--auth-line);border-radius:14px;background:#fbfdfc}
.receipt__facts>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--auth-line)}
.receipt__facts>div:last-child{border-bottom:0}
.receipt__facts dt{margin:0;color:var(--auth-muted);font-size:14px}
.receipt__facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.receipt__note{margin:14px 0 0;padding:12px 14px;border-radius:11px;background:var(--auth-soft);color:#2b5b4e;font-size:13.5px;line-height:1.7}
.receipt .timeline{margin:0}
.receipt .timeline article:last-child{padding-bottom:0}
.receipt__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid var(--auth-line)}
.receipt__actions .auth-btn{flex:1 1 220px}
.receipt__support{margin:16px 0 0;text-align:center;color:var(--auth-muted);font-size:14px}
.receipt__support a{color:var(--auth-green);font-weight:700;text-decoration:none}
.receipt__support a:hover{text-decoration:underline}
@media(min-width:820px){.receipt__columns{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.receipt__actions .auth-btn{flex:1 1 100%}}

/* Admin preview bar: a page shown outside its normal flow says so, loudly, above everything else. */
.preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px clamp(16px,4vw,32px);background:#fff4e0;border-bottom:1px solid #e0b270;color:#5a3a06}
.preview-bar p{margin:0;font-size:14px}
.preview-bar__links{display:flex;flex-wrap:wrap;gap:8px}
.preview-bar__links a{padding:7px 12px;border:1px solid #e0b270;border-radius:999px;background:#fff;color:#7a4a05;font-size:13px;font-weight:700;text-decoration:none}
.preview-bar__links a:hover{background:#ffe9c7}
.preview-bar__links a.is-current{background:#7a4a05;border-color:#7a4a05;color:#fff}

/* --- profile photo on the specialist registration form ------------------- */

.avatar-field {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px dashed #d8e3df;
    border-radius: 12px;
    background: #f8fbfa;
}

.avatar-field__preview {
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(18, 58, 48, .10);
    background: #eef4f2;
}

.avatar-field__input {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 7px;
}

.avatar-field__input input[type="file"] {
    font-size: 13px;
    max-width: 100%;
}

.avatar-field__input small {
    font-size: 12px;
    line-height: 1.7;
    color: #6d807b;
}

.field label .optional {
    font-weight: 500;
    color: #8aa09a;
}

@media (max-width: 520px) {
    .avatar-field {
        flex-direction: column;
        align-items: flex-start;
    }
}