/* Plugin-scoped Step 2 styles - parking reservation login/register layout 
   v2.0 - Strict Step 1 Match (Square, Flat, Equal Columns)
*/

/* --- 1. RESET & LAYOUT CLEANUP --- */
/* Hide sidebar layout interference */
body.pf-step-2-active #sidebar,
body.pf-step-2-active .sidebar,
body.pf-step-2-active #secondary,
body.pf-step-2-active .widget-area {
    display: none !important;
}

body.pf-step-2-active #primary,
body.pf-step-2-active .content-area,
body.pf-step-2-active .site-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

/* Reduce padding on entry content wrapper */
body.pf-step-2-active .entry-content,
body.pf-step-2-active article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Hide page title/heading */
body.pf-step-2-active .entry-title,
body.pf-step-2-active .page-title,
body.pf-step-2-active h1.entry-title,
body.pf-step-2-active .entry-header h1,
body.pf-step-2-active .entry-header h2,
body.pf-step-2-active .page-header,
.pf-step--second+h1,
.pf-step--second+h2,
.pf-step.pf-step--second h1,
.pf-step.pf-step--second h2.entry-title {
    display: none !important;
}

/* Also hide any h2 with specific classes that might be the page title */
h2.wp-block-post-title,
h2.entry-title,
.wp-block-post-title {
    display: none !important;
}

/* --- 2. MAIN CONTAINER --- */
.pf-step.pf-step--second {
    max-width: 1000px;
    margin: -20px auto 0;
    padding: 32px;
    /* Match Step 1 padding */
    box-sizing: border-box;
    width: 100%;
    font-family: 'Roboto', sans-serif !important;
    color: #161615 !important;
}

/* --- 3. COLUMNS (FLEX 50/50) --- */
/* Force side-by-side flex layout */
.pf-step.pf-step--second #customer_login,
.pf-step.pf-step--second .u-columns,
.pf-step.pf-step--second .col2-set {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 32px !important;
    /* Match Step 1 grid gap */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force exact equal widths */
.pf-step.pf-step--second .u-column1,
.pf-step.pf-step--second .col-1,
.pf-step.pf-step--second .u-column2,
.pf-step.pf-step--second .col-2 {
    flex: 1 1 0px !important;
    /* Forces equal width ignoring content */
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- 4. BOX STYLE (MATCHING STEP 1 CARDS) --- */
/* Match .pf-offer-card: bg #fff, border 1px solid #e5e5e5, no radius/shadow */
.pf-step.pf-step--second .woocommerce-form-login,
.pf-step.pf-step--second .woocommerce-form-register {
    flex: 1 !important;
    /* Allow form to fill column height */
    background: #fff !important;
    border: 2px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 32px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* --- 5. TYPOGRAPHY --- */
.pf-step.pf-step--second h2 {
    position: relative;
    margin: 0 0 24px 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    /* Bold like Step 1 */
    color: #161615 !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    font-family: 'Roboto', sans-serif !important;
}

.pf-step.pf-step--second label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    /* Bold like reference */
    line-height: 1.5 !important;
    color: #161615 !important;
    text-transform: uppercase !important;
}

/* --- 6. INPUTS --- */
/* Match Step 1 inputs: 52px height, 1px border, square */
.pf-step.pf-step--second input.input-text,
.pf-step.pf-step--second input[type="text"],
.pf-step.pf-step--second input[type="email"],
.pf-step.pf-step--second input[type="password"],
.pf-step.pf-step--second input[type="tel"] {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    background: #fff !important;
    border: 2px solid #e5e5e5 !important;
    font-size: 15px !important;
    color: #161615 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
    transition: border-color 0.15s ease !important;
}

.pf-step.pf-step--second input:focus {
    border-color: #161615 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #161615 inset !important;
}

/* --- 7. BUTTONS --- */
/* Match Step 1 buttons: Black, square, 48px height minimum */
.pf-step.pf-step--second .button,
.pf-step.pf-step--second input[type="submit"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    /* Full width for equal look */
    min-width: 100px !important;
    height: 48px !important;
    padding: 12px 20px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: transform 0.1s ease, box-shadow 0.15s ease !important;
}

.pf-step.pf-step--second .button:hover,
.pf-step.pf-step--second input[type="submit"]:hover {
    background: #1a1a1a !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.pf-step.pf-step--second .button:active,
.pf-step.pf-step--second input[type="submit"]:active {
    transform: translateY(1px) !important;
}

/* --- 8. HELPER PROPS --- */
.pf-step.pf-step--second .woocommerce-form-login__rememberme {
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
}

.pf-step.pf-step--second .woocommerce-LostPassword {
    margin-top: 16px !important;
    font-size: 14px !important;
    color: #95024B !important;
    text-decoration: underline !important;
}

/* --- 9. MOBILE --- */
@media (max-width: 768px) {

    .pf-step.pf-step--second #customer_login,
    .pf-step.pf-step--second .u-columns,
    .pf-step.pf-step--second .col2-set {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .pf-step.pf-step--second .u-column1,
    .pf-step.pf-step--second .col-1,
    .pf-step.pf-step--second .u-column2,
    .pf-step.pf-step--second .col-2 {
        max-width: 100% !important;
        width: 100% !important;
        flex: none !important;
    }

    .pf-step.pf-step--second {
        padding: 16px;
    }
}