#exampleModal .select2-container, #exhibitor_modal .select2-container { width: 100% !important; } .modal-header-row { display: flex; justify-content: space-between; } .modal-logo-image { float: right; } .modal-content-visible { width: 100%; } .input-box { position: relative; margin-bottom: 20px; width: 100%; max-width: 100%; } .input-box input[type="text"], .input-box input[type="email"], .input-box input[type="number"], .input-box select { width: 100%; padding: 10px 12px; height: 45px; box-sizing: border-box; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; font-size: 16px; } .input-box input[type="text"] { padding-right: 50px; } .input-box .image-preview { position: absolute; right: 10px; top: 68%; width: 40px; height: 40px; transform: translateY(-50%); border-radius: 50%; object-fit: cover; border: 1px solid #ccc; cursor: pointer; } .image-preview.default { background-color: #eee; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #777; } .input-box input[type="file"] { display: none; } /* ── Select2 Overrides ── */ .select2-container { width: 100% !important; /* Ensure the Select2 wrapper never adds extra height to .input-box */ display: block !important; margin: 0 !important; padding: 0 !important; } /* Make Select2 match the exact height & appearance of native inputs */ .select2-container--default .select2-selection--single { height: 45px !important; width: 100% !important; outline: none; font-size: 16px; border-radius: 5px; padding: 0 12px; border: 1px solid #ccc; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); transition: border-color 0.2s ease, box-shadow 0.2s ease; display: flex !important; align-items: center; box-sizing: border-box !important; /* Kill any default browser overrides */ line-height: normal; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 43px !important; padding-left: 0; padding-right: 28px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; width: 100%; height: 43px; /* Prevent any inherited margin/padding from changing height */ margin: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px !important; top: 1px !important; right: 8px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-width: 5px 4px 0 4px; margin-top: -2px; } /* Orange border on focus/hover/open */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default .select2-selection--single:hover { border-color: #0a55e8 !important; box-shadow: 0 0 0 3px rgba(232, 96, 10, 0.12) !important; } /* Arrow flips up when open */ .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #E8600A transparent; border-width: 0 4px 5px 4px; } /* ── Dropdown Panel ── Rendered on via dropdownParent:$('body'). JS keeps it position:fixed so it stays put even when the page scrolls. */ .select2-dropdown { z-index: 999999 !important; border: 1px solid #488be5 !important; border-radius: 5px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.18) !important; overflow: hidden; background: #fff; touch-action: auto; -ms-touch-action: auto; /* CRITICAL: position:fixed is set by JS — this just prevents any parent's transform/will-change from creating a new stacking context that would break fixed positioning */ position: fixed !important; } .select2-container--open { z-index: 999999 !important; } .select2-search__field { opacity: 1 !important; pointer-events: auto !important; touch-action: auto !important; -webkit-user-select: text !important; user-select: text !important; font-size: 14px !important; width: 100% !important; padding: 7px 10px !important; border: 1px solid #ddd !important; border-radius: 4px !important; outline: none !important; box-sizing: border-box !important; height: auto !important; /* Ensure it is never blocked by a parent's touch-action:none */ position: relative; z-index: 1; } .select2-search--dropdown { padding: 8px; background: #fff; border-bottom: 1px solid #f0f0f0; /* Allow all pointer/touch events through to the input */ pointer-events: auto; touch-action: auto; } .select2-search__field:focus { border-color: #317fe6 !important; } /* ── Results List ── */ .select2-results { max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .select2-results__options { padding: 4px 0; margin: 0; } .select2-results__option { padding: 10px 14px !important; font-size: 15px !important; color: #333 !important; cursor: pointer !important; transition: background 0.15s, color 0.15s; -webkit-user-select: none; user-select: none; } /* Highlighted (hover / keyboard) → orange */ .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: #590f43!important; color: #fff !important; } /* Already-selected option */ .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #590f43 !important; color: white !important; font-weight: 600; } .select2-results__message { color: #999; font-size: 14px; text-align: center; padding: 10px 14px; } /* ── Mobile ── */ @media (max-width: 768px) { .select2-results__option { padding: 13px 14px !important; font-size: 16px !important; } .select2-container--default .select2-selection--single { font-size: 16px !important; /* prevent iOS auto-zoom on focus */ } .select2-dropdown { max-height: 55vh; } .select2-results { max-height: calc(55vh - 60px); } } /* Submit Button */ #registration .button input, #registration_new .button input, #otpbanner .button input, #otpbanner_new .button input { height: 45px; width: 120px; border-radius: 5px; border: none; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(117deg, #b7220f, #FF9800, #ffdd0e); float: right; } .button { height: 45px; margin: 0; float: right; } /* Modal pass / QR */ .background-pass { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background-color: #f2f2f2; padding: 20px 0; } .qr-card { position: relative; width: 90%; max-width: 400px; } .qr-bg { width: 100%; display: block; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .qr-details { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 80%; color: #000; } .qr-name { font-size: 20px; margin: 0px 0; } .qr-info { font-size: 16px; margin: 0px 0; font-weight: bold; } #scanner, #scanner_new { width: 120px; height: 120px; } @media (max-width: 360px) { .qr-name { font-size: 14px; } .qr-info { font-size: 12px; } #scanner, #scanner_new { width: 70px; height: 70px; } .qr-details { top: 45%; /* adjust for small screens */ width: 95%; } }