/* ==========================================================================
   1. OVERRIDE MENU ITEM COLOR SETTING (#f3f3f3) AND FORCE TRANSPARENCY
   ========================================================================== */
.osm-container .osm-plan-header,
.osm-container .osm-plan-price {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ==========================================================================
   2. MAIN TABLE CONTAINERS: THE DARK TRANSPARENT GLASS LOOK
   ========================================================================== */
.osm-container .osm-plan {
    background: rgba(20, 20, 20, 0.85) !important; 
    backdrop-filter: blur(12px) !important;        
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 24px !important;               
    padding: 45px 35px !important;                
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    margin-bottom: 30px !important;
    display: flex !important;                     
    flex-direction: column !important;            
    align-items: flex-start !important;           /* Structural container left alignment anchor */
    text-align: left !important;
    visibility: visible !important;
}

/* Interactive Hover Focus State */
.osm-container .osm-plan:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   3. HIDE THE RECOMMENDED TEXT RIBBON BANNER ELEMENTS
   ========================================================================== */
.osm-container p.plan-recommended {
    display: none !important;                     
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.osm-container .osm-plan-recommended {
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transform: none !important; 
}

/* ==========================================================================
   4. TYPOGRAPHY & STRIP ALL INLINE HORIZONTAL MARGIN OFFSET VARIATIONS
   ========================================================================== */
.osm-container .osm-plan-header,
.osm-container .osm-plan-price,
.osm-container .osm-plan-short-description {
    width: 100% !important;                       
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
}

/* Header Titles */
.osm-container .osm-plan-title {
    color: #ffffff !important;                     
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;                  
}

/* Plan Price Numbers & Underlying Paragraph Selectors */
.osm-container .osm-plan-price h2,
.osm-container .osm-plan-price .price,
.osm-container .osm-plan-price h2 p {
    color: #ffffff !important;                     
    font-size: 34px !important;
    font-weight: 800 !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    text-align: left !important;    
    display: block !important;
}

/* Time Intervals (e.g. /Month, /12 Months) Reset Alignment */
.osm-container .osm-plan-price sub,
.osm-container .osm-plan-price small {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;   
    bottom: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    margin-left: 2px !important; /* Elegant structural gap adjacent to numeric code digits */
    padding-left: 0 !important;
}

/* ==========================================================================
   5. FEATURE DESCRIPTIONS: REMOVE INDENTATIONS FOR BULLETS AND TEXT LINES
   ========================================================================== */
.osm-container .osm-plan-short-description,
.osm-container .osm-plan-short-description p,
.osm-container .osm-plan-short-description ul,
.osm-container .osm-plan-short-description ul li {
    color: rgba(255, 255, 255, 0.9) !important;   
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Total Reset of Layout Grid Unordered Lists */
.osm-container .osm-plan-short-description ul {
    list-style-type: none !important;            
    padding: 0 !important;                       
    margin: 0 !important;
    width: 100% !important;
}

.osm-container .osm-plan-short-description ul li {
    padding: 6px 0 !important;                   
    margin: 0 !important;
    display: block !important;                   
}

/* ==========================================================================
   6. BUTTON STYLING: CONTRAST SOLID WHITE
   ========================================================================== */
.osm-container .osm-signup-container {
    list-style: none !important;
    padding: 0 !important;
    margin: 25px 0 0 0 !important;
    width: 100% !important;                       
}

.osm-container .osm-signup-container li {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.osm-container .btn-singup {
    display: block !important;
    width: 100% !important;                       
    background: #ffffff !important;               
    color: #141414 !important;                     
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    text-align: center !important;                
    transition: background 0.2s ease !important;
}

.osm-container .btn-singup:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #141414 !important;
}

/* Synchronize center card layout controls */
.osm-container .osm-plan-recommended .btn-singup {
    background: #ffffff !important;
    color: #141414 !important;
}
.osm-container .osm-plan-recommended .btn-singup:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   7. MOBILE AND TABLET RESPONSIVENESS OPTIMIZATION
   ========================================================================== */
@media (max-width: 767px) {
    /* Reduce container side-padding on mobile to give text more room */
    .osm-container .osm-plan {
        padding: 35px 20px !important;
        margin-bottom: 25px !important; /* Neatly spaces stacked tables on mobile */
    }

    /* Scale titles slightly down so they don't awkwardly wrap */
    .osm-container .osm-plan-title {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    /* Prevent large pricing numbers from breaking into two lines */
    .osm-container .osm-plan-price h2, 
    .osm-container .osm-plan-price .price {
        font-size: 28px !important;
        margin: 10px 0 !important;
    }

    /* Optimize text details row sizing for smaller smartphone screens */
    .osm-container .osm-plan-short-description,
    .osm-container .osm-plan-short-description p,
    .osm-container .osm-plan-short-description ul li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* ==========================================================================
   9. GUMLET VISUAL STYLE OVERHAUL - MASTER CLASS OVERRIDE FOR CHECKOUT PAGE
   ========================================================================== */

/* 1. Targets the specific checkout body layout view directly */
body.view-register.layout-pricingtable #osm-signup-page {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

/* 2. Re-skin the registration container form into a floating crisp card */
body.view-register.layout-pricingtable form#os_form {
    max-width: 460px !important;
    margin: 40px auto !important;
    background: #ffffff !important;
    border: 1px solid #ccd0d5 !important;
    border-radius: 12px !important;
    padding: 45px 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    text-align: left !important;
}

/* 3. Force dark readability for the main header text and text descriptions */
body.view-register.layout-pricingtable .osm-page-title,
body.view-register.layout-pricingtable .osm-message,
body.view-register.layout-pricingtable .osm-message p,
body.view-register.layout-pricingtable h3.osm-heading {
    color: #111827 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border: none !important;
}

body.view-register.layout-pricingtable .osm-page-title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

body.view-register.layout-pricingtable .osm-message p {
    font-size: 0.95rem !important;
    color: #4b5563 !important;
    margin-bottom: 25px !important;
}

body.view-register.layout-pricingtable h3.osm-heading {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
}

body.view-register.layout-pricingtable form#os_form .form-row,
body.view-register.layout-pricingtable form#os_form .form-group,
body.view-register.layout-pricingtable .osm-payment-terms,
body.view-register.layout-pricingtable #payment_method_container {
 display: block !important; /* Changes from horizontal grid to stacked */
 margin-bottom: 16px !important;
 padding: 0 !important;
 background: transparent !important;
 border: none !important;
 width: 100% !important;
 max-width: 100% !important;
 margin-left: 0 !important;
}

/* 5. Force form element tags nicely stacked right above input fields */
body.view-register.layout-pricingtable form#os_form .form-control-label,
body.view-register.layout-pricingtable form#os_form label {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

/* 6. Clean input sizing and borders matching your layout requirements */
body.view-register.layout-pricingtable form#os_form input[type="text"], 
body.view-register.layout-pricingtable form#os_form input[type="email"],
body.view-register.layout-pricingtable form#os_form input[type="password"],
body.view-register.layout-pricingtable form#os_form select {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #ccd0d5 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    color: #111827 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    height: 42px !important;
}

/* Blue styling indicator when selecting form fields */
body.view-register.layout-pricingtable form#os_form input:focus {
    border-color: #2563eb !important;
    outline: none !important;
}

/* 7. Format layout data line values inside payment options sections */
body.view-register.layout-pricingtable #payment-terms,
body.view-register.layout-pricingtable .payment_information,
body.view-register.layout-pricingtable .eb-form-control {
    color: #374151 !important;
    text-align: left !important;
    width: 100% !important;
}

body.view-register.layout-pricingtable .input-group-text {
    background-color: #f3f4f6 !important;
    border: 1px solid #ccd0d5 !important;
    color: #374151 !important;
}

/* 8. Re-skin standard action buttons to matching large black pill links */
body.view-register.layout-pricingtable .form-actions {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.view-register.layout-pricingtable #btn-submit {
    background: #424073 !important;
    background-color: #112855 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body.view-register.layout-pricingtable #btn-submit:hover {
    background: #424073 !important;
}

/* ==========================================================================
   10. FINAL CARD REFINEMENTS - CORE INTEGRATION OVERRIDES
   ========================================================================== */

/* 1. Target and hide raw math rows, validation prompts, bootstrap tooltips, and custom elements directly */
body.view-register.layout-pricingtable div#osm-trial-amount-container,
body.view-register.layout-pricingtable div#trial_discount_amount_container,
body.view-register.layout-pricingtable div#trial_tax_amount_container,
body.view-register.layout-pricingtable div#trial_payment_processing_fee_container,
body.view-register.layout-pricingtable div#trial_gross_amount_container,
body.view-register.layout-pricingtable div#regular_discount_amount_container,
body.view-register.layout-pricingtable div#regular_tax_amount_container,
body.view-register.layout-pricingtable div#regular_payment_processing_fee_container,
body.view-register.layout-pricingtable div#regular_gross_amount_container,
body.view-register.layout-pricingtable div#tr_card_number,
body.view-register.layout-pricingtable div#tr_exp_date,
body.view-register.layout-pricingtable div#tr_cvv_code,
body.view-register.layout-pricingtable div#tr_card_holder_name,
body.view-register.layout-pricingtable div.mp-credit-card-input,
body.view-register.layout-pricingtable div#field_password2,
body.view-register.layout-pricingtable .formError,
body.view-register.layout-pricingtable .formErrorContent,
body.view-register.layout-pricingtable [role="tooltip"],
body.view-register.layout-pricingtable .popover,
body.view-register.layout-pricingtable .tooltip,
body.view-register.layout-pricingtable form#os_form .row.form-group:not(#field_username):not(#field_password):not(#field_first_name):not(#field_last_name):not(#field_email):not(.osm-payment-terms):not(#payment_method_container):not(.osm-terms-and-conditions-container) {
    display: none !important;
}

