/* accounts.css — Login, registration, dashboard, orders, addresses */

/* ── Login / Auth panels ── */
.login-panel{max-width:860px;margin-inline:auto;padding:clamp(40px,8vw,80px) var(--pad)}
.login-panel>div{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.login-panel article{display:flex;flex-direction:column;gap:16px}
.login-panel article:first-child{padding-right:48px;border-right:1px solid var(--border)}
.login-panel h1,.login-panel h2{font-family:var(--font-head);font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:400;color:var(--navy);margin:0}
.login-panel p{font-size:.9rem;color:var(--ink-muted);margin:0;line-height:1.5}
.login-panel p a{color:var(--navy);text-decoration:underline}
.login-screen{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);margin:40px auto;max-width:440px;padding:40px}
.login-screen h1{text-align:center;font-family:var(--font-head);font-size:1.75rem;font-weight:400;color:var(--navy);margin-bottom:8px}
.login-screen p{text-align:center;color:var(--ink-muted);margin-top:8px;font-size:.9375rem}
.login-screen p a{color:var(--navy);text-decoration:underline}

/* ── Registration ── */
.register-block{max-width:860px;margin-inline:auto;padding:clamp(40px,8vw,80px) var(--pad)}
.register-block h1{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;color:var(--navy);margin:0 0 6px}
.register-block>p,.subtitle{color:var(--ink-muted);font-size:.9rem;margin:0 0 28px}
.register-form{display:grid;grid-template-columns:1fr;gap:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

/* ── Shared form inputs ── */
.form-input{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-input label{font-size:.8125rem;font-weight:500;color:var(--ink)}
.form-input input,.form-input select,.form-input textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--white);font-size:.9375rem;color:var(--ink);font-family:var(--font-body);outline:none;appearance:none;transition:border-color var(--ease),box-shadow var(--ease)}
.form-input input:focus,.form-input select:focus,.form-input textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(28,43,58,.08)}
.form-input textarea{resize:vertical;min-height:100px}
.form-check{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.form-check input[type="checkbox"]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer;flex-shrink:0}
.check-label{font-size:.875rem;color:var(--ink-muted);cursor:pointer;line-height:1.4}
.check-label a{color:var(--navy);text-decoration:underline}
.fieldMessage{font-size:.75rem;color:#c0392b;margin-top:2px}
.red{color:#c0392b}
.button-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.text-link{font-size:.875rem;color:var(--ink-muted);text-decoration:underline;cursor:pointer}
.text-link:hover{color:var(--ink)}
.not-member{font-size:.875rem;color:var(--ink-muted);margin:0}

/* ── Dashboard layout ── */
.dashboard{padding:clamp(24px,5vw,56px) var(--pad) 80px}
.grid-steps{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.account-sticky{position:sticky;top:100px}
.account-nav{background:var(--surface);border-radius:var(--r);padding:8px}
.account-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.account-nav ul li a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.875rem;font-weight:500;color:var(--ink-muted);text-decoration:none;transition:background var(--ease),color var(--ease)}
.account-nav ul li a:hover,.account-nav ul li a.active{background:var(--white);color:var(--ink)}
.dashboard-content{min-width:0}
.dashboard-content>article{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.dashboard-content>article+article{display:block;margin-bottom:0;padding:16px 0;border-bottom:1px solid var(--border)}
.dashboard-content h3{font-family:var(--font-head);font-size:1.25rem;font-weight:400;margin:0;color:var(--navy)}
.dashboard-content article label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:4px}
.dashboard-content article p{margin:0;font-size:.9375rem;color:var(--ink)}
.dashboard-message{text-align:center;padding:48px 0;color:var(--ink-muted)}
.dashboard-message p{font-size:1rem;margin-bottom:20px}

/* ── Edit / details panel ── */
.button.edit{font-size:.8125rem;padding:8px 16px;cursor:pointer}
.edit{font-size:.8125rem;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--navy);text-decoration:underline;border:none;background:none;font-family:var(--font-body)}
.details-pop{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);z-index:1100;transform:translateX(100%);transition:transform 300ms ease;overflow-y:auto;padding:56px 36px 36px;box-sizing:border-box}
.details-pop.active{transform:translateX(0)}
body.no-scroll::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1050}
.details-pop .close-icon{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#f5f5f5;cursor:pointer;padding:0;transform:none;z-index:10}
.details-pop .close-icon::before,.details-pop .close-icon::after{content:'';position:absolute;width:14px;height:1.5px;background:#292929;border-radius:2px;top:50%;left:50%;margin:-1px 0 0 -7px}
.details-pop .close-icon::before{transform:rotate(45deg)}
.details-pop .close-icon::after{transform:rotate(-45deg)}
.details-pop h3{font-family:"Instrument Serif",serif;font-size:1.75rem;font-weight:400;color:var(--blue);margin:0 0 18px;line-height:1.1}
.details-pop hr{border:none;border-top:1px solid #e5e5e5;margin:32px 0}

/* ── Orders table (desktop) ── */
.desktop-table{display:block}
.mobile-table{display:none}
.one-column{max-width:100%}
table{width:100%;border-collapse:collapse;font-size:.875rem}
.cl-table thead{background:var(--surface)}
.cl-table__cell--th{padding:12px 16px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);border-bottom:1px solid var(--border);text-align:left}
.cl-table__row{border-bottom:1px solid var(--border);transition:background var(--ease)}
.cl-table__body .cl-table__row:hover{background:var(--surface)}
.cl-table__cell{padding:14px 16px;color:var(--ink);vertical-align:middle}
.order-info{color:var(--navy);text-decoration:none;font-weight:500;border-bottom:1px solid var(--border)}
.order-info:hover{border-color:var(--navy)}

/* ── Mobile order cards ── */
.mobile-order-card{border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px;font-size:.875rem}
.mobile-order-card strong{display:block;font-size:.9375rem;margin-bottom:6px;color:var(--navy)}
.mobile-order-card p{margin:4px 0;color:var(--ink-muted)}

/* ── Address cards ── */
.address-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}
.address-card{border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;font-size:.875rem;line-height:1.6;color:var(--ink)}
.address-card p{margin:0}
.address-card-actions{display:flex;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.address-card-actions a{font-size:.8125rem;color:var(--ink-muted);text-decoration:underline;cursor:pointer}
.address-card-actions a:hover{color:var(--ink)}

/* ── Highlight messages ── */
.highlight_message{border:1px solid var(--border);padding:14px 18px;margin-bottom:24px;border-radius:var(--r);font-size:.9rem;text-align:center}
.highlight_message.success{border-color:#34d399;background:#d1fae5;color:#065f46}
.highlight_message.error{border-color:#f87171;background:#fee2e2;color:#991b1b}

/* ── Auth pages (login, register, forgot password, reset) ── */
.auth-page {max-width: 1100px; margin: 0 auto; padding: clamp(40px,6vw,80px) clamp(16px,4vw,48px);}
.auth-grid {display: grid; grid-template-columns: 1fr 1px 1fr; gap: 48px; align-items: stretch; max-width: 880px; margin: 0 auto;}
.auth-divider {background: #e5e5e5;}
.auth-card {background: #fff; padding: 0;}
.auth-card--standalone {max-width: 460px; margin: 0 auto;}
.auth-card--muted {display: flex; flex-direction: column; justify-content: flex-start;}
.auth-card h1 {font-family: "Instrument Serif", serif; font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 400; color: var(--blue); margin: 0 0 8px; line-height: 1.1;}
.auth-card h2 {font-family: "Instrument Serif", serif; font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 400; color: var(--blue); margin: 0 0 8px; line-height: 1.1;}
.auth-sub {font-size: 14px; color: #666; margin: 0 0 32px; line-height: 1.5;}
.auth-sub a {color: var(--blue); text-decoration: underline;}
.auth-sub a:hover {opacity: .75;}
.auth-message {margin: 0 0 20px; padding: 14px 16px; font-size: 14px; line-height: 1.5; border-left: 3px solid; background: #f7f5f4; color: #292929;}
.auth-message:empty {display: none;}
.auth-message--success {border-color: #3a7d3a; background: #eef6ed; color: #2d5d2d;}
.auth-message--success strong {color: #1f4720;}
.auth-message--error {border-color: #a13030; background: #fbeeee; color: #a13030;}
.auth-grid-2 {display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 20px;}
.auth-field {display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;}
.auth-field label {font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8094ae; font-weight: 600;}
.auth-field label .red {color: #a13030; letter-spacing: 0;}
.auth-field input {border: 1px solid #d8d8d8; background: #fff; padding: 12px 14px; font-family: "Google Sans Flex", sans-serif; font-size: 14px; color: #292929; transition: border-color .2s; box-sizing: border-box; width: 100%; border-radius: 0;}
.auth-field input:focus {outline: none; border-color: var(--blue);}
.auth-field .fieldMessage {font-size: 12px; color: #a13030; margin: 4px 0 0;}
.auth-hint {font-size: 12px; color: #8094ae; margin: 0 0 18px;}
.auth-check {display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: 14px; color: #292929; cursor: pointer;}
.auth-check input[type="checkbox"] {width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; flex-shrink: 0;}
.auth-actions {display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px;}
.auth-btn {display: inline-block; padding: 16px 36px; background: var(--blue); color: #fff; border: 1px solid var(--blue); font-family: "Google Sans Flex", sans-serif; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; transition: opacity .3s; border-radius: 0; text-decoration: none; text-align: center;}
.auth-btn:hover {opacity: .85;}
.auth-btn:disabled {opacity: .5; cursor: wait;}
.auth-btn--block {display: block; width: 100%;}
.auth-btn--outline {background: transparent; color: var(--blue);}
.auth-btn--outline:hover {background: var(--blue); color: #fff; opacity: 1;}
.auth-link {display: inline-block; margin-top: 14px; font-size: 12px; color: #8094ae; text-decoration: underline; letter-spacing: .02em;}
.auth-link:hover {color: var(--blue);}
.auth-footer-links {margin-top: 18px; font-size: 13px; color: #8094ae;}
.auth-footer-links a {color: var(--blue); text-decoration: underline;}
@media (max-width: 720px) {
    .auth-grid {grid-template-columns: 1fr; gap: 32px;}
    .auth-divider {height: 1px; width: 100%;}
    .auth-grid-2 {grid-template-columns: 1fr;}
    .auth-actions {flex-direction: column; align-items: stretch; gap: 14px;}
    .auth-btn {width: 100%;}
}