/********************* Region + currency dialog *********************/ /* Native , statically included at the end of (like the age gate) and opened via showModal from the nav button or window.voaOpenRegion. The dialog itself is the transparent full-screen flex overlay (global.css); the white content box is the Inner, centered by that flex. */ #regionDialog { align-items: center; justify-content: center; } #regionDialogInner { background-color: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); margin: 20px; max-width: 400px; padding: 24px; text-align: left; width: 100%; } #regionDialogHeader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } #regionDialogTitle { margin: 0; font-size: 18px; font-weight: 700; } #regionDialogClose { padding: 0 6px; border: none; background: none; font-size: 24px; line-height: 1; color: #8C8D8B; cursor: pointer; } #regionDialogClose:hover { color: var(--black); } .regionDialogRow { margin-bottom: 12px; } .regionDialogHidden { display: none; } .regionDialogLabel { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #555; } #regionDialogCountry, #regionDialogState, #regionDialogCurrency { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #DDD; border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; } #regionDialogNote { margin: 4px 0 14px; font-size: 12px; line-height: 1.4; color: #8C8D8B; } #regionDialogDone { width: 100%; }