/*
 * Styles for PPM Membership plugin front‑end components.
 * These styles apply Bootstrap‑like spacing and card layouts to membership forms and cards.
 */

/* Base styling for signup form card. */
/* Membership form container should span full width of its parent up to padding */
.ppm-membership-form {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    background-color: #ffffff;
    margin-bottom: 1.5rem;
}

/* Form title styling: allow default text colour from theme */
.ppm-membership-form .ppm-form-title {
    font-size: 2.75rem;
    font-weight: 500;
    /* color intentionally left unset to inherit from theme */
    margin: 0px;
}

/* Body styling for signup card */
.ppm-membership-form .card-body {
    padding: 1.5rem;
}

.ppm-membership-form .form-group + .form-group {
    margin-top: 0.75rem;
}

/* Label styling: lighter weight, uppercase for professionalism */
.ppm-membership-form label {
    font-weight: 400;
    display: block;
    margin-bottom: 0.25rem;
    color: #666;
    text-transform: uppercase;
}

/* Enhance form controls: larger padding and slightly reduced width */
/*
 * Input controls span the full width of their container. Use border-box sizing so padding
 * and borders are included in the width calculation. This prevents fields from spilling
 * over the edge of the card when padding is applied to the form row.
 */
/* Input controls: reduce width to 90% to allow more breathing room within the container */
.ppm-membership-form .form-control {
    padding: 1rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    width: 90%;
    box-sizing: border-box;
    font-size: 1rem;
}

/* Use Montserrat font for all form inputs to match the theme. If the theme already loads Montserrat,
 * this declaration will ensure consistency. Otherwise, fallback to sans‑serif. */
.ppm-membership-form input,
.ppm-membership-form select,
.ppm-membership-form textarea,
.ppm-membership-form .form-control {
    font-family: 'Montserrat', sans-serif;
}

/* Style the Stripe card element container similarly to other form controls. The
 * card element will inherit Montserrat font and width. We nest the selector
 * under .ppm-card-element to target only our custom container. */
.ppm-membership-form .ppm-card-element #ppm-card-element {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    width: 90%;
    box-sizing: border-box;
    padding: 0.75rem;
    font-family: 'Montserrat', sans-serif;
}

/* Style the total due section on step 2 */
.ppm-membership-form .ppm-total-due {
    margin-top: 1rem;
}
.ppm-membership-form .ppm-total-label {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}
.ppm-membership-form .ppm-total-amount {
    font-weight: 600;
}
.ppm-membership-form .ppm-subscription-info {
    font-size: 0.875rem;
    color: #555;
}

