:root {
    color-scheme: light;
    --orange: #ff6a00;
    --orange-dark: #e85d04;
    --navy: #131a2b;
    --text: #202636;
    --muted: #687386;
    --line: #e4e8ef;
}

* { box-sizing: border-box; }
html { direction: rtl; }

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #f5f7fa;
    color: var(--text);
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
    text-align: right;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #ffb000, var(--orange), #ff3d00);
    z-index: 20;
}

.ambient {
    position: fixed;
    border-radius: 999px;
    filter: blur(100px);
    opacity: .12;
    pointer-events: none;
}
.ambient-one { width: 28rem; height: 28rem; top: -12rem; right: -10rem; background: #ff7a00; }
.ambient-two { width: 24rem; height: 24rem; bottom: -10rem; left: -9rem; background: #ffc400; }

.auth-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    min-height: 100vh;
    margin: auto;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 70px;
    padding: 48px 0;
}

.brand-panel {
    position: relative;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 64px;
    border-radius: 32px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 173, 65, .26), transparent 25%),
        linear-gradient(145deg, #202a40, #101625 72%);
    color: white;
    box-shadow: 0 35px 80px rgba(19, 26, 43, .2);
}

.brand-panel::before,
.brand-panel::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
}
.brand-panel::before { width: 360px; height: 360px; top: -150px; left: -80px; }
.brand-panel::after { width: 260px; height: 260px; bottom: -120px; right: -70px; }

.brand-panel h1 {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 14px 0 20px;
    font-size: clamp(2.7rem, 5vw, 5rem);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -.04em;
}

.brand-copy {
    position: relative;
    z-index: 1;
    max-width: 570px;
    margin: 0;
    color: #cbd3df;
    font-size: 1.04rem;
    line-height: 2.05;
}

.brand-icon {
    position: relative;
    z-index: 1;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff8a00, var(--orange));
    color: white;
    font-size: 2rem;
    box-shadow: 0 18px 38px rgba(255, 106, 0, .28);
}
.brand-icon.small { width: 46px; height: 46px; border-radius: 14px; font-size: 1.2rem; }

/* Phase 46.5 v1.3: keep uploaded company logos inside their brand boxes. */
.brand-panel .brand-icon,
.mobile-logo .brand-icon {
    flex: 0 0 auto;
    overflow: hidden;
    isolation: isolate;
}

.brand-panel .brand-icon .az-dynamic-image,
.mobile-logo .brand-icon .az-dynamic-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
    background: white;
}

.eyebrow {
    position: relative;
    z-index: 1;
    margin: 22px 0 0;
    color: #ffb15c;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.trust-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 34px;
}
.trust-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #e2e8f0;
    font-size: .74rem;
    font-weight: 700;
}
.trust-list i { color: #ff9b32; }

.auth-card {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 42px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: white;
    box-shadow: 0 24px 60px rgba(30, 41, 59, .12);
}

.mobile-logo { display: none; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--navy); }
.form-heading { margin-bottom: 28px; }
.form-heading.compact { position: relative; }
.form-heading .eyebrow { margin-top: 0; color: var(--orange); }
.form-heading h2 { margin: 5px 0; color: var(--navy); font-size: 2rem; font-weight: 900; }
.form-heading p:last-child { margin: 0; color: var(--muted); font-size: .88rem; }

.back-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
}

.form-stack { display: grid; gap: 17px; }
.form-stack label > span:first-child {
    display: block;
    margin-bottom: 7px;
    color: #3f4756;
    font-size: .77rem;
    font-weight: 800;
}

.input-wrap { position: relative; }
.input-wrap > i:first-child {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}
.input-wrap input {
    width: 100%;
    height: 49px;
    padding: 0 44px 0 42px;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    outline: none;
    background: white;
    color: #202636;
    font: inherit;
    transition: .2s ease;
}
.input-wrap input[dir="ltr"] { text-align: left; }
.input-wrap input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .1);
}

.password-toggle {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8a94a4;
    cursor: pointer;
}

.primary-button {
    min-height: 51px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff7900, var(--orange-dark));
    color: white;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(232, 93, 4, .2);
    transition: .2s ease;
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(232, 93, 4, .27); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.primary-button i { margin-left: 7px; }

