/**
 * Subscription Page Styles
 * Clean separation of concerns - all subscription page styles
 */

/* ========================================
   Form Controls
   ======================================== */

/* Select dropdown styling */
select.form-control {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    overflow: visible !important;
}

select.form-control:focus {
    border-color: #0066FF !important;
    background-color: white !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1) !important;
    outline: none !important;
}

select.form-control option {
    padding: 10px !important;
    background-color: white !important;
    color: #1e293b !important;
}

/* Remove icons from inputs */
input.form-control,
select.form-control {
    padding-right: 16px !important;
    background-image: none !important;
}

/* ========================================
   Validation
   ======================================== */

.validation-error {
    display: block;
    margin-top: 5px;
}

input.is-invalid,
select.is-invalid {
    border-color: #dc3545 !important;
}

/* ========================================
   Layout - Two Column Structure
   ======================================== */

.box-page-register .row {
    display: flex;
    align-items: stretch;
}

.box-page-register .row > div[class*="col-"] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Adjust green background to match column width */
.box-page-register::before {
    width: 50% !important; /* col-lg-6 = 6/12 = 50% */
}

/* ========================================
   Left Block - Process Steps (Green)
   ======================================== */

.box-steps-small {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 130px 20px 80px 20px;
    min-height: 100%;
    height: 100%;
    text-align: left;
}

.box-steps-small h2 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    width: 100%;
    margin-bottom: 20px !important;
    line-height: 1.3;
}

.box-steps-small > p {
    text-align: left;
    width: 100%;
    margin-bottom: 40px;
}

.box-steps-small .item-number {
    margin-bottom: 60px;
    width: 100%;
}

.box-steps-small .item-number:last-child {
    margin-bottom: 0;
}

/* ========================================
   Right Block - Form (White)
   ======================================== */

.box-register {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 0 80px 60px;
    min-height: 100%;
    height: 100%;
}

.box-register h2 {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
    text-align: left;
    line-height: 1.3;
}

.box-register > p {
    text-align: left;
    margin-bottom: 30px;
}

#subscription-form {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* ========================================
   Form Layout
   ======================================== */

.subscription-form .row .col-lg-6 {
    display: flex;
    flex-direction: column;
}

/* ========================================
   Success Message
   ======================================== */

.subscription-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px auto;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 40px;
}

/* Center success message content */
.subscription-success-container {
    text-align: center;
}

.subscription-success-container h2,
.subscription-success-container p {
    text-align: center;
}

.subscription-success-container .btn {
    display: inline-block;
}

/* ========================================
   Title Alignment - Force exact alignment
   ======================================== */

/* Ensure both titles start at exactly the same vertical position */
.box-steps-small h2,
.box-register h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

/* Ensure both containers have same top/bottom padding for perfect alignment */
.box-steps-small,
.box-register {
    padding-top: 130px !important;
    padding-bottom: 80px !important;
}

.box-steps-small {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.box-register {
    padding-left: 60px !important;
    padding-right: 0 !important;
}

/* ========================================
   Responsive
   ======================================== */

@media (min-width: 992px) {
    .box-page-register .row {
        align-items: stretch;
    }
    
    .box-page-register .row > div[class*="col-lg-"] {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .box-steps-small,
    .box-register {
        min-height: 100%;
        height: 100%;
        justify-content: center;
        align-items: flex-start;
    }
    
    /* Force same padding for perfect alignment */
    .box-steps-small {
        padding-top: 130px !important;
        padding-bottom: 80px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .box-register {
        padding-top: 130px !important;
        padding-bottom: 80px !important;
        padding-left: 60px !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 991px) {
    .box-steps-small,
    .box-register {
        padding: 50px 30px !important;
        justify-content: flex-start;
    }
    
    .box-page-register::before {
        width: 100% !important;
    }
    
    .box-page-register .row {
        min-height: auto;
    }
}