/* =========================================
   1. GLOBAL LAYOUT & BACKGROUNDS
   ========================================= */
body, html, .registration-flow-container, #registration-app {
    background-color: #F6F6F6 !important;
}

/* Hide Header/Footer */
.header-container, .footer-container {
    display: none !important;
}

/* Link Styling */
a { color: #000531; text-decoration: none; }
a:hover { text-decoration: underline; 
color: #0303FD;
}

/* =========================================
   2. TEXT INPUTS ONLY (Standard Fields)
   ========================================= */
/* Target only text fields here. We REMOVED dropdowns from this list */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select,
.form-control {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    color: #0303FD !important; /* SF Blue */
    font-family: sans-serif !important; 
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-align: left !important;
    
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    height: auto !important;
    box-shadow: none !important;
    margin-bottom: 0px !important; 
}
label.error-visible
 {
    background: 0 0;
    color: red !important;
    font-size: 12px;
    font-weight: 300;
}
/* =========================================
   3. DROPDOWNS ONLY (The Flexbox Fix)
   ========================================= */
/* This forces the dropdown to behave differently than text inputs */
#registration-app .btn-group > button.btn, 
#registration-app .btn-group > .dropdown-toggle, 
#registration-app .bootstrap-select > .dropdown-toggle {
    
    /* 1. FORCE HEIGHT & REMOVE PADDING */
    height: 52px !important;      /* Match text input height */
    padding: 0 15px !important;   /* 0px Top/Bottom, 15px Left/Right */
    margin: 0 !important;
    
    /* 2. FLEXBOX CENTERING (The Magic Fix) */
    display: flex !important;
    align-items: center !important;        /* Vertically Center Text */
    justify-content: space-between !important; /* Text Left, Arrow Right */
    
    /* 3. VISUAL STYLE (Match Inputs) */
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    color: #0303FD !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Reset inner text wrapper to prevent hidden padding */
#registration-app .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reset Arrow Icon */
#registration-app .caret {
    color: #0303FD !important;
    opacity: 1 !important;
    border-top-color: #0303FD !important;
    margin-top: 0 !important; /* Remove Bizzabo offset */
}

/* Focus State for Both */
input:focus, 
textarea:focus, 
select:focus, 
.dropdown-toggle:focus, 
.btn-group.open .dropdown-toggle {
    border-color: #0303FD !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 5px rgba(3, 3, 253, 0.2) !important;
}

/* =========================================
   4. LABELS & SPACING
   ========================================= */
label, .control-label, .form-group label {
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 2px;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-group {
    margin-bottom: 20px !important;
}

/* =========================================
   5. SUBMIT / REGISTER BUTTON
   ========================================= */
button[type="submit"], 
.btn-register, 
.btn-primary:not(.dropdown-toggle) {
    background-image: linear-gradient(135deg, #fff 0%,  #fff 100%) !important;
    color: #000531 !important;
    
    display: block !important;
    float: none !important;       
    margin: 30px auto !important;
    
    width: 50% !important;        
    min-width: 300px !important;
    max-width: 500px !important;
    
    border: none !important;
    border-radius: 10px !important;
    padding: 15px 40px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    transition: all 1s ease !important;
}

button[type="submit"]:hover, 
.btn-register:hover {
  background-image: linear-gradient(90deg, #000531 0%,  #000531 100%) !important;
  color: #fff !important;
}

/* =========================================
   6. TEMPLATE SPECIFIC OVERRIDES
   ========================================= */
.section-7176518 .element-34357394, 
.section-7176518 a.element-34357394, 
.section-7176518 p.element-34357394, 
.section-7176518 .element-34357394 p, 
.section-7176518 .element-34357394 h1, 
.section-7176518 .element-34357394 h2, 
.section-7176518 .element-34357394 h3, 
.section-7176518 .element-34357394 .btn, 
.section-7176518 .element-34357394 .custom-font {
    background-color: transparent !important;
    border: none !important;
}

/* Gradient Title */
.section-7176518 .element-34357394 .atom-title {
    background: linear-gradient(100deg, #DC00C9 0%, #0303FD 40%, #0066FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 2px;
}

.trade-template p {
    color: #000531;
}

/* Legal / Terms Text */
.submission-form .additional-terms p, 
.submission-form .legal-terms p {
    font-weight: 300 !important;
    font-size: 12px !important;
    color: #fff !important; 
    max-width: 650px;
    margin: 0 auto;
}

/* =========================================
   7. SUCCESS & WAITLIST MESSAGE (PIN TO TOP FIX)
   ========================================= */

/* Target every possible confirmation view */
#registration-app .registration-confirmation, 
#registration-app .confirmation-view,
#registration-app .registration-step-confirmation,
#registration-app .registration-completed,
#registration-app .registration-waitlist-confirmation,
#registration-app .waitlist-view {
    
    /* 1. FORCE FIXED POSITIONING */
    position: fixed !important;
    
    /* 2. PIN TO TOP (Instead of Center) */
    /* This stops it from being pushed down by the form height */
    top: 50px !important; 
    bottom: auto !important;
    
    /* 3. CENTER HORIZONTALLY */
    left: 50% !important;
    transform: translateX(-50%) !important; 
    
    /* 4. RESET MARGINS & PADDING */
    margin: 0 !important;
    padding: 30px !important;
    
    /* 5. SIZING CONTROLS */
    width: 90% !important;
    max-width: 500px !important;
    height: auto !important;
    max-height: 85vh !important; /* Never taller than screen */
    overflow-y: auto !important; /* scroll inside if text is too long */
    
    /* 6. VISUALS */
    background-color: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    z-index: 2147483647 !important; /* Maximum Z-Index */
}

/* Ensure the text is visible */
#registration-app .registration-waitlist-confirmation h1,
#registration-app .registration-waitlist-confirmation p {
    color: #000531 !important;
    margin-bottom: 15px !important;
}

/* Hide the "Ghost" form behind it */
#registration-app .registration-form-container.hidden {
    display: none !important;
}