/* ========================================================
   CUSTOMER AUTH STYLES (LOGIN & REGISTER)
   Cleaned & separated from login.blade.php & register.blade.php
   ======================================================== */

/* --- Customer Login Styles --- */
/* Shopping doodle SVG background matching mockup */
    .customer-login-section {
        min-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 15px;
        background-color: #faf7f2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg opacity='0.38'%3E%3Cg transform='translate(25, 20) rotate(-15)'%3E%3Cpath d='M 8 16 L 36 16 L 40 46 L 4 46 Z' fill='%23ffd8a8' stroke='%23fcc419' stroke-width='1.5'/%3E%3Cpath d='M 16 16 C 16 6, 28 6, 28 16' fill='none' stroke='%23fcc419' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(150, 25) rotate(22)'%3E%3Cpath d='M 0 8 L 8 0 L 28 0 L 28 20 L 20 28 L 0 8 Z' fill='%23fcc2d7' stroke='%23f06595' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='8' r='2.5' fill='%23ffffff'/%3E%3Ctext x='7' y='20' font-size='12' font-family='sans-serif' font-weight='bold' fill='%23ffffff'%3E%25%3C/text%3E%3C/g%3E%3Cg transform='translate(195, 140) rotate(12)'%3E%3Cpath d='M 8 16 L 38 16 L 42 48 L 4 48 Z' fill='%23c3fae8' stroke='%2363e6be' stroke-width='1.5'/%3E%3Cpath d='M 16 16 C 16 6, 30 6, 30 16' fill='none' stroke='%2363e6be' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(35, 160) rotate(-10)'%3E%3Cpath d='M 4 8 L 11 8 L 17 28 L 36 28 L 40 13 L 13 13' fill='none' stroke='%23a5d8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='19' cy='33' r='2.5' fill='%2374c0fc'/%3E%3Ccircle cx='34' cy='33' r='2.5' fill='%2374c0fc'/%3E%3C/g%3E%3Cg transform='translate(110, 195) rotate(-5)'%3E%3Crect x='0' y='0' width='32' height='22' rx='3' fill='%23eebefa' stroke='%23da77f2' stroke-width='1.5'/%3E%3Cline x1='0' y1='6' x2='32' y2='6' stroke='%23da77f2' stroke-width='2'/%3E%3Crect x='5' y='12' width='6' height='4' rx='1' fill='%23ffffff'/%3E%3C/g%3E%3Ccircle cx='105' cy='75' r='3.5' fill='%23ffe066'/%3E%3Ccircle cx='70' cy='110' r='2.5' fill='%23ffc9c9'/%3E%3Ccircle cx='230' cy='95' r='3' fill='%23ffd43b'/%3E%3Ccircle cx='135' cy='140' r='3' fill='%23eebefa'/%3E%3Cpath d='M 120 40 Q 122 36 126 36 Q 122 36 120 32 Q 118 36 114 36 Q 118 36 120 40 Z' fill='%23ffd43b'/%3E%3Cpath d='M 225 210 Q 227 206 231 206 Q 227 206 225 202 Q 223 206 219 206 Q 223 206 225 210 Z' fill='%23ffd43b'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: repeat;
        position: relative;
    }

    /* Floating Card */
    .auth-login-card {
        max-width: 440px;
        width: 100%;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 24px;
        padding: 38px 32px 34px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.02);
    }

    .auth-title {
        font-size: 27px;
        font-weight: 800;
        color: #0f172a;
        text-align: center;
        margin-bottom: 6px;
        letter-spacing: -0.4px;
    }
    .auth-subtitle {
        font-size: 14px;
        color: #64748b;
        text-align: center;
        margin-bottom: 26px;
    }

    .auth-label {
        font-size: 13.5px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 7px;
        display: block;
    }

    /* Modern Inside-Icon Input Wrapper */
    .auth-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 18px;
    }
    .auth-input-wrap .auth-left-icon {
        position: absolute;
        left: 14px;
        color: #94a3b8;
        font-size: 15px;
        pointer-events: none;
        transition: color 0.2s ease;
    }
    .auth-input-wrap .auth-input {
        width: 100%;
        height: 48px;
        padding: 10px 14px 10px 42px;
        border: 1.5px solid #e2e8f0;
        border-radius: 12px;
        background: #ffffff;
        font-size: 14.5px;
        color: #1e293b;
        outline: none;
        transition: all 0.2s ease;
    }
    .auth-input-wrap .auth-input::placeholder {
        color: #94a3b8;
        font-size: 13.5px;
    }
    .auth-input-wrap .auth-input:focus {
        border-color: #00a859;
        box-shadow: 0 0 0 4px rgba(0, 168, 89, 0.12);
        background: #ffffff;
    }
    .auth-input-wrap:focus-within .auth-left-icon {
        color: #00a859;
    }

    /* Password Input with eye toggle */
    .auth-input-wrap .auth-input.has-eye {
        padding-right: 44px;
    }
    .auth-eye-btn {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        transition: color 0.2s ease;
    }
    .auth-eye-btn:hover {
        color: #334155;
    }

    /* Forgot Password link */
    .auth-forgot-row {
        display: flex;
        justify-content: flex-end;
        margin-top: -10px;
        margin-bottom: 18px;
    }
    .auth-forgot-link {
        font-size: 13px;
        color: #64748b;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
    }
    .auth-forgot-link:hover {
        color: #00a859;
        text-decoration: underline;
    }

    /* Sign In Submit Button */
    .auth-btn-signin {
        width: 100%;
        height: 48px;
        border-radius: 12px;
        border: none;
        background: #00a859;
        color: #ffffff;
        font-size: 15.5px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 14px rgba(0, 168, 89, 0.28);
    }
    .auth-btn-signin:hover {
        background: #00934e;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 168, 89, 0.38);
    }
    .auth-btn-signin:active {
        transform: translateY(0);
    }

    /* Footer Create Account */
    .auth-footer {
        text-align: center;
        margin-top: 24px;
        font-size: 14px;
        color: #64748b;
    }
    .auth-footer a {
        color: #00a859;
        font-weight: 700;
        text-decoration: none;
        margin-left: 4px;
        transition: all 0.2s ease;
    }
    .auth-footer a:hover {
        text-decoration: underline;
        color: #008044;
    }

    @media (max-width: 575px) {
        .customer-login-section { padding: 30px 12px; }
        .auth-login-card { padding: 30px 22px 26px; border-radius: 20px; }
        .auth-title { font-size: 24px; }
    }

