/**
 * CFMEU SSO Plugin Styles
 *
 * Main CSS file for SSO plugin components
 * All selectors are scoped to prevent conflicts with other plugins/themes
 *
 * @package CFMEU_SSO
 * @since 1.0.0
 */

@font-face {
    font-display: swap;
    font-family: "VFC Sufler Press";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Sufler-Press.otf") format("opentype");
}

@font-face {
    font-display: swap;
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

:root {
    --cfmeu-font-display: "VFC Sufler Press", "Sufler Press", Georgia, serif;
    --cfmeu-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --cfmeu-font-body: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --cfmeu-white: #ffffff;
    --cfmeu-black: #000000;
    --cfmeu-charcoal-1: #0d0d0d;
    --cfmeu-charcoal-2: #262626;
    --cfmeu-charcoal-3: #404040;
    --cfmeu-charcoal-4: #595959;
    --cfmeu-charcoal-5: #a6a6a6;
    --cfmeu-charcoal-6: #d9d9d9;
    --cfmeu-charcoal-7: #f5f5f5;
    --cfmeu-grey-1: #f5f5f5;
    --cfmeu-grey-2: #d8d8d8;
    --cfmeu-page-width: 1440px;
    --cfmeu-sidebar-width: 320px;
    --cfmeu-content-width: 1120px;
    --cfmeu-content-inner-width: 920px;
    --cfmeu-content-padding-x: 100px;
    --cfmeu-content-padding-y: 50px;
    --cfmeu-hero-height: 279px;
    --cfmeu-hero-padding-top: 100px;
    --cfmeu-hero-padding-bottom: 50px;
    --cfmeu-nav-row-height: 67px;
    --cfmeu-control-height: 36px;
    --cfmeu-control-border: 0.5px;
    --cfmeu-control-border-width: 0.5px;
    --cfmeu-form-gap: 25px;
    --cfmeu-column-gap: 15px;
    --cfmeu-label-gap: 5px;
    --cfmeu-card-padding: 32px;
    --cfmeu-footer-height: 279px;
    --cfmeu-page-title-size: 32px;
    --cfmeu-h2-size: 26px;
    --cfmeu-h3-size: 18px;
    --cfmeu-h4-size: 16px;
    --cfmeu-h6-size: 14px;
    --cfmeu-body-size: 12px;
    --cfmeu-small-size: 10px;
    --cfmeu-display-tracking: 0.78px;
    --cfmeu-page-title-tracking: 0.96px;
    --cfmeu-h3-tracking: 0.54px;
    --cfmeu-ui-tracking: 0.5px;
    --cfmeu-h6-tracking: 0.7px;
    --cfmeu-meta-tracking: 0.7px;
    --cfmeu-body-tracking: 0;
    --cfmeu-sidebar-pattern-size: 106px;
    --cfmeu-sidebar-icon-size: 35px;
    --cfmeu-sidebar-arrow-size: 32px;
    --cfmeu-button-height: 38px;
    --cfmeu-button-width: 127px;
    --cfmeu-button-hover-width: 150px;
    --cfmeu-table-header-height: 37px;
    --cfmeu-table-row-height: 56px;
}

#pay_dues_form .step.hidden,
#pay_dues_form #pay_button.hidden,
#pay_dues_form .renewing_member_details_container.hidden,
#pay_dues_form #pyd_variable_price_container.hidden,
#pay_dues_form #display_total_due_container.hidden {
    display: none !important;
}

#pay_dues_form #pay_button[aria-disabled="true"],
#pay_dues_form #pay_button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}

html.cfmeu-sso-auth-resolving .menu-member-login,
html.cfmeu-sso-auth-resolving .menu-member-logout,
body.cfmeu-sso-auth-resolving .menu-member-login,
body.cfmeu-sso-auth-resolving .menu-member-logout,
html.cfmeu-sso-auth-resolving .cfmeu-sso-header-buttons-container .cfmeu-sso-login-btn-header,
html.cfmeu-sso-auth-resolving .cfmeu-sso-header-buttons-container .cfmeu-sso-authenticated-actions,
body.cfmeu-sso-auth-resolving .cfmeu-sso-header-buttons-container .cfmeu-sso-login-btn-header,
body.cfmeu-sso-auth-resolving .cfmeu-sso-header-buttons-container .cfmeu-sso-authenticated-actions {
    pointer-events: none !important;
    visibility: hidden !important;
}

html.cfmeu-sso-auth-navigating .menu-member-login,
html.cfmeu-sso-auth-navigating .menu-member-logout,
body.cfmeu-sso-auth-navigating .menu-member-login,
body.cfmeu-sso-auth-navigating .menu-member-logout,
html.cfmeu-sso-auth-navigating .cfmeu-sso-header-buttons-container,
body.cfmeu-sso-auth-navigating .cfmeu-sso-header-buttons-container {
    pointer-events: none !important;
}

.cfmeu-sso-header-buttons-container {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.cfmeu-sso-header-buttons-container .cfmeu-sso-login-btn-header,
.cfmeu-sso-header-buttons-container .cfmeu-sso-my-account-btn-header,
.cfmeu-sso-header-buttons-container .cfmeu-sso-logout-btn-header {
    background: #000000;
    border: 2px solid #000000;
    color: #ffffff;
    display: inline-flex;
    font-family: var(--cfmeu-font-ui);
    font-size: 10px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.5px;
    line-height: 1;
    min-height: 38px;
    padding: 12px 16px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cfmeu-sso-header-buttons-container .cfmeu-sso-login-btn-header:hover,
.cfmeu-sso-header-buttons-container .cfmeu-sso-my-account-btn-header:hover,
.cfmeu-sso-header-buttons-container .cfmeu-sso-logout-btn-header:hover {
    background: #ffffff;
    color: #000000;
}

.cfmeu-sso-header-buttons-container .cfmeu-sso-authenticated-actions {
    align-items: center;
    display: none;
    gap: 10px;
}

.cfmeu-sso-authenticated .cfmeu-sso-header-buttons-container .cfmeu-sso-login-btn-header {
    display: none;
}

.cfmeu-sso-authenticated .cfmeu-sso-header-buttons-container .cfmeu-sso-authenticated-actions {
    display: inline-flex;
}

/* ==========================================================================
   SSO Login Form Styles
   ========================================================================== */

.cfmeu-sso-login-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Open Sans', sans-serif;
}

.cfmeu-sso-login-container .sso-login-form {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 40px;
    border: 1px solid #e1e5e9;
    position: relative;
    overflow: hidden;
}

.cfmeu-sso-login-container .sso-login-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.cfmeu-sso-login-container .sso-login-header {
    text-align: center;
    margin-bottom: 30px;
}

.cfmeu-sso-login-container .sso-login-header h2 {
    color: #2c3e50;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.cfmeu-sso-login-container .sso-subtitle {
    color: #7f8c8d;
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
}

/* Form Styles - Scoped to SSO container */
.cfmeu-sso-login-container .sso-form {
    margin-bottom: 30px;
}

.cfmeu-sso-login-container .form-group {
    margin-bottom: 25px;
}

.cfmeu-sso-login-container .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #34495e;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cfmeu-sso-login-container .form-group input,
.cfmeu-sso-login-container .form-group select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    font-size: 16px;
    color: #2c3e50;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cfmeu-sso-login-container .form-group input:focus,
.cfmeu-sso-login-container .form-group select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    transform: translateY(-1px);
}

.cfmeu-sso-login-container .form-group input.valid {
    border-color: #27ae60;
    background-color: #f8fff8;
}

.cfmeu-sso-login-container .form-group input.error {
    border-color: #e74c3c;
    background-color: #fff8f8;
}

.cfmeu-sso-login-container .form-group input::placeholder {
    color: #bdc3c7;
    font-style: italic;
}

/* Password Toggle - Scoped to SSO container */
.cfmeu-sso-login-container .password-input-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

html body .cfmeu-sso-login-container #cfmeu-sso-login-form .password-input-wrapper,
html body #cfmeu-clean-sso-login .password-input-wrapper {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    position: relative !important;
    width: 100% !important;
}

/* Override WordPress admin styles that might affect width */
.admin-bar .cfmeu-sso-login-container .password-input-wrapper,
.logged-in .cfmeu-sso-login-container .password-input-wrapper,
body.admin-bar .cfmeu-sso-login-container .password-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.cfmeu-sso-login-container .password-input-wrapper input,
.cfmeu-sso-login-container .password-input-wrapper input[type="password"],
.cfmeu-sso-login-container .password-input-wrapper input[type="text"],
.cfmeu-sso-login-container .password-input-wrapper .sso_form_input {
    padding-right: 76px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

html body .cfmeu-sso-login-container #cfmeu-sso-login-form input#sso_password,
html body #cfmeu-clean-sso-login .password-input-wrapper input[type="password"],
html body #cfmeu-clean-sso-login .password-input-wrapper input[type="text"] {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 100% !important;
    padding-right: 76px !important;
    width: 100% !important;
}

/* Override admin styles for input width */
.admin-bar .cfmeu-sso-login-container .password-input-wrapper input,
.logged-in .cfmeu-sso-login-container .password-input-wrapper input,
body.admin-bar .cfmeu-sso-login-container .password-input-wrapper input {
    width: 100% !important;
    max-width: 100% !important;
}

.cfmeu-sso-login-container .password-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    z-index: 10 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 32px !important;
    height: 32px !important;
    color: #666 !important;
    transition: color 0.2s ease !important;
    outline: none !important;
    left: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#cfmeu-clean-sso-login .password-toggle-btn {
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    height: 32px !important;
    justify-content: center !important;
    left: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 32px !important;
    opacity: 1 !important;
    outline: none !important;
    padding: 4px 8px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    visibility: visible !important;
    width: auto !important;
    z-index: 10 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Ensure button stays inside wrapper even with admin styles */
.admin-bar .cfmeu-sso-login-container .password-toggle-btn,
.logged-in .cfmeu-sso-login-container .password-toggle-btn {
    right: 8px !important;
    left: auto !important;
}

/* Ensure input_div doesn't constrain width when admin is logged in */
.admin-bar .cfmeu-sso-login-container .input_div .password-input-wrapper,
.logged-in .cfmeu-sso-login-container .input_div .password-input-wrapper,
body.admin-bar .cfmeu-sso-login-container .input_div .password-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.admin-bar .cfmeu-sso-login-container .input_div .password-input-wrapper input,
.logged-in .cfmeu-sso-login-container .input_div .password-input-wrapper input,
body.admin-bar .cfmeu-sso-login-container .input_div .password-input-wrapper input {
    width: 100% !important;
    max-width: 100% !important;
}

.cfmeu-sso-login-container .password-toggle-btn {
    color: #333 !important;
}

.cfmeu-sso-login-container .password-toggle-btn::before,
.cfmeu-sso-login-container .password-toggle-btn::after,
#cfmeu-clean-sso-login .password-toggle-btn::before,
#cfmeu-clean-sso-login .password-toggle-btn::after,
#cfmeu-sso-login-form .password-toggle-btn::before,
#cfmeu-sso-login-form .password-toggle-btn::after {
    content: none !important;
    display: none !important;
}

.cfmeu-sso-login-container .password-toggle-btn:hover {
    color: #000 !important;
}

/* Ensure SVG icons are black */
.cfmeu-sso-login-container .password-toggle-btn svg,
.cfmeu-sso-login-container .password-toggle-btn .eye-icon,
#cfmeu-clean-sso-login .password-toggle-btn svg,
#cfmeu-clean-sso-login .password-toggle-btn .eye-icon {
    stroke: #333 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 2 !important;
}

.cfmeu-sso-login-container .password-toggle-btn:hover svg,
.cfmeu-sso-login-container .password-toggle-btn:hover .eye-icon,
#cfmeu-clean-sso-login .password-toggle-btn:hover svg,
#cfmeu-clean-sso-login .password-toggle-btn:hover .eye-icon {
    stroke: #000 !important;
}

