/* Frontend styles for CleanLite Under Construction */

/* Font Classes */
.cl-font-sans {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cl-font-serif {
    font-family: Georgia, "Times New Roman", Times, serif;
}
.cl-font-mono {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* Base Layout */
body {
    margin: 0;
    color: var(--cl-col-text, #555);
}

.cl-uc-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f1;
    background-size: cover;
    background-position: center;
    padding: 20px; /* Add padding to prevent edge touching on mobile */
    box-sizing: border-box;
}

.cl-uc-box {
    background: var(--cl-bg-overlay, #fff);
    padding: 50px;
    border-radius: 8px;
    max-width: 650px;
    width: 100%; /* Changed from 90% to 100% for better control */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
    font-family: inherit; 
    box-sizing: border-box;
}

/* Logo */
.cl-uc-logo img {
    max-width: 180px;
    height: auto;
    margin-bottom: 25px;
}

/* Headline */
.cl-uc-headline {
    margin: 0 0 15px;
    font-size: 2.2rem;
    color: var(--cl-col-head, #222);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 1px !important; 
    word-spacing: normal !important;
    font-family: inherit;
    word-wrap: break-word; /* Prevent overflow on small screens */
}

.cl-uc-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: var(--cl-col-text, #555);
}

/* Countdown */
#cl-uc-timer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.cl-uc-time-unit {
    text-align: center;
    color: var(--cl-col-timer, #333);
}

.cl-uc-num {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.cl-uc-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Timer Style: Boxed */
body.cl-timer-boxed .cl-uc-time-unit {
    background: rgba(0,0,0,0.05);
    padding: 15px;
    border-radius: 8px;
    min-width: 80px;
}

/* Socials */
.cl-uc-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.cl-uc-social-link {
    text-decoration: none;
    color: var(--cl-col-text, #555);
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 8px 18px;
    border-radius: 50px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    white-space: nowrap; /* Keep button text on one line */
}

.cl-uc-social-link:hover {
    background: var(--cl-col-head, #222);
    color: #fff;
    border-color: var(--cl-col-head, #222);
}

.cl-uc-login-link {
    margin-top: 50px;
    font-size: 0.85rem;
    opacity: 0.6;
}
.cl-uc-login-link a { color: inherit; }

/* =========================================
   MOBILE RESPONSIVE TWEAKS
   ========================================= */
@media (max-width: 480px) {
    .cl-uc-box { 
        padding: 30px 20px; 
    }
    
    /* Shrink Logo slightly */
    .cl-uc-logo img {
        max-width: 140px; 
        margin-bottom: 20px;
    }

    /* Smaller Headline */
    .cl-uc-headline { 
        font-size: 1.6rem; 
    }

    /* Force Timer into a perfect 2x2 Grid */
    #cl-uc-timer {
        gap: 10px;
    }
    .cl-uc-time-unit {
        /* This forces 2 items per row */
        flex: 0 0 45%; 
        width: 45%;
        min-width: auto;
    }
    body.cl-timer-boxed .cl-uc-time-unit {
        padding: 10px; /* Less padding inside boxes */
        min-width: auto;
    }
    .cl-uc-num { 
        font-size: 1.8rem; /* Smaller numbers to fit */
    }

    /* Stack Socials neatly */
    .cl-uc-socials {
        gap: 8px;
    }
    .cl-uc-social-link {
        padding: 8px 14px;
        font-size: 0.8rem;
    }
}