/* --- Customer Register Styles --- */
/* Full Page Edge-to-Edge Split Layout */
    .customer-register-section {
        width: 100%;
        min-height: calc(100vh - 80px);
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
    }

    /* Left Side: 100% Height Doodle Pattern & Frosted Glass Card */
    .auth-brand-side {
        flex: 0 0 46%;
        width: 46%;
        min-height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 40px;
        background-color: #faf7f2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg opacity='0.42'%3E%3Cg transform='translate(25, 20) rotate(-15)'%3E%3Cpath d='M 8 16 L 36 16 L 40 46 L 4 46 Z' fill='%23ffd8a8' stroke='%23fcc419' stroke-width='1.5' rx='2'/%3E%3Cpath d='M 16 16 C 16 6, 28 6, 28 16' fill='none' stroke='%23fcc419' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(150, 25) rotate(22)'%3E%3Cpath d='M 0 8 L 8 0 L 28 0 L 28 20 L 20 28 L 0 8 Z' fill='%23fcc2d7' stroke='%23f06595' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='8' r='2.5' fill='%23ffffff'/%3E%3Ctext x='7' y='20' font-size='12' font-family='sans-serif' font-weight='bold' fill='%23ffffff'%3E%25%3C/text%3E%3C/g%3E%3Cg transform='translate(195, 140) rotate(12)'%3E%3Cpath d='M 8 16 L 38 16 L 42 48 L 4 48 Z' fill='%23c3fae8' stroke='%2363e6be' stroke-width='1.5' rx='2'/%3E%3Cpath d='M 16 16 C 16 6, 30 6, 30 16' fill='none' stroke='%2363e6be' stroke-width='2'/%3E%3C/g%3E%3Cg transform='translate(35, 160) rotate(-10)'%3E%3Cpath d='M 4 8 L 11 8 L 17 28 L 36 28 L 40 13 L 13 13' fill='none' stroke='%23a5d8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='19' cy='33' r='2.5' fill='%2374c0fc'/%3E%3Ccircle cx='34' cy='33' r='2.5' fill='%2374c0fc'/%3E%3C/g%3E%3Cg transform='translate(110, 195) rotate(-5)'%3E%3Crect x='0' y='0' width='32' height='22' rx='3' fill='%23eebefa' stroke='%23da77f2' stroke-width='1.5'/%3E%3Cline x1='0' y1='6' x2='32' y2='6' stroke='%23da77f2' stroke-width='2'/%3E%3Crect x='5' y='12' width='6' height='4' rx='1' fill='%23ffffff'/%3E%3C/g%3E%3Ccircle cx='105' cy='75' r='3.5' fill='%23ffe066'/%3E%3Ccircle cx='70' cy='110' r='2.5' fill='%23ffc9c9'/%3E%3Ccircle cx='230' cy='95' r='3' fill='%23ffd43b'/%3E%3Ccircle cx='135' cy='140' r='3' fill='%23eebefa'/%3E%3Cpath d='M 120 40 Q 122 36 126 36 Q 122 36 120 32 Q 118 36 114 36 Q 118 36 120 40 Z' fill='%23ffd43b'/%3E%3Cpath d='M 225 210 Q 227 206 231 206 Q 227 206 225 202 Q 223 206 219 206 Q 223 206 225 210 Z' fill='%23ffd43b'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: repeat;
    }

    .auth-brand-glass {
        width: 100%;
        max-width: 530px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1.5px solid rgba(255, 255, 255, 0.95);
        border-radius: 28px;
        padding: 56px 44px;
        text-align: center !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.09), 0 4px 16px rgba(0, 0, 0, 0.03);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .auth-brand-glass * {
        text-align: center !important;
    }
    .auth-brand-glass p,
    .auth-brand-glass div,
    .auth-brand-glass h1,
    .auth-brand-glass h2,
    .auth-brand-glass h3,
    .auth-brand-glass h4,
    .auth-brand-glass span {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }
    .auth-brand-logo-box {
        width: 76px;
        height: 76px;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px auto;
        padding: 8px;
    }
    .auth-brand-logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .auth-brand-name {
        font-size: 30px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 16px;
        letter-spacing: -0.3px;
        text-align: center !important;
    }
    .auth-support-label {
        font-size: 15px;
        color: #64748b;
        font-weight: 600;
        margin-bottom: 5px;
        text-align: center !important;
    }
    .auth-support-phone {
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: 0.4px;
        margin-bottom: 18px;
        text-align: center !important;
    }
    .auth-brand-desc {
        font-size: 14px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 auto 10px auto;
        text-align: center !important;
        max-width: 440px;
        width: 100%;
    }
    .auth-brand-desc * {
        text-align: center !important;
    }
    .auth-brand-addr {
        font-size: 13.5px;
        color: #64748b;
        line-height: 1.6;
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 440px;
        width: 100%;
        display: block;
    }
    .auth-brand-addr * {
        text-align: center !important;
    }

    /* Right Side: Form Side (Edge-to-Edge) */
    .auth-form-side {
        flex: 0 0 54%;
        width: 54%;
        min-height: 100%;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 60px;
    }
    .auth-form-inner {
        max-width: 560px;
        width: 100%;
    }

    .auth-form-title {
        font-size: 27px;
        font-weight: 800;
        color: #0f172a;
        text-align: center;
        margin-bottom: 6px;
        letter-spacing: -0.4px;
    }
    .auth-form-subtitle {
        font-size: 14px;
        color: #64748b;
        text-align: center;
        margin-bottom: 28px;
    }

    .auth-field-label {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 6px;
        display: block;
    }
    .auth-field-label span.optional {
        color: #94a3b8;
        font-weight: 500;
        font-size: 12px;
    }

    .auth-input-container {
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
    }
    .auth-input-container .input-icon {
        position: absolute;
        left: 14px;
        color: #94a3b8;
        font-size: 14.5px;
        pointer-events: none;
        transition: color 0.2s ease;
    }
    .auth-input-container .form-input {
        width: 100%;
        height: 44px;
        padding: 8px 14px 8px 40px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff;
        font-size: 14px;
        color: #1e293b;
        outline: none;
        transition: all 0.2s ease;
    }
    .auth-input-container .form-input::placeholder {
        color: #94a3b8;
        font-size: 13px;
    }
    .auth-input-container .form-input:focus {
        border-color: #00a859;
        box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.12);
    }
    .auth-input-container:focus-within .input-icon {
        color: #00a859;
    }

    /* Eye toggle inside password inputs */
    .auth-input-container .form-input.has-eye {
        padding-right: 40px;
    }
    .auth-input-container .eye-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: color 0.2s ease;
    }
    .auth-input-container .eye-btn:hover {
        color: #334155;
    }

    /* Select Dropdowns */
    .auth-select {
        width: 100%;
        height: 44px;
        padding: 8px 14px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/14px;
        font-size: 13.5px;
        color: #334155;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        transition: all 0.2s ease;
        margin-bottom: 14px;
    }
    .auth-select:focus {
        border-color: #00a859;
        box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.12);
    }

    /* Terms checkbox */
    .auth-terms-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        margin-bottom: 18px;
        font-size: 13.5px;
        color: #475569;
    }
    .auth-terms-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #00a859;
        cursor: pointer;
    }
    .auth-terms-row a {
        color: #00a859;
        font-weight: 600;
        text-decoration: none;
    }
    .auth-terms-row a:hover {
        text-decoration: underline;
    }

    /* Submit Button */
    .auth-btn-submit {
        width: 100%;
        height: 46px;
        border-radius: 10px;
        border: none;
        background: #00a859;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 14px rgba(0, 168, 89, 0.28);
    }
    .auth-btn-submit:hover {
        background: #00934e;
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(0, 168, 89, 0.38);
    }
    .auth-btn-submit:active {
        transform: translateY(0);
    }

    /* Footer Sign In */
    .auth-form-footer {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #64748b;
    }
    .auth-form-footer a {
        color: #00a859;
        font-weight: 700;
        text-decoration: none;
        margin-left: 4px;
    }
    .auth-form-footer a:hover {
        text-decoration: underline;
    }

    @media (max-width: 1199px) {
        .auth-brand-side { flex: 0 0 44%; width: 44%; padding: 40px 24px; }
        .auth-form-side { flex: 0 0 56%; width: 56%; padding: 40px 30px; }
    }
    @media (max-width: 991px) {
        .customer-register-section { flex-direction: column; }
        .auth-brand-side { flex: 0 0 100%; width: 100%; min-height: auto; padding: 40px 20px; }
        .auth-form-side { flex: 0 0 100%; width: 100%; padding: 40px 20px; }
    }
    @media (max-width: 575px) {
        .auth-form-title { font-size: 23px; }
        .auth-form-side { padding: 30px 16px; }
    }