/* 2. Position the password eye icon toggle cleanly inside the white input box */
body.view-register.layout-pricingtable #field_password {
 position: relative !important;
 display: block !important;
 width: 100% !important;
}
body.view-register.layout-pricingtable button.input-password-toggle {
 position: absolute !important;
 right: 12px !important;
 /* Centers the eye icon cleanly inside the white box regardless of the errors above it */
 bottom: 12px !important; 
 background: transparent !important;
 border: none !important;
 color: #6b7280 !important;
 box-shadow: none !important;
 padding: 0 !important;
 height: auto !important;
 width: auto !important;
 z-index: 5 !important;
}
/* Ensure password text doesn't run underneath the interactive eye element */
body.view-register.layout-pricingtable form#os_form input[type="password"] {
 padding-right: 42px !important;
 width: 100% !important;
 display: block !important;
 position: relative !important;
}

/* Fix the PayPal selection badge layout so it handles inner text and the icon safely */
body.view-register.layout-pricingtable #payment_method_container .col-md-9 {
 display: flex !important;           /* Changed to flex to let text and icon stay side-by-side */
 flex-direction: row !important;      /* Keeps elements side-by-side horizontally */
 flex-wrap: wrap !important;          /* Allows wrapping on ultra-narrow mobile screens */
 align-items: center !important;
 font-weight: 700 !important;
 color: #003087 !important;           /* Official PayPal Corporate Blue */
 background: #f3f4f6 !important;
 padding: 8px 14px !important;
 border-radius: 6px !important;
 border: 1px solid #d1d5db !important;
 width: 100% !important;              /* Keeps the field perfectly lined up with the inputs */
 box-sizing: border-box !important;   /* Prevents padding leakage */
}

