/* ============================================================
   customer-auth.css  — Customer auth & profile pages
   Shared by: login, register, home (profile) blades
   RTL-aware via CSS logical properties throughout
   ============================================================ */

/* ── CSS Variables ── */
:root {
    --auth-primary:       #224229;
    --auth-primary-light: #2d5535;
    --auth-primary-faint: #eef4ef;
    --auth-border:        #e8ecf0;
    --auth-text:          #1a1a2e;
    --auth-muted:         #6c757d;
    --auth-radius:        14px;
    --auth-light:         #f7f8fa;
}

/* ── Section wrapper ── */
.auth-section {
    min-height:  calc(100vh - 200px);
    background:  var(--auth-light);
    display:     flex;
    align-items: center;
    padding:     48px 0;
}

/* ── Card ── */
.auth-card {
    background:    #fff;
    border-radius: var(--auth-radius);
    box-shadow:    0 4px 32px rgba(34,66,41,.10);
    padding:       40px 36px;
    width:         100%;
    margin:        0 auto;
}

/* Per-page width caps */
.auth-card--sm  { max-width: 460px; }   /* login */
.auth-card--md  { max-width: 620px; }   /* register */
.auth-card--lg  { max-width: 800px; }   /* profile */

.auth-card__logo             { text-align: center; margin-bottom: 24px; }
.auth-card__logo i           { font-size: 40px; color: var(--auth-primary); }

.auth-card__title {
    font-size:     22px;
    font-weight:   800;
    color:         var(--auth-text);
    text-align:    center;
    margin-bottom: 6px;
}
.auth-card__sub {
    font-size:     14px;
    color:         var(--auth-muted);
    text-align:    center;
    margin-bottom: 28px;
}

/* ── Form elements ── */
.auth-label {
    font-size:      12px;
    font-weight:    700;
    color:          var(--auth-text);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom:  5px;
    display:        block;
}

.auth-input {
    width:       100%;
    border:      1.5px solid var(--auth-border);
    border-radius: 10px;
    padding:     11px 14px;
    font-size:   14px;
    color:       var(--auth-text);
    outline:     none;
    transition:  border-color .2s, box-shadow .2s;
    background:  #fff;
}
.auth-input:focus {
    border-color: var(--auth-primary);
    box-shadow:   0 0 0 3px rgba(34,66,41,.08);
}
.auth-input.is-invalid { border-color: #dc3545; }

.auth-error {
    font-size:  12px;
    color:      #dc3545;
    margin-top: 4px;
    display:    block;
}

/* ── Submit button ── */
.btn-auth {
    display:         block;
    width:           100%;
    background:      var(--auth-primary);
    color:           #fff;
    border:          none;
    border-radius:   30px;
    padding:         12px;
    font-size:       15px;
    font-weight:     700;
    text-align:      center;
    cursor:          pointer;
    transition:      all .3s;
    box-shadow:      0 4px 14px rgba(34,66,41,.25);
    margin-top:      20px;
    text-decoration: none;
}
.btn-auth:hover {
    background:  var(--auth-primary-light);
    color:       #fff;
    transform:   translateY(-2px);
    box-shadow:  0 6px 18px rgba(34,66,41,.3);
}

/* ── Section sub-heading badge (register, profile) ── */
.auth-section-title {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:          var(--auth-primary);
    background:     var(--auth-primary-faint);
    border-radius:  6px;
    padding:        4px 10px;
    display:        inline-block;
    margin-bottom:  14px;
}

/* ── Divider ── */
.auth-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      22px 0;
    color:       var(--auth-muted);
    font-size:   13px;
}
.auth-divider::before,
.auth-divider::after {
    content:    '';
    flex:       1;
    border-top: 1px solid var(--auth-border);
}

/* ── Footer link ── */
.auth-footer {
    text-align: center;
    font-size:  13px;
    color:      var(--auth-muted);
    margin-top: 18px;
}
.auth-footer a {
    color:           var(--auth-primary);
    font-weight:     700;
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .auth-card { padding: 28px 20px; }
}