/* Keyboard Shortcuts Modal Styling */ .keyboard-shortcuts-modal { z-index: 9999; } .shortcut-section { margin-bottom: 2rem; } .shortcut-section:last-child { margin-bottom: 0; } .shortcut-section h4 { margin-bottom: 1rem; color: #1b1b1b; font-size: 1.25rem; font-weight: 600; } .shortcut-list { display: flex; flex-direction: column; gap: 0.75rem; } .shortcut-item { display: flex; align-items: center; padding: 0.75rem 1rem; background: rgba(0, 94, 162, 0.05); border-left: 3px solid rgba(0, 94, 162, 0.3); border-radius: 4px; } .shortcut-item kbd { display: inline-block; padding: 0.2rem 0.3rem; font-size: 0.7rem; color: #1b1b1b; background: #ffffff; border: 1px solid rgba(0, 94, 162, 0.3); border-radius: 3px; font-family: 'Courier New', Courier, monospace; font-weight: 500; min-width: 100px; text-align: center; margin-right: 0.5rem; white-space: nowrap; } .shortcut-item span { font-size: 0.95rem; color: #454545; flex: 1; } /* Custom black government banner with light gray text matching footer */ usa-banner { --theme-banner-background-color: #1b1b1b; --theme-banner-text-color: #f0f0f0; --theme-banner-link-color: #73b3e7; --theme-banner-link-color-hover: #f0f0f0; --theme-banner-chevron-color: #f0f0f0; } /* Force all banner text to be light colored - this should catch the lock icon */ usa-banner *, usa-banner::before, usa-banner::after, usa-banner .usa-banner__header *, usa-banner .usa-banner__content *, .usa-banner *, .usa-banner::before, .usa-banner::after, .usa-banner__header *, .usa-banner__content * { color: #f0f0f0 !important; } /* Force all banner SVG elements to be light colored */ usa-banner svg, usa-banner svg *, .usa-banner svg, .usa-banner svg * { fill: #f0f0f0 !important; color: #f0f0f0 !important; } /* Specifically target any mask-based backgrounds in banner */ usa-banner .usa-banner__button::after, usa-banner .usa-banner__button:hover::after, usa-banner .usa-banner__button[aria-expanded=true]::after, usa-banner .usa-banner__button[aria-expanded=true]:hover::after, .usa-banner .usa-banner__button::after, .usa-banner .usa-banner__button:hover::after, .usa-banner .usa-banner__button[aria-expanded=true]::after, .usa-banner .usa-banner__button[aria-expanded=true]:hover::after { background-color: #f0f0f0 !important; } /* Target any potential lock icon implementations */ usa-banner .usa-banner__lock-image, usa-banner .usa-banner__lock-image path, usa-banner .usa-banner__button-text::before, usa-banner .usa-banner__header-text::before, .usa-banner .usa-banner__lock-image, .usa-banner .usa-banner__lock-image path, .usa-banner .usa-banner__button-text::before, .usa-banner .usa-banner__header-text::before { fill: #f0f0f0 !important; color: #f0f0f0 !important; background-color: #f0f0f0 !important; } /* Override any background-image references to lock icons */ usa-banner *[style*="lock.svg"], usa-banner *[style*="icon-https.svg"], .usa-banner *[style*="lock.svg"], .usa-banner *[style*="icon-https.svg"] { background-image: url("../img/lock-light.svg") !important; } /* Override CSS background-image rules for lock icons */ usa-banner::before, usa-banner::after, usa-banner *::before, usa-banner *::after, .usa-banner::before, .usa-banner::after, .usa-banner *::before, .usa-banner *::after { background-image: url("../img/lock-light.svg") !important; } /* Authentication pages styling */ .login-page .grid-container, .forgot-password-page .grid-container, .password-reset-page .grid-container, .account-request-page .grid-container, .new-account-password-page .grid-container { min-width: 500px; } /* Responsive authentication pages - mobile layout */ @media (max-width: 38em) { .login-page .grid-container, .forgot-password-page .grid-container, .password-reset-page .grid-container, .account-request-page .grid-container, .new-account-password-page .grid-container { min-width: unset !important; width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; } } /* Card header font size override - make one size smaller */ .usa-card__heading { font-size: 1.46rem !important; /* Default h2 is ~1.68rem, h3 is ~1.46rem */ line-height: 1.3 !important; display: block !important; overflow-wrap: break-word !important; } /* Desktop 3-column layout (1024px and up) */ @media (min-width: 1024px) { /* Force 3-column layout for cards */ .desktop\:grid-col-4 { flex: 0 0 33.333% !important; max-width: 33.333% !important; width: 33.333% !important; } /* Force line breaks between words in titles */ .usa-card__heading { word-spacing: 100vw !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } } /* Card layout - 2 columns for tablets (640px to 1023px) */ @media (min-width: 640px) and (max-width: 1023px) { /* Force 2-column layout for cards */ .desktop\:grid-col-4 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } /* Reduce card body padding on tablets */ .usa-card__container .usa-card__body, .usa-card__body { display: flex !important; flex-direction: column !important; padding-bottom: 0 !important; } /* Also target the flex container inside card body */ .usa-card__container .usa-card__body .display-flex.flex-column, .usa-card__body .display-flex.flex-column { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Make card buttons full width within their cards */ .usa-card__container .usa-card__body .usa-button, .usa-card .usa-button { width: 100% !important; margin-bottom: 0.5rem !important; display: block !important; } /* Remove bottom margin from last button in card */ .usa-card__container .usa-card__body .display-flex.flex-column > div:last-child .usa-button, .usa-card__body .display-flex.flex-column > div:last-child .usa-button { margin-bottom: 0 !important; } } /* Tablet and mobile text: No word wrapping (below 1024px) */ @media (max-width: 1023px) { .usa-card__heading { word-spacing: normal !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* Card layout - single column on mobile (below 640px) */ @media (max-width: 639px) { .desktop\:grid-col-4 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* Reduce card bottom margins on mobile */ .desktop\:grid-col-4.margin-bottom-3 { margin-bottom: 1rem !important; } /* Reduce card body padding on mobile */ .usa-card__container .usa-card__body, .usa-card__body { padding-bottom: 0 !important; } /* Also target the flex container inside card body */ .usa-card__container .usa-card__body .display-flex.flex-column, .usa-card__body .display-flex.flex-column { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Ensure buttons are full width on mobile too */ .usa-card__container .usa-card__body .usa-button, .usa-card .usa-button { width: 100% !important; margin-bottom: 0.5rem !important; display: block !important; } /* Remove bottom margin from last button in card */ .usa-card__container .usa-card__body .display-flex.flex-column > div:last-child .usa-button, .usa-card__body .display-flex.flex-column > div:last-child .usa-button { margin-bottom: 0 !important; } } /* Very narrow screens (below 425px) - Fix overflow issues */ @media (max-width: 424px) { /* Reduce grid container padding */ .grid-container { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* Reduce grid gap */ .grid-row.grid-gap-2 { gap: 0.5rem !important; } /* Reduce card container padding */ .bg-white.padding-y-2.padding-x-3 { padding-left: 1rem !important; padding-right: 1rem !important; } /* Ensure cards don't overflow */ .usa-card { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* Reduce card body padding further on very narrow screens */ .usa-card__container .usa-card__body, .usa-card__body { padding-left: 1rem !important; padding-right: 1rem !important; } } /* iPhone SE and similar (up to 375px) - Handle edge case */ @media (max-width: 376px) { /* Force proper box sizing on everything */ *, *::before, *::after { box-sizing: border-box !important; } /* Eliminate all container padding */ .grid-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100vw !important; margin-left: auto !important; margin-right: auto !important; } /* Main content container - minimal but consistent padding */ .bg-white.padding-y-2.padding-x-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Main heading alignment */ .bg-white.padding-y-2.padding-x-3 h1 { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Grid system fixes */ .grid-row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } .grid-row.grid-gap-2 { gap: 0.5rem !important; } /* Card column container */ .desktop\:grid-col-4 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Card itself */ .usa-card { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* Card internal padding */ .usa-card__container .usa-card__header, .usa-card__header { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .usa-card__container .usa-card__body, .usa-card__body { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Ensure no horizontal overflow at root level */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } } /* Header Responsive Layout - Desktop above mobile breakpoint */ @media (min-width: 38.01em) { .usa-header .grid-col-fill h2 { margin-top: 0.5rem !important; margin-bottom: 1rem !important; } } /* Mobile Layout - Below 38em (608px) */ @media (max-width: 38em) { /* Header: Stack elements vertically with consistent spacing */ .usa-header .grid-row { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; padding: 0.5rem 1rem 1rem !important; margin: 0 !important; } /* Header: Title styling */ .usa-header .grid-col-fill { text-align: center !important; margin: 0 !important; width: 100% !important; } .usa-header .grid-col-fill h2 { margin: 0 !important; } /* Header: Button container */ .usa-header .grid-col-auto { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; width: 100% !important; padding: 0 !important; } /* Quick Nav button wrapper */ .usa-header .grid-col-auto > div { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* All header buttons - consistent styling */ .usa-header .grid-col-auto button, .usa-header .grid-col-auto .usa-button { width: 100% !important; display: block !important; margin: 0 !important; justify-content: center !important; } /* Quick Nav specific padding */ #quick-nav-button { padding-left: 1rem !important; padding-right: 1rem !important; } } /* Quick Navigation Custom Dropdown Styles */ #quick-nav-button { background-color: white !important; border: 1px solid #ccc !important; } #quick-nav-button:hover { background-color: #f8f9fa !important; } #quick-nav-menu { z-index: 9999 !important; top: 100%; left: 0; min-width: 250px; max-height: 400px; overflow-y: auto; } #quick-nav-menu li button:hover { background-color: #f0f0f0 !important; } #quick-nav-menu .bg-base-lightest { position: sticky; top: 0; z-index: 1; } /* Ensure proper positioning context */ .position-relative { position: relative !important; } /* Message Container */ #message-container { height: 0; overflow: hidden; transition: height 0.3s ease; } /* Admin Toggle Modal Styles */ #admin-toggle-modal .modal-body > div { display: flex; justify-content: flex-end; margin-top: 1.5rem; } #admin-toggle-modal .usa-button svg.usa-icon, #admin-toggle-modal .usa-button--outline svg.usa-icon { margin-right: 0.5rem; } #admin-toggle-modal .usa-button--outline { margin-left: 1rem; } /* Admin Reinit Modal Styles */ #admin-reinit-modal .usa-alert--warning { margin-bottom: 1rem; } #admin-reinit-modal .modal-body > div > p:first-of-type { margin-bottom: 1rem; } #admin-reinit-modal .info-columns-wrapper { display: flex; gap: 2rem; margin-bottom: 0.5rem; } #admin-reinit-modal .info-column { flex: 1; } #admin-reinit-modal .info-list { list-style-type: none; padding-left: 0; } #admin-reinit-modal .info-list li { display: flex; align-items: center; margin-bottom: 0.5rem; } #admin-reinit-modal .info-list svg.usa-icon { margin-right: 0.5rem; flex-shrink: 0; } #admin-reinit-modal .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; } #admin-reinit-modal .modal-actions svg.usa-icon { margin-right: 0.5rem; } /* ======================================== 3-ROW MODAL ARCHITECTURE STYLES Applied to All Standardized Admin Modals ======================================== */ /* Base modal styles for all 3-row modals */ .admin-toggle-modal, .admin-reinit-modal, .role-modal, .role-delete-modal, .user-modal, .user-delete-modal, .user-moderation-modal, .log-details-modal, .redemption-details-modal, .archive-logs-modal, .site-delete-modal, .site-restore-modal, .site-modal { width: 95vw !important; height: 95vh !important; padding: 0 !important; border-radius: 0.5rem !important; } /* * MODAL ARCHITECTURE - 3-ROW LAYOUT SYSTEM * ======================================== * All modals follow a consistent 3-row flexbox layout: * * 1. HEADER (Fixed Vertical Height, Horizontally Responsive) * - Contains title and close button * - flex-shrink: 0 (never shrinks vertically) * - Fixed padding and background * - Can expand/contract horizontally with modal width * - Internal elements (text, icons, buttons) maintain original size * - Never scrolls or resizes vertically * * 2. BODY (Variable Height) * - Contains all modal content * - flex: 1 (expands to fill available space) * - overflow-y: auto (scrollable when content exceeds height) * - ONLY area that handles vertical scrolling/resizing * - Responsive to both horizontal and vertical changes * * 3. FOOTER (Fixed Vertical Height, Horizontally Responsive) * - Contains action buttons (Submit, Cancel, etc.) * - flex-shrink: 0 (never shrinks vertically) * - Fixed padding and background * - Can expand/contract horizontally with modal width * - Internal elements (buttons, text, icons) maintain original size * - Never scrolls or resizes vertically * * This ensures consistent modal behavior regardless of content size. * Headers/footers adapt to modal width but maintain fixed vertical dimensions. */ /* Modal containers for all 3-row modals */ .keyboard-shortcuts-modal-container, .admin-toggle-modal-container, .admin-reinit-modal-container, .role-modal-container, .role-delete-modal-container, .user-modal-container, .user-delete-modal-container, .user-moderation-modal-container, .log-details-modal-container, .redemption-details-modal-container, .archive-logs-modal-container, .site-delete-modal-container, .site-restore-modal-container, .site-modal-container { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; } /* Headers for all 3-row modals */ .keyboard-shortcuts-modal-header, .admin-toggle-modal-header, .admin-reinit-modal-header, .role-modal-header, .role-delete-modal-header, .user-modal-header, .user-delete-modal-header, .user-moderation-modal-header, .log-details-modal-header, .redemption-details-modal-header, .archive-logs-modal-header, .site-delete-modal-header, .site-restore-modal-header, .voucher-request-modal-header, .site-modal-header, .site-selection-modal-header, .voucher-redemption-modal-header { flex-shrink: 0 !important; padding: 1rem 1.5rem !important; background-color: #f0f0f0 !important; border-radius: 0.5rem 0.5rem 0 0 !important; } /* Header flex containers */ .keyboard-shortcuts-modal-header .display-flex, .admin-toggle-modal-header .display-flex, .admin-reinit-modal-header .display-flex, .role-modal-header .display-flex, .role-delete-modal-header .display-flex, .user-modal-header .display-flex, .user-delete-modal-header .display-flex, .user-moderation-modal-header .display-flex, .log-details-modal-header .display-flex, .redemption-details-modal-header .display-flex, .archive-logs-modal-header .display-flex, .site-delete-modal-header .display-flex, .site-restore-modal-header .display-flex, .site-modal-header .display-flex { align-items: center !important; } /* jQuery Modal Close Button Override - Make it smaller and properly positioned */ .modal a.close-modal { position: absolute !important; top: -8px !important; display: block !important; width: 20px !important; height: 20px !important; text-indent: -9999px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==') !important; border-radius: 50% !important; z-index: 200 !important; } /* Close button icons - Ultra-specific override for consistent small size */ .modal .admin-toggle-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .admin-reinit-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .role-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .role-delete-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .user-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .user-delete-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .user-moderation-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .log-details-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .redemption-details-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .archive-logs-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .site-delete-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .site-restore-modal-header .usa-button.usa-button--unstyled .usa-icon, .modal .site-modal-header .usa-button.usa-button--unstyled .usa-icon { width: 1rem !important; height: 1rem !important; min-width: 1rem !important; max-width: 1rem !important; min-height: 1rem !important; max-height: 1rem !important; flex-shrink: 0 !important; display: block !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Make close buttons visible with black circle style for redemption modal */ .redemption-details-modal-header .usa-button.usa-button--unstyled { background: #1b1b1b !important; border-radius: 50% !important; width: 2rem !important; height: 2rem !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; border: none !important; } .redemption-details-modal-header .usa-button.usa-button--unstyled:hover { background: #565c65 !important; } .redemption-details-modal-header .usa-button.usa-button--unstyled svg.usa-icon { fill: white !important; } /* Additional fallback for icons with even higher specificity */ div.modal div[class*="modal-header"] button.usa-button.usa-button--unstyled svg.usa-icon { width: 1rem !important; height: 1rem !important; min-width: 1rem !important; max-width: 1rem !important; min-height: 1rem !important; max-height: 1rem !important; } /* Header titles */ .admin-toggle-modal-header h3, .admin-reinit-modal-header h3, .role-modal-header h3, .role-delete-modal-header h3, .user-modal-header h3, .user-delete-modal-header h3, .user-moderation-modal-header h3, .log-details-modal-header h3, .redemption-details-modal-header h3, .archive-logs-modal-header h3, .site-delete-modal-header h3, .site-restore-modal-header h3, .voucher-request-modal-header h3, .site-modal-header h2 { color: #1b1b1b !important; font-size: 1.5rem !important; } /* Bodies for all 3-row modals */ .keyboard-shortcuts-modal-body, .admin-toggle-modal-body, .admin-reinit-modal-body, .role-modal-body, .role-delete-modal-body, .user-modal-body, .user-delete-modal-body, .user-moderation-modal-body, .log-details-modal-body, .redemption-details-modal-body, .archive-logs-modal-body, .site-delete-modal-body, .site-restore-modal-body, .site-modal-body { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } /* Body content areas */ .admin-toggle-modal-content, .admin-reinit-modal-content, .role-modal-content, .role-delete-modal-content, .user-modal-content, .user-delete-modal-content, .user-moderation-modal-content, .log-details-modal-content, .redemption-details-modal-content, .archive-logs-modal-content, .site-delete-modal-content, .site-restore-modal-content, .site-modal-content { padding: 0.75rem 1.5rem !important; } .keyboard-shortcuts-modal-content { padding: 0 1.5rem 0.75rem 1.5rem !important; } /* Footers for all 3-row modals */ .keyboard-shortcuts-modal-footer, .admin-toggle-modal-footer, .admin-reinit-modal-footer, .role-modal-footer, .role-delete-modal-footer, .user-modal-footer, .user-delete-modal-footer, .user-moderation-modal-footer, .log-details-modal-footer, .redemption-details-modal-footer, .archive-logs-modal-footer, .site-delete-modal-footer, .site-restore-modal-footer, .site-modal-footer { flex-shrink: 0 !important; padding: 1rem 1.5rem !important; background-color: #f0f0f0 !important; border-radius: 0 0 0.5rem 0.5rem !important; } /* Enforce 3-row architecture constraints */ *[class*="-modal-header"] { flex-shrink: 0 !important; overflow: hidden !important; } *[class*="-modal-body"] { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; } *[class*="-modal-footer"] { flex-shrink: 0 !important; overflow: hidden !important; } /* Custom scrollbar for all modal body areas */ .admin-toggle-modal-body::-webkit-scrollbar, .admin-reinit-modal-body::-webkit-scrollbar, .role-modal-body::-webkit-scrollbar, .role-delete-modal-body::-webkit-scrollbar, .user-modal-body::-webkit-scrollbar, .user-delete-modal-body::-webkit-scrollbar, .user-moderation-modal-body::-webkit-scrollbar, .log-details-modal-body::-webkit-scrollbar, .redemption-details-modal-body::-webkit-scrollbar, .archive-logs-modal-body::-webkit-scrollbar, .site-delete-modal-body::-webkit-scrollbar, .site-restore-modal-body::-webkit-scrollbar, .site-modal-body::-webkit-scrollbar { width: 8px !important; } .admin-toggle-modal-body::-webkit-scrollbar-track, .admin-reinit-modal-body::-webkit-scrollbar-track, .role-modal-body::-webkit-scrollbar-track, .role-delete-modal-body::-webkit-scrollbar-track, .user-modal-body::-webkit-scrollbar-track, .user-delete-modal-body::-webkit-scrollbar-track, .user-moderation-modal-body::-webkit-scrollbar-track, .log-details-modal-body::-webkit-scrollbar-track, .redemption-details-modal-body::-webkit-scrollbar-track, .archive-logs-modal-body::-webkit-scrollbar-track, .site-delete-modal-body::-webkit-scrollbar-track, .site-restore-modal-body::-webkit-scrollbar-track, .site-modal-body::-webkit-scrollbar-track { background: #f1f1f1 !important; } .admin-toggle-modal-body::-webkit-scrollbar-thumb, .admin-reinit-modal-body::-webkit-scrollbar-thumb, .role-modal-body::-webkit-scrollbar-thumb, .role-delete-modal-body::-webkit-scrollbar-thumb, .user-modal-body::-webkit-scrollbar-thumb, .user-delete-modal-body::-webkit-scrollbar-thumb, .user-moderation-modal-body::-webkit-scrollbar-thumb, .log-details-modal-body::-webkit-scrollbar-thumb, .redemption-details-modal-body::-webkit-scrollbar-thumb, .archive-logs-modal-body::-webkit-scrollbar-thumb, .site-delete-modal-body::-webkit-scrollbar-thumb, .site-restore-modal-body::-webkit-scrollbar-thumb, .site-modal-body::-webkit-scrollbar-thumb { background: #c1c1c1 !important; border-radius: 4px !important; } .admin-toggle-modal-body::-webkit-scrollbar-thumb:hover, .admin-reinit-modal-body::-webkit-scrollbar-thumb:hover, .role-modal-body::-webkit-scrollbar-thumb:hover, .role-delete-modal-body::-webkit-scrollbar-thumb:hover, .user-modal-body::-webkit-scrollbar-thumb:hover, .user-delete-modal-body::-webkit-scrollbar-thumb:hover, .user-moderation-modal-body::-webkit-scrollbar-thumb:hover, .log-details-modal-body::-webkit-scrollbar-thumb:hover, .redemption-details-modal-body::-webkit-scrollbar-thumb:hover, .archive-logs-modal-body::-webkit-scrollbar-thumb:hover, .site-delete-modal-body::-webkit-scrollbar-thumb:hover, .site-restore-modal-body::-webkit-scrollbar-thumb:hover, .site-modal-body::-webkit-scrollbar-thumb:hover { background: #a8a8a8 !important; } .site-modal-content .usa-fieldset { border: none !important; margin: 0 !important; padding: 0 !important; } /* Responsive adjustments for all modals */ @media (max-width: 768px) { .admin-toggle-modal, .admin-reinit-modal, .role-modal, .role-delete-modal, .user-modal, .user-delete-modal, .user-moderation-modal, .log-details-modal, .archive-logs-modal, .site-delete-modal, .site-restore-modal, .site-modal { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; } .admin-toggle-modal-header, .admin-reinit-modal-header, .role-modal-header, .role-delete-modal-header, .user-modal-header, .user-delete-modal-header, .user-moderation-modal-header, .log-details-modal-header, .archive-logs-modal-header, .site-delete-modal-header, .site-restore-modal-header, .site-modal-header, .admin-toggle-modal-footer, .admin-reinit-modal-footer, .role-modal-footer, .role-delete-modal-footer, .user-modal-footer, .user-delete-modal-footer, .user-moderation-modal-footer, .log-details-modal-footer, .archive-logs-modal-footer, .site-delete-modal-footer, .site-restore-modal-footer, .site-modal-footer { padding: 0.75rem 1rem !important; } .admin-toggle-modal-content, .admin-reinit-modal-content, .role-modal-content, .role-delete-modal-content, .user-modal-content, .user-delete-modal-content, .user-moderation-modal-content, .log-details-modal-content, .archive-logs-modal-content, .site-delete-modal-content, .site-restore-modal-content, .site-modal-content { padding: 0.5rem 1rem !important; } .admin-toggle-modal-header h3, .admin-reinit-modal-header h3, .role-modal-header h3, .role-delete-modal-header h3, .user-modal-header h3, .user-delete-modal-header h3, .user-moderation-modal-header h3, .log-details-modal-header h3, .archive-logs-modal-header h3, .site-delete-modal-header h3, .site-restore-modal-header h3, .site-modal-header h2 { font-size: 1.25rem !important; } .site-modal-content .usa-section-heading { font-size: 1rem !important; } } /* Mobile form optimization - prevent tiny form elements only on very small screens */ @media (max-width: 480px) { /* Only force full width for multi-column layouts that would be too small */ .responsive-modal-form .grid-row .tablet\:grid-col-3, .responsive-modal-form .grid-row .tablet\:grid-col-4, .responsive-modal-form .grid-row .desktop\:grid-col-2, .responsive-modal-form .grid-row .desktop\:grid-col-3, .responsive-modal-form .grid-row .desktop\:grid-col-4 { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 1rem !important; } /* Maintain readable font sizes for form elements */ .responsive-modal-form .usa-input, .responsive-modal-form .usa-select { font-size: 16px !important; /* Prevents zoom on iOS */ min-height: 44px !important; /* Touch-friendly size */ } /* Improve label readability */ .responsive-modal-form .usa-label { font-size: 0.9375rem !important; } /* Better spacing for checkboxes on very small screens */ .responsive-modal-form .usa-checkbox { margin-bottom: 0.75rem !important; } } /* ======================================== JQUERY MODAL OVERRIDES ======================================== */ /* Override jQuery Modal close button to make it smaller */ .modal a.uswds-close { position: absolute !important; top: -8px !important; right: -8px !important; width: 20px !important; height: 20px !important; display: block !important; text-indent: -9999px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==') !important; }/* ======================================== JQUERY MODAL OVERRIDES - CORRECTED VERSION ======================================== */ /* This rule prevents duplicate close buttons by disabling the programmatic jQuery modal close button */ /* Only for modals that already have their own USWDS close buttons in the header */ .keyboard-shortcuts-modal.modal a.uswds-close, .keyboard-shortcuts-modal.modal a.close-modal, .admin-toggle-modal.modal a.uswds-close, .admin-reinit-modal.modal a.uswds-close, .role-modal.modal a.uswds-close, .role-delete-modal.modal a.uswds-close, .user-modal.modal a.uswds-close, .user-delete-modal.modal a.uswds-close, .user-moderation-modal.modal a.uswds-close, .log-details-modal.modal a.uswds-close, .archive-logs-modal.modal a.uswds-close, .site-delete-modal.modal a.uswds-close, .site-restore-modal.modal a.uswds-close, .site-modal.modal a.uswds-close { display: none !important; } /* For other modals that might need the jQuery close button, make it appropriately sized */ .modal a.uswds-close, .modal a.close-modal { position: absolute !important; top: -10px !important; right: -10px !important; width: 25px !important; height: 25px !important; display: block !important; text-indent: -9999px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtMs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==') !important; } /* Style the USWDS close button to look like the floating round jQuery modal close button */ /* ALL MODAL CLOSE BUTTONS - UNIFIED STYLING */ .keyboard-shortcuts-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .admin-toggle-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .admin-reinit-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .role-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .role-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .user-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .user-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .user-moderation-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .log-details-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .archive-logs-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .site-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .site-restore-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .site-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .site-selection-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .date-selection-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .voucher-redemption-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .voucher-request-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .request-details-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"], .review-submit-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] { position: relative !important; margin-left: auto !important; width: 30px !important; height: 30px !important; background-color: #000 !important; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqC/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTr/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtMs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; border-radius: 50% !important; border: none !important; box-shadow: 0 0 10px rgba(0,0,0,0.3) !important; z-index: 200 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* Style the SVG icon inside the close button to be white and properly sized */ /* ALL MODAL CLOSE BUTTON ICONS - UNIFIED STYLING */ .keyboard-shortcuts-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .admin-toggle-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .admin-reinit-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .role-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .role-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .user-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .user-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .user-moderation-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .log-details-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .archive-logs-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .site-delete-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .site-restore-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .site-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .site-selection-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .date-selection-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .voucher-redemption-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .voucher-request-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .request-details-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon, .review-submit-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon { width: 16px !important; height: 16px !important; color: #fff !important; fill: #fff !important; } /* Confirmation modals - Content-responsive width with minimum/maximum constraints */ .admin-toggle-modal, .admin-reinit-modal, .role-delete-modal, .user-delete-modal, .archive-logs-modal, .site-delete-modal, .site-restore-modal { width: auto !important; min-width: 360px !important; max-width: min(800px, 90vw) !important; height: auto !important; max-height: 80vh !important; } .admin-toggle-modal-container, .admin-reinit-modal-container, .role-delete-modal-container, .user-delete-modal-container, .archive-logs-modal-container, .site-delete-modal-container, .site-restore-modal-container { height: auto !important; max-height: 80vh !important; width: fit-content !important; min-width: 360px !important; } /* Set initial width for keyboard shortcuts modal */ #keyboard-shortcuts-modal { width: auto !important; min-width: 350px !important; } .keyboard-shortcuts-modal-container { max-height: 85vh !important; } /* Hide ALL jQuery modal close buttons for keyboard shortcuts modal */ #keyboard-shortcuts-modal a.close-modal, #keyboard-shortcuts-modal a.uswds-close, #keyboard-shortcuts-modal .close-modal { display: none !important; } /* Force keyboard shortcuts modal close button to match other modals */ .keyboard-shortcuts-modal-header .usa-button.usa-button--unstyled[aria-label="Close modal"] .usa-icon { color: white !important; } /* Footer Styling Overrides */ .usa-footer__logo-img { width: auto; height: auto; transform: scale(2); transform-origin: right center; } .usa-footer__logo { float: right; clear: right; margin-bottom: 1rem; } .usa-footer__nav { overflow: hidden; } .usa-footer__nav ul { margin-right: 150px; /* Ensure links don't go under logo */ } .usa-footer__nav a, .usa-footer__nav a:link, .usa-footer__nav a:visited, .usa-footer__nav a:active { color: #ffffff !important; text-decoration: underline; } .usa-footer__return-to-top a, .usa-footer__return-to-top a:link, .usa-footer__return-to-top a:visited, .usa-footer__return-to-top a:active { color: #1b1b1b !important; text-decoration: underline; } .usa-footer__nav a:hover { color: #ffffff !important; text-decoration: none; } .usa-footer__return-to-top a:hover { color: #005ea2 !important; text-decoration: none; } .usa-footer__nav a:focus, .usa-footer__return-to-top a:focus { outline: none; box-shadow: none; } /* Reduce padding on return to top section */ .usa-footer__return-to-top { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Increase bottom padding to give DOI logo equal margins */ .usa-footer__primary-section { padding-bottom: 1.25rem; } /* Add pipe separators between footer links - manual approach */ .usa-footer__nav .pipe-separator { color: #ffffff; margin: 0 0.5rem; } /* Mobile styles */ @media screen and (max-width: 640px) { .usa-footer__logo { float: none; clear: both; text-align: center; margin: 0 0 1rem 0; width: 100%; } .usa-footer__logo-img { transform-origin: center center; } .usa-footer__primary-section { clear: both; } .usa-footer__nav ul { margin-right: 0; /* Remove margin on mobile */ } } /* Mobile responsive adjustments for keyboard shortcuts modal */ @media (max-height: 667px) { .keyboard-shortcuts-modal-container { max-height: 80vh !important; } .keyboard-shortcuts-modal-content { padding: 0 1rem 0.5rem 1rem !important; } .keyboard-shortcuts-modal-body { max-height: 50vh !important; overflow-y: auto !important; } } .admin-toggle-modal-body, .admin-reinit-modal-body, .role-delete-modal-body, .user-delete-modal-body, .archive-logs-modal-body, .site-delete-modal-body, .site-restore-modal-body { max-height: 50vh !important; overflow-y: auto !important; width: fit-content !important; min-width: 300px !important; } /* Confirmation modal footers - Prevent button overlap */ .admin-toggle-modal-footer, .admin-reinit-modal-footer, .role-delete-modal-footer, .user-delete-modal-footer, .archive-logs-modal-footer, .site-delete-modal-footer, .site-restore-modal-footer { min-width: fit-content !important; white-space: nowrap !important; } .admin-toggle-modal-footer .display-flex, .admin-reinit-modal-footer .display-flex, .role-delete-modal-footer .display-flex, .user-delete-modal-footer .display-flex, .archive-logs-modal-footer .display-flex, .site-delete-modal-footer .display-flex, .site-restore-modal-footer .display-flex { flex-wrap: wrap !important; gap: 0.5rem !important; align-items: center !important; justify-content: space-between !important; } /* Ensure buttons don't shrink */ .admin-toggle-modal-footer button, .admin-reinit-modal-footer button, .role-delete-modal-footer button, .user-delete-modal-footer button, .archive-logs-modal-footer button, .site-delete-modal-footer button, .site-restore-modal-footer button { flex-shrink: 0 !important; min-width: fit-content !important; } /* Mobile responsiveness - Stack buttons on very small screens */ @media (max-width: 480px) { .admin-toggle-modal-footer .display-flex, .admin-reinit-modal-footer .display-flex, .role-delete-modal-footer .display-flex, .user-delete-modal-footer .display-flex, .archive-logs-modal-footer .display-flex, .site-delete-modal-footer .display-flex, .site-restore-modal-footer .display-flex { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } .admin-toggle-modal, .admin-reinit-modal, .role-delete-modal, .user-delete-modal, .archive-logs-modal, .site-delete-modal, .site-restore-modal { min-width: 300px !important; max-width: 95vw !important; } } /* Common DataTable Page Styles */ /* Filter area collapse/expand styles - Used across multiple DataTable pages */ .cursor-pointer { cursor: pointer; } #filterToggleHeader:hover { background-color: var(--usa-color-base-lightest); transition: background-color 0.2s ease; } /* Pagination styling for DataTables */ ul.pagination li { display: inline-block; } /* Form error styling */ #form_error { color: #ff0000; font-weight: bold; } /* Add/Edit modal display control */ #add_edit { display: none; } /* DataTable select form styling */ #educators form li select { width: 100%; } /* DataTables Select Plugin Styling */ table.dataTable tbody tr.selected, table.dataTable tbody tr.selected:hover { background-color: #005ea2 !important; color: white !important; } table.dataTable tbody tr.selected td { background-color: inherit !important; color: inherit !important; } /* DataTable Action Button Styles - Used across multiple DataTable pages */ .dt-button { cursor: pointer !important; } .dt-button:hover { cursor: pointer !important; } /* Filter Controls Layout - Used across DataTable pages with filters */ .filter-controls-row { display: flex; justify-content: space-between; align-items: baseline; width: 100%; } .filter-control-group { display: flex; align-items: baseline; } .filter-control-group.search-group { flex: 1; margin-right: 1rem; } .filter-control-group.results-group { flex-shrink: 0; white-space: nowrap; } /* Site selection modal specific filter alignment */ #siteFiltersCollapse .filter-controls-row { padding-left: 0; padding-right: 0; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; } #siteFiltersCollapse .filter-control-group.results-group { margin-right: -1rem; padding-right: 1rem; } /* Responsive stacking for filter controls */ @media (max-width: 728px) { #siteFiltersCollapse .filter-controls-row { flex-direction: column; gap: 1rem; align-items: stretch; } #siteFiltersCollapse .filter-control-group.search-group { margin-right: 0; } #siteFiltersCollapse .filter-control-group.results-group { margin-right: -1rem; padding-right: 1rem; justify-content: flex-end; align-self: flex-end; } } /* Form Select Styling - Used in user management pages */ #educators form li select { font-size: 18px; border: 1px solid #5A7C5D; padding: 15px; margin: 0 0 10px; } /* Loading Animation and Button States - Used in forms */ .submit-loader svg { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .usa-button--disabled { opacity: 0.7; cursor: not-allowed; } /* Voucher Request Modal - flexible responsive like redemption modal */ .voucher-request-modal { width: min(90vw, 420px) !important; max-width: min(90vw, 420px) !important; min-width: 320px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; position: fixed !important; transition: all 0.2s ease-in-out !important; } .voucher-request-modal-container { background: white; width: 100%; max-height: 600px; display: flex; flex-direction: column; border-radius: 0.25rem; position: relative; z-index: 200; margin: 0; } .voucher-request-modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; min-height: 0; } .voucher-request-modal-footer { padding: 1.5rem; border-top: 1px solid #dfe1e2; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; } /* Voucher request step containers */ .voucher-request-step { display: block; } .voucher-request-step.display-none { display: none !important; } /* Voucher Request Step Indicator (Working Pattern) */ .voucher-request-step-indicator { display: flex; justify-content: center; margin-bottom: 2rem; padding: 0; list-style: none; } .voucher-request-step-indicator li { display: flex; flex-direction: column; align-items: center; text-align: center; color: #757575; min-width: 80px; } .voucher-request-step-indicator li.active { color: #005ea2; font-weight: 700; } .voucher-request-step-indicator li.completed { color: #4f8132; } .voucher-request-step-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: #f0f0f0; margin-right: 0; margin-bottom: 0.25rem; flex-shrink: 0; } .voucher-request-step-indicator li.active .voucher-request-step-number { background-color: #005ea2; color: white; } /* Force completed step styling with maximum specificity */ .voucher-request-step-indicator li.completed .voucher-request-step-number { background-color: #4f8132 !important; color: transparent !important; } .voucher-request-step-indicator li.completed .voucher-request-step-number::before { content: "✓" !important; color: white !important; font-size: 1rem !important; font-weight: bold !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Add position relative to the parent for absolute positioning */ .voucher-request-step-indicator li.completed .voucher-request-step-number { position: relative !important; } /* Override for all possible selectors */ span.voucher-request-step-number { background-color: #f0f0f0; } li.completed span.voucher-request-step-number, .completed span.voucher-request-step-number { background-color: #4f8132 !important; color: transparent !important; position: relative !important; } li.completed span.voucher-request-step-number::before, .completed span.voucher-request-step-number::before { content: "✓" !important; color: white !important; font-size: 1rem !important; font-weight: bold !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } .voucher-request-step-connector { width: 2rem; height: 2px; background-color: #dfe1e2; margin: 0 0.5rem; align-self: center; margin-top: 1rem; } .voucher-request-step-indicator li.completed .voucher-request-step-connector { background-color: #4f8132; } /* Responsive step indicator adjustments */ @media (max-width: 600px) { .voucher-request-step-indicator li { min-width: 70px; } .voucher-request-step-connector { width: 1.5rem; margin: 1rem 0.375rem 0 0.375rem; } } @media (max-width: 500px) { .voucher-request-step-indicator li { min-width: 60px; font-size: 0.9rem; } .voucher-request-step-connector { width: 1rem; margin: 1rem 0.25rem 0 0.25rem; } } /* Step indicator stacking - stack steps at small screens earlier */ @media (max-width: 460px) { .voucher-request-step-indicator { flex-direction: column; align-items: center; gap: 0.5rem; } .voucher-request-step-indicator li { min-width: auto; margin: 0; } /* Hide connectors when stacked vertically */ .voucher-request-step-connector { display: none; } } /* Voucher redemption modal responsive design - keep existing behavior */ @media (max-width: 560px) { .voucher-redemption-modal { padding: 0.5rem !important; width: 95% !important; max-width: 95% !important; max-height: 95vh !important; display: flex !important; flex-direction: column !important; } .voucher-redemption-modal .modal-header, .voucher-redemption-modal .modal-footer { padding: 1rem !important; flex-shrink: 0 !important; } .voucher-redemption-modal .modal-body { padding: 1rem !important; flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; } .voucher-redemption-modal .modal-header h2 { font-size: 1.25rem !important; } .voucher-redemption-modal .usa-form-group { margin-bottom: 1rem !important; } .voucher-redemption-modal .usa-input, .voucher-redemption-modal .usa-select, .voucher-redemption-modal .usa-textarea { width: 100% !important; max-width: 100% !important; font-size: 16px !important; } .voucher-redemption-modal .usa-button { width: 100% !important; margin-bottom: 0.5rem !important; padding: 0.75rem 1rem !important; } .voucher-redemption-modal .modal-footer .usa-button { width: auto !important; min-width: 120px !important; } .voucher-redemption-modal p, .voucher-redemption-modal .usa-label { font-size: 0.9rem !important; line-height: 1.4 !important; } } /* Voucher codes display grid */ .voucher-codes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; } .voucher-code-item { padding: 1rem; background: #f0f0f0; border-radius: 0.25rem; font-size: 0.9rem; } .voucher-code-item .font-mono { font-family: monospace; font-weight: bold; } /* Step Indicator - Custom styling to match design */ .usa-step-indicator { margin-bottom: 2rem; position: relative; } .usa-step-indicator__segments { counter-reset: usa-step-indicator; display: flex; list-style: none; margin: 0; padding: 0; position: relative; } /* Background line */ .usa-step-indicator__segments::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 4px; background-color: #dfe1e2; z-index: 1; } .usa-step-indicator__segment { flex: 1; display: flex; flex-direction: column; align-items: flex-start; position: relative; } .usa-step-indicator__segment:first-child { align-items: flex-start; } .usa-step-indicator__segment:last-child { align-items: flex-end; } .usa-step-indicator__segment:not(:first-child):not(:last-child) { align-items: center; } /* Step circles */ .usa-step-indicator__segment::before { content: counter(usa-step-indicator); counter-increment: usa-step-indicator; width: 24px; height: 24px; border-radius: 50%; background-color: #71767a; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; position: relative; z-index: 2; margin-bottom: 8px; } .usa-step-indicator__segment--current::before { background-color: #005ea2; } .usa-step-indicator__segment--complete::before { background-color: #005ea2; content: "✓"; } /* Progress bar - blue portion */ .usa-step-indicator__segment--current::after { content: ""; position: absolute; top: 12px; left: 0; width: 100%; height: 4px; background-color: #005ea2; z-index: 1; } .usa-step-indicator__segment--complete::after { content: ""; position: absolute; top: 12px; left: 0; width: 100%; height: 4px; background-color: #005ea2; z-index: 1; } .usa-step-indicator__segment-label { font-size: 14px; color: #71767a; text-align: center; white-space: nowrap; } .usa-step-indicator__segment--current .usa-step-indicator__segment-label { color: #005ea2; font-weight: bold; } .usa-step-indicator__segment--complete .usa-step-indicator__segment-label { color: #005ea2; } /* ======================================== VOUCHER REDEMPTION MODAL SYSTEM STYLES ======================================== */ /* 2-Step Voucher Modal System */ .voucher-redemption-modal { width: auto; min-width: 320px; max-width: 95%; } .voucher-step-indicator { display: flex; justify-content: center; margin-bottom: 1.5rem; padding: 0; list-style: none; } .voucher-step-indicator li { display: flex; align-items: center; color: #757575; min-width: 50px !important; text-align: center; flex-direction: column; flex: 1; max-width: 25% !important; width: auto !important; box-sizing: border-box; } /* Responsive min-width for step text */ @media (max-width: 700px) { .voucher-step-indicator li { min-width: 40px !important; max-width: 30% !important; font-size: 0.9rem !important; } } @media (max-width: 600px) { .voucher-step-indicator li { min-width: 35px !important; max-width: 28% !important; font-size: 0.85rem !important; } } @media (max-width: 500px) { .voucher-step-indicator li { min-width: 28px !important; max-width: 24% !important; font-size: 0.8rem !important; } } @media (max-width: 470px) { .voucher-step-indicator li { min-width: 22px !important; max-width: 20% !important; font-size: 0.75rem !important; } } @media (max-width: 430px) { .voucher-step-indicator li { min-width: 18px !important; max-width: 18% !important; font-size: 0.7rem !important; padding: 0 !important; } } .voucher-step-indicator li.active { color: #005ea2; font-weight: 700; } .voucher-step-indicator li.completed { color: #4f8132; } .voucher-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: #f0f0f0; margin-bottom: 0.5rem; } .voucher-step-indicator li.active .voucher-step-number { background-color: #005ea2; color: white; } .voucher-step-indicator li.completed .voucher-step-number { background-color: #4f8132; color: white; } .voucher-step-indicator li:not(:last-child) { margin-right: 1rem; } /* Responsive spacing for voucher redemption steps */ @media (max-width: 600px) { .voucher-step-indicator li:not(:last-child) { margin-right: 0.75rem; } } @media (max-width: 500px) { .voucher-step-indicator li:not(:last-child) { margin-right: 0.5rem; } } @media (max-width: 470px) { .voucher-step-indicator li:not(:last-child) { margin-right: 0.375rem; } } @media (max-width: 450px) { .voucher-step-indicator li:not(:last-child) { margin-right: 0.25rem; } } /* Add connecting lines between steps - truly responsive */ .voucher-step-indicator li:not(:last-child)::after { content: ''; position: absolute; top: 1rem; left: calc(50% + 1rem); right: calc(-100% + 1rem); height: 1px; background-color: #dfe1e2; z-index: 1; } .voucher-step-indicator li { position: relative; } .voucher-step-number { position: relative; z-index: 2; } /* Step 1: Site Selection Modal */ .site-selection-modal .modal-body { max-height: 70vh; overflow-y: auto; background-color: white; } /* Ensure DataTable integrates with USWDS styling in modal */ .site-selection-modal .dataTables_wrapper, .site-selection-modal table.dataTable, .site-selection-modal .dataTables_info, .site-selection-modal .dataTables_paginate, .site-selection-modal .dataTables_filter, .site-selection-modal .dataTables_length, .site-selection-modal .overflow-x-auto { background-color: white !important; } /* DataTable selected row - match Continue button color */ .site-selection-modal table.dataTable tbody tr.selected, .site-selection-modal table.dataTable tbody tr.selected:hover, .site-selection-modal table.dataTable tbody tr.selected td, .site-selection-modal table.dataTable tbody tr.selected:hover td { background-color: #005ea2 !important; color: white !important; box-shadow: none !important; } /* Compact table styling for logo column */ .site-selection-modal table.dataTable td:first-child { text-align: center; padding: 0.375rem 0.25rem; vertical-align: middle; } .site-selection-modal table.dataTable th:first-child { text-align: center; padding: 0.375rem 0.25rem; } /* Prevent horizontal scrolling and ensure proper table fit */ .site-selection-modal .overflow-x-auto { overflow-x: hidden !important; overflow-y: visible !important; } .site-selection-modal table.dataTable { width: 100% !important; margin: 0 !important; table-layout: fixed !important; min-width: auto !important; } .site-selection-modal .dataTables_wrapper { min-width: auto !important; } /* Logo column - ONLY set width, no other styling */ .site-selection-modal table.dataTable td:nth-child(1) { width: 5% !important; max-width: 5% !important; min-width: 5% !important; } /* Site Name column */ .site-selection-modal table.dataTable td:nth-child(2) { width: 75% !important; } /* City column */ .site-selection-modal table.dataTable td:nth-child(3) { width: 10% !important; white-space: nowrap !important; } /* State column - auto width with no header wrapping */ .site-selection-modal table.dataTable td:nth-child(4){ width: 10% !important; white-space: nowrap !important; } /* Force all columns to be visible at all screen sizes */ .site-selection-modal table.dataTable th, .site-selection-modal table.dataTable td { display: table-cell !important; visibility: visible !important; } .site-selection-modal table.dataTable td, .site-selection-modal table.dataTable th { white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: break-word !important; vertical-align: top !important; } .site-selection-modal .dataTables_wrapper { overflow: visible; width: 100%; } /* Step 2: Voucher Redemption Modal */ .voucher-redemption-modal .modal-body { max-height: 75vh; overflow-y: auto; } /* Voucher input styling in modal */ #voucher_input_modal ul { list-style: none; padding: 0; margin: 0; } #voucher_input_modal li { margin-bottom: 1rem; } #voucher_input_modal .voucher-input-group { display: flex; gap: 0.5rem; align-items: center; min-height: 2.5rem; } #voucher_input_modal .voucher-input-group label { min-width: 30px; margin-bottom: 0; margin-top: 0; flex-shrink: 0; font-size: 1.06rem; line-height: 1.3; height: 2.5rem; padding: 0; display: flex; align-items: center; } /* Align scan label with input placeholder text */ #scan_input_container label { display: flex; align-items: center; height: 2.5rem; margin-bottom: 0; line-height: 1.3; font-size: 1.06rem; } #voucher_input_modal .voucher { width: 300px; min-width: 300px; max-width: 300px; font-size: 1.06rem; line-height: 1.3; height: 2.5rem; padding: 0.375rem 0.5rem 0.625rem 0.5rem; } #voucher_input_modal .voucher-status { width: 50px; min-width: 50px; font-size: 0.9rem; text-align: left; display: flex; align-items: center; gap: 0.25rem; } /* Monospace font for voucher display values */ .voucher-display { font-family: 'Source Code Pro', 'Roboto Mono', 'Consolas', 'Monaco', monospace !important; font-size: 0.95rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; color: #1b1b1b !important; background: #f8f9fa !important; padding: 0.375rem 0.5rem !important; border: 1px solid #d1d5db !important; border-radius: 0.25rem !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; display: inline-block !important; } #voucher_input_modal .voucher-remove { color: #d83933; cursor: pointer; padding: 0.25rem; transition: color 0.2s; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; } #voucher_input_modal .voucher-remove:hover { color: #b50d12; } #voucher_input_modal .voucher-remove svg { width: 1.25rem; height: 1.25rem; } /* Success/Error styling */ .voucher-success { color: #4f8132; font-weight: bold; } .voucher-error { color: #d83933; font-weight: bold; display: flex; align-items: flex-start; gap: 0.25rem; } .voucher-error svg { flex-shrink: 0; margin-top: 0.125rem; } .voucher-error-text { flex: 1; text-align: left; } /* Site selection modal - larger size for table display - override jQuery Modal defaults */ #siteSelectionModal.modal, .site-selection-modal.modal, div#siteSelectionModal { width: 738px !important; max-width: 90vw !important; height: 90vh !important; max-height: 90vh !important; min-width: 320px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; position: fixed !important; margin: 0 !important; transition: all 0.2s ease-in-out !important; } /* Voucher modals - consistent smaller header padding */ #siteSelectionModal .modal-header, .site-selection-modal .modal-header, #voucherRedemptionModal .modal-header, .voucher-redemption-modal .modal-header, #requestDetailsModal .modal-header, #reviewSubmitModal .modal-header, .voucher-creation-modal .modal-header { padding: 0 1rem !important; } /* Voucher redemption modal - original sizing */ .voucher-redemption-modal.modal { width: min(90vw, 550px) !important; max-width: min(90vw, 550px) !important; min-width: 320px !important; transition: all 0.2s ease-in-out !important; } /* Button stacking at 540px */ @media (max-width: 540px) { /* Stack modal footer buttons */ .site-selection-modal .modal-footer { display: flex !important; flex-direction: column-reverse !important; gap: 0.75rem !important; } .site-selection-modal .modal-footer button { width: 100% !important; margin: 0 !important; } .voucher-redemption-modal .modal-footer { display: flex !important; flex-direction: column-reverse !important; gap: 0.75rem !important; } .voucher-redemption-modal .modal-footer button { width: 100% !important; margin: 0 !important; } } /* Mobile responsive styles for modal - only for very small screens */ @media (max-width: 480px) { /* Completely rewrite filter controls for mobile */ .site-selection-modal .filter-controls-row { display: flex !important; flex-direction: column !important; gap: 1rem !important; width: 100% !important; } /* Search row - full width */ .site-selection-modal .search-group { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0.25rem !important; } .site-selection-modal .search-group label { font-weight: 600 !important; } .site-selection-modal .search-group input { width: 100% !important; box-sizing: border-box !important; } /* Results row - align right */ .site-selection-modal .results-group { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; gap: 0.5rem !important; } .site-selection-modal .results-group label { font-weight: 600 !important; white-space: nowrap !important; } .site-selection-modal .results-group select { width: auto !important; min-width: 4.25rem !important; } /* Keep voucher redemption modal responsive, not full screen */ .voucher-redemption-modal { max-height: 90vh !important; } /* Fix voucher redemption modal body scaling on mobile */ .voucher-redemption-modal .modal-body { padding: 1rem !important; overflow-x: hidden !important; } /* Style voucher display spans to look like text content - mobile override */ .voucher-display { font-family: 'Source Code Pro', 'Roboto Mono', 'Consolas', 'Monaco', monospace !important; font-size: 0.85rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; color: #1b1b1b !important; background: #f8f9fa !important; padding: 0.375rem 0.5rem !important; border: 1px solid #d1d5db !important; border-radius: 0.25rem !important; min-width: 0; flex: 1; } /* Adjust voucher input fields on mobile - gradual compression */ .voucher-redemption-modal .voucher-input-group { margin-bottom: 1rem !important; display: flex !important; gap: 0.25rem !important; /* Reduce gap first */ align-items: center !important; width: 100% !important; } .voucher-redemption-modal .voucher-input-group label { min-width: 30px !important; /* Much smaller for just numbers */ font-size: 0.95rem !important; flex-shrink: 0 !important; } .voucher-redemption-modal .voucher-input-group input { width: 200px !important; /* Reduce input width instead of 100% */ min-width: 200px !important; max-width: 200px !important; box-sizing: border-box !important; } /* Fix location text wrapping */ .voucher-redemption-modal #selectedSiteDisplay { word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Ensure voucher input container scales properly */ .voucher-redemption-modal #voucher_input_modal { width: 100% !important; } .voucher-redemption-modal #voucher_input_ul_modal { width: 100% !important; padding: 0 !important; } /* Medium-small screens - further compression before stacking */ .voucher-redemption-modal .voucher-input-group { gap: 0.125rem !important; /* Even tighter gap */ } .voucher-redemption-modal .voucher-input-group label { min-width: 25px !important; /* Even smaller for just numbers */ font-size: 0.9rem !important; flex-shrink: 0 !important; } .voucher-redemption-modal .voucher-input-group input { width: 160px !important; /* Smaller input width */ min-width: 160px !important; max-width: 160px !important; } } /* Very narrow screens - comprehensive responsive fixes */ @media (max-width: 350px) { /* Force modals to fit within viewport on very small screens */ .site-selection-modal, .voucher-redemption-modal { position: fixed !important; left: 1vw !important; right: 1vw !important; width: 98vw !important; max-width: 98vw !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* Stack step indicators vertically */ .voucher-step-indicator { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; margin-bottom: 1rem !important; } .voucher-step-indicator li { margin-right: 0 !important; text-align: center !important; } /* Reduce all modal padding drastically */ .site-selection-modal .modal-body, .voucher-redemption-modal .modal-body { padding: 0.5rem !important; overflow-x: hidden !important; } .site-selection-modal .modal-header, .voucher-redemption-modal .modal-header, .site-selection-modal .modal-footer, .voucher-redemption-modal .modal-footer { padding: 0.5rem !important; } /* Force form fields to stack only on very small screens */ .voucher-redemption-modal .voucher-input-group { width: 100% !important; margin-bottom: 1rem !important; display: flex !important; flex-direction: column !important; /* Now stack vertically */ gap: 0.25rem !important; } .voucher-redemption-modal .voucher-input-group input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 16px !important; /* Prevent zoom on iOS */ } .voucher-redemption-modal .voucher-input-group label { min-width: auto !important; font-size: 0.9rem !important; line-height: 1.2 !important; margin-bottom: 0.25rem !important; } /* Ensure buttons fit properly */ .site-selection-modal .modal-footer button, .voucher-redemption-modal .modal-footer button { font-size: 0.9rem !important; padding: 0.75rem 1rem !important; } /* Fix location text wrapping */ .voucher-redemption-modal #selectedSiteDisplay { word-break: break-word !important; hyphens: auto !important; } }