body { font-family: 'Inter', sans-serif; background-color: #f0f4f8; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); justify-content: center; align-items: center; }
.modal-content { background-color: #ffffff; margin: auto; padding: 2.5rem; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 500px; text-align: center; position: relative; }
.close-button { color: #aaa; position: absolute; top: 1rem; right: 1rem; font-size: 1.75rem; font-weight: bold; cursor: pointer; }
.close-button:hover, .close-button:focus { color: #333; }
.fixed-button-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; }
.fixed-button-container.left { right: auto; left: 1.5rem; }
.header-gradient { background: linear-gradient(to right, #002395, #002395 10%, #FFFFFF 15%, #000000 20%, #007A4D 50%, #FFB612 80%, #E03C31 100%); }
.flag-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); transition: background-color 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); font-size: 1.5rem; text-decoration: none; }
.flag-button:hover { background-color: rgba(255, 255, 255, 0.4); }
.spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #09f; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }