/* ==========================================================================
   components.css (FIXED)
   Purpose: Reusable UI components (buttons, cards, forms, icons, nav)
   ========================================================================== */

/* Section Title Component */
.mw-section-title { font-size: 2.5rem; text-align: center; margin-bottom: 1.5rem; position: relative; }
.mw-section-title::after { content: ''; display: block; width: 40px; height: 2px; background-color: var(--mw-primary-color); margin: 8px auto 0; }

/* Cards */
.mw-card { background-color: var(--mw-card-background); border-radius: var(--mw-border-radius); box-shadow: var(--mw-shadow); border: 1px solid rgba(255,255,255,0.05); }
.mw-offer-card { box-shadow: var(--mw-offer-card-shadow); overflow: hidden; position: relative; }
/* Special offer: Valid (left) + Time (right) above CTA */
.mw-offer-valid-row { flex-wrap: nowrap; }
@media (max-width: 380px) {
    .mw-offer-valid-row { font-size: 0.65rem; gap: 0.5rem; }
}
.mw-product-card { padding: 0.5rem; display: flex; flex-direction: column; height: 100%; }

/* Blinkit UI Components */
.mw-cat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 0.5rem; text-align: center; cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
.mw-cat-item.active { border-left-color: var(--mw-primary-color); background-color: var(--mw-card-background); }
.mw-cat-img-box { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; margin: 0 auto 0.5rem auto; background: #fff; padding: 2px; }

.mw-btn-add { border: 1px solid var(--mw-primary-color); color: var(--mw-primary-color); text-transform: uppercase; font-weight: 600; padding: 0.25rem 1rem; border-radius: 6px; font-size: 0.75rem; background: transparent; transition: all 0.2s; }
.mw-btn-add:hover { background: var(--mw-primary-color); color: var(--mw-background-color); }
.mw-btn-add-overlay { background: var(--mw-primary-color) !important; color: #111 !important; }
.mw-btn-add-overlay:hover { background: var(--mw-secondary-color) !important; color: #111 !important; }

/* Shop Online ADD button - filled background, hover transition */
.mw-btn-add-shop {
    background: var(--mw-primary-color);
    border: 1px solid var(--mw-primary-color);
    color: #111;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-radius: var(--mw-border-radius);
    font-size: 0.75rem;
    transition: all 0.3s;
}
.mw-btn-add-shop:hover {
    background: var(--mw-secondary-color);
    border-color: var(--mw-secondary-color);
    color: #111;
}
.mw-btn-add-shop:active {
    transform: scale(0.98);
}
/* Shop grid card ADD only (popup uses layout.css) */
.mw-product-card .mw-product-image-wrap .mw-btn-add-shop {
    bottom: 4px;
    right: 5px;
    border-radius: 4px;
}

/* Forms */
.mw-input { width: 100%; background-color: var(--mw-background-color); border: 1px solid rgba(255,255,255,0.1); color: var(--mw-heading-color); border-radius: var(--mw-border-radius); padding: 0.75rem 1rem; outline: none; transition: border 0.3s; }
.mw-input:focus { border-color: var(--mw-primary-color); }

/* Share Profile — single-line labels on narrow screens (smaller type instead of wrapping) */
.mw-qr-share .mw-share-btn {
    white-space: nowrap;
    line-height: 1.2;
    min-width: 0;
}
@media (max-width: 359px) {
    .mw-qr-share .mw-share-btn {
        font-size: 0.625rem;
        padding-left: 0.375rem;
        padding-right: 0.375rem;
        gap: 0.25rem;
    }
    .mw-qr-share .space-y-4 > .flex {
        gap: 0.5rem;
    }
}
@media (min-width: 360px) and (max-width: 419px) {
    .mw-qr-share .mw-share-btn {
        font-size: 0.6875rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (min-width: 420px) and (max-width: 479px) {
    .mw-qr-share .mw-share-btn {
        font-size: 0.75rem;
    }
}
@media (min-width: 480px) and (max-width: 639px) {
    .mw-qr-share .mw-share-btn {
        font-size: 0.8125rem;
    }
}

/* Navigation */
.mw-sticky-nav { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(31, 31, 37, 0.95); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.1); z-index: 40; height: 60px; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -5px 20px rgba(0,0,0,0.5); }
.mw-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mw-text-color); transition: transform 0.2s; }
.mw-nav-item:hover, .mw-nav-item.active { color: var(--mw-primary-color); transform: scale(1.1); }
.mw-nav-icon { font-size: 1.125rem; }