.cfmeu-sso-login-container .password-toggle-icon[hidden],
#cfmeu-clean-sso-login .password-toggle-icon[hidden],
#cfmeu-sso-login-form .password-toggle-icon[hidden] {
    display: none !important;
}

.cfmeu-sso-login-container .password-toggle-btn .password-toggle-icon,
#cfmeu-clean-sso-login .password-toggle-btn .password-toggle-icon,
#cfmeu-sso-login-form .password-toggle-btn .password-toggle-icon {
    align-items: center !important;
    display: inline-flex !important;
    justify-content: center !important;
}

.cfmeu-sso-login-container .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--hide,
.cfmeu-sso-login-container .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--show,
#cfmeu-clean-sso-login .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--hide,
#cfmeu-clean-sso-login .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--show,
#cfmeu-sso-login-form .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--hide,
#cfmeu-sso-login-form .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--show {
    display: none !important;
}

.cfmeu-sso-login-container .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--hide,
.cfmeu-sso-login-container .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--show,
#cfmeu-clean-sso-login .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--hide,
#cfmeu-clean-sso-login .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--show,
#cfmeu-sso-login-form .password-toggle-btn[aria-pressed="true"] .password-toggle-icon--hide,
#cfmeu-sso-login-form .password-toggle-btn[aria-pressed="false"] .password-toggle-icon--show {
    display: inline-flex !important;
}

#cfmeu-clean-sso-login .password-input-wrapper,
#cfmeu-sso-login-form .password-input-wrapper {
    position: relative;
}

#cfmeu-clean-sso-login .password-input-wrapper input,
#cfmeu-sso-login-form .password-input-wrapper input {
    padding-right: 45px;
}

.cfmeu-sso-login-container .password-toggle-btn:focus {
    color: #333 !important;
    outline: 2px solid #3498db !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Button Styles - Scoped to SSO container */
.cfmeu-sso-login-container .form-actions {
    margin-top: 30px;
}

.cfmeu-sso-login-container .sso-login-btn {
    width: 100%;
    padding: 18px 30px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cfmeu-sso-login-container .sso-login-btn:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

.cfmeu-sso-login-container .sso-login-btn:active {
    transform: translateY(0);
}

.cfmeu-sso-login-container .sso-login-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cfmeu-sso-login-container .sso-login-btn .btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cfmeu-sso-login-container .sso-login-btn .btn-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: cfmeu-sso-spin 1s linear infinite;
}

@keyframes cfmeu-sso-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Message Styles - Scoped to SSO container */
.cfmeu-sso-login-container .sso-message {
    margin-top: 20px;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    animation: cfmeu-sso-slideDown 0.3s ease;
}

.cfmeu-sso-login-container .sso-message.success {
    background: #d5f4e6;
    color: #27ae60;
    border: 1px solid #27ae60;
}

.cfmeu-sso-login-container .sso-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.cfmeu-sso-login-container .sso-message.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

@keyframes cfmeu-sso-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Links - Scoped to SSO container */
.cfmeu-sso-login-container .sso-form-links {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #ecf0f1;
}

.cfmeu-sso-login-container .sso-link {
    color: #3498db;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin: 0 15px;
    transition: color 0.3s ease;
}

.cfmeu-sso-login-container .sso-link:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* Benefits Section - Scoped to SSO container */
.cfmeu-sso-login-container .sso-benefits {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
}

.cfmeu-sso-login-container .sso-benefits h3 {
    color: #2c3e50;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.cfmeu-sso-login-container .sso-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cfmeu-sso-login-container .sso-benefits li {
    color: #34495e;
    font-size: 14px;
    margin: 8px 0;
    padding-left: 0;
}

/* Already Logged In Styles - Scoped to SSO container */
.cfmeu-sso-login-container .sso-already-logged-in {
    background: #d5f4e6;
    border: 1px solid #27ae60;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.cfmeu-sso-login-container .sso-status-header h2 {
    color: #27ae60;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.cfmeu-sso-login-container .sso-status-content {
    margin-bottom: 25px;
}

.cfmeu-sso-login-container .member-info p {
    color: #2c3e50;
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
}

.cfmeu-sso-login-container .sso-active {
    color: #27ae60;
    font-weight: 700;
    background: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cfmeu-sso-login-container .sso-status-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cfmeu-sso-login-container .sso-dashboard-btn,
.cfmeu-sso-login-container .sso-logout-btn {
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cfmeu-sso-login-container .sso-dashboard-btn {
    background: #27ae60;
    color: #ffffff;
}

.cfmeu-sso-login-container .sso-dashboard-btn:hover {
    background: #229a56;
    color: #ffffff;
    transform: translateY(-1px);
}

.cfmeu-sso-login-container .sso-logout-btn {
    background: #e74c3c;
    color: #ffffff;
}

.cfmeu-sso-login-container .sso-logout-btn:hover {
    background: #c0392b;
    color: #ffffff;
    transform: translateY(-1px);
}

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

@media (max-width: 768px) {
    .cfmeu-sso-login-container {
        margin: 20px auto;
        padding: 0 15px;
    }

    .cfmeu-sso-login-container .sso-login-form {
        padding: 30px 25px;
    }

    .cfmeu-sso-login-container .sso-login-header h2 {
        font-size: 24px;
    }

    .cfmeu-sso-login-container .sso-subtitle {
        font-size: 14px;
    }

    .cfmeu-sso-login-container .form-group input,
    .cfmeu-sso-login-container .form-group select {
        padding: 12px 15px;
        font-size: 16px;
        /* Prevent zoom on iOS */
    }

    .cfmeu-sso-login-container .sso-login-btn {
        padding: 15px 25px;
        font-size: 16px;
    }

    .cfmeu-sso-login-container .sso-status-actions {
        flex-direction: column;
        align-items: center;
    }

    .cfmeu-sso-login-container .sso-dashboard-btn,
    .cfmeu-sso-login-container .sso-logout-btn {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .cfmeu-sso-login-container .sso-login-form {
        padding: 25px 20px;
    }

    .cfmeu-sso-login-container .sso-login-header h2 {
        font-size: 22px;
    }

    .cfmeu-sso-login-container .form-group {
        margin-bottom: 20px;
    }

    .cfmeu-sso-login-container .sso-benefits {
        padding: 20px;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .cfmeu-sso-login-container .sso-login-form {
        background: #2c3e50;
        border-color: #34495e;
    }

    .cfmeu-sso-login-container .sso-login-header h2 {
        color: #ecf0f1;
    }

    .cfmeu-sso-login-container .sso-subtitle {
        color: #bdc3c7;
    }

    .cfmeu-sso-login-container .form-group label {
        color: #ecf0f1;
    }

    .cfmeu-sso-login-container .form-group input,
    .cfmeu-sso-login-container .form-group select {
        background: #34495e;
        border-color: #4a5f7a;
        color: #ecf0f1;
    }

    .cfmeu-sso-login-container .form-group input:focus,
    .cfmeu-sso-login-container .form-group select:focus {
        border-color: #3498db;
        background: #2c3e50;
    }

    .cfmeu-sso-login-container .form-group input::placeholder {
        color: #95a5a6;
    }

    .cfmeu-sso-login-container .sso-benefits {
        background: #34495e;
    }

    .cfmeu-sso-login-container .sso-benefits h3 {
        color: #ecf0f1;
    }

    .cfmeu-sso-login-container .sso-benefits li {
        color: #bdc3c7;
    }

    .cfmeu-sso-login-container .sso-link {
        color: #3498db;
    }

    .cfmeu-sso-login-container .sso-link:hover {
        color: #5dade2;
    }
}

/* ==========================================================================
   Dues Block Message (Members with Outstanding Balance)
   ========================================================================== */

.cfmeu-dues-block {
    max-width: 720px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-align: center;
}

/* Header: Lock icon + Title */
.cfmeu-dues-block__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 28px;
}

.cfmeu-dues-block__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    color: #1a1a1a;
}

.cfmeu-dues-block__lock-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cfmeu-dues-block__title-group {
    text-align: left;
}

.cfmeu-dues-block__title-group h2,
.cfmeu-dues-block__heading {
    font-family: 'Impact', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: 1.5px;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.cfmeu-dues-block__subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 4px 0 0 0;
    line-height: 1.3;
}

/* Info callout with (i) icon */
.cfmeu-dues-block__info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f7f7f7;
    border-left: 4px solid #1a1a1a;
    border-radius: 0 6px 6px 0;
    padding: 18px 20px;
    margin-bottom: 28px;
    text-align: left;
}

.cfmeu-dues-block__info-icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: #1a1a1a;
    margin-top: 1px;
}

.cfmeu-dues-block__info-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333333;
}

.cfmeu-dues-block__info-text p {
    margin: 0 0 6px 0;
}

.cfmeu-dues-block__info-text p:last-child {
    margin-bottom: 0;
}

.cfmeu-dues-block__info-text strong {
    color: #1a1a1a;
    font-weight: 700;
}

/* Single CTA button */
.cfmeu-dues-block__actions {
    text-align: center;
}

.cfmeu-dues-block__btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 14px 40px;
    background: #1a1a1a;
    color: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    width: var(--cfmeu-button-width);
}

.cfmeu-dues-block__btn:hover,
.cfmeu-dues-block__btn:focus {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%230d0d0d'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    border-color: #0d0d0d;
    color: #0d0d0d;
    padding-right: 38px;
    width: var(--cfmeu-button-hover-width);
}

/* Responsive */
@media (max-width: 600px) {
    .cfmeu-dues-block__header {
        flex-direction: column;
        gap: 10px;
    }

    .cfmeu-dues-block__title-group {
        text-align: center;
    }

    .cfmeu-dues-block__heading {
        font-size: 24px;
    }

    .cfmeu-dues-block__icon {
        width: 52px;
        height: 52px;
    }

    .cfmeu-dues-block__info {
        flex-direction: column;
        gap: 8px;
    }

    .cfmeu-dues-block__btn {
        width: 100%;
        max-width: 280px;
    }
}

/* ==========================================================================
   Member summary
   ========================================================================== */

.cfmeu-sso-member-summary {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    margin: 24px 0;
    padding: 24px;
}

.cfmeu-sso-member-summary__greeting {
    color: #1d2939;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 8px;
}

.cfmeu-sso-member-summary__since,
.cfmeu-sso-member-summary__status {
    color: #475467;
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0 0;
}

.cfmeu-sso-member-summary__status a {
    color: #c0392b;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .cfmeu-sso-member-summary {
        padding: 24px;
    }

    .cfmeu-sso-member-summary__greeting {
        font-size: 24px;
    }
}

/* ==========================================================================
   Ticketing portal
   ========================================================================== */

.cfmeu-ticketing-portal {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    margin: 32px auto;
    max-width: var(--cfmeu-content-inner-width);
    padding: 0 18px;
}

.cfmeu-ticketing-portal,
.cfmeu-ticketing-portal * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.cfmeu-ticketing-portal__header {
    align-items: center;
    background: var(--cfmeu-charcoal-1);
    color: var(--cfmeu-white);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 0 0 32px;
    min-height: 150px;
    padding: 34px;
    text-align: left;
}

.cfmeu-ticketing-portal__header h1 {
    color: var(--cfmeu-white);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h2-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-display-tracking);
    line-height: normal;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.cfmeu-ticketing-portal__header p {
    color: var(--cfmeu-charcoal-6);
    font-size: var(--cfmeu-body-size);
    margin: 0;
}

.cfmeu-ticketing-portal__eyebrow {
    color: var(--cfmeu-charcoal-6) !important;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: 16pt;
    font-weight: 800 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    margin: 0 0 8px !important;
    text-transform: uppercase;
}

.cfmeu-ticketing-portal__status {
    border: 1px solid var(--cfmeu-charcoal-5);
    color: var(--cfmeu-white);
    flex: 0 0 auto;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    min-height: 30px;
    padding: 8px 12px;
    text-transform: uppercase;
}

