/* ------------------------------ */
/* Signage Container (Fluid & Responsive) */
/* ------------------------------ */
.prayer-times-signage-widget {
    
    container-type: inline-size;
    container-name: pts-widget;

    --pts-bg: #f8fafc;
    --pts-text: #0f172a;
    --pts-accent: #0f172a;
    --pts-border: #e2e8f0;
    --pts-highlight-bg: #e6f7f7;
    --pts-highlight-border: #00a99d;
    --pts-highlight-text: #007a73;

    background-color: var(--pts-bg);
    color: var(--pts-text);
    /* Padding scales between 1rem (small) and 2.5rem (large) */
    padding: clamp(1rem, 4cqi, 2.5rem);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    margin: 1rem auto;
}

/* ------------------------------ */
/* Header */
/* ------------------------------ */
.prayer-times-signage-widget .pts-header {
    text-align: center;
    font-size: clamp(1.0rem, 5cqi, 1.5rem);
    font-weight: 700;
    color: var(--pts-accent);
    margin-top: 0;
    margin-bottom: clamp(1.5rem, 4cqi, 2.5rem);
}

/* ------------------------------ */
/* CSS Grid Layout */
/* ------------------------------ */
.pts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1rem, 3cqi, 1.5rem);
    padding: 10px;
}

/* ------------------------------ */
/* Prayer Cards / Squares */
/* ------------------------------ */
.pts-card {
    background-color: #ffffff;
    border: 3px solid var(--pts-border);
    border-radius: 16px;
    padding: clamp(1rem, 3cqi, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease-in-out;
}

.pts-card-header {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2cqi, 1rem);
    margin-bottom: clamp(1rem, 3cqi, 1.5rem);
}

/* Icon Font scaling and colors */
.pts-icon i {
    font-size: clamp(36px, 8cqi, 56px); /* Made slightly larger so they pop */
    color: var(--pts-accent);
    line-height: 1;
    display: flex;
    transition: color 0.3s ease;
}

.pts-prayer-name {
    font-size: clamp(1.4rem, 4.5cqi, 2.2rem);
    font-weight: 700;
    margin: 0;
    color: var(--pts-accent);
    line-height: 1;
}

/* ------------------------------ */
/* Times Container */
/* ------------------------------ */
.pts-times-container {
    display: flex;
    flex-direction: column; /* This forces Adhan and Jama'ah to stack vertically */
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 1.25rem; /* Adds beautiful spacing between Adhan and Jama'ah */
}

.pts-time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pts-label {
    font-size: clamp(0.7rem, 1.8cqi, 1.1rem);
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.pts-time {
    font-size: clamp(1.3rem, 5cqi, 2.5rem);
    font-weight: 700;
    color: var(--pts-text);
}

/* ------------------------------ */
/* Next Prayer Highlight */
/* ------------------------------ */
.pts-card.next-prayer {
    border-color: var(--pts-highlight-border);
    background-color: var(--pts-highlight-bg);
    box-shadow: 0 10px 25px rgba(0, 169, 157, 0.25);
}

.pts-card.next-prayer .pts-icon i {
    color: var(--pts-highlight-text);
}

.pts-card.next-prayer .pts-prayer-name,
.pts-card.next-prayer .pts-time {
    color: var(--pts-highlight-text);
}

/* ------------------------------ */
/* Container Queries for extreme shrinking */
/* ------------------------------ */
/* If the container itself (not the screen) gets smaller than 550px, force a 1-column layout */
@container pts-widget (max-width: 550px) {
    .pts-grid {
        grid-template-columns: 1fr;
    }
    .pts-time {
        font-size: clamp(1.4rem, 8cqi, 2rem);
    }
    .pts-prayer-name {
        font-size: clamp(1.4rem, 7cqi, 2rem);
    }
}