/* =========================================================
   Out of Stock Message — Frontend Styles
   Author: Aqdas Rehman | aqdasrehman.com
   ========================================================= */

/* The main container styles are injected inline via PHP from settings,
   but we define base/mobile-first styles here. */

.osm-message-wrap {
    display: flex;
    flex-direction: row; /* Default for larger screens */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    overflow-wrap: break-word; /* Prevent text overflow */
    word-break: break-word;
}

.osm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* MOBILE OPTIMIZATION */
@media (max-width: 600px) {
    .osm-message-wrap {
        padding: 12px 16px !important; /* Slightly tighter padding on mobile */
        font-size: clamp(14px, 4vw, 18px) !important; /* Scalable font size if too large */
        flex-direction: column; /* Stack icon on top of text on very small screens if needed */
        text-align: center !important;
        justify-content: center !important;
    }
    
    .osm-icon {
        margin-bottom: 5px;
        font-size: 1.2em !important;
    }
}

/* Print Styles */
@media print {
    .osm-message-wrap {
        border: 1px solid #ccc !important;
        background: none !important;
        color: #000 !important;
    }
}