/* Ensure the dynamic trust seal sits properly inside the newly stretched flex block */
body.view-register.layout-pricingtable #payment_method_container .col-md-9::after {
 content: "🔒 Secure Payment" !important;
 margin-left: auto !important;        /* Pushes the lock symbol cleanly to the right edge of the card */
 font-size: 0.8rem !important;
 font-weight: 500 !important;
 color: #0a7350 !important;           /* Emerald green theme color */
 background: #d3e3dc !important;
 padding: 2px 8px !important;
 border-radius: 4px !important;
 display: inline-block !important;
}

/* 1. Neutralize the dark red backgrounds, borders, and hard shadows */
body.view-register .formError .formErrorContent {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    color: #dc3545 !important; /* Clean warning text red */
    font-family: inherit !important;
    font-size: 13px !important;
    padding: 4px 0 0 0 !important;
    text-shadow: none !important;
    width: auto !important;
    display: block !important;
}

/* 2. Flatten the dynamic floating wrapper so text sits naturally below inputs */
body.view-register .formError {
 position: relative !important;
 top: 0 !important;
 left: 0 !important;
 display: block !important;
 opacity: 1 !important;
 margin-top: 4px !important;
 margin-bottom: 8px !important;
 z-index: 1 !important;
 clear: both !important; /* Forces the error box completely under the password input box */
 width: 100% !important;
}

/* 3. Hide the small arrow triangle pointing to the input boxes */
body.view-register .formError .formErrorArrow,
body.view-register .formError .formErrorArrow div {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
}

/* ==========================================================================
   11. CUSTOM ISOLATED LOGIN CARD WRAPPER
   ========================================================================== */
.custom-login-card-wrapper {
    max-width: 540px !important;
    margin: 30px auto 40px auto !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 45px 35px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Format the heading inside our new clean card container */
.custom-login-card-wrapper h2,
.custom-login-card-wrapper h3 {
    color: #111827 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Ensure inner form fields adapt and stretch to the card boundaries */
.custom-login-card-wrapper .form-group,
.custom-login-card-wrapper .form-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 16px !important;
}