/* ============================================================
   aziLogin.css
   Auth pages — Login, Register, Contact.
   Full-page centered wrapper, auth card, header, form,
   remember-me row, forgot password link, card footer.
   Also contains the two-column Contact page layout.

   All colour values come from tokens in aziBase.css.
   ============================================================ */


/* ============================================================
   PAGE WRAPPER  (Login, Register, ForgotPassword)
   ============================================================ */

.auth-wrapper {
    min-height:     100vh;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     var(--color-bg-page);
    padding:        40px 20px;
}


/* ============================================================
   AUTH CARD
   Same design DNA as contact-form-card:
   white bg, 1px border, animated 2px top stripe on hover.
   Faded decorative icon top-right (Default page e-num style).
   Small inline icon in the h2 heading.
   ============================================================ */

.auth-card {
    position:      relative;
    width:         100%;
    max-width:     460px;
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       28px;
    overflow:      hidden;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Animated top stripe — hidden, reveals from left on hover */
.auth-card::before {
    content:          '';
    position:         absolute;
    top: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.auth-card:hover::before { transform:     scaleX(1); }
.auth-card:hover          { border-color: var(--color-border-hover);
                            box-shadow:   var(--shadow-medium); }

/* Faded decorative icon — top-right, same style as e-num on Default page */
.auth-deco {
    position:       absolute;
    top:            14px;
    right:          18px;
    font-size:      2.8rem;
    color:          #ECF2F5;
    pointer-events: none;
    user-select:    none;
    line-height:    1;
}

/* Coloured icon box — 30px, sits above heading.
   Same dimensions and style as service-card-icon and e-ico.
   Used on auth cards and contact form card.               */
.auth-ico {
    width:           30px;
    height:          30px;
    background:      var(--color-primary-bg);
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       0.82rem;
    margin-bottom:   11px;
}

/* Heading — no inline icon, icon box sits above */
.auth-card h2 {
    font-family:   var(--font-heading);
    font-size:     1.1rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 4px;
    position:      relative;
    z-index:       1;
}

.auth-subtitle {
    font-size:     0.78rem;
    color:         var(--color-text-muted);
    font-weight:   300;
    margin-bottom: 20px;
}


/* ============================================================
   FORM
   ============================================================ */

.auth-form {
    /* inherits .input-field, .input-label, .input-box from aziInputs.css */
}

/* Full-width submit button */
.auth-btn {
    display:    block !important;
    width:      100% !important;
    padding:    8px 20px;
    margin-top: 4px;
}


/* ============================================================
   REMEMBER ME + FORGOT PASSWORD ROW
   ============================================================ */

.remember-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   12px;
    font-size:       0.8rem;
    color:           var(--color-text-muted);
}

.remember-me {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    cursor:      pointer;
}

.remember-me input[type="checkbox"] {
    width:    15px;
    height:   15px;
    margin:   0;
    accent-color: var(--color-primary);
}

.forgot-link {
    font-size:       0.8rem;
    color:           var(--auth-link);
    text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }


/* ============================================================
   CARD FOOTER
   ============================================================ */

.auth-footer {
    text-align: center;
    margin-top: 14px;
    font-size:  0.82rem;
    color:      var(--color-text-muted);
}

.auth-footer a {
    color:       var(--auth-link);
    margin-left: 4px;
    text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }


/* ============================================================
   CONTACT PAGE — TWO-COLUMN LAYOUT
   ============================================================ */

.contact-layout {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   52px;
    max-width:             880px;
    margin:                0 auto;
    padding:               60px 20px;
    align-items:           start;
}

/* Left info panel */
.contact-info h1 {
    font-family:    var(--font-heading);
    font-size:      1.75rem;
    font-weight:    300;
    color:          var(--color-text-primary);
    margin-bottom:  1rem;
    letter-spacing: 0.03em;
    line-height:    1.25;
}

.contact-info p {
    font-size:   0.88rem;
    color:       var(--color-text-body);
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 1rem;
}

.contact-detail {
    font-size:   0.82rem;
    color:       var(--color-text-muted);
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 6px;
}

.contact-detail i {
    color:    var(--color-primary);
    width:    14px;
    flex-shrink: 0;
}

/* Trust panel — matches .enquiry-band.primary used site-wide */
.contact-trust {
    margin-top:    24px;
    padding:       16px 18px;
    background:    var(--color-primary-bg);
    border:        1px solid rgba(2, 140, 197, 0.20);
    border-radius: var(--card-radius);
}

.contact-trust strong {
    font-family:   var(--font-heading);
    font-size:     0.83rem;
    font-weight:   500;
    color:         var(--color-primary-h);
    display:       block;
    margin-bottom: 4px;
}

.contact-trust p {
    font-size:   0.75rem;
    color:       var(--color-text-body);
    line-height: 1.65;
    font-weight: 300;
    margin:      0;
}

/* Contact form card icon box — same 30px as auth-ico */
.contact-form-ico {
    width:           30px;
    height:          30px;
    background:      var(--color-primary-bg);
    border-radius:   5px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    font-size:       0.82rem;
    margin-bottom:   11px;
}

/* Right form card — animated top stripe on hover (Default page pillar card pattern) */
.contact-form-card {
    background:    var(--color-bg-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding:       24px;
    position:      relative;
    overflow:      hidden;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Top stripe — hidden, animates in from left on hover */
.contact-form-card::before {
    content:          '';
    position:         absolute;
    top: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--color-primary);
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.3s ease;
}

.contact-form-card:hover::before {
    transform: scaleX(1);
}

.contact-form-card:hover {
    border-color: var(--color-border-hover);
    box-shadow:   var(--shadow-medium);
}

.contact-form-card h3 {
    font-family:   var(--font-heading);
    font-size:     0.95rem;
    font-weight:   500;
    color:         var(--color-text-primary);
    margin-bottom: 16px;
}

.contact-footer-link {
    text-align: center;
    margin-top: 12px;
    font-size:  0.75rem;
    color:      var(--color-text-muted);
}

.contact-footer-link a {
    color: var(--color-primary);
    margin-left: 4px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap:     32px;
        padding: 40px 16px;
    }
}