/* --- 1. LOAD FONT AWESOME --- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');


.logo-container {
  max-width: 20% !important;
}

/* --- 2. LAYOUT CONTAINER (Shopify Style) --- */
.layout-content.status.status-index .page-status {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 220px !important;
    padding: 40px 0 !important;
    background-color: #ffffff !important;
    border: none !important;
}

/* --- 3. TEXT STYLING --- */
.layout-content.status.status-index .page-status .status {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 28px !important; /* Large, clean text like Shopify */
    font-weight: 500 !important;
    margin-top: 25px !important;
    color: #172b4d !important; 
    text-shadow: none !important;
}

/* --- 4. ICON BASE SETTINGS --- */
.layout-content.status.status-index .page-status::before {
    content: '' !important;
    display: inline-block !important;
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 10px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* --- 5. ICONS & COLORS PER STATUS --- */

/* OPERATIONAL: Check Circle (Green) */
/* Using inline SVG as background-image (base64 encoded for compatibility) */
.layout-content.status.status-index .page-status.status-none::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAxNkM1Ljg3ODI3IDE2IDMuODQzNDQgMTUuMTU3MSAyLjM0MzE1IDEzLjY1NjlDMC44NDI4NTUgMTIuMTU2NiAwIDEwLjEyMTcgMCA4QzAgNS44NzgyNyAwLjg0Mjg1NSAzLjg0MzQ0IDIuMzQzMTUgMi4zNDMxNUMzLjg0MzQ0IDAuODQyODU1IDUuODc4MjcgMCA4IDBDMTAuMTIxNyAwIDEyLjE1NjYgMC44NDI4NTUgMTMuNjU2OSAyLjM0MzE1QzE1LjE1NzEgMy44NDM0NCAxNiA1Ljg3ODI3IDE2IDhDMTYgMTAuMTIxNyAxNS4xNTcxIDEyLjE1NjYgMTMuNjU2OSAxMy42NTY5QzEyLjE1NjYgMTUuMTU3MSAxMC4xMjE3IDE2IDggMTZaTTExLjY4NzUgNC41NTMxMkMxMS4zNTMxIDQuMzA5MzcgMTAuODg0NCA0LjM4NDM4IDEwLjY0MDYgNC43MTg3NUw2LjkwOTM4IDkuODVMNS4yODEyNSA4LjIyMTg4QzQuOTg3NSA3LjkyODEzIDQuNTEyNSA3LjkyODEzIDQuMjIxODggOC4yMjE4OEMzLjkzMTI1IDguNTE1NjIgMy45MjgxMyA4Ljk5MDYzIDQuMjIxODggOS4yODEyNUw2LjQ3MTg4IDExLjUzMTJDNi42MjgxMyAxMS42ODc1IDYuODQwNjIgMTEuNzY1NiA3LjA1OTM3IDExLjc1QzcuMjc4MTIgMTEuNzM0NCA3LjQ3ODEyIDExLjYyMTkgNy42MDYyNSAxMS40NDM4TDExLjg1MzEgNS42QzEyLjA5NjkgNS4yNjU2MiAxMi4wMjE5IDQuNzk2ODggMTEuNjg3NSA0LjU1MzEyWiIgZmlsbD0iIzEzQjU0QyIvPjwvc3ZnPg==') !important;
}
/* Optional: Change text color to match icon?
   Shopify keeps text black/dark. If you want green text, uncomment below: */
/*
.layout-content.status.status-index .page-status.status-operational .status {
    color: #36B37E !important;
}
*/

/* WARNINGS: Exclamation Triangle (Yellow/Orange) */
/* FA Unicode: \f071 */
.layout-content.status.status-index .page-status.status-degraded-performance::before,
.layout-content.status.status-index .page-status.status-partial-outage::before,
.layout-content.status.status-index .page-status.status-under-maintenance::before {
    content: "\f071" !important;
    color: #FFAB00 !important; /* Statuspage Orange */
}

/* CRITICAL: Circle X-Mark (Red) */
/* FA Unicode: \f057 */
.layout-content.status.status-index .page-status.status-major-outage::before {
    content: "\f057" !important;
    color: #DE350B !important; /* Statuspage Red */
}


#past-incidents {
    /* Hide the original text by setting font-size to 0 */
    font-size: 0 !important;
}

#past-incidents::after {
    /* Inject the new text */
    content: "Past Incidents & Updates";
    
    /* Restore the font size so the new text is visible */
    /* Adjust the size/color to match your site's design */
    font-size: 1.75rem; 
    display: block;
}

.layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container {
    margin-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container:first-child {
    margin-top: 1.25rem!important;
}

.layout-content.status.status-index .components-section .component-container .child-components-container .component-inner-container:not(:last-child) {
    border-bottom: solid 1px #E0E0E0;
}