/* --- Premium Pretty Theme (Gold & Pink) - FULL CODE --- */
:root {
    --bg-main: #fcf8f2;        /* Light Cream Background */
    --card-white: #ffffff;
    --gold: #c4a65e;           /* Aapka Gold color */
    --pink-accent: #db2777;    /* Pink Accent */
    --pink-light: #fdf2f8;     /* Light Pink for highlights */
    --text-dark: #1e293b;
    --border-gold: #e5d5b0;
}

.mq-pro-wrapper { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    max-width: 100%; 
    margin: 10px auto; 
    background: var(--bg-main); 
    color: #374151; 
    padding: 15px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(196, 166, 94, 0.1); 
    box-sizing: border-box; 
    border: 2px solid var(--border-gold);
}

/* Header Section */
.mq-pro-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.mq-pro-location h2 { font-size: 19px; font-weight: 800; margin: 0; color: var(--gold); }

/* Mobile Clock Font: 16px se 14px kar diya */
.mq-pro-clock { font-size: 14px; font-weight: 800; color: var(--pink-accent); background: #fff; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--pink-light); }

/* --- Next Prayer Box (Gold Gradient) --- */
.mq-pro-hero { 
    background: linear-gradient(135deg, #c4a65e 0%, #a88a45 100%); 
    border-radius: 18px; 
    padding: 22px; 
    color: #fff; 
    display: flex; 
    flex-direction: column; /* Mobile: Upar-Neeche */
    gap: 15px;             /* Beech mein gap */
    text-align: center; 
    margin-bottom: 15px; 
    box-shadow: 0 8px 20px rgba(196, 166, 94, 0.3);
}

.mq-next-info h3 { font-size: 24px; margin: 5px 0; color: #fff; font-weight: 800; }
.mq-countdown { font-size: 11px; color: #fff; background: var(--pink-accent); padding: 5px 12px; border-radius: 30px; font-weight: 600; }
.mq-hero-time { font-size: 34px; font-weight: 800; } 

/* --- Prayer Grid (Mobile) --- */
.mq-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.mq-p-card { 
    background: var(--card-white); 
    padding: 15px 5px; 
    border-radius: 15px; 
    text-align: center; 
    border: 1px solid var(--border-gold); 
    transition: all 0.3s ease;
}
.mq-p-card.active { 
    border: 2px solid var(--pink-accent); 
    background: var(--pink-light); 
    transform: translateY(-3px);
}
.mq-p-card .name { font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; margin-bottom: 4px; }
.mq-p-card .time { font-size: 14px; font-weight: 800; color: #1f2937; }

/* --- Utils & Buttons --- */
.mq-pro-utils { 
    display: flex; flex-direction: column; gap: 10px; 
    margin-bottom: 20px; padding: 15px; background: #fff; 
    border-radius: 18px; border: 1px solid var(--border-gold);
}
.mq-search-box { display: flex; width: 100%; gap: 5px; }
.mq-search-box input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border-gold); font-size: 13px; }
.mq-search-box button { background: var(--gold); color: #fff; border: none; padding: 10px 15px; border-radius: 10px; cursor: pointer; }

.mq-settings { display: flex; gap: 8px; width: 100%; }
.mq-settings select { 
    flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border-gold); 
    font-size: 11px; background: var(--pink-light); color: var(--pink-accent); font-weight: 600;
}

/* --- Monthly Calendar (Mobile Default) --- */
.mq-pro-calendar { 
    overflow-x: auto; 
    width: 100%; 
    border-radius: 15px; 
    background: var(--card-white);
    border: 1px solid var(--border-gold);
    -webkit-overflow-scrolling: touch;
}
.mq-table { width: 100%; border-collapse: collapse; min-width: 450px; font-size: 11px; }
.mq-table th { background: var(--pink-light); padding: 10px 4px; color: var(--pink-accent); text-align: center; border-bottom: 1px solid var(--border-gold); }
.mq-table td { padding: 12px 4px; text-align: center; border-bottom: 1px solid #f9fafb; color: #4b5563; }
.mq-row-today { background: #fff7ed !important; font-weight: bold; color: var(--gold) !important; border-left: 4px solid var(--gold); }

/* --- DESKTOP VIEW --- */
@media (min-width: 768px) {
    .mq-pro-wrapper { padding: 35px; }
    .mq-pro-location h2 { font-size: 32px; }
    
    /* Desktop Clock Font (As requested earlier) */
    .mq-pro-clock { font-size: 18px; } 
    
    .mq-pro-hero { 
        padding: 45px; 
        flex-direction: row; 
        justify-content: space-between;
        text-align: left;
    }
    .mq-next-info h3 { font-size: 45px; }
    .mq-hero-time { font-size: 75px; }
    .mq-countdown { font-size: 18px; padding: 5px 20px; }

    .mq-pro-grid { grid-template-columns: repeat(6, 1fr); gap: 15px; }
    .mq-p-card { padding: 25px 10px; }
    .mq-p-card .name { font-size: 14px; }
    .mq-p-card .time { font-size: 24px; }

    .mq-pro-utils { flex-direction: row; padding: 25px; }
    .mq-settings { width: auto; min-width: 400px; }

    /* Desktop Calendar Fonts */
    .mq-pro-calendar { overflow-x: hidden; } 
    .mq-table { min-width: 100%; }
    .mq-table th { padding: 18px 10px; font-size: 16px; font-weight: 700; }
    .mq-table td { padding: 16px 10px; font-size: 18px; font-weight: 600; }
}