/* --- 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: 25% !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 {
    font-family: "Font Awesome 6 Free" !important; /* Target the font we imported */
    font-weight: 900 !important; /* Required for Solid icons */
    font-style: normal !important;
    font-size: 4.5rem !important; /* Huge icon size (approx 72px) */
    line-height: 1 !important;
    margin-bottom: 10px !important;
    
    /* Reset old image settings just in case */
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    content: '' !important;
}

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

/* OPERATIONAL: Check Circle (Green) */
/* Shopify uses a check in a circle. FA Unicode: \f058 */
.layout-content.status.status-index .page-status.status-none::before {
    content: "\f058" !important;
    color: #36B37E !important; /* Statuspage Green */
}
/* 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 */
}