/* ==========================================================
   BROOKE HOUSE - MEMBERSHIP PRO CSS
   Primary: #454F34
   Font: Inter
   ========================================================== */


/* ==========================================================
   1. MEMBERSHIP PRO - PAGE TITLES
   ========================================================== */

/* Hide default Membership Pro signup page title */
#osm-signup-page > .osm-page-title {
    display: none !important;
}


/* ==========================================================
   2. MEMBERSHIP PRO - PLAN CARDS
   ========================================================== */

.osm-container .osm-item-title a,
.osm-container .osm-item-title a:hover,
.osm-container .osm-item-title a:focus {
    color: #454F34 !important;
}


/* ==========================================================
   3. MEMBERSHIP PRO - FORM FIELDS
   ========================================================== */

.osm-container .form-control {
    width: 70% !important;
}

.osm-container .form-group input.checkbox,
.osm-container .form-group input.radio,
.osm-container .form-group select {
    display: inline-block;
    width: 70% !important;
}

.osm-container .form-group .checkbox {
    width: 30em;
    max-width: 100%;
}


/* ==========================================================
   4. MEMBERSHIP PRO - PAYMENT TERMS
   ========================================================== */

.osm-container .osm-payment-terms {
    display: none !important;
}

.osm-container #osm-regular-amount-container,
.osm-container #payment_method_container {
    display: none !important;
}


/* ==========================================================
   5. MEMBERSHIP PRO - SIGN UP BUTTON
   ========================================================== */

.osm-taskbar .btn-primary {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 19px !important;
    text-decoration: underline;
    padding: 8px 20px;
    transition: opacity 0.2s ease;
}

.osm-taskbar .btn-primary:hover,
.osm-taskbar .btn-primary:focus {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 0.7;
}


/* ==========================================================
   6. MEMBERSHIP PRO - DETAILS BUTTON
   ========================================================== */

.osm-taskbar .btn-secondary {
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border-radius: 19px !important;
    text-decoration: underline;
    padding: 8px 20px;
    transition: opacity 0.2s ease;
}

.osm-taskbar .btn-secondary:hover,
.osm-taskbar .btn-secondary:focus {
    background-color: #4a4a4a !important;
    border-color: #4a4a4a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 0.7;
}


/* ==========================================================
   7. MEMBERSHIP PRO - PROCESS SUBSCRIPTION BUTTON
   ========================================================== */

.osm-container .form-actions .btn-primary,
.osm-container #btn-submit {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 19px !important;
    padding: 8px 20px !important;
    transition: opacity 0.2s ease;
}

.osm-container .form-actions .btn-primary:hover,
.osm-container .form-actions .btn-primary:focus,
.osm-container #btn-submit:hover,
.osm-container #btn-submit:focus {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 0.7;
}


/* ==========================================================
   8. MEMBERSHIP PRO - MEMBERS LIST
   ========================================================== */

.osm-members-list-osm-container fieldset.filters .btn.btn-primary {
    background: #454F34 !important;
    border: 2px solid #454F34 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 10px 24px !important;
    font-family: 'Inter', sans-serif;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease;
}

.osm-members-list-osm-container fieldset.filters .btn.btn-primary:hover,
.osm-members-list-osm-container fieldset.filters .btn.btn-primary:focus,
.osm-members-list-osm-container fieldset.filters .btn.btn-primary:active {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    opacity: 0.7;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Active primary buttons */
.osm-container .btn.btn-primary:active,
.osm-container .btn.btn-primary.active {
    background: #454F34 !important;
    border-color: #454F34 !important;
    color: #ffffff !important;
}

/* Space between filters and members table */
.osm-container #adminForm table.osm-responsive-table {
    margin-top: 25px !important;
}


/* ==========================================================
   9. MEMBERSHIP PRO - CHECKBOXES
   ========================================================== */

.osm-container .form-check-input:checked {
    background-color: #454F34 !important;
    border-color: #454F34 !important;
}

.osm-container .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}