/* IOA Membership Manager - Frontend Styles v1.0.0 */

/* --- Import Fonts (if not loaded globally by theme) --- */
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* --- Design System Variables (as CSS Variables) --- */
:root {
    --ioa-color-bg: #ffffff;
    --ioa-color-paper: #ffffff;
    --ioa-color-paper-alt: #f8fafc;
    --ioa-color-ink: #333333;
    --ioa-color-ink-light: #505050;
    --ioa-color-accent: #2989d8; /* Primary accent blue */
    --ioa-color-accent-soft: rgba(41, 137, 216, 0.8); /* Adjusted opacity */
    --ioa-color-accent-light: rgba(41, 137, 216, 0.08);
    --ioa-color-secondary: #87b0c9; /* Secondary blue */
    --ioa-color-pop: #64b5f6; /* Pop blue for interactive states */
    --ioa-color-tertiary: #70a860; /* Tertiary green */
    --ioa-color-tertiary-soft: rgba(112, 168, 96, 0.8); /* Adjusted opacity */
    --ioa-color-tertiary-light: rgba(112, 168, 96, 0.08);
    --ioa-color-warning: #e37e4b; /* Warning orange */
    --ioa-color-error: #dc3232; /* Error red */
    --ioa-color-success: #3c763d; /* Success green */
    --ioa-color-line: #e6e6e6;
    --ioa-color-border-input: #cccccc; /* Lighter border for inputs */

    --ioa-shadow-subtle: 0 1px 8px rgba(0, 0, 0, 0.03);
    --ioa-shadow-hover: 0 4px 12px rgba(41, 137, 216, 0.1);

    --ioa-transition-smooth: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --ioa-transition-quick: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);

    --ioa-space-xs: 4px;
    --ioa-space-s: 8px;
    --ioa-space-m: 14px;
    --ioa-space-l: 20px;
    --ioa-space-xl: 30px;
    --ioa-space-xxl: 48px;

    --ioa-font-primary: 'Epilogue', sans-serif;
    --ioa-font-secondary: 'Libre Baskerville', serif;
}

/* --- General Form Container --- */
#ioa-login-form-wrapper {
    max-width: 500px;
    margin: 100px auto; /* Increased top margin to fix clipping */
}

/* --- Form Box Styling --- */
#ioa-registration-form,
#ioa-loginform,
#ioa-lostpasswordform,
#ioa-resetpassform {
    font-family: var(--ioa-font-primary);
    background-color: var(--ioa-color-paper);
    border: 1px solid var(--ioa-color-line);
    border-radius: 8px;
    box-shadow: var(--ioa-shadow-subtle);
    padding: 50px 50px 40px; /* Adjusted padding: top, horizontal, bottom */
    text-align: left;
}

/* --- Form Title --- */
.ioa-form-title {
    font-family: var(--ioa-font-secondary);
    color: var(--ioa-color-accent); /* Blue title color */
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin: 0 auto 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ioa-color-line);
}

/* --- Form Fields --- */
.ioa-form-field {
    margin-bottom: 20px;
}

.ioa-form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--ioa-color-ink);
}

.ioa-form-field input[type="text"],
.ioa-form-field input[type="email"],
.ioa-form-field input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--ioa-color-border-input);
    border-radius: 6px;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
}

.ioa-form-field input[type="text"]:focus,
.ioa-form-field input[type="email"]:focus,
.ioa-form-field input[type="password"]:focus {
    border-color: var(--ioa-color-accent);
    box-shadow: 0 0 0 3px var(--ioa-color-accent-light);
    outline: none;
}

#ioa-registration-form h2,
#ioa-registration-form h3 {
    font-family: var(--ioa-font-secondary);
    color: var(--ioa-color-accent);
    font-weight: 400;
    margin-bottom: var(--ioa-space-l);
    padding-bottom: var(--ioa-space-s);
    border-bottom: 1px solid var(--ioa-color-line);
    letter-spacing: -0.01em;
}
#ioa-registration-form h2 { font-size: 24px; } /* Adjusted size */
#ioa-registration-form h3 { font-size: 18px; }