.cfmeu-ticketing-portal__page-heading {
    margin: 0 0 40px;
}

.cfmeu-ticketing-portal__page-heading h2 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-page-title-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-page-title-tracking);
    line-height: normal;
    margin: 0 0 34px;
    text-transform: uppercase;
}

.cfmeu-ticketing-portal__tabs {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    min-height: 31px;
}

.cfmeu-ticketing-portal__tab {
    border-bottom: 2px solid transparent;
    color: var(--cfmeu-charcoal-5);
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    justify-content: center;
    line-height: 1;
    min-height: 31px;
    padding: 0 0 12px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.cfmeu-ticketing-portal__tab:nth-child(1) {
    width: auto;
}

.cfmeu-ticketing-portal__tab:nth-child(2) {
    width: auto;
}

.cfmeu-ticketing-portal__tab:nth-child(3) {
    width: auto;
}

.cfmeu-ticketing-portal__tab--active {
    font-weight: 950 !important;
}

.cfmeu-ticketing-portal__tab--active,
.cfmeu-ticketing-portal__tab:hover,
.cfmeu-ticketing-portal__tab:focus {
    border-bottom-color: var(--cfmeu-charcoal-1);
    color: var(--cfmeu-charcoal-1);
}

.cfmeu-ticketing-portal__tab--disabled {
    cursor: default;
    opacity: 0.82;
}

.cfmeu-ticketing-portal__panel {
    display: none;
}

.cfmeu-ticketing-portal__panel--active {
    display: block;
}

.cfmeu-ticketing-portal__campaigns.cfmeu-ticketing-portal__panel--active {
    display: grid;
}

.cfmeu-ticketing-portal__campaigns {
    gap: var(--cfmeu-form-gap);
    margin: 0 0 var(--cfmeu-content-padding-y);
}

.cfmeu-ticketing-campaign-card {
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    display: grid;
    gap: 40px;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    padding: var(--cfmeu-card-padding);
}

.cfmeu-ticketing-campaign-card__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cfmeu-ticketing-campaign-card__content > h2,
.cfmeu-ticketing-campaign-card__content > p {
    margin: 0;
}

.cfmeu-ticketing-campaign-card::before {
    align-self: stretch;
    background-color: var(--cfmeu-charcoal-7);
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='9' width='28' height='24' rx='2' stroke='%23A6A6A6' stroke-width='2'/%3E%3Ccircle cx='17' cy='18' r='3' stroke='%23A6A6A6' stroke-width='2'/%3E%3Cpath d='M10 30l8-8 6 6 4-4 4 6' stroke='%23A6A6A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    display: block;
    grid-column: 1;
    grid-row: 1 / span 5;
    min-height: 380px;
}

.cfmeu-ticketing-campaign-card--has-artwork::before {
    display: none;
}

.cfmeu-ticketing-campaign-card__media {
    align-self: stretch;
    background: var(--cfmeu-charcoal-7);
    display: block;
    grid-column: 1;
    grid-row: 1 / span 5;
    min-height: 380px;
    overflow: hidden;
}

.cfmeu-ticketing-campaign-card__media img {
    display: block;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    width: 100%;
}

.cfmeu-ticketing-campaign-card > :not(.cfmeu-ticketing-campaign-card__media) {
    grid-column: 2;
}

.cfmeu-ticketing-campaign-card p {
    color: var(--cfmeu-charcoal-3);
    font-size: var(--cfmeu-body-size);
    margin: 0 0 8px;
}

.cfmeu-ticketing-campaign-card h2 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 0 0 18px;
    text-transform: uppercase;
}

.cfmeu-ticketing-campaign-card__allocation {
    color: var(--cfmeu-charcoal-3);
    display: block;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-body-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    line-height: 1.35;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.cfmeu-ticketing-campaign-card dl {
    border: 1px solid var(--cfmeu-grey-2);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 20px;
}

.cfmeu-ticketing-campaign-card dl div {
    border-left: 1px solid var(--cfmeu-grey-2);
    padding: 12px;
}

.cfmeu-ticketing-campaign-card dl div:first-child {
    border-left: 0;
}

.cfmeu-ticketing-campaign-card dt {
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    margin: 0 0 6px;
    text-transform: uppercase;
}

.cfmeu-ticketing-campaign-card dd {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 0;
}

.cfmeu-ticketing-portal__tickets {
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    margin: 0 0 var(--cfmeu-content-padding-y);
    padding: var(--cfmeu-card-padding);
}

.cfmeu-ticketing-portal__section-heading {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 0 42px;
    min-height: auto;
}

.cfmeu-ticketing-portal__section-heading h2 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 0;
    text-transform: uppercase;
}

.cfmeu-ticketing-ticket-table-wrap {
    overflow-x: auto;
}

.cfmeu-ticketing-ticket-table {
    border: 0;
    border-collapse: collapse;
    margin: 0;
    min-width: 856px;
    table-layout: fixed;
    width: 856px;
}

.cfmeu-ticketing-ticket-table th,
.cfmeu-ticketing-ticket-table td {
    border: 0;
    border-bottom: 1px solid var(--cfmeu-grey-2);
    color: var(--cfmeu-charcoal-3);
    font-size: var(--cfmeu-body-size);
    height: var(--cfmeu-table-row-height);
    padding: 0 10px;
    text-align: left;
}

.cfmeu-ticketing-ticket-table td:nth-child(1),
.cfmeu-ticketing-ticket-table td:nth-child(3) {
    overflow-wrap: anywhere;
    white-space: normal;
}

.cfmeu-ticketing-ticket-table th {
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    height: var(--cfmeu-table-header-height);
    text-transform: uppercase;
}

.cfmeu-ticketing-ticket-table th:nth-child(1),
.cfmeu-ticketing-ticket-table td:nth-child(1) {
    width: 208px;
}

.cfmeu-ticketing-ticket-table th:nth-child(2),
.cfmeu-ticketing-ticket-table td:nth-child(2) {
    width: 120px;
}

.cfmeu-ticketing-ticket-table th:nth-child(3),
.cfmeu-ticketing-ticket-table td:nth-child(3) {
    width: 240px;
}

.cfmeu-ticketing-ticket-table th:nth-child(4),
.cfmeu-ticketing-ticket-table td:nth-child(4),
.cfmeu-ticketing-ticket-table th:nth-child(5),
.cfmeu-ticketing-ticket-table td:nth-child(5) {
    width: 120px;
}

.cfmeu-ticketing-portal__activity,
.cfmeu-ticketing-portal__empty,
.cfmeu-ticketing-portal--empty {
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    margin: 0 0 var(--cfmeu-content-padding-y);
    padding: var(--cfmeu-card-padding);
}

.cfmeu-ticketing-portal__empty-line {
    margin: 22px 0 0;
}

.cfmeu-ticketing-portal__notice {
    border: 1px solid;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-body-size);
    font-weight: 700 !important;
    margin: 0 0 24px;
    padding: 14px 16px;
}

.cfmeu-ticketing-portal__notice--success {
    background: #f3fbf5;
    border-color: #9dc8a6;
    color: #1d6f32;
}

.cfmeu-ticketing-portal__notice--error {
    background: #fff5f5;
    border-color: #d69a9a;
    color: #8a1f1f;
}

.cfmeu-ticketing-portal__hold {
    background: var(--cfmeu-charcoal-7);
    border: 1px solid var(--cfmeu-charcoal-5);
    color: var(--cfmeu-charcoal-2);
    font-weight: 700 !important;
    margin: 18px 0;
    padding: 12px 14px;
}

.cfmeu-ticketing-claim-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 22px 0 0;
}

.cfmeu-ticketing-claim-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

.cfmeu-ticketing-claim-form span {
    color: var(--cfmeu-charcoal-3);
    font-size: var(--cfmeu-body-size);
    font-weight: 400 !important;
}

.cfmeu-ticketing-claim-form input,
.cfmeu-ticketing-claim-form select {
    background: var(--cfmeu-white);
    border: var(--cfmeu-control-border) solid var(--cfmeu-charcoal-6);
    border-radius: 0;
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    min-height: var(--cfmeu-control-height);
    padding: 8px 10px;
    width: 100%;
}

.cfmeu-ticketing-claim-form__select select {
    width: 166px;
}

.cfmeu-ticketing-claim-form .cfmeu-ticketing-portal__button {
    align-self: end;
    border: 0;
    cursor: pointer;
    margin: 4px 0 0;
    width: 100%;
}

.cfmeu-ticketing-stepper {
    align-items: center;
    display: flex;
    gap: 12px;
}

.cfmeu-ticketing-claim-form .cfmeu-ticketing-stepper input {
    border: 0;
    flex: 0 0 20px;
    min-height: 40px;
    padding: 0;
    text-align: center;
    width: 20px;
}

.cfmeu-ticketing-stepper button {
    background: #fff;
    border: 1px solid var(--cfmeu-charcoal-5);
    color: var(--cfmeu-charcoal-1);
    cursor: pointer;
    font-size: 24px;
    height: 40px;
    line-height: 1;
    padding: 0;
    width: 40px;
}

.cfmeu-ticketing-claim-form__limit {
    margin: 0 !important;
}

.cfmeu-ticketing-claim-form__availability {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
}

.cfmeu-ticketing-claim-form__stock {
    font-weight: 700 !important;
    margin: 0 !important;
}

.cfmeu-ticketing-admin__image-control {
    align-items: center;
    display: flex;
    gap: 8px;
}

.cfmeu-ticketing-admin__image-control input {
    flex: 1;
}

.cfmeu-ticketing-additional {
    margin: 0 0 var(--cfmeu-content-padding-y);
}

.cfmeu-ticketing-additional__copy {
    margin: 0 0 25px;
    max-width: 795px;
    min-height: 156px;
}

.cfmeu-ticketing-additional__copy p {
    color: var(--cfmeu-charcoal-2);
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    margin: 0 0 18px;
}

.cfmeu-ticketing-additional-form {
    margin: 0;
}

.cfmeu-member-area .cfmeu-ticketing-additional-form__submit {
    align-self: stretch;
    display: flex;
    max-width: none;
    width: 100% !important;
}

.cfmeu-member-area .cfmeu-ticketing-additional-form__submit:hover,
.cfmeu-member-area .cfmeu-ticketing-additional-form__submit:focus {
    width: 100% !important;
}

.cfmeu-ticketing-additional-form__grid {
    display: grid;
    gap: var(--cfmeu-form-gap) var(--cfmeu-column-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 25px;
}

.cfmeu-ticketing-additional-field {
    color: var(--cfmeu-charcoal-3);
    display: flex;
    flex-direction: column;
    font-size: var(--cfmeu-body-size);
    gap: 5px;
    margin: 0;
}

.cfmeu-ticketing-additional-field--wide {
    grid-column: 1 / -1;
}

.cfmeu-ticketing-additional-field > span:first-child {
    color: var(--cfmeu-charcoal-3);
}

.cfmeu-ticketing-additional-field input:not([type="file"]),
.cfmeu-ticketing-additional-field select,
.cfmeu-ticketing-additional-field textarea {
    background: var(--cfmeu-white);
    border: var(--cfmeu-control-border) solid var(--cfmeu-charcoal-6);
    border-radius: 0;
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    min-height: var(--cfmeu-control-height);
    padding: 8px 10px;
    width: 100%;
}

.cfmeu-ticketing-additional-field textarea {
    min-height: 102px;
}

.cfmeu-ticketing-upload {
    align-items: center;
    background: var(--cfmeu-white);
    border: var(--cfmeu-control-border) solid var(--cfmeu-charcoal-6);
    color: var(--cfmeu-charcoal-5);
    display: flex;
    gap: 12px;
    min-height: 44px;
    padding: 9px 10px;
    position: relative;
}

.cfmeu-ticketing-upload::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48' stroke='%23A6A6A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    content: "";
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
}

