/* ===== Appended to public/css/ecom/ecom.css — Day 4 auth screens ===== */
.ecom-authcard { background:var(--ecom-surface); border:1px solid var(--ecom-border); border-radius:var(--ecom-radius); box-shadow:var(--ecom-shadow); padding:32px; }
.ecom-auth__title { font-size:var(--ecom-fs-xl); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin:0 0 6px; }
.ecom-auth__sub { color:var(--ecom-muted); margin:0 0 22px; }
.ecom-auth__alt { text-align:center; margin-top:20px; color:var(--ecom-muted); }
.ecom-auth__alt a { color:var(--ecom-orange); font-weight:var(--ecom-fw-medium); }
.ecom-form { display:flex; flex-direction:column; gap:16px; }
.ecom-form__legend { font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin:14px 0 0; padding-bottom:8px; border-bottom:1px solid var(--ecom-border); }
.ecom-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ecom-field { display:flex; flex-direction:column; gap:6px; }
.ecom-field > span { font-size:var(--ecom-fs-sm); font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); }
.ecom-field input, .ecom-field select { padding:11px 14px; border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm); font-family:inherit; font-size:var(--ecom-fs-base); background:var(--ecom-surface); }
.ecom-field input:focus, .ecom-field select:focus { outline:2px solid var(--ecom-orange); outline-offset:1px; border-color:var(--ecom-orange); }
.ecom-check { display:flex; align-items:center; gap:8px; font-size:var(--ecom-fs-sm); color:var(--ecom-ink); cursor:pointer; }
.ecom-form__row { display:flex; justify-content:space-between; align-items:center; }
.ecom-form__terms { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.ecom-err { color:var(--ecom-danger); font-size:var(--ecom-fs-sm); font-style:normal; }
.ecom-alert { padding:12px 16px; border-radius:var(--ecom-radius-sm); margin-bottom:18px; font-size:var(--ecom-fs-sm); }
.ecom-alert--error { background:#FDECEC; color:var(--ecom-danger); border:1px solid #F5C2C2; }
.ecom-alert--success { background:var(--ecom-success-soft); color:var(--ecom-success); border:1px solid #BFE6CD; }
.ecom-verify__icon { font-size:54px; color:var(--ecom-orange); margin-bottom:16px; }
@media (max-width:640px){ .ecom-grid2{grid-template-columns:1fr;} }


/* Phone field with 966 prefix */
.ecom-phone {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ecom-border);
    border-radius: var(--ecom-radius-sm);
    overflow: hidden;
    background: var(--ecom-surface);
}
.ecom-phone input {
    flex: 1;
    border: 0 !important;
    outline: 0;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--ecom-fs-base);
    background: transparent;
    border-radius: 0px !important;
}
.ecom-phone__cc {
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--ecom-surface-2);
    border-inline-start: 1px solid var(--ecom-border);
    color: var(--ecom-muted);
    font-weight: var(--ecom-fw-medium);
}

/* Password field with show/hide eye */
.ecom-pass {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ecom-border);
    border-radius: var(--ecom-radius-sm);
    overflow: hidden;
    background: var(--ecom-surface);
}
.ecom-pass input {
    flex: 1;
    border: 0 !important;
    outline: 0;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--ecom-fs-base);
    background: transparent;
    border-radius: 0px !important;
}
.ecom-pass button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    border: 0;
    border-inline-start: 1px solid var(--ecom-border);
    background: var(--ecom-surface-2);
    color: var(--ecom-muted);
    cursor: pointer;
}
.ecom-pass button:hover { color: var(--ecom-navy); }

/* focus state for both wrappers */
.ecom-phone:focus-within,
.ecom-pass:focus-within {
    outline: 2px solid var(--ecom-orange);
    outline-offset: 1px;
    border-color: var(--ecom-orange);
}

/* Address picker field (input + Pick/Edit button joined) */
.ecom-addrpick {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ecom-border);
    border-radius: var(--ecom-radius-sm);
    overflow: hidden;
    background: var(--ecom-surface);
}
.ecom-addrpick input {
    flex: 1;
    border: 0 !important;
    outline: 0;
    padding: 11px 14px;
    font-family: inherit;
    font-size: var(--ecom-fs-base);
    background: transparent;
    min-width: 0;
}
.ecom-addrpick .ecom-btn {
    border-radius: 0;
    border: 0;
    border-inline-start: 1px solid var(--ecom-border);
    white-space: nowrap;
    flex-shrink: 0;
}
.ecom-addrpick:focus-within {
    outline: 2px solid var(--ecom-orange);
    outline-offset: 1px;
    border-color: var(--ecom-orange);
}
.ecom-addrpick .ecom-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Styled file upload (SOL-like: filename + Choose file button) */
.ecom-file {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ecom-border);
    border-radius: var(--ecom-radius-sm);
    overflow: hidden;
    background: var(--ecom-surface);
}
.ecom-file__name {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--ecom-muted);
    font-size: var(--ecom-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ecom-file__btn {
    display: flex;
    align-items: center;
    padding: 11px 20px;
    background: var(--ecom-orange);
    color: #fff;
    font-weight: var(--ecom-fw-medium);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ecom-file__btn:hover { background: var(--ecom-orange-hover); }


/* Themed checkboxes */
.ecom-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--ecom-fs-sm);
    color: var(--ecom-ink);
    cursor: pointer;
    line-height: 1.4;
}
.ecom-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid #a5a5a5;
    border-radius: 6px;
    background: var(--ecom-surface);
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
}
.ecom-check input[type="checkbox"]:checked {
    background: var(--ecom-orange);
    border-color: var(--ecom-orange);
}
.ecom-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ecom-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ecom-orange);
    outline-offset: 2px;
}