/* Countddown CSS inspired from CodePen: https://codepen.io/shshaw/pen/vKzoLL */


/* Custom properties - placed at top for easy adjustment */
:root {
    --halfHeight: 1em;    /* Controls approximate height of half a card */
    --borderRadius: 0.25em; /* Controls roundness of corners */
}

/* 1. Container for the Flip Clock */
#flip-countdown-container {
    display: flex;
    justify-content: center; /* Centers the entire clock horizontally within its parent */
    max-width: 100%;         /* Ensures it takes available width within its parent column */
    padding: 10px 0px;       /* Add vertical padding above/below the clock */
    overflow: hidden;        /* Important: Ensures nothing spills out of this container */
}

/* 2. Flip Clock itself (the main countdown wrapper) */
.flip-clock {
    display: flex;            /* Makes the individual pieces lay out in a single row */
    justify-content: center;  /* Centers the entire clock's content */
    align-items: center;      /* Aligns the pieces vertically */
    text-align: center;       
    margin: 0px auto;         /* Centers the clock element itself on the page */
    max-width: 700px;         /* Adjusted: Default max-width for larger screens to ensure fit */
    width: 100%;              /* Ensures it scales down on smaller screens */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
}

.flip-clock *,
.flip-clock *:before,
.flip-clock *:after {
    box-sizing: border-box;
}

.flip-clock__piece {
    white-space: nowrap;      /* Prevents labels or numbers from wrapping */
    flex-shrink: 0;           /* Prevents pieces from shrinking unexpectedly */
    flex-grow: 0;             /* Prevents pieces from growing to fill excess space */
    text-align: center;       /* Ensures content within each piece (number card + slot) is centered */
    margin: 0 10px;           /* Explicit horizontal margin between pieces */
    box-sizing: border-box;
}

/* Remove margin from the very first and last pieces to avoid extra space at edges */
.flip-clock__piece:first-child { margin-left: 0; }
.flip-clock__piece:last-child { margin-right: 0; }

.flip-clock__slot {
    font-size: 1.8rem; /* Font size for labels like "Days", "Hours" */
    color: #555;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    margin-top: 8px; /* Space between the number card and its label */
    display: block; /* Ensures the label takes its own line */
    box-sizing: border-box;
    font-weight: bold;
}

/* 3. Card styles (the main black rectangles) */
#flip-countdown-container .flip-clock__card.card {
    position: relative; /* Necessary for number-display positioning */
    z-index: 1; 
    background: #222; 
    font-size: 4.5rem;     /* Base font size for numbers */
    line-height: 1;       /* Sets line height to exactly the font size, aiding vertical centering */
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    text-align: center;   /* Centers the numbers horizontally within the card */
    border-radius: var(--borderRadius); /* Applies uniform rounding to all corners of the card */
    width: 2.2em;            /* Width for two digits + padding, relative to card's font-size */
    height: calc(var(--halfHeight) * 2); /* Explicit height for the card, based on its font-size */
    display: flex; /* Use flexbox to perfectly center the .number-display */
    justify-content: center;
    align-items: center;
    padding: 0.25em; /* Padding inside the card around the numbers */
    overflow: hidden; /* Important to prevent numbers from spilling out */
    box-sizing: border-box;
}

/* Style for the number itself, now inside .number-display span */
#flip-countdown-container .flip-clock__card.card .number-display {
    color: #FFF; /* White color for the numbers */
    font-size: inherit; /* Inherit font size from parent .card */
    line-height: 1; /* Ensure consistent line height */
    display: block; /* Ensure it behaves as a block element */
    width: 100%; /* Fill the width of its flex container */
    text-align: center; /* Center the text horizontally */
    display: flex; /* Use flexbox on number-display for centering */
    justify-content: center;
    align-items: center;
    height: 100%; /* Take full height of parent card */
}

/* 4. Responsive adjustments - Consistent scaling across various screen sizes */
@media (max-width: 992px) { /* Medium desktops and tablets (md breakpoint) */
    .flip-clock { max-width: 540px; }
    .flip-clock__piece { margin: 0 8px; }
    #flip-countdown-container .flip-clock__card.card {
        font-size: 4rem; /* Smaller font for numbers */
        width: 2.3em; /* Adjusted width to scale with new font-size */
    }
    .flip-clock__slot { font-size: 1.2rem; }
}

@media (max-width: 768px) { /* Tablets (sm breakpoint) */
    .flip-clock { max-width: 380px; }
    .flip-clock__piece { margin: 0 6px; }
    #flip-countdown-container .flip-clock__card.card {
        font-size: 3rem; /* Smaller font */
        width: 2.5em; /* Adjusted width */
    }
    .flip-clock__slot { font-size: 1rem; }
}@media (max-width: 576px) { /* Mobile phones (portrait, typical small phones) */
    .flip-clock { max-width: 290px; }
    .flip-clock__piece { margin: 0 4px; }
    #flip-countdown-container .flip-clock__card.card {
        font-size: 2.2rem; /* Smaller font for numbers */
        width: 2.8em; /* Adjusted width for two digits at this font size */
    }
    .flip-clock__slot { font-size: 0.8rem; }
}

@media (max-width: 420px) { /* Very small mobile phones */
    .flip-clock { max-width: 240px; }
    .flip-clock__piece { margin: 0 2px; }
    #flip-countdown-container .flip-clock__card.card {
        font-size: 1.8rem; /* Even smaller font */
        width: 3em; /* Adjusted width */
    }
    .flip-clock__slot { font-size: 0.7rem; }
}

@media (max-width: 360px) { /* Extremely small mobile phones */
    .flip-clock { max-width: 190px; }
    .flip-clock__piece { margin: 0 1px; }
    #flip-countdown-container .flip-clock__card.card {
        font-size: 1.5rem; /* Smallest font size */
        width: 3.2em; /* Adjusted width to fit two digits */
    }
    .flip-clock__slot { font-size: 0.6rem; }
}