.switch-box {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    padding-top: 21px;
    border-top: 1px solid #edf0f4;
    color: var(--muted);
    font-size: .82rem;
}
.switch-box button { border: 0; background: transparent; color: var(--orange-dark); font: inherit; font-weight: 900; cursor: pointer; }

.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-option input { position: absolute; opacity: 0; pointer-events: none; }
.account-option > span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin: 0 !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: #4b5565;
    cursor: pointer;
}
.account-option input:checked + span { border-color: var(--orange); background: #fff5eb; color: var(--orange-dark); }

.registration-photos { align-items: stretch; }
.photo-upload-card { min-width: 0; }
.photo-upload-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.photo-preview {
    position: relative;
    min-height: 142px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    margin: 0 !important;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
}
.photo-preview:hover { border-color: var(--orange); background: #fff8f1; }
.photo-preview > i { color: var(--orange); font-size: 1.45rem; }
.photo-preview > b { color: #334155; font-size: .78rem; }
.photo-preview > small { color: #94a3b8; font-size: .66rem; }
.photo-preview img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
    background: white;
}
.photo-preview.has-image img { display: block; }
.photo-preview.has-image::after {
    content: "د بدلولو لپاره کلیک وکړئ";
    position: absolute;
    right: 8px;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 5px;
    border-radius: 7px;
    background: rgba(15, 23, 42, .78);
    color: white;
    text-align: center;
    font-size: .64rem;
}

.terms-row { display: flex; align-items: center; gap: 10px; color: #5f6878; font-size: .78rem; cursor: pointer; }
.terms-row span { margin: 0 !important; }
.terms-row input { width: 17px; height: 17px; accent-color: var(--orange); }

.form-message { padding: 11px 13px; border-radius: 9px; font-size: .76rem; font-weight: 800; text-align: center; }
.form-message.error { border: 1px solid #fecdd3; background: #fff1f2; color: #be123c; }
.form-message.success { border: 1px solid #bbf7d0; background: #f0fdf4; color: #047857; }
.hidden { display: none !important; }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; width: min(560px, calc(100% - 24px)); padding: 20px 0; }
    .brand-panel { display: none; }
    .mobile-logo { display: flex; }
    .auth-card { max-height: none; padding: 30px 25px; }
}

@media (max-width: 520px) {
    .two-columns { grid-template-columns: 1fr; }
    .auth-card { border-radius: 18px; }
    .form-heading h2 { font-size: 1.7rem; }
}

/* ===== Login system fixes: theme, remember me, recovery, loading and alerts ===== */
:root {
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f1f5f9;
    --body-bg: #f5f7fa;
    --field-bg: #ffffff;
    --field-text: #202636;
    --heading: #131a2b;
    --danger: #be123c;
    --success: #047857;
    --warning: #b45309;
}

html[data-auth-theme="dark"] {
    color-scheme: dark;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #344054;
    --surface: #18202f;
    --surface-soft: #202a3a;
    --surface-muted: #263245;
    --body-bg: #0d1420;
    --field-bg: #111927;
    --field-text: #f8fafc;
    --heading: #f8fafc;
}

html[data-auth-theme="dark"] body {
    background: var(--body-bg);
    color: var(--text);
}

html[data-auth-theme="dark"] .ambient { opacity: .18; }
html[data-auth-theme="dark"] .auth-card {
    border-color: #344054;
    background: var(--surface);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
}
html[data-auth-theme="dark"] .form-heading h2,
html[data-auth-theme="dark"] .mobile-logo,
html[data-auth-theme="dark"] .photo-preview > b { color: var(--heading); }
html[data-auth-theme="dark"] .form-stack label > span:first-child,
html[data-auth-theme="dark"] .terms-row,
html[data-auth-theme="dark"] .remember-row { color: #d1d5db; }
html[data-auth-theme="dark"] .input-wrap input,
html[data-auth-theme="dark"] .account-type-select,
html[data-auth-theme="dark"] .photo-preview,
html[data-auth-theme="dark"] .back-button,
html[data-auth-theme="dark"] .theme-toggle {
    border-color: #3b4658;
    background: var(--field-bg);
    color: var(--field-text);
}
html[data-auth-theme="dark"] .input-wrap input::placeholder { color: #667085; }
html[data-auth-theme="dark"] .switch-box { border-top-color: #313b4a; }
html[data-auth-theme="dark"] .security-note { border-color: #3a4658; background: #202b3b; color: #cbd5e1; }
html[data-auth-theme="dark"] .form-message.error { border-color: #7f1d1d; background: #3b1721; color: #fecdd3; }
html[data-auth-theme="dark"] .form-message.success { border-color: #14532d; background: #123126; color: #bbf7d0; }
html[data-auth-theme="dark"] .form-message.warning { border-color: #78350f; background: #392711; color: #fde68a; }
html[data-auth-theme="dark"] .form-message.info { border-color: #1e3a8a; background: #172554; color: #bfdbfe; }

.auth-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-toolbar .language-switcher { margin: 0 !important; }

.theme-toggle {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}
.theme-toggle:hover { border-color: var(--orange); color: var(--orange-dark); }

.login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: -3px;
}

.remember-row {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #566174;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.remember-row span { margin: 0 !important; }
.remember-row input {
    width: 17px;
    height: 17px;
    accent-color: var(--orange);
}

.text-action {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--orange-dark);
    font: inherit;
    font-size: .76rem;
    font-weight: 900;
    cursor: pointer;
}
.text-action:hover { text-decoration: underline; }

.form-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.6;
}
.form-message.warning { border: 1px solid #fde68a; background: #fffbeb; color: #b45309; }
.form-message.info { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; }

.button-content,
.button-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.security-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 21px;
    padding: 13px 14px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    color: #334155;
}
.security-note i { margin-top: 5px; color: #2563eb; }
.security-note p { margin: 0; font-size: .75rem; line-height: 1.8; }

.account-type-select-wrap { position: relative; }
.account-type-select-wrap > i {
    position: absolute;
    top: 50%;
    right: 15px;
    z-index: 2;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}
.account-type-select {
    width: 100%;
    height: 49px;
    padding: 0 44px 0 35px;
    border: 1px solid #d9dee7;
    border-radius: 10px;
    outline: none;
    background: white;
    color: #202636;
    font: inherit;
    cursor: pointer;
}
.account-type-select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 106, 0, .1); }

.photo-preview.is-processing::before {
    content: "عکس پروسس کېږي...";
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .76);
    color: white;
    font-size: .73rem;
    font-weight: 900;
}

.auth-toast-center {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    width: min(380px, calc(100% - 40px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.auth-toast {
    display: grid;
    grid-template-columns: 34px 1fr 28px;
    align-items: start;
    gap: 10px;
    padding: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    color: #1f2937;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    animation: authToastIn .25s ease both;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}
.auth-toast > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}
.auth-toast-success > i { background: #ecfdf5; color: #059669; }
.auth-toast-error > i { background: #fff1f2; color: #e11d48; }
.auth-toast-warning > i { background: #fffbeb; color: #d97706; }
.auth-toast strong { display: block; font-size: .76rem; }
.auth-toast p { margin: 2px 0 0; color: #64748b; font-size: .72rem; line-height: 1.55; }
.auth-toast button { border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.auth-toast.is-leaving { animation: authToastOut .22s ease both; }

html[data-auth-theme="dark"] .auth-toast { border-color: #3b4658; background: rgba(24, 32, 47, .97); color: #f8fafc; }
html[data-auth-theme="dark"] .auth-toast p { color: #aab4c3; }

.auth-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 15, 28, .72);
    backdrop-filter: blur(8px);
}
.auth-modal-card {
    width: min(510px, 100%);
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.auth-modal-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: #fff4e8;
    color: var(--orange-dark);
    font-size: 1.45rem;
}
.auth-modal-card h2 { margin: 0 0 8px; color: var(--heading); font-size: 1.35rem; }
.auth-modal-card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.9; }
.auth-modal-card code {
    display: block;
    margin: 20px 0;
    padding: 14px;
    border: 1px dashed #fb923c;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    direction: ltr;
    font-family: Consolas, monospace;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: .08em;
}
html[data-auth-theme="dark"] .auth-modal-card code { background: #352313; color: #fdba74; }
.auth-modal-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.secondary-auth-button {
    min-height: 51px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

@keyframes authToastIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authToastOut {
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@media (max-width: 620px) {
    .auth-toolbar { align-items: stretch; flex-direction: column; }
    .theme-toggle { align-self: flex-end; }
    .login-options-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .auth-modal-actions { grid-template-columns: 1fr; }
    .auth-toast-center { top: 12px; left: 12px; width: calc(100% - 24px); }
}


/* AfghanZone Auth v2.2 compatibility additions */
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-2px}.remember-row{display:flex!important;align-items:center;gap:8px!important;cursor:pointer;font-size:.78rem;font-weight:800;color:var(--muted)}.remember-row input{width:17px;height:17px;accent-color:var(--orange)}.text-action{border:0;background:transparent;color:var(--orange-dark);font:inherit;font-size:.77rem;font-weight:900;cursor:pointer}.theme-toggle{position:absolute;top:18px;left:18px;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.9);color:var(--text);font:inherit;font-size:.7rem;font-weight:900;cursor:pointer}.auth-card{position:relative}.button-content,.button-loading{display:inline-flex;align-items:center;justify-content:center;gap:8px}.form-message{display:flex;align-items:flex-start;gap:8px}.auth-version-badge{display:block;margin-top:14px;text-align:center;color:#94a3b8;font-family:Arial,sans-serif;font-size:10px;letter-spacing:.04em}#auth-toast-center{position:fixed;top:18px;right:18px;z-index:9999;display:grid;gap:10px;width:min(370px,calc(100% - 36px))}.auth-toast{display:grid;grid-template-columns:auto 1fr auto;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;color:#172033;box-shadow:0 18px 45px rgba(15,23,42,.18);animation:authIn .2s ease}.auth-toast p,.auth-toast strong{margin:0}.auth-toast p{margin-top:2px;color:#64748b;font-size:.75rem}.auth-toast button{border:0;background:transparent;color:#94a3b8}.auth-toast-success>i{color:#059669}.auth-toast-error>i{color:#dc2626}.auth-toast-warning>i{color:#d97706}.auth-toast.is-leaving{opacity:0;transform:translateY(-6px);transition:.2s}.auth-modal-backdrop{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.65);backdrop-filter:blur(8px)}.auth-modal-card{width:min(480px,100%);padding:30px;border-radius:22px;background:#fff;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}.auth-modal-icon{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 12px;border-radius:20px;background:#fff4e8;color:#e85d04;font-size:1.5rem}.auth-modal-card code{display:block;margin:18px 0;padding:13px;border:1px dashed #fb923c;border-radius:12px;background:#fff7ed;color:#9a3412;font-size:1.05rem;font-weight:900;letter-spacing:.08em}.auth-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.secondary-button{min-height:46px;border:1px solid #dbe3ee;border-radius:11px;background:#f8fafc;color:#334155;font:inherit;font-weight:900;cursor:pointer}@keyframes authIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}html[data-auth-theme="dark"] body{background:#0b1220;color:#e5e7eb}html[data-auth-theme="dark"] .auth-card,html[data-auth-theme="dark"] .auth-modal-card,html[data-auth-theme="dark"] .auth-toast{background:#172033;color:#f8fafc;border-color:#334155}html[data-auth-theme="dark"] .input-wrap,html[data-auth-theme="dark"] select{background:#111827;border-color:#334155;color:#f8fafc}html[data-auth-theme="dark"] input,html[data-auth-theme="dark"] select{color:#f8fafc}html[data-auth-theme="dark"] .theme-toggle{background:#111827;color:#f8fafc;border-color:#334155}html[data-auth-theme="dark"] .auth-toast p{color:#aab4c3}@media(max-width:600px){.login-options{align-items:flex-start;flex-direction:column}.theme-toggle{top:10px;left:10px}.theme-toggle span{display:none}.auth-modal-actions{grid-template-columns:1fr}}

/* CUS-1 customer login enhancement */
#username::placeholder{font-family:Consolas,monospace;font-size:.78rem}.brand-panel .trust-list span:last-child{border-color:rgba(255,176,0,.18)}