.cfmeu-ticketing-upload strong {
    align-items: center;
    background: var(--cfmeu-charcoal-1);
    color: var(--cfmeu-white);
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    height: 24px;
    justify-content: center;
    margin-left: auto;
    min-width: 103px;
    padding: 0 10px;
    text-transform: uppercase;
}

.cfmeu-ticketing-upload input[type="file"] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.cfmeu-ticketing-additional__history {
    border: 1px solid var(--cfmeu-grey-2);
    margin: 50px 0 0;
    overflow-x: auto;
    padding: var(--cfmeu-card-padding);
}

.cfmeu-ticketing-additional__history h3 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.cfmeu-ticketing-additional__history table {
    border: 0;
    border-collapse: collapse;
    margin: 0;
    min-width: 620px;
    table-layout: fixed;
    width: 100%;
}

.cfmeu-ticketing-additional__history th,
.cfmeu-ticketing-additional__history td {
    border-bottom: 1px solid var(--cfmeu-grey-2);
    overflow-wrap: anywhere;
    padding: 14px 10px;
    text-align: left;
    white-space: normal;
}

.cfmeu-ticketing-additional__history th {
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    text-transform: uppercase;
}

.cfmeu-ticketing-additional__status {
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    text-transform: uppercase;
}

.cfmeu-ticketing-additional__status--approved {
    color: #1d6f32;
}

.cfmeu-ticketing-additional__status--rejected {
    color: #8a1f1f;
}

.cfmeu-ticketing-portal__empty,
.cfmeu-ticketing-portal--empty {
    text-align: center;
}

.cfmeu-ticketing-portal__activity h2,
.cfmeu-ticketing-portal__empty h2,
.cfmeu-ticketing-portal--empty h1 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.cfmeu-ticketing-portal__activity ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfmeu-ticketing-portal__activity li {
    align-items: center;
    border-top: 1px solid var(--cfmeu-grey-2);
    display: grid;
    gap: 12px;
    grid-template-columns: 180px 1fr 120px;
    min-height: var(--cfmeu-table-row-height);
    padding: 14px 0;
}

.cfmeu-ticketing-portal__activity li:first-child {
    border-top: 0;
}

.cfmeu-ticketing-portal__activity span,
.cfmeu-ticketing-portal__activity em,
.cfmeu-ticketing-portal__muted {
    color: var(--cfmeu-charcoal-4);
    font-style: normal;
}

.cfmeu-ticketing-portal__button {
    align-items: center;
    background: var(--cfmeu-charcoal-1);
    color: var(--cfmeu-white);
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    justify-content: center;
    min-height: var(--cfmeu-button-height);
    min-width: 0;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, width 160ms ease;
    width: var(--cfmeu-button-width);
}