/* Discount message displayed after applying or validating a discount code */
.ppm-discount-message {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Alert messages styling (success, warning, error). These classes mirror Bootstrap alerts
 * but are provided here to ensure consistent appearance even if the theme doesn’t load
 * Bootstrap. Adjust colours to match the site’s palette as needed. */
.ppm-membership-form .alert {
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.ppm-membership-form .alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.ppm-membership-form .alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.ppm-membership-form .alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

/* Display error messages for password validation in red and with smaller font */
.ppm-password-error {
    color: #dc3545; /* bootstrap danger colour for errors */
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.ppm-membership-form .card-footer {
    padding: 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e3e3e3;
}

/* Remove duplicate card footer rule (not used anymore) */

/* Membership level card: full width container by default */
/*
 * Membership level card: almost full width of its container (98%) with auto margins
 * for centering. This ensures some breathing room on either side while still
 * presenting prominently. On small screens it will expand to 100% via media query.
 */
/* Membership level card styling: apply a blue border and light padding per new design */
.ppm-membership-card {
    width: 98%;
    max-width: 98%;
    margin: 0 auto 1.5rem auto;
    border: 1px solid #0693e3;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
    background: #fff;
}

.ppm-card-header {
    padding: 1rem 1.25rem;
    background-image: linear-gradient(90deg, #0046c4, #007bff);
}

.ppm-card-header h4 {
    margin-bottom: 0.25rem;
    color: #fff;
}

.ppm-price {
    color: #f8f9fa;
}

.ppm-card-body {
    padding: 1rem 1.25rem;
}

/*
 * Feature list styling: remove default bullets and spacing. Use custom
 * class .ppm-check for icons so that they can be coloured separately.
 */
/* Ensure lists inside membership cards show no bullets and no default margin or padding */
.ppm-card-body ul,
.ppm-card-body .list-unstyled {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.ppm-card-body li {
    margin-bottom: 0.5rem;
}
/* Style the check icon for features on cards */
.ppm-card-body .ppm-check {
    color: lightgreen;
    margin-right: 0.5rem;
}

/* Style for the Sign Up link on membership cards to match Join Now/Next buttons. */
/* Style for the Sign Up link on membership cards to match the Join button */
.ppm-card-button {
    display: block;
    width: 60%;
    margin: 1rem auto 0 auto;
    font-size: 1.5rem;
    font-family: inherit;
    padding: 5px;
    font-weight: 500;
    background: #34C759;
    color: #fff;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

/* Center the card footer content to align the button */
.ppm-card-footer {
    text-align: center;
}

/* On small screens, allow the membership card width to expand fully */
@media (max-width: 576px) {
    .ppm-membership-card {
        width: 100%;
        max-width: 100%;
    }
    .ppm-card-button {
        width: 100%;
    }
}

.ppm-card-footer {
    padding: 1rem 1.25rem;
    background-color: #f7f7f7;
    border-top: 1px solid #e3e3e3;
}

/* Stripe warning styling: light red box with white text */
.ppm-stripe-warning {
    background-color: #e74c3c;
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}

/* Required indicator styling via pseudo-element: labels with class .ppm-required-field
 * automatically display a dark red asterisk after the label. Remove inline indicators. */
label.ppm-required-field::after {
    content: '*';
    color: #8b0000;
    font-size: 0.75rem;
    margin-left: 0.25rem;
    vertical-align: super;
}

/* Form row for grouping two fields horizontally */
.ppm-membership-form .ppm-form-row {
    display: flex;
    gap: 1rem;
}

/* Half width columns for first/last and email/company */
/* Adjust column widths to account for the gap between columns. Using calc() prevents overflowing beyond the container. */
.ppm-membership-form .ppm-col-50 {
    flex: 0 0 calc(50% - 0.5rem);
}

/* 70/30 split for membership level and billing interval */
/* For the membership level/billing interval row, allocate 70% and 30% minus half the gap */
.ppm-membership-form .ppm-col-70 {
    flex: 0 0 calc(70% - 0.5rem);
}
.ppm-membership-form .ppm-col-30 {
    flex: 0 0 calc(30% - 0.5rem);
}

/* Stacking on small screens */
@media (max-width: 576px) {
    .ppm-membership-form .ppm-form-row {
        flex-direction: column;
    }
    .ppm-membership-form .ppm-col-50,
    .ppm-membership-form .ppm-col-70,
    .ppm-membership-form .ppm-col-30 {
        flex: 0 0 100%;
    }
}

/* Next button styling for multi-step form */
.ppm-membership-form .ppm-next-button,
.ppm-membership-form .ppm-back-button {
    width: 33%;
    margin-top: 1rem;
    font-size: 1.5rem;
    font-family: inherit;
    padding: 5px;
    font-weight: 500;
    background: #0A84FF;
    color: #fff;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    text-align: center;
}

/* Join button styling: soft green */
.ppm-membership-form .ppm-join-button {
    width: 33%;
    margin-top: 1rem;
    font-size: 1.5rem;
    font-family: inherit;
    padding: 5px;
    font-weight: 500;
    background: #34C759;
    color: #fff;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Button row container for back and join buttons */
.ppm-membership-form .ppm-button-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

/* Adjust button width for smaller screens (stack vertically) */
@media (max-width: 576px) {
    .ppm-membership-form .ppm-next-button,
    .ppm-membership-form .ppm-back-button,
    .ppm-membership-form .ppm-join-button {
        width: 100%;
    }
    .ppm-membership-form .ppm-button-row {
        flex-direction: column;
        gap: 0.5rem;
    }
}