#ioa-registration-form p,
#ioa-registration-form fieldset {
    margin-bottom: var(--ioa-space-m);
}
/* Remove bottom margin from last element in a section/form */
#ioa-registration-form .ioa-form-section > *:last-child {
     margin-bottom: 0;
}

#ioa-registration-form label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--ioa-space-xs);
    color: var(--ioa-color-ink);
}

#ioa-registration-form label.inline-label {
    display: inline-block;
    margin-right: var(--ioa-space-m);
    font-weight: normal;
    margin-bottom: 0; /* Adjust for inline */
}

#ioa-registration-form input[type="text"],
#ioa-registration-form input[type="email"],
#ioa-registration-form input[type="url"],
#ioa-registration-form input[type="tel"],
#ioa-registration-form input[type="password"],
#ioa-registration-form select,
#ioa-registration-form textarea {
    width: 100%;
    padding: var(--ioa-space-s) var(--ioa-space-m);
    border: 1px solid var(--ioa-color-border-input);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    transition: var(--ioa-transition-quick);
    background-color: var(--ioa-color-bg);
    color: var(--ioa-color-ink);
}

#ioa-registration-form input[type="text"]:focus,
#ioa-registration-form input[type="email"]:focus,
#ioa-registration-form input[type="url"]:focus,
#ioa-registration-form input[type="tel"]:focus,
#ioa-registration-form input[type="password"]:focus,
#ioa-registration-form select:focus,
#ioa-registration-form textarea:focus {
    border-color: var(--ioa-color-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--ioa-color-accent-light); /* Focus ring */
}

#ioa-registration-form input[type="radio"],
#ioa-registration-form input[type="checkbox"],
#ioa-loginform input[type="checkbox"] {
    margin-right: var(--ioa-space-xs);
    position: relative;
    top: 1px; /* Slight vertical alignment */
    width: auto; /* Override full width */
}

#ioa-registration-form fieldset,
#ioa-loginform fieldset,
#ioa-lostpasswordform fieldset,
#ioa-resetpassform fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--ioa-space-m) 0;
}
#ioa-registration-form fieldset legend {
     font-weight: 600;
     margin-bottom: var(--ioa-space-s);
     display: block;
     color: var(--ioa-color-ink);
}
.screen-reader-text { /* From WP Core */
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
	word-wrap: normal !important;
}

.ioa-required {
    color: var(--ioa-color-warning); /* Use warning orange */
    font-weight: bold;
    margin-left: 2px;
    display: none; /* Hide by default, shown by JS */
}

#ioa-registration-form small {
    font-size: 0.85em;
    color: var(--ioa-color-ink-light);
    display: block;
    margin-top: var(--ioa-space-xs);
}

/* --- Section Specific Styles --- */
#ioa-select-category fieldset label { font-weight: normal; }