.cfmeu-ticketing-portal__button:hover,
.cfmeu-ticketing-portal__button:focus {
    background-color: var(--cfmeu-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%230d0d0d'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    border: 1px solid var(--cfmeu-charcoal-1);
    color: var(--cfmeu-charcoal-1);
    padding-right: 38px;
    width: var(--cfmeu-button-hover-width);
}

.cfmeu-ticketing-portal__button--small {
    min-height: 30px;
    width: 84px;
}

.cfmeu-ticketing-portal__button--small:hover,
.cfmeu-ticketing-portal__button--small:focus {
    width: 96px;
}

.cfmeu-member-area .cfmeu-ticketing-portal {
    margin: 0;
    max-width: var(--cfmeu-content-inner-width);
    padding: 0;
}

.cfmeu-member-area .cfmeu-ticketing-portal__header {
    display: none;
}

@media (max-width: 700px) {
    .cfmeu-ticketing-portal__header {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .cfmeu-ticketing-portal__status {
        width: 100%;
    }

    .cfmeu-ticketing-portal__tabs {
        align-items: stretch;
        display: grid;
        gap: 12px 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        padding-bottom: 0;
    }

    .cfmeu-ticketing-portal__tab {
        align-items: flex-end;
        justify-content: flex-start;
        line-height: 1.2;
        min-width: 0;
        text-align: left;
        white-space: normal;
        width: 100%;
    }

    .cfmeu-ticketing-portal__tab:nth-child(3) {
        grid-column: 1 / -1;
    }

    .cfmeu-ticketing-campaign-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .cfmeu-ticketing-campaign-card::before {
        grid-column: 1;
        grid-row: auto;
        min-height: 210px;
    }

    .cfmeu-ticketing-campaign-card__media {
        grid-column: 1;
        grid-row: auto;
        min-height: 210px;
    }

    .cfmeu-ticketing-campaign-card__media img {
        min-height: 210px;
    }

    .cfmeu-ticketing-campaign-card > :not(.cfmeu-ticketing-campaign-card__media) {
        grid-column: 1;
    }

    .cfmeu-ticketing-campaign-card dl,
    .cfmeu-ticketing-portal__activity li,
    .cfmeu-ticketing-claim-form,
    .cfmeu-ticketing-additional-form__grid {
        grid-template-columns: 1fr;
    }

    .cfmeu-ticketing-claim-form label:first-of-type {
        grid-column: auto;
    }

    .cfmeu-ticketing-claim-form .cfmeu-ticketing-portal__button {
        width: 100%;
    }

    .cfmeu-ticketing-additional__copy {
        margin-bottom: 38px;
    }

    .cfmeu-ticketing-additional__history {
        overflow-x: auto;
        padding: 24px;
    }

    .cfmeu-ticketing-additional__history table {
        min-width: 620px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfmeu-dues-block__btn,
    .cfmeu-ticketing-portal__button,
    .cfmeu-member-area__button,
    .cfmeu-member-area .button,
    .cfmeu-member-area button:not(.cfmeu-sso-no-style),
    .cfmeu-member-area input[type="submit"] {
        transition: none;
    }
}

/* ==========================================================================
   Member Area Shell
   ========================================================================== */

.cfmeu-member-area {
    --cfmeu-body-size: 16px;
    background: var(--cfmeu-white);
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    width: 100vw;
}

.cfmeu-member-area,
.cfmeu-member-area * {
    box-sizing: border-box;
    letter-spacing: 0;
}

.cfmeu-member-area__hero {
    align-items: center;
    background-color: var(--cfmeu-charcoal-1);
    background-image: linear-gradient(rgba(13, 13, 13, 0.3), rgba(13, 13, 13, 0.36)), var(--cfmeu-member-hero-bg, url("../images/member-area/generic-banner-background.jpg"));
    background-position: center;
    background-size: cover;
    color: var(--cfmeu-white);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    min-height: var(--cfmeu-hero-height);
    padding: var(--cfmeu-hero-padding-top) 24px var(--cfmeu-hero-padding-bottom);
    position: sticky;
    text-align: center;
    top: var(--cfmeu-member-hero-sticky-top, 0px);
    transform: translateY(0);
    transition: box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
    will-change: transform;
    z-index: 90;
}

.cfmeu-member-area__hero-sentinel {
    display: block;
    height: 0;
    pointer-events: none;
    width: 100%;
}

.cfmeu-member-area__hero--stuck {
    box-shadow: 0 8px 22px rgba(13, 13, 13, 0.24);
}

.cfmeu-member-area__hero--hidden {
    pointer-events: none;
    transform: translateY(-100%);
}

.cfmeu-member-area__branch {
    color: var(--cfmeu-charcoal-6);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.cfmeu-member-area__hero h1 {
    color: var(--cfmeu-white);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h2-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-display-tracking);
    line-height: normal;
    margin: 0;
    text-transform: uppercase;
}

.cfmeu-member-area__hero-details {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 760px;
    width: 100%;
}

.cfmeu-member-area__hero dl {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    margin: 0;
    max-width: none;
    width: 100%;
}

.cfmeu-member-area__hero dl div {
    border-left: 1px solid var(--cfmeu-charcoal-4);
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 14px;
    white-space: nowrap;
}

.cfmeu-member-area__hero dl div:first-child {
    padding-left: 14px;
}

.cfmeu-member-area__hero dl div:last-child {
    border-right: 1px solid var(--cfmeu-charcoal-4);
}

.cfmeu-member-area__hero dt {
    color: var(--cfmeu-charcoal-6);
    display: inline;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-h6-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-meta-tracking);
    margin: 0;
    text-transform: uppercase;
}

.cfmeu-member-area__hero dt::after {
    content: ":";
}

.cfmeu-member-area__hero dd {
    color: var(--cfmeu-white);
    display: inline;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-h6-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-meta-tracking);
    margin: 0 0 0 5px;
    text-transform: uppercase;
}

.cfmeu-member-area__hero sup {
    font-size: 9px;
    line-height: 0;
}

.cfmeu-member-area__contact {
    color: var(--cfmeu-charcoal-6);
    font-size: var(--cfmeu-body-size);
    margin: 0 auto;
    max-width: 614px;
}

.cfmeu-member-area__contact strong {
    color: var(--cfmeu-white);
    font-weight: 700 !important;
}

.cfmeu-member-area__hero-lower {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    max-width: none;
    width: 100%;
}

.cfmeu-member-area__hero-lower .cfmeu-member-area__contact {
    flex: 0 1 614px;
    margin: 0;
    text-align: left;
}

.cfmeu-member-area__hero-button {
    align-items: center;
    border: 1px solid var(--cfmeu-white);
    color: var(--cfmeu-white);
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    height: var(--cfmeu-button-height);
    justify-content: center;
    padding: 0 18px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, width 160ms ease;
    width: var(--cfmeu-button-width);
}

.cfmeu-member-area__hero-button:hover,
.cfmeu-member-area__hero-button:focus {
    background-color: var(--cfmeu-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%230d0d0d'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    color: var(--cfmeu-charcoal-1);
    padding-right: 38px;
    width: var(--cfmeu-button-hover-width);
}

.cfmeu-member-area__body {
    display: grid;
    grid-template-columns: var(--cfmeu-sidebar-width) minmax(0, 1fr);
    min-height: 0;
    position: relative;
}

.cfmeu-member-area__nav {
    background-color: var(--cfmeu-charcoal-7);
    background-image: radial-gradient(circle, rgba(13, 13, 13, 0.12) 0.6px, transparent 0.8px);
    background-position: 0 0;
    background-size: 4px 4px;
    border-right: 1px solid var(--cfmeu-charcoal-5);
    padding: 0;
    width: var(--cfmeu-sidebar-width);
}

@media (min-width: 1025px) {
    .cfmeu-member-area__body::before {
        background-color: var(--cfmeu-charcoal-7);
        background-image: radial-gradient(circle, rgba(13, 13, 13, 0.12) 0.6px, transparent 0.8px);
        background-position: 0 0;
        background-size: 4px 4px;
        border-right: 1px solid var(--cfmeu-charcoal-5);
        bottom: calc(-1 * var(--cfmeu-member-sidebar-footer-extension, 0px));
        content: "";
        grid-column: 1;
        grid-row: 1;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: var(--cfmeu-sidebar-width);
        z-index: 0;
    }

    .cfmeu-member-area__nav {
        align-self: start;
        height: var(--cfmeu-member-sidebar-viewport-height, calc(100vh - var(--cfmeu-member-sidebar-sticky-top, 0px)));
        max-height: var(--cfmeu-member-sidebar-viewport-height, calc(100vh - var(--cfmeu-member-sidebar-sticky-top, 0px)));
        overflow-y: auto;
        overscroll-behavior-y: auto;
        position: sticky;
        top: var(--cfmeu-member-sidebar-sticky-top, 0px);
        z-index: 20;
    }

    .cfmeu-member-area__nav--fixed {
        left: var(--cfmeu-member-sidebar-fixed-left, 0px);
        pointer-events: auto;
        position: fixed;
        width: var(--cfmeu-member-sidebar-fixed-width, var(--cfmeu-sidebar-width));
        z-index: 89;
    }

    .cfmeu-member-area__main {
        grid-column: 2;
        grid-row: 1;
    }
}

.cfmeu-member-area__nav-link {
    align-items: center;
    background-color: transparent;
    border-bottom: 1px solid var(--cfmeu-charcoal-5);
    color: var(--cfmeu-charcoal-3);
    display: flex;
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h4-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: 0;
    gap: 16px;
    line-height: 1;
    min-height: var(--cfmeu-nav-row-height);
    min-width: 0;
    overflow: hidden;
    padding: 16px 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

.cfmeu-member-area__nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.cfmeu-member-area__nav-link:first-child {
    border-top: 1px solid var(--cfmeu-charcoal-5);
}

.cfmeu-member-area__nav-link:hover,
.cfmeu-member-area__nav-link:focus,
.cfmeu-member-area__nav-link--active {
    background-color: var(--cfmeu-white);
    color: var(--cfmeu-charcoal-1);
}

.cfmeu-member-area__nav-arrow {
    color: var(--cfmeu-charcoal-1);
    flex: 0 0 var(--cfmeu-sidebar-arrow-size);
    height: var(--cfmeu-sidebar-arrow-size);
    margin-left: auto;
    transition: color 300ms ease-in-out;
    width: var(--cfmeu-sidebar-arrow-size);
}

.cfmeu-member-area__nav-arrow-svg {
    display: block;
    height: 100%;
    width: 100%;
}

.cfmeu-member-area__nav-icon {
    align-items: center;
    background: var(--cfmeu-charcoal-3);
    border-radius: 50%;
    color: var(--cfmeu-white);
    display: inline-flex;
    flex: 0 0 var(--cfmeu-sidebar-icon-size);
    height: var(--cfmeu-sidebar-icon-size);
    justify-content: center;
    line-height: 1;
    opacity: 0.7;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out, opacity 300ms ease-in-out;
    width: var(--cfmeu-sidebar-icon-size);
}

.cfmeu-member-area__nav-link--active .cfmeu-member-area__nav-icon,
.cfmeu-member-area__nav-link:hover .cfmeu-member-area__nav-icon,
.cfmeu-member-area__nav-link:focus .cfmeu-member-area__nav-icon {
    background: var(--cfmeu-charcoal-1);
    opacity: 1;
}

.cfmeu-member-area__nav-icon--logout,
.cfmeu-member-area__nav-link--logout:hover .cfmeu-member-area__nav-icon--logout,
.cfmeu-member-area__nav-link--logout:focus .cfmeu-member-area__nav-icon--logout {
    background-color: transparent;
    background-image: url("../images/member-area/logout.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cfmeu-member-area__nav-svg {
    display: block;
    height: 24px;
    width: 24px;
}

.cfmeu-member-area__main {
    --cfmeu-member-main-padding-x: var(--cfmeu-content-padding-x);
    background: var(--cfmeu-white);
    min-width: 0;
    padding: var(--cfmeu-content-padding-y) var(--cfmeu-content-padding-x) 0;
}

.cfmeu-member-area-dashboard-content {
    max-width: none;
    min-width: 0;
    width: 100%;
}

.cfmeu-member-area-restricted {
    align-items: flex-start;
    background-color: var(--cfmeu-charcoal-7);
    background-image: radial-gradient(circle, rgba(13, 13, 13, 0.12) 0.6px, transparent 0.8px);
    background-position: 0 0;
    background-size: 4px 4px;
    display: flex;
    justify-content: center;
    margin: calc(-1 * var(--cfmeu-content-padding-y, 0px)) calc(-1 * var(--cfmeu-member-main-padding-x, 0px)) 0;
    min-height: 646px;
    padding: 50px 30px;
}

.cfmeu-member-area-restricted__card {
    align-items: center;
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 580px;
    min-height: 304px;
    padding: 46px 52px;
    text-align: center;
    width: 100%;
}

.cfmeu-member-area-restricted__icon {
    background: transparent url("../../icons/CFMEU-Membership-Page-Icon-Restricted-Access.svg") center / contain no-repeat;
    display: block;
    height: 50px;
    margin-bottom: 18px;
    width: 50px;
}

.cfmeu-member-area-restricted__card h2 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: 32px;
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.cfmeu-member-area-restricted__card p {
    color: var(--cfmeu-charcoal-2);
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    margin: 0 auto 26px;
    max-width: 500px;
}

.cfmeu-member-area-restricted__card .cfmeu-member-area__button {
    min-width: var(--cfmeu-button-width);
}

.cfmeu-member-area-panel {
    max-width: var(--cfmeu-content-inner-width);
}

.cfmeu-member-area-panel--dashboard {
    max-width: none;
}

.cfmeu-member-area-panel--dashboard > h2,
.cfmeu-member-area-panel--dashboard > .cfmeu-member-area__lead,
.cfmeu-member-area-panel--dashboard > p {
    max-width: var(--cfmeu-content-inner-width);
}

.cfmeu-member-area-panel h1,
.cfmeu-member-area-panel h2,
.cfmeu-member-area__login-panel h1 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-page-title-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-page-title-tracking);
    line-height: normal;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.cfmeu-member-area-panel h3 {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h3-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-h3-tracking);
    line-height: normal;
    margin: 5px 0 12px;
    text-transform: uppercase;
}

.cfmeu-member-area__lead {
    color: var(--cfmeu-charcoal-1);
    font-size: var(--cfmeu-body-size);
    font-weight: 700 !important;
    margin: 0 0 16px;
}

.cfmeu-member-area-panel p,
.cfmeu-member-area__login-panel p {
    color: var(--cfmeu-charcoal-2);
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    margin: 0 0 18px;
}

.cfmeu-member-area-actions,
.cfmeu-member-area-offers {
    display: grid;
    gap: var(--cfmeu-form-gap) var(--cfmeu-column-gap);
    grid-template-columns: repeat(2, minmax(0, 325px));
    margin-top: 28px;
}

.cfmeu-member-area-action,
.cfmeu-member-area-offers section {
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    color: var(--cfmeu-charcoal-1);
    min-height: 205px;
    padding: var(--cfmeu-card-padding);
    text-decoration: none;
}

.cfmeu-member-area-action {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: space-between;
    width: 325px;
}

.cfmeu-member-area-action strong {
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-h4-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: normal;
    text-transform: uppercase;
}

.cfmeu-member-area-dashboard-tiles {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 46px 0 66px;
    max-width: 100%;
}

.cfmeu-member-area-dashboard-tile {
    align-items: center;
    aspect-ratio: 325 / 205;
    background-color: var(--cfmeu-charcoal-1);
    background-position: center;
    background-size: cover;
    color: var(--cfmeu-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 205px;
    overflow: hidden;
    padding: 30px 24px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.cfmeu-member-area-dashboard-tile__default,
.cfmeu-member-area-dashboard-tile__hover {
    align-items: center;
    display: flex;
    flex-direction: column;
    inset: 0;
    justify-content: center;
    padding: 30px 24px;
    position: absolute;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 1;
}

.cfmeu-member-area-dashboard-tile__default {
    opacity: 1;
    transform: translateY(0);
}

.cfmeu-member-area-dashboard-tile__hover {
    opacity: 0;
    transform: translateY(10px);
}

.cfmeu-member-area-dashboard-tile:hover .cfmeu-member-area-dashboard-tile__default,
.cfmeu-member-area-dashboard-tile:focus .cfmeu-member-area-dashboard-tile__default {
    opacity: 0;
    transform: translateY(-10px);
}

.cfmeu-member-area-dashboard-tile:hover .cfmeu-member-area-dashboard-tile__hover,
.cfmeu-member-area-dashboard-tile:focus .cfmeu-member-area-dashboard-tile__hover {
    opacity: 1;
    transform: translateY(0);
}

.cfmeu-member-area-dashboard-tile__description {
    color: var(--cfmeu-white);
    font-size: var(--cfmeu-body-size);
    line-height: 1.45;
    max-width: 260px;
}

.cfmeu-member-area-dashboard-tile__hover-cta {
    color: var(--cfmeu-white);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    margin-top: 18px;
    text-transform: uppercase;
}

.cfmeu-member-area-dashboard-tile::before {
    background: rgba(13, 13, 13, 0.42);
    content: "";
    inset: 0;
    position: absolute;
    transition: background-color 160ms ease;
}

.cfmeu-member-area-dashboard-tile:hover::before,
.cfmeu-member-area-dashboard-tile:focus::before {
    background: rgba(13, 13, 13, 0.28);
}

.cfmeu-member-area-dashboard-tile--offers {
    background-image: var(--cfmeu-member-tile-offers-bg, url("../images/member-area/member-offers.jpg"));
}

.cfmeu-member-area-dashboard-tile--latest {
    background-image: var(--cfmeu-member-tile-latest-bg, url("../images/member-area/latest-branch.jpg"));
}

.cfmeu-member-area-dashboard-tile--help {
    background-image: var(--cfmeu-member-tile-help-bg, url("../images/member-area/need-help.jpg"));
}

.cfmeu-member-area-dashboard-tile__label {
    color: var(--cfmeu-white);
    font-family: var(--cfmeu-font-display) !important;
    font-size: 28px;
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-display-tracking);
    line-height: 1.04;
    max-width: 260px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.cfmeu-member-area-dashboard-tile__cta {
    align-items: center;
    color: var(--cfmeu-white);
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    gap: 8px;
    letter-spacing: var(--cfmeu-ui-tracking);
    margin-top: 18px;
    position: relative;
    text-transform: uppercase;
    z-index: 1;
}

.cfmeu-member-area-dashboard-tile__arrow {
    height: 20px;
    width: 20px;
}

.cfmeu-member-area-app-promo {
    margin: 0 0 72px;
    overflow: hidden;
}

.cfmeu-member-area-app-promo img {
    display: block;
    height: auto;
    width: 100%;
}

.cfmeu-member-area-campaign h3 {
    color: inherit;
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-page-title-size);
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-page-title-tracking);
    line-height: 1;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.cfmeu-member-area-campaign {
    display: block;
    max-width: 100%;
}

.cfmeu-member-area-campaign__copy {
    max-width: var(--cfmeu-content-inner-width);
    padding: 0 0 44px;
}

.cfmeu-member-area-campaign__copy p {
    max-width: 720px;
}

.cfmeu-member-area-campaign__image {
    background: var(--cfmeu-member-campaign-bg, url("../images/member-area/setting-the-pace.jpg")) center / cover no-repeat;
    aspect-ratio: 1920 / 800;
    min-height: 360px;
    width: 100%;
}

/* Native Divi dashboard layout. Each selector is scoped to the imported root class. */
.cfmeu-divi-dashboard.et_pb_section {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cfmeu-divi-dashboard > .et_pb_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.cfmeu-divi-dashboard > .et_pb_row > .et_pb_column {
    min-width: 0 !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro.et_pb_text,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro .et_pb_text_inner {
    margin: 0 !important;
    max-width: var(--cfmeu-content-inner-width);
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro h2,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy h3 {
    color: var(--cfmeu-charcoal-1) !important;
    font-family: var(--cfmeu-font-display) !important;
    font-size: var(--cfmeu-page-title-size) !important;
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-page-title-tracking) !important;
    line-height: 1 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro p,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy p {
    color: var(--cfmeu-charcoal-2) !important;
    display: block !important;
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size) !important;
    line-height: 1.45 !important;
    margin: 0 0 18px !important;
    max-width: 100% !important;
    opacity: 1 !important;
    overflow-wrap: anywhere;
    visibility: visible !important;
    white-space: normal !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro .cfmeu-divi-dashboard__lead,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy .cfmeu-divi-dashboard__lead {
    color: var(--cfmeu-charcoal-1) !important;
    font-weight: 700 !important;
}

.cfmeu-divi-dashboard > .cfmeu-divi-dashboard__cards.et_pb_row {
    display: grid !important;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 66px !important;
    margin-top: 46px !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card.et_pb_column {
    align-items: center;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 !important;
    min-height: 205px;
    overflow: hidden;
    padding: 30px 24px !important;
    position: relative;
    text-align: center;
    width: auto !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--offers.et_pb_column {
    background-image: var(--cfmeu-member-tile-offers-bg, url("../images/member-area/member-offers.jpg")) !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--latest.et_pb_column {
    background-image: var(--cfmeu-member-tile-latest-bg, url("../images/member-area/latest-branch.jpg")) !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--help.et_pb_column {
    background-image: var(--cfmeu-member-tile-help-bg, url("../images/member-area/need-help.jpg")) !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--offers.et_pb_column,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--latest.et_pb_column,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card--help.et_pb_column {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card::before {
    background: rgba(13, 13, 13, 0.42);
    content: "";
    inset: 0;
    position: absolute;
    transition: background-color 180ms ease-in-out;
    z-index: 0;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:hover::before,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:focus-within::before {
    background: rgba(13, 13, 13, 0.7);
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card > .et_pb_module,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card > .et_pb_button_module_wrapper {
    position: relative;
    z-index: 1;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card > .et_pb_button_module_wrapper {
    position: static !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-title.et_pb_text,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description.et_pb_text {
    margin: 0 !important;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
    width: 100%;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-title h3 {
    color: var(--cfmeu-white) !important;
    font-family: var(--cfmeu-font-display) !important;
    font-size: 28px !important;
    font-synthesis: none;
    font-weight: 400 !important;
    letter-spacing: var(--cfmeu-display-tracking) !important;
    line-height: 1.04 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description.et_pb_text {
    left: 24px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-42%);
    visibility: hidden;
    width: auto;
    z-index: 4;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .et_pb_text_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description p {
    color: var(--cfmeu-white) !important;
    font-family: var(--cfmeu-font-body) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    max-width: 290px;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .cfmeu-divi-dashboard__card-action {
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size) !important;
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking) !important;
    line-height: 1.2 !important;
    margin-top: 18px !important;
    text-transform: uppercase;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .cfmeu-divi-dashboard__card-action + .cfmeu-divi-dashboard__card-action {
    margin-top: 16px !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .cfmeu-divi-dashboard__card-action a {
    color: var(--cfmeu-white) !important;
    position: relative;
    text-decoration: none !important;
    z-index: 5;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .cfmeu-divi-dashboard__card-action a:hover,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description .cfmeu-divi-dashboard__card-action a:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:hover .cfmeu-divi-dashboard__card-title,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:focus-within .cfmeu-divi-dashboard__card-title {
    opacity: 0;
    transform: translateY(-10px);
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:hover .cfmeu-divi-dashboard__card-description,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:focus-within .cfmeu-divi-dashboard__card-description {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    visibility: visible;
}

.cfmeu-divi-dashboard .et_pb_button_module_wrapper {
    margin: 0 !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-link.et_pb_button_module_wrapper {
    position: static !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-link a.et_pb_button,
.cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__card-link {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--cfmeu-white) !important;
    cursor: pointer;
    display: flex !important;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    height: 100% !important;
    inset: 0;
    justify-content: center;
    letter-spacing: var(--cfmeu-ui-tracking) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    text-transform: uppercase;
    width: 100% !important;
    z-index: 3;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-link a.et_pb_button::after,
.cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__card-link::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%23fff'/%3E%3C/svg%3E") !important;
    background-position: calc(50% + 62px) center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    color: var(--cfmeu-white) !important;
    content: "Find Out More" !important;
    display: block !important;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size) !important;
    font-weight: 700 !important;
    left: 0;
    letter-spacing: var(--cfmeu-ui-tracking) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    opacity: 1 !important;
    position: absolute;
    right: 0;
    top: calc(50% + 46px);
    transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:has(.cfmeu-divi-dashboard__card-action):hover .cfmeu-divi-dashboard__card-link a.et_pb_button::after,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:has(.cfmeu-divi-dashboard__card-action):focus-within .cfmeu-divi-dashboard__card-link a.et_pb_button::after,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:has(.cfmeu-divi-dashboard__card-action):hover a.et_pb_button.cfmeu-divi-dashboard__card-link::after,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:has(.cfmeu-divi-dashboard__card-action):focus-within a.et_pb_button.cfmeu-divi-dashboard__card-link::after {
    opacity: 0 !important;
    transform: translateY(-8px);
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__card:focus-within {
    outline: 2px solid var(--cfmeu-charcoal-1);
    outline-offset: 3px;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-button a.et_pb_button::after,
.cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__campaign-button::after {
    display: none !important;
}

.cfmeu-divi-dashboard > .cfmeu-divi-dashboard__app-row.et_pb_row {
    aspect-ratio: 2238 / 1270;
    background-image: var(--cfmeu-member-app-bg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: none;
    margin-bottom: 72px !important;
}

.cfmeu-member-area--has-app-promo .cfmeu-divi-dashboard > .cfmeu-divi-dashboard__app-row.et_pb_row {
    display: block !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__app-anchor,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-image-anchor {
    display: none !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy.et_pb_text,
.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy .et_pb_text_inner {
    margin: 0 !important;
    max-width: var(--cfmeu-content-inner-width);
    min-width: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-button a.et_pb_button,
.cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__campaign-button {
    align-items: center;
    background: var(--cfmeu-charcoal-1) !important;
    border: 1px solid var(--cfmeu-charcoal-1) !important;
    border-radius: 0 !important;
    color: var(--cfmeu-white) !important;
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size) !important;
    font-weight: 700 !important;
    justify-content: center;
    letter-spacing: var(--cfmeu-ui-tracking) !important;
    line-height: 1 !important;
    min-height: var(--cfmeu-button-height);
    min-width: var(--cfmeu-button-width);
    padding: 0 16px !important;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, width 160ms ease;
    width: var(--cfmeu-button-width) !important;
}

body #page-container .cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-button a.et_pb_button:hover,
body #page-container .cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-button a.et_pb_button:focus,
body #page-container .cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-button a.et_pb_button:focus-visible,
body #page-container .cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__campaign-button:hover,
body #page-container .cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__campaign-button:focus,
body #page-container .cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__campaign-button:focus-visible {
    background-color: var(--cfmeu-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%230d0d0d'/%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 22px 22px !important;
    color: var(--cfmeu-charcoal-1) !important;
    padding-right: 38px !important;
    -webkit-text-fill-color: var(--cfmeu-charcoal-1) !important;
    width: var(--cfmeu-button-hover-width) !important;
}

.cfmeu-divi-dashboard > .cfmeu-divi-dashboard__campaign-image-row.et_pb_row {
    aspect-ratio: 1920 / 800;
    background-image: var(--cfmeu-member-campaign-bg, url("../images/member-area/setting-the-pace.jpg")) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    margin-top: 44px !important;
}

.cfmeu-member-area-addresses {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 30px;
}

.cfmeu-member-area-address-card {
    border: 1px solid var(--cfmeu-charcoal-6);
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: var(--cfmeu-card-padding);
}

.cfmeu-member-area-address-card h3 {
    margin: 0 0 22px;
}

.cfmeu-member-area-address-card address {
    color: var(--cfmeu-charcoal-3);
    font-style: normal;
    line-height: 1.65;
    margin-bottom: 28px;
}

.cfmeu-member-area-address-card .cfmeu-member-area__button {
    margin-top: auto;
}

.cfmeu-member-area-address-form {
    display: grid;
    gap: var(--cfmeu-form-gap) var(--cfmeu-column-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 32px;
    max-width: var(--cfmeu-content-inner-width);
}

.cfmeu-member-area-address-form__field {
    color: var(--cfmeu-charcoal-3);
    display: flex;
    flex-direction: column;
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    gap: var(--cfmeu-label-gap);
}

.cfmeu-member-area-address-form__field--wide,
.cfmeu-member-area-address-form__country,
.cfmeu-member-area-address-form__actions {
    grid-column: 1 / -1;
}

.cfmeu-member-area-address-form input {
    background: var(--cfmeu-white);
    border: var(--cfmeu-control-border-width) solid var(--cfmeu-charcoal-6);
    border-radius: 0;
    box-shadow: none;
    color: var(--cfmeu-charcoal-2);
    font: inherit;
    height: var(--cfmeu-control-height);
    padding: 10px;
    width: 100%;
}

.cfmeu-member-area-address-form__country {
    border-bottom: 1px solid var(--cfmeu-charcoal-6);
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-h6-size);
    font-weight: 700;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.cfmeu-member-area-address-form__actions {
    align-items: center;
    display: flex;
    gap: 18px;
}

.cfmeu-member-area__text-link {
    color: var(--cfmeu-charcoal-2);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700;
    text-transform: uppercase;
}

.cfmeu-member-area-notice {
    border: 1px solid var(--cfmeu-charcoal-6);
    margin: 0 0 24px;
    padding: 14px 16px;
}

.cfmeu-member-area-notice--success {
    background: #f2f8f3;
    border-color: #8bbd94;
    color: #215d2d;
}

.cfmeu-member-area-notice--error {
    background: #fff3f3;
    border-color: #c94b4b;
    color: #851f1f;
}

.cfmeu-member-area-offers span {
    color: var(--cfmeu-charcoal-3);
    display: block;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    text-transform: uppercase;
}

.cfmeu-member-area__button,
.cfmeu-member-area .button,
.cfmeu-member-area button:not(.cfmeu-sso-no-style),
.cfmeu-member-area input[type="submit"] {
    align-items: center;
    background: var(--cfmeu-charcoal-1);
    border: 0;
    border-radius: 0;
    color: var(--cfmeu-white);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    justify-content: center;
    min-height: var(--cfmeu-button-height);
    min-width: 0;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 160ms ease, width 160ms ease;
    width: var(--cfmeu-button-width);
}

.cfmeu-member-area__button:hover,
.cfmeu-member-area__button:focus,
.cfmeu-member-area .button:hover,
.cfmeu-member-area .button:focus,
.cfmeu-member-area button:not(.cfmeu-sso-no-style):hover,
.cfmeu-member-area button:not(.cfmeu-sso-no-style):focus,
.cfmeu-member-area input[type="submit"]:hover,
.cfmeu-member-area input[type="submit"]:focus {
    background-color: var(--cfmeu-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M20.668 6.666H14.668L21.335 16l-6.667 9.333h6L27.335 16zM11.332 6.666h-6L11.999 16l-6.667 9.333h6L17.999 16z' fill='%230d0d0d'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    border: 1px solid var(--cfmeu-charcoal-1);
    color: var(--cfmeu-charcoal-1);
    padding-right: 38px;
    width: var(--cfmeu-button-hover-width);
}

.cfmeu-member-area label {
    color: var(--cfmeu-charcoal-3);
    display: block;
    font-size: var(--cfmeu-body-size);
}

.cfmeu-member-area input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.cfmeu-member-area select,
.cfmeu-member-area textarea {
    background: var(--cfmeu-white);
    border: var(--cfmeu-control-border) solid var(--cfmeu-charcoal-6);
    border-radius: 0;
    color: var(--cfmeu-charcoal-1);
    font-family: var(--cfmeu-font-body) !important;
    font-size: var(--cfmeu-body-size);
    min-height: var(--cfmeu-control-height);
    padding: 8px 10px;
    width: 100%;
}

.cfmeu-member-area textarea {
    min-height: 102px;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form span {
    display: block;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form__select select {
    min-height: var(--cfmeu-control-height);
    width: 166px;
}

.cfmeu-member-area .cfmeu-ticketing-quantity {
    align-items: flex-start;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-stepper {
    align-items: center;
    display: flex;
    gap: 12px;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-stepper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    border: 0 !important;
    box-shadow: none;
    color: var(--cfmeu-charcoal-1);
    flex: 0 0 20px;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-body-size);
    font-weight: 700 !important;
    height: 40px;
    line-height: 40px;
    max-width: 20px;
    min-height: 40px;
    min-width: 20px;
    padding: 0;
    text-align: center;
    width: 20px !important;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-stepper input[type="number"]::-webkit-inner-spin-button,
.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cfmeu-member-area .cfmeu-ticketing-stepper button.cfmeu-sso-no-style {
    align-items: center;
    background: var(--cfmeu-white);
    background-image: none;
    border: 1px solid var(--cfmeu-charcoal-5);
    border-radius: 0;
    color: var(--cfmeu-charcoal-1);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 40px;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: 24px;
    font-weight: 700 !important;
    height: 40px;
    justify-content: center;
    line-height: 1;
    min-height: 40px;
    min-width: 40px;
    padding: 0;
    text-align: center;
    width: 40px;
}

.cfmeu-member-area .cfmeu-ticketing-stepper button.cfmeu-sso-no-style:hover,
.cfmeu-member-area .cfmeu-ticketing-stepper button.cfmeu-sso-no-style:focus {
    background: var(--cfmeu-white);
    background-image: none;
    border-color: var(--cfmeu-charcoal-1);
    color: var(--cfmeu-charcoal-1);
    padding: 0;
    width: 40px;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-portal__button {
    align-self: stretch;
    background: var(--cfmeu-charcoal-2);
    background-image: none;
    border: 0;
    color: var(--cfmeu-white);
    min-height: 48px;
    padding: 0 16px;
    width: 100%;
}

.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-portal__button:hover,
.cfmeu-member-area .cfmeu-ticketing-claim-form .cfmeu-ticketing-portal__button:focus {
    background: var(--cfmeu-charcoal-1);
    background-image: none;
    border: 0;
    color: var(--cfmeu-white);
    padding: 0 16px;
    width: 100%;
}

.cfmeu-member-area #pay_dues_form [id^="sidebar_step_"],
.cfmeu-member-area #change_your_details_form [id^="sidebar_step_"] {
    display: none !important;
}

.cfmeu-member-area .cfmeu-member-legacy-form,
.cfmeu-member-area .cfmeu-member-legacy-form .form_container {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

.cfmeu-member-area .cfmeu-member-legacy-form .fatal_error_container {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

.cfmeu-member-area .cfmeu-member-legacy-form .fatal_error_container > aside {
    display: none !important;
}

.cfmeu-member-area .cfmeu-member-legacy-form #pay_dues_form,
.cfmeu-member-area .cfmeu-member-legacy-form #change_your_details_form {
    height: auto !important;
    margin: 0 !important;
    max-width: var(--cfmeu-content-inner-width) !important;
    min-height: 0 !important;
    width: 100% !important;
}

.cfmeu-member-area-woocommerce {
    max-width: var(--cfmeu-content-inner-width);
    width: 100%;
}

.cfmeu-purchases {
    margin: calc(-1 * var(--cfmeu-content-padding-y)) calc(-1 * var(--cfmeu-member-main-padding-x)) 0;
    max-width: none;
    width: auto;
}

.cfmeu-purchases__orders {
    padding: 50px 100px 40px;
}

.cfmeu-purchases h2 {
    margin: 0 0 18px;
}

.cfmeu-purchases__table-wrap {
    overflow-x: auto;
}

.cfmeu-purchases__orders table {
    margin: 0;
    min-width: 760px;
    table-layout: fixed;
    width: 100%;
}

.cfmeu-purchases__orders th,
.cfmeu-purchases__orders td {
    overflow-wrap: anywhere;
    white-space: normal;
}

.cfmeu-purchases__orders th:last-child,
.cfmeu-purchases__orders td:last-child {
    text-align: right;
}

.cfmeu-purchases__action .cfmeu-member-area__button {
    min-width: 100px;
    padding: 12px 16px;
}

.cfmeu-purchases__empty {
    color: var(--cfmeu-charcoal-3);
    padding: 32px 12px !important;
    text-align: center !important;
}

.cfmeu-purchases__addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 405px;
}

.cfmeu-purchases__addresses .cfmeu-member-area-address-card {
    align-items: flex-start;
    border: 0;
    display: flex;
    flex-direction: column;
    padding: 78px 100px;
}

.cfmeu-purchases__addresses .cfmeu-member-area-address-card:nth-child(2) {
    background-image: radial-gradient(#bdbdbd 0.7px, transparent 0.7px);
    background-size: 4px 4px;
}

.cfmeu-purchases__addresses address {
    flex: 1;
    font-style: normal;
    margin-bottom: 28px;
}

.cfmeu-purchases__merch > h2 {
    align-items: center;
    background: #0d0d0d;
    color: #fff;
    display: flex;
    font-size: 25px;
    justify-content: center;
    line-height: 1.2;
    margin: 0;
    min-height: 70px;
    overflow-wrap: anywhere;
    padding: 18px 24px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.cfmeu-purchases__merch,
.cfmeu-purchases__products,
.cfmeu-purchases__promo {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
}

.cfmeu-purchases__products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 528px;
    padding: 45px 74px;
}

.cfmeu-purchases__product {
    align-items: center;
    color: #0d0d0d;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
}

.cfmeu-purchases__product img,
.cfmeu-purchases__product-placeholder {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    margin-bottom: 10px;
    object-fit: contain;
    transition: transform 180ms ease;
    width: 100%;
}

.cfmeu-purchases__product:hover img,
.cfmeu-purchases__product:focus-visible img {
    transform: translateY(-5px);
}

.cfmeu-purchases__product strong {
    font-family: var(--cfmeu-font-display);
    font-size: 20px;
    text-transform: uppercase;
}

.cfmeu-purchases__product-price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    line-height: 1.4;
    min-height: 23px;
}

.cfmeu-purchases__product-price del {
    color: var(--cfmeu-charcoal-3);
    opacity: 0.75;
}

.cfmeu-purchases__product-price ins {
    background: transparent;
    color: #0d0d0d;
    font-weight: 700;
    text-decoration: none;
}

.cfmeu-purchases__product-price .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    white-space: nowrap;
    width: 1px;
}

.cfmeu-purchases__promo {
    aspect-ratio: 1165 / 486;
    overflow: hidden;
    position: relative;
}

.cfmeu-purchases__promo > img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.cfmeu-purchases__shop-button {
    background: #fa574d;
    border: 1px solid transparent;
    bottom: 17%;
    color: #fff;
    font-family: var(--cfmeu-font-ui);
    font-size: 13px;
    font-weight: 700;
    left: 50%;
    padding: 15px 24px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.cfmeu-purchases__shop-button span {
    display: inline-block;
    margin-left: 8px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 160ms ease, opacity 160ms ease;
    vertical-align: bottom;
}

.cfmeu-purchases__shop-button:hover,
.cfmeu-purchases__shop-button:focus-visible {
    border-color: #0d0d0d;
    color: #0d0d0d;
}

.cfmeu-purchases__shop-button:hover span,
.cfmeu-purchases__shop-button:focus-visible span {
    max-width: 20px;
    opacity: 1;
}

.cfmeu-member-area .woocommerce {
    width: 100%;
}

.cfmeu-member-area .woocommerce-MyAccount-navigation {
    display: none !important;
}

.cfmeu-member-area .woocommerce-MyAccount-content {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}

.cfmeu-member-area .woocommerce-MyAccount-content > p:first-child,
.cfmeu-member-area .woocommerce-notices-wrapper:empty {
    margin-top: 0;
}

/* Shadow accounts are managed by SSO, so WooCommerce account-edit prompts do not apply. */
.cfmeu-member-area .woocommerce-MyAccount-content a[href*="edit-account"] {
    display: none !important;
}

.cfmeu-member-area .woocommerce-MyAccount-content > p:has(a[href*="edit-account"]) {
    display: none !important;
}

.cfmeu-order-details {
    margin: calc(-1 * var(--cfmeu-content-padding-y)) calc(-1 * var(--cfmeu-member-main-padding-x)) 0;
    max-width: none;
    width: auto;
}

.cfmeu-order-details__summary {
    padding: 50px 100px 70px;
}

.cfmeu-order-details__summary > h2 {
    font-family: var(--cfmeu-font-display);
    font-size: 48px;
    margin: 0 0 30px;
    text-transform: uppercase;
}

.cfmeu-order-details__table-wrap {
    overflow-x: auto;
}

.cfmeu-order-details__table-wrap table {
    margin: 0;
    min-width: 640px;
    table-layout: fixed;
}

.cfmeu-order-details__table-wrap thead th {
    border-top: 1px solid var(--cfmeu-grey-2);
}

.cfmeu-order-details__table-wrap th:last-child,
.cfmeu-order-details__table-wrap td:last-child {
    text-align: right;
}

.cfmeu-order-details__table-wrap tbody td {
    height: 72px;
}

.cfmeu-order-details__quantity {
    white-space: nowrap;
}

.cfmeu-order-details__total-row {
    background: var(--cfmeu-grey-1);
}

.cfmeu-order-details__total-row th,
.cfmeu-order-details__total-row td {
    background: var(--cfmeu-grey-1) !important;
    border-bottom: 1px solid var(--cfmeu-white) !important;
    height: 58px;
}

.cfmeu-order-details__total-row--order_total,
.cfmeu-order-details__total-row--order-total {
    background: #0d0d0d;
    color: #fff;
}

.cfmeu-order-details__total-row--order_total th,
.cfmeu-order-details__total-row--order_total td,
.cfmeu-order-details__total-row--order-total th,
.cfmeu-order-details__total-row--order-total td {
    background: #0d0d0d !important;
    border-bottom: 0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    height: 76px;
}

.cfmeu-order-details__total-row--order_total th *,
.cfmeu-order-details__total-row--order_total td *,
.cfmeu-order-details__total-row--order-total th *,
.cfmeu-order-details__total-row--order-total td * {
    color: #fff !important;
}

.cfmeu-order-details__total-row--order_total th,
.cfmeu-order-details__total-row--order-total th {
    text-transform: uppercase;
}

.cfmeu-order-details__note {
    border-bottom: 1px solid var(--cfmeu-grey-2);
    margin: 0;
    padding: 30px 22px;
}

.cfmeu-order-details__note strong {
    color: #0d0d0d;
    text-transform: uppercase;
}

.cfmeu-order-details__actions {
    border-bottom: 1px solid var(--cfmeu-grey-2);
    padding: 18px 0;
}

.cfmeu-member-area .cfmeu-order-details__actions p.order-again {
    margin: 0 !important;
}

.cfmeu-member-area .cfmeu-order-details__actions p.order-again > a.button {
    align-items: center !important;
    background: var(--cfmeu-charcoal-1) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--cfmeu-white) !important;
    display: inline-flex !important;
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size) !important;
    font-weight: 700 !important;
    justify-content: center !important;
    letter-spacing: var(--cfmeu-ui-tracking) !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: var(--cfmeu-button-height) !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    width: var(--cfmeu-button-width) !important;
}

.cfmeu-member-area .cfmeu-order-details__actions p.order-again > a.button:hover,
.cfmeu-member-area .cfmeu-order-details__actions p.order-again > a.button:focus-visible {
    background-color: var(--cfmeu-white) !important;
    background-image: none !important;
    border: 1px solid var(--cfmeu-charcoal-1) !important;
    color: var(--cfmeu-charcoal-1) !important;
    padding: 0 16px !important;
    width: var(--cfmeu-button-width) !important;
}

.cfmeu-member-area .cfmeu-order-details__actions p.order-again > a.button::before,
.cfmeu-member-area .cfmeu-order-details__actions p.order-again > a.button::after {
    content: none !important;
    display: none !important;
}

.cfmeu-order-details__addresses {
    border-top: 1px solid var(--cfmeu-grey-2);
}

.cfmeu-order-details--unavailable .cfmeu-member-area-notice {
    margin-bottom: 24px;
}

.cfmeu-member-area .woocommerce-Addresses {
    display: grid;
    gap: var(--cfmeu-form-gap) var(--cfmeu-column-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cfmeu-member-area .woocommerce-Address {
    min-width: 0;
}

.cfmeu-member-area .woocommerce-Address-title {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.cfmeu-member-area table,
.cfmeu-member-area .woocommerce table.shop_table {
    border: 0;
    border-collapse: collapse;
    color: var(--cfmeu-charcoal-1);
    font-size: var(--cfmeu-body-size);
    margin: 0 0 var(--cfmeu-form-gap);
    width: 100%;
}

.cfmeu-member-area th,
.cfmeu-member-area td,
.cfmeu-member-area .woocommerce table.shop_table th,
.cfmeu-member-area .woocommerce table.shop_table td {
    border: 0;
    border-bottom: 1px solid var(--cfmeu-grey-2);
    padding: 14px 12px;
    text-align: left;
}

.cfmeu-member-area th,
.cfmeu-member-area .woocommerce table.shop_table th {
    color: var(--cfmeu-charcoal-3);
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    height: var(--cfmeu-table-header-height);
    text-transform: uppercase;
}

.cfmeu-member-area td,
.cfmeu-member-area .woocommerce table.shop_table td {
    height: var(--cfmeu-table-row-height);
}

.cfmeu-member-area .cfmeu-ticketing-ticket-table {
    margin: 0;
    min-width: 856px;
    table-layout: fixed;
    width: 856px;
}

.cfmeu-member-area .cfmeu-ticketing-ticket-table th,
.cfmeu-member-area .cfmeu-ticketing-ticket-table td {
    border-bottom: 1px solid var(--cfmeu-grey-2);
    color: var(--cfmeu-charcoal-3);
    font-size: var(--cfmeu-body-size);
    height: var(--cfmeu-table-row-height);
    padding: 0 10px;
}

.cfmeu-member-area .cfmeu-ticketing-ticket-table th {
    font-family: var(--cfmeu-font-ui) !important;
    font-size: var(--cfmeu-small-size);
    font-weight: 700 !important;
    letter-spacing: var(--cfmeu-ui-tracking);
    height: var(--cfmeu-table-header-height);
    text-transform: uppercase;
}

.cfmeu-member-area--login {
    background: var(--cfmeu-charcoal-7);
    max-width: 100%;
    padding: 48px 20px;
}

.cfmeu-member-area__login-panel {
    background: var(--cfmeu-white);
    border: 1px solid var(--cfmeu-grey-2);
    margin: 0 auto;
    max-width: 520px;
    padding: var(--cfmeu-card-padding);
    text-align: center;
}

@media (max-width: 1024px) {
    .cfmeu-member-area__hero,
    .cfmeu-member-area__hero--stuck,
    .cfmeu-member-area__hero--hidden {
        box-shadow: none;
        pointer-events: auto;
        position: relative;
        top: auto;
        transform: none;
        transition: none;
        will-change: auto;
        z-index: auto;
    }

    .cfmeu-member-area__hero-sentinel {
        display: none;
    }

    .cfmeu-member-area__body {
        grid-template-columns: 1fr;
    }

    .cfmeu-member-area__nav {
        border-bottom: 1px solid var(--cfmeu-charcoal-5);
        border-right: 0;
        display: flex;
        overflow-x: auto;
        padding: 0;
        position: relative;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        z-index: 1;
    }

    .cfmeu-member-area__nav-link {
        border-right: 1px solid var(--cfmeu-charcoal-5);
        flex: 0 0 230px;
        scroll-snap-align: start;
        white-space: normal;
    }

    .cfmeu-member-area__main {
        --cfmeu-member-main-padding-x: 24px;
        padding: var(--cfmeu-content-padding-y) 24px 0;
    }

    .cfmeu-divi-dashboard > .cfmeu-divi-dashboard__cards.et_pb_row {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card.et_pb_column {
        aspect-ratio: 16 / 7;
        min-height: 260px;
        width: 100% !important;
    }

    .cfmeu-member-area-app-promo {
        padding-left: 24px;
        padding-right: 24px;
    }

    .cfmeu-purchases__orders,
    .cfmeu-purchases__addresses .cfmeu-member-area-address-card {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cfmeu-order-details__summary {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cfmeu-purchases__products {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 800px) {
    .cfmeu-member-area__hero dl {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .cfmeu-member-area__hero dl div,
    .cfmeu-member-area__hero dl div:first-child,
    .cfmeu-member-area__hero dl div:last-child {
        border-left: 0;
        border-right: 0;
        min-width: 0;
        padding: 0;
        white-space: normal;
    }
}

@media (max-width: 700px) {
	.cfmeu-member-area__main {
		--cfmeu-member-main-padding-x: 18px;
	}

	.cfmeu-purchases__addresses,
	.cfmeu-purchases__products {
		grid-template-columns: 1fr;
	}

	.cfmeu-purchases__addresses .cfmeu-member-area-address-card {
		min-height: 300px;
		padding: 48px 24px;
	}

	.cfmeu-purchases__orders {
		padding: 44px 24px;
	}

	.cfmeu-purchases__orders thead {
		display: none;
	}

	.cfmeu-purchases__orders tr,
	.cfmeu-purchases__orders td {
		display: block;
		height: auto;
		text-align: right !important;
	}

	.cfmeu-purchases__orders td::before {
		content: attr(data-label);
		float: left;
		font-weight: 700;
		text-transform: uppercase;
	}

	.cfmeu-purchases__orders td:last-child::before {
		content: none;
	}

	.cfmeu-purchases__products {
		padding: 30px 20px;
	}

	.cfmeu-purchases__product {
		margin: 0 auto;
		max-width: 340px;
	}

	.cfmeu-order-details__summary {
		padding: 44px 24px 50px;
	}

	.cfmeu-order-details__summary > h2 {
		font-size: 36px;
	}

	.cfmeu-order-details__note {
		padding-left: 0;
		padding-right: 0;
	}

	.cfmeu-purchases__promo {
		aspect-ratio: 4 / 3;
	}

	.cfmeu-purchases__promo > img {
		object-position: center;
	}

    .cfmeu-member-area__hero-lower {
        align-items: center;
        flex-direction: column;
        gap: 18px;
    }

    .cfmeu-member-area__hero-lower .cfmeu-member-area__contact {
        flex: 0 1 auto;
        text-align: center;
        width: 100%;
    }
    .cfmeu-member-area-addresses,
    .cfmeu-member-area-address-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .cfmeu-member-area-address-form__field--wide,
    .cfmeu-member-area-address-form__country,
    .cfmeu-member-area-address-form__actions {
        grid-column: auto;
    }

    .cfmeu-member-area-address-form__actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .cfmeu-member-area__hero {
        height: auto !important;
        min-height: 0 !important;
        padding: 36px 18px 32px !important;
    }

    .cfmeu-member-area__hero h1 {
        font-size: clamp(24px, 8vw, var(--cfmeu-page-title-size));
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .cfmeu-member-area__main {
        padding: 34px 18px 0;
    }

    .cfmeu-member-area-restricted {
        margin-bottom: 0;
        min-height: 480px;
        padding: 34px 18px;
    }

    .cfmeu-member-area-restricted__card {
        min-height: 280px;
        padding: 38px 24px;
    }

    .cfmeu-member-area-restricted__card h2 {
        font-size: 28px;
    }

    .cfmeu-member-area__nav-link {
        flex-basis: clamp(188px, 68vw, 240px);
        gap: 12px;
        padding: 16px 18px;
    }

    .cfmeu-member-area__nav-arrow {
        display: none;
    }

    .cfmeu-member-area__nav-label {
        overflow-wrap: normal;
    }

    .cfmeu-member-area-actions,
    .cfmeu-member-area-offers,
    .cfmeu-member-area-dashboard-tiles,
    .cfmeu-member-area-app-promo,
    .cfmeu-member-area-campaign,
    .cfmeu-member-area .woocommerce-Addresses {
        grid-template-columns: 1fr;
    }

    .cfmeu-member-area-dashboard-tiles {
        gap: 16px;
        margin: 32px 0 46px;
    }

    .cfmeu-divi-dashboard > .cfmeu-divi-dashboard__cards.et_pb_row {
        gap: 16px;
        margin-bottom: 46px !important;
        margin-top: 32px !important;
    }

    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card.et_pb_column {
        aspect-ratio: 1;
        min-height: 300px;
        padding: 24px 18px !important;
    }

    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description.et_pb_text {
        left: 18px;
        right: 18px;
    }

    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro h2,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy h3,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-title h3 {
        font-size: 28px !important;
    }

    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__intro p,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__campaign-copy p {
        max-width: calc(100vw - 36px) !important;
        width: 100% !important;
    }

    .cfmeu-divi-dashboard > .cfmeu-divi-dashboard__app-row.et_pb_row {
        margin-bottom: 46px !important;
    }

    .cfmeu-divi-dashboard > .cfmeu-divi-dashboard__campaign-image-row.et_pb_row {
        margin-top: 30px !important;
    }

    .cfmeu-member-area-dashboard-tile {
        min-height: 190px;
    }

    .cfmeu-member-area-dashboard-tile__label,
    .cfmeu-member-area-campaign h3 {
        font-size: 28px;
    }

    .cfmeu-member-area-app-promo {
        margin-bottom: 46px;
    }

    .cfmeu-member-area-campaign {
        gap: 26px;
    }

    .cfmeu-member-area-campaign__image {
        min-height: 200px;
    }

    .cfmeu-member-area-action {
        min-height: 150px;
        width: 100%;
    }

    .cfmeu-member-area table,
    .cfmeu-member-area .woocommerce table.shop_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Divi Theme Compatibility
   ========================================================================== */

/* The member shell owns its outer spacing; remove Divi gaps around it. */
body .et_pb_section:has(.cfmeu-member-area),
body .et_pb_row:has(.cfmeu-member-area),
body .et_pb_column:has(.cfmeu-member-area),
body .et_pb_module:has(.cfmeu-member-area),
body .et_pb_code_inner:has(> .cfmeu-member-area),
body .et_pb_text_inner:has(> .cfmeu-member-area) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

body .et_pb_module:has(.cfmeu-member-area) > p:empty,
body .et_pb_code_inner:has(> .cfmeu-member-area) > p:empty,
body .et_pb_text_inner:has(> .cfmeu-member-area) > p:empty {
    display: none !important;
}

/* Ensure SSO forms work well within Divi modules */
.et_pb_section .cfmeu-sso-login-container {
    margin: 0;
}

.et_pb_row .cfmeu-sso-login-container {
    width: 100%;
}

/* Override Divi form styles if needed */
.et_pb_contact_form .cfmeu-sso-login-container {
    background: transparent;
    box-shadow: none;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus indicators - Scoped to SSO container */
.cfmeu-sso-login-container .sso-login-btn:focus,
.cfmeu-sso-login-container .form-group input:focus,
.cfmeu-sso-login-container .form-group select:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .cfmeu-sso-login-container .sso-login-form {
        border: 2px solid #000000;
    }

    .cfmeu-sso-login-container .form-group input,
    .cfmeu-sso-login-container .form-group select {
        border: 2px solid #000000;
    }

    .cfmeu-sso-login-container .sso-login-btn {
        border: 2px solid #000000;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .cfmeu-sso-login-container .sso-login-btn,
    .cfmeu-sso-login-container .form-group input,
    .cfmeu-sso-login-container .form-group select,
    .cfmeu-sso-login-container .sso-dashboard-btn,
    .cfmeu-sso-login-container .sso-logout-btn,
    .cfmeu-member-area__nav-link,
    .cfmeu-member-area__nav,
    .cfmeu-member-area__nav-arrow,
    .cfmeu-member-area__nav-icon,
    .cfmeu-member-area__hero,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card::before,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-title.et_pb_text,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-description.et_pb_text,
    .cfmeu-divi-dashboard .cfmeu-divi-dashboard__card-link a.et_pb_button::after,
    .cfmeu-divi-dashboard a.et_pb_button.cfmeu-divi-dashboard__card-link::after {
        transition: none;
    }

    @keyframes cfmeu-sso-spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes cfmeu-sso-slideDown {

        from,
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}