/* --- Premium Pretty Theme (Gold & Pink) - UPDATED CODE --- */
:root {
    --bg-main: #fcf8f2;
    --card-white: #ffffff;
    --gold: #c4a65e;
    --pink-accent: #db2777;
    --pink-light: #fdf2f8;
    --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); 
    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 & Clock */
.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); }
.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 Hero */
.mq-pro-hero { 
    background: linear-gradient(135deg, #c4a65e 0%, #a88a45 100%); 
    border-radius: 18px; 
    padding: 22px; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    text-align: center; 
    margin-bottom: 15px; 
}

/* Yahan change kiya gaya hai: Color White kar diya gaya hai */
.mq-next-info h3 { font-size: 24px; margin: 5px 0; font-weight: 800; color: #ffffff; }

.mq-countdown { font-size: 11px; background: var(--pink-accent); padding: 5px 12px; border-radius: 30px; font-weight: 600; }
.mq-hero-time { font-size: 34px; font-weight: 800; } 

/* Prayer Grid */
.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 & Search Box */
.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; position: relative; }
.mq-search-box input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border-gold); font-size: 13px; outline: none; }

/* Button & Icon Fixes */
.mq-search-box button { 
    background: var(--gold); color: #fff; border: none; padding: 10px 15px; 
    border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
#mq-detect-btn { min-width: 45px; }
.mq-search-box button i { font-size: 14px; display: inline-block; }

/* Autocomplete List */
#mq-autocomplete-list {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff; 
    border: 1px solid var(--border-gold); border-radius: 10px; z-index: 9999; 
    max-height: 250px; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 5px;
}
.mq-autocomplete-item { padding: 12px 15px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f8f1e1; text-align: left; }
.mq-autocomplete-item:hover { background: var(--pink-light); color: var(--pink-accent); }

/* Settings & Calendar */
.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; }
.mq-pro-calendar { overflow-x: auto; width: 100%; border-radius: 15px; background: var(--card-white); border: 1px solid var(--border-gold); }
.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); border-bottom: 1px solid var(--border-gold); }
.mq-table td { padding: 12px 4px; text-align: center; border-bottom: 1px solid #f9fafb; }
.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; }
    .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; }
    .mq-table th { padding: 18px 10px; font-size: 16px; }
    .mq-table td { padding: 16px 10px; font-size: 18px; }
}