@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
    --us-blue: #002868;
    --us-red: #BF0A30;
    --us-white: #FFFFFF;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--us-blue);
    color: var(--us-white);
    font-family: 'Oswald', 'Impact', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Force no scrollbar */
    padding: 0;
    margin: 0;
}

.permit-container {
    width: 100%;
    height: 100%;
    max-width: 600px;
    border: 10px solid var(--us-red);
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle, #003080 0%, #002868 100%);
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    /* Include border in height calculation */
}

.header-band {
    background-color: var(--us-white);
    color: var(--us-blue);
    padding: 15px 10px;
    /* Slightly reduced padding */
    text-align: center;
    border-bottom: 5px solid var(--us-red);
    flex-shrink: 0;
}

h1 {
    font-size: 2.2rem;
    /* Slightly reduced to save space */
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    /* Use space-evenly for better vertical distribution */
    padding: 5px 20px;
    gap: 5px;
    /* Reduced gap to minimum */
    overflow: hidden;
    /* Prevent internal spill */
    min-height: 0;
    /* Allow flex child to shrink below content size if needed */
}

.footer-warning {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 15px;
    /* Reset to standard padding */
    padding-bottom: 25px;
    /* Enough for safe area but not excessive */
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.9rem;
    color: #e0e0e0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.badge-container {
    width: 25vh;
    /* Responsive to height */
    height: 25vh;
    max-width: 200px;
    max-height: 200px;
    min-width: 140px;
    min-height: 140px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    flex-shrink: 1;
    /* Allow shrinking */
}

.official-seal {
    width: 80%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)) invert(1);
    /* Invert if the image is black, remove if it's white. Assuming generated is dark on light or transparent. */
}

/* Adjust filter based on the generated image. 
   If the generated image is dark text on transparent, we need to invert it to make it white. 
   If it's white on transparent, no invert needed. 
   The prompt asked for "Solid color (dark blue or black)", so invert(1) is likely correct for a dark background.
*/

.status-box {
    text-align: center;
    border: 2px solid var(--us-white);
    padding: 15px 30px;
    background: rgba(0, 40, 104, 0.8);
}

h2 {
    font-size: 2rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.sub-ch {
    font-family: 'Roboto Condensed', sans-serif;
    /* Fallback for chinese if needed */
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
}

.call-button {
    background-color: var(--us-red);
    color: var(--us-white);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 2px solid white;
    width: 100%;
    max-width: 400px;
    animation: pulse 2s infinite;
}

.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    /* Allow text to take available space */
}

.action-en {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 2px;
}

.action-ch {
    font-size: 1rem;
    font-family: 'Roboto Condensed', sans-serif;
    opacity: 0.9;
    margin-bottom: 5px;
    font-weight: normal;
}

.contact-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
}

.phone-label {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2px;
}

.phone-number-display {
    font-size: 2.5rem;
    /* Enlarge font size */
    font-family: 'Oswald', sans-serif;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 15px;
}

.icon-fa {
    font-size: 2rem;
    color: var(--us-white);
}

.call-button:active {
    transform: scale(0.95);
    background-color: #a00000;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(191, 10, 48, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(191, 10, 48, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(191, 10, 48, 0);
    }
}

.simple-notice {
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    /* Subtle color */
    padding: 10px;
    width: 100%;
    margin-top: auto;
    /* Push to bottom if needed, but flex layout handles it */
    line-height: 1.4;
}

/* Mobile Responsiveness tweaks */
@media (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .badge-container {
        width: 150px;
        height: 150px;
    }

    .call-button {
        font-size: 1.4rem;
        padding: 15px 25px;
    }
}