/* Subtype Tables */
.ioa-subtype-table { margin-bottom: var(--ioa-space-l); }
.ioa-membership-options {
    width: 100%; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--ioa-color-line); border-radius: 8px; overflow: hidden;
}
.ioa-membership-options th,
.ioa-membership-options td { padding: var(--ioa-space-s) var(--ioa-space-m); text-align: left; vertical-align: top; border-bottom: 1px solid var(--ioa-color-line); }
.ioa-membership-options thead th { background-color: var(--ioa-color-paper-alt); font-weight: 600; color: var(--ioa-color-ink); }
.ioa-membership-options .table_header th { background-color: var(--ioa-color-secondary); color: #fff; text-align: center; font-weight: 500; }
.ioa-membership-options tbody tr:last-child td { border-bottom: none; }
.ioa-membership-options tbody tr:hover td { background-color: var(--ioa-color-accent-light); }
.ioa-membership-options td p { margin: 0 0 4px 0; }
.ioa-membership-options td p strong { font-weight: 500; color: var(--ioa-color-ink); }
.ioa-membership-options td small { font-size: 0.9em; color: var(--ioa-color-ink-light); }
.ioa-membership-options .ioa-option-center { text-align: center; vertical-align: middle; }
.ioa-membership-options .ioa-option-center label { display: block; margin-top: 0; font-size: 0.95em; font-weight: 500; }
.ioa-membership-options .ioa-option-center input[type="radio"],
.ioa-membership-options .ioa-option-center input[type="checkbox"] { display: block; margin: 0 auto 4px auto; }
.ioa-membership-options .ioa-option-center input[type="radio"],
.ioa-membership-options .ioa-option-center label {
    vertical-align: middle;
    display: inline-block; /* Helps with alignment consistency */
}


/* Contact Details Labels */
#ioa-step-contact > p > label:first-child,
#ioa-step-contact > div > p > label:first-child, /* Handle nested P */
#ioa-step-rep2 > p > label:first-child {
    display: inline-block;
    width: 150px; /* Adjust as needed */
    padding-right: var(--ioa-space-s);
    vertical-align: top;
    margin-bottom: var(--ioa-space-m); /* Spacing between rows */
}
#ioa-step-contact > p > input[type="text"],
#ioa-step-contact > p > input[type="email"],
#ioa-step-contact > p > input[type="url"],
#ioa-step-contact > p > input[type="tel"],
#ioa-step-contact > p > select,
#ioa-step-contact > p > textarea,
#ioa-step-rep2 > p > input[type="text"],
#ioa-step-rep2 > p > input[type="email"],
#ioa-step-rep2 > p > input[type="url"],
#ioa-step-rep2 > p > input[type="tel"],
#ioa-step-rep2 > p > select,
#ioa-step-rep2 > p > textarea {
    display: inline-block;
    width: calc(100% - 165px); /* Adjust based on label width + padding */
    max-width: 450px;
}
#ioa-step-contact fieldset.ioa-rep-title,
#ioa-step-rep2 fieldset.ioa-rep-title {
     padding-left: 160px; /* Align with inputs */
}
#ioa-step-contact fieldset.ioa-address-invoicing,
#ioa-step-rep2 fieldset.ioa-address-invoicing {
    padding-left: 160px; /* Align with inputs */
}
#ioa-step-contact fieldset label.inline-label,
#ioa-step-rep2 fieldset label.inline-label {
     width: auto;
     margin-right: var(--ioa-space-l);
}

/* Profile/Rights section */
#ioa-step-profile h2 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
#ioa-step-profile h3 { margin-top: var(--ioa-space-xl); margin-bottom: var(--ioa-space-s); font-size: 16px; color: var(--ioa-color-ink); }
#ioa-step-profile fieldset { padding: var(--ioa-space-s) 0; }
#ioa-step-profile fieldset legend { font-weight: 500; color: var(--ioa-color-accent); }
#ioa-step-profile fieldset label { font-weight: normal; margin-bottom: var(--ioa-space-s); }
#ioa-step-profile fieldset input[type="text"] { width: auto; margin-left: var(--ioa-space-s); display: inline-block; }
.ioa-activitycode-option { margin-bottom: var(--ioa-space-xs); }
.ioa-activitycode-option strong { margin-left: 5px; margin-right: 5px; }
.ioa-rights-checks label { margin-bottom: var(--ioa-space-m); }

/* Payment */
#ioa-step-payment fieldset label { display: inline-block; margin-right: var(--ioa-space-xl); font-weight: 500; cursor: pointer;}
#ioa-step-payment fieldset input[type="radio"] { cursor: pointer; }

/* Submit Button */
.ioa-submit-button { text-align: right; margin-top: var(--ioa-space-xl); }
.ioa-submit-button input[type="submit"] {
    display: inline-flex; /* Use flex for potential icon alignment */
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    transition: var(--ioa-transition-quick);
    background-color: var(--ioa-color-tertiary); /* Green for final action */
    color: white;
    border: none;
    cursor: pointer;
}
.ioa-submit-button input[type="submit"]:hover {
    background-color: #5a8a4d; /* Darker green */
    transform: translateY(-2px);
    box-shadow: var(--ioa-shadow-hover-green);
}


/* --- Remember Me & Links --- */
.ioa-login-remember {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.ioa-login-remember label {
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 0 8px !important; /* Overriding other label styles */
    display: inline-block !important; /* Overriding other label styles */
}

.ioa-login-links {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.ioa-login-links a {
    color: var(--ioa-color-accent);
    text-decoration: none;
}

.ioa-login-links a:hover {
    text-decoration: underline;
}

/* --- Submit Button --- */
#ioa-loginform .button.button-primary {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background-color: var(--ioa-color-accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

#ioa-loginform .button.button-primary:hover {
    background-color: #1e5799; /* Darker blue */
    transform: translateY(-1px);
}

#ioa-loginform .button.button-primary:active {
    transform: translateY(0);
}

/* Messages */
.ioa-message { padding: var(--ioa-space-m); margin-bottom: var(--ioa-space-l); border: 1px solid transparent; border-radius: 4px; }
.ioa-message.ioa-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.ioa-message.ioa-error ul { margin: 0; padding-left: 20px; }
.ioa-message.ioa-success { color: var(--ioa-color-success); background-color: #dff0d8; border-color: #d6e9c6; }

/* Validation Error Styling (Using HTML5's :invalid pseudo-class and custom class) */
input:invalid, select:invalid, textarea:invalid {
    /* Built-in browser styles might apply, but we can enhance */
    /* border-color: var(--ioa-color-error); */
    /* box-shadow: 0 0 0 2px rgba(220, 50, 50, 0.2); */ /* Example focus */
}
/* Add a class for JS-driven errors if needed for more control */
label.error {
	color: var(--ioa-color-error);
	font-size: 0.85em; /* Smaller */
	font-weight: normal;
	display: block;
	margin-top: 4px; /* --space-xs */
    margin-left: 160px; /* Align with inputs if using fixed label width */
}
input.error, select.error, textarea.error {
	border-color: var(--ioa-color-error) !important; /* Ensure override */
    background-color: #fffafa; /* Slight pink background */
}

/* Confirmation Dialog placeholder styling (if basic confirm() is used, this won't apply) */
#ioa-confirmation-dialog { font-size: 14px; }
#ioa-confirm-content { text-align: left; max-height: 400px; overflow-y: auto; }
#ioa-confirm-content hr { border: 0; border-top: 1px solid var(--ioa-color-line); margin: 10px 0; }
#ioa-confirm-content p { margin-bottom: 5px; line-height: 1.4; }
#ioa-confirm-content label { display: inline-block; width: 140px; font-weight: 500; color: var(--ioa-color-ink); vertical-align: top; }
#ioa-confirm-content strong { font-weight: 400; color: var(--ioa-color-ink-light); }
#ioa-confirm-content div[align="right"] { text-align: right; margin-top: 10px; }


.ioa-member-dashboard {
    /* Inherits card style via class, add specifics if needed */
    margin-bottom: var(--space-xl, 30px);
}
.ioa-member-dashboard h2 {
    /* Using ea3g-section-header style */
    font-size: 1.5em; /* Adjust if needed */
}
.dashboard-welcome {
    font-size: 1.1em;
    margin-bottom: var(--space-l, 20px);
    padding: var(--space-m, 14px);
    background-color: var(--color-accent-light, rgba(41, 137, 216, 0.08));
    border-radius: 4px;
    border-left: 3px solid var(--color-accent, #2989d8);
}
.dashboard-section {
     /* Inherits card style via class, add specifics if needed */
    background-color: var(--color-paper, #fff); /* Override parent if nested */
    margin-bottom: var(--space-l, 20px);
}
.dashboard-section h4 {
    margin-top: 0;
    margin-bottom: var(--space-m, 14px);
    padding-bottom: var(--space-s, 8px);
    border-bottom: 1px solid var(--color-line, #e6e6e6);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-ink, #333);
}
.dashboard-action-links .ea3g-btn {
    margin-right: var(--space-s, 8px);
    margin-bottom: var(--space-s, 8px); /* For wrapping on mobile */
}
.dashboard-membership-info p {
     margin-bottom: var(--space-s, 8px);
}
 .dashboard-membership-info strong {
     font-weight: 500;
     color: var(--color-ink, #333);
 }
.dashboard-resources ul.ea3g-event-list { /* Target specific list style */
    list-style: none;
    margin-left: 0; /* Override default list style */
    padding-left: 0; /* Override default list style */
    margin-top: var(--space-m, 14px);
}
.dashboard-resources ul.ea3g-event-list li.ea3g-event-item {
    margin-bottom: var(--space-m, 14px);
    /* Styles inherited from base CSS */
}
.dashboard-resources ul.ea3g-event-list li.ea3g-event-item a.ea3g-link {
     font-weight: 400; /* Normal weight for resource links */
}

.ioa-member-profile {
    /* Inherits card style via class */
    margin-bottom: var(--space-xl, 30px);
}
.profile-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: var(--space-l, 20px);
    margin-top: var(--space-m, 14px);
}
.profile-section {
    /* Inherits card style */
    background-color: var(--color-paper, #fff); /* Ensure background */
    margin-bottom: 0; /* Remove margin as grid handles gap */
}
.profile-section h4 {
    margin-top: 0;
    margin-bottom: var(--space-m, 14px);
    padding-bottom: var(--space-s, 8px);
    border-bottom: 1px solid var(--color-line, #e6e6e6);
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-ink, #333);
}
.profile-field {
    margin-bottom: var(--space-m, 14px);
    padding-bottom: var(--space-m, 14px);
    border-bottom: 1px dotted var(--color-line, #e6e6e6);
    line-height: 1.4;
}
.profile-field:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.profile-field label {
    display: block;
    font-weight: 500;
    color: var(--color-ink, #333);
    margin-bottom: var(--space-xs, 4px);
    font-size: 0.95em;
}
.profile-field span.value {
    display: block;
    color: var(--color-ink-light, #505050);
}
.profile-edit-action {
     margin-top: var(--space-l, 20px);
     padding-top: var(--space-l, 20px);
     border-top: 1px solid var(--color-line, #e6e6e6);
}

/* Responsive adjustments for forms */
@media (max-width: 768px) {
    #ioa-registration-form, #ioa-loginform, #ioa-lostpasswordform, #ioa-resetpassform {
        padding: var(--ioa-space-l);
    }

    #ioa-registration-form label,
    #ioa-step-contact > p > label:first-child,
    #ioa-step-rep2 > p > label:first-child {
        width: 100%; /* Stack labels above inputs */
        float: none;
        display: block;
        padding-right: 0;
        margin-bottom: var(--ioa-space-xs);
    }
     #ioa-registration-form input[type="text"],
     #ioa-registration-form input[type="email"],
     #ioa-registration-form input[type="url"],
     #ioa-registration-form input[type="tel"],
     #ioa-registration-form input[type="password"],
     #ioa-registration-form select,
     #ioa-registration-form textarea,
     #ioa-step-contact fieldset.ioa-rep-title,
     #ioa-step-contact fieldset.ioa-address-invoicing,
     #ioa-step-rep2 fieldset.ioa-rep-title,
     #ioa-step-rep2 fieldset.ioa-address-invoicing,
     #ioa-step-profile fieldset label input[type="text"],
     label.error {
         width: 100%;
         max-width: none;
         display: block;
         margin-left: 0; /* Reset alignment */
     }

     .ioa-subtype-table th, .ioa-subtype-table td {
         padding: var(--ioa-space-s);
         font-size: 13px; /* Smaller text on mobile */
     }
     .ioa-membership-options thead th:nth-child(n+2), /* Hide year headers */
     .ioa-membership-options tbody td:nth-child(n+2) { /* Stack options */
        /* display: block; */ /* Consider stacking instead of table */
        text-align: left;
     }
     .ioa-membership-options .ioa-option-center { text-align: left; }
     .ioa-membership-options .ioa-option-center label { display: inline-block; margin-left: 5px;}
     .ioa-membership-options .ioa-option-center input[type="radio"],
     .ioa-membership-options .ioa-option-center input[type="checkbox"] { display: inline-block; margin: 0 5px 0 0; }

}