/* ==========================================================================
   Dokan Instacart Home — home.css
   Light theme matching Instacart's store listing design.
   ========================================================================== */

:root {
    --dih-green:      #00a651;
    --dih-green-h:    #008f45;
    --dih-yellow:     #f5a623;
    --dih-red:        #e63b2e;
    --dih-text:       #1a1a1a;
    --dih-text-2:     #6b7280;
    --dih-border:     #e5e7eb;
    --dih-bg:         #f9fafb;
    --dih-card:       #ffffff;
    --dih-radius:     12px;
    --dih-shadow:     0 1px 4px rgba(0,0,0,.08);
    --dih-shadow-h:   0 4px 16px rgba(0,0,0,.12);
    --dih-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --dih-max:        960px;
}

.dih-wrap * { box-sizing: border-box; }

.dih-wrap {
    font-family : var(--dih-font);
    color       : var(--dih-text);
    background  : var(--dih-bg);
    min-height  : 100vh;
    max-width   : var(--dih-max);
    margin      : 0 auto;
    padding-bottom: 80px;
    position    : relative;
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.dih-top-bar {
    background : var(--dih-card);
    padding    : 12px 16px;
    position   : sticky;
    top        : 0;
    z-index    : 100;
    border-bottom: 1px solid var(--dih-border);
}
.dih-top-bar__inner {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 12px;
}
.dih-location-btn {
    display     : flex;
    align-items : center;
    gap         : 6px;
    background  : transparent;
    border      : none;
    cursor      : pointer;
    font-size   : 16px;
    font-weight : 700;
    color       : var(--dih-text);
    font-family : var(--dih-font);
    padding     : 0;
    max-width   : 60%;
}
.dih-location-btn svg   { width: 18px; height: 18px; flex-shrink: 0; color: var(--dih-text-2); }
.dih-location-btn .dih-chevron { width: 16px; height: 16px; color: var(--dih-text-2); }
#dih-location-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }

.dih-top-bar__actions { display: flex; align-items: center; gap: 12px; }
.dih-icon-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    background      : var(--dih-bg);
    border          : 1px solid var(--dih-border);
    color           : var(--dih-text);
    text-decoration : none;
    position        : relative;
}
.dih-icon-btn svg { width: 20px; height: 20px; }
.dih-cart-count {
    position      : absolute;
    top           : -4px;
    right         : -4px;
    background    : var(--dih-green);
    color         : #fff;
    border-radius : 999px;
    font-size     : 10px;
    font-weight   : 800;
    padding       : 1px 5px;
    min-width     : 18px;
    text-align    : center;
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
.dih-search-bar-wrap {
    padding    : 10px 16px;
    background : var(--dih-card);
    border-bottom: 1px solid var(--dih-border);
    position   : sticky;
    top        : 65px;
    z-index    : 99;
}
.dih-search-bar {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    background    : var(--dih-bg);
    border        : 1.5px solid var(--dih-border);
    border-radius : 999px;
    padding       : 11px 18px;
}
.dih-search-icon { width: 18px; height: 18px; color: var(--dih-text-2); flex-shrink: 0; }
.dih-search-input {
    flex       : 1;
    border     : none;
    background : transparent;
    outline    : none;
    font-size  : 15px;
    color      : var(--dih-text);
    font-family: var(--dih-font);
}
.dih-search-input::placeholder { color: var(--dih-text-2); }
.dih-search-clear { background: transparent; border: none; cursor: pointer; color: var(--dih-text-2); font-size: 14px; }

/* ── Search results ───────────────────────────────────────────────────────── */
.dih-search-results {
    position   : fixed;
    top        : 130px;
    left       : 50%;
    transform  : translateX(-50%);
    width      : min( 960px, 100vw );
    max-height : 70vh;
    overflow-y : auto;
    background : var(--dih-card);
    border     : 1px solid var(--dih-border);
    border-radius : var(--dih-radius);
    box-shadow : var(--dih-shadow-h);
    z-index    : 200;
    padding    : 16px;
}
.dih-search-group-title { font-size: 13px; font-weight: 700; color: var(--dih-text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.dih-search-product {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    padding        : 8px 0;
    text-decoration: none;
    color          : var(--dih-text);
    border-bottom  : 1px solid var(--dih-border);
}
.dih-search-product:last-child { border: none; }
.dih-search-product img { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--dih-bg); }
.dih-search-product-name { font-size: 14px; font-weight: 500; }
.dih-search-product-price { font-size: 13px; color: var(--dih-text-2); }
#dih-search-products-wrap { margin-top: 16px; }

/* ── Category tabs ────────────────────────────────────────────────────────── */
.dih-cat-tabs {
    display          : flex;
    gap              : 0;
    background       : var(--dih-card);
    padding          : 14px 12px 10px;
    overflow-x       : auto;
    scrollbar-width  : none;
    -ms-overflow-style: none;
    border-bottom    : 1px solid var(--dih-border);
    position         : sticky;
    top              : 123px;
    z-index          : 98;
}
.dih-cat-tabs::-webkit-scrollbar { display: none; }

.dih-cat-tab {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 6px;
    padding        : 0 10px;
    background     : transparent;
    border         : none;
    cursor         : pointer;
    font-family    : var(--dih-font);
    flex-shrink    : 0;
    width          : 80px;
}
.dih-cat-tab__icon {
    width         : 56px;
    height        : 56px;
    border-radius : 14px;
    background    : var(--dih-bg);
    display       : flex;
    align-items   : center;
    justify-content: center;
    border        : 2px solid transparent;
    overflow      : hidden;
    transition    : border-color .15s, transform .12s;
}
.dih-cat-tab__icon img,
.dih-cat-tab__icon svg { width: 48px; height: 48px; }
.dih-cat-tab__label { font-size: 12px; font-weight: 600; color: var(--dih-text-2); text-align: center; }

.dih-cat-tab:hover .dih-cat-tab__icon,
.dih-cat-tab--active .dih-cat-tab__icon { border-color: var(--dih-green); }
.dih-cat-tab--active .dih-cat-tab__label { color: var(--dih-green); font-weight: 700; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.dih-content { padding: 20px 16px 40px; }

/* ── Section ──────────────────────────────────────────────────────────────── */
.dih-section { margin-bottom: 32px; }
.dih-section-header {
    display         : flex;
    align-items     : baseline;
    justify-content : space-between;
    margin-bottom   : 14px;
}
.dih-section-title { font-size: 22px; font-weight: 800; margin: 0; color: var(--dih-text); }
.dih-show-all-btn {
    background  : transparent;
    border      : none;
    color       : var(--dih-text-2);
    font-size   : 14px;
    font-weight : 600;
    cursor      : pointer;
    font-family : var(--dih-font);
}
.dih-show-all-btn:hover { color: var(--dih-text); }

/* ── Stores near you: horizontal scroll row (Uber Eats style) ─────────────── */
.dih-stores-grid {
    display    : flex;
    flex-wrap  : nowrap;
    gap        : 4px;
    overflow-x : auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.dih-stores-grid::-webkit-scrollbar { display: none; }

.dih-store-card-grid {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 7px;
    text-decoration: none;
    cursor         : pointer;
    background     : none;
    border         : none;
    padding        : 4px 10px 8px;
    font-family    : var(--dih-font);
    text-align     : center;
    flex-shrink    : 0;
    width          : 96px;
}
.dih-store-card-grid__logo-wrap {
    position       : relative;
    width          : 72px;
    height         : 72px;
    border-radius  : 50%;
    background     : var(--dih-card);
    border         : 1px solid var(--dih-border);
    display        : flex;
    align-items    : center;
    justify-content: center;
    overflow       : hidden;
    box-shadow     : var(--dih-shadow);
    transition     : box-shadow .2s, transform .15s;
    flex-shrink    : 0;
}
.dih-store-card-grid:hover .dih-store-card-grid__logo-wrap { box-shadow: var(--dih-shadow-h); transform: translateY(-2px); }
.dih-store-card-grid__logo {
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    border-radius : 50%;
}
.dih-store-card-grid__initials {
    font-size        : 20px;
    font-weight      : 800;
    color            : #fff;
    width            : 100%;
    height           : 100%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background       : #1a1a1a;
    border-radius    : 50%;
    letter-spacing   : 0.5px;
}
.dih-store-card-grid__logo-wrap--arrow {
    background    : var(--dih-bg);
    border        : 2px dashed var(--dih-border);
    border-radius : 50%;
    width         : 72px;
    height        : 72px;
}
.dih-store-card-grid__logo-wrap--arrow svg { width: 22px; height: 22px; color: var(--dih-text-2); }
.dih-store-card-grid__name {
    font-size   : 12px;
    font-weight : 700;
    color       : var(--dih-text);
    line-height : 1.3;
    width       : 100%;
    overflow    : hidden;
    text-overflow: ellipsis;
    white-space : nowrap;
}
.dih-store-card-grid__delivery {
    display     : flex;
    align-items : center;
    justify-content: center;
    gap         : 3px;
    font-size   : 11px;
    color       : var(--dih-text-2);
    font-weight : 500;
}
.dih-store-card-grid__delivery svg { display: none; }

/* ── Promo badge on grid card ─────────────────────────────────────────────── */
.dih-promo-badge {
    position      : absolute;
    bottom        : -8px;
    left          : 50%;
    transform     : translateX(-50%);
    background    : var(--dih-yellow);
    color         : #fff;
    border-radius : 6px;
    padding       : 3px 8px;
    font-size     : 11px;
    font-weight   : 800;
    white-space   : nowrap;
    box-shadow    : 0 2px 6px rgba(0,0,0,.15);
    z-index       : 2;
}
.dih-promo-badge--inline {
    position    : static;
    transform   : none;
    display     : inline-block;
    margin-top  : 4px;
    font-size   : 12px;
}

/* ── Vertical list card ───────────────────────────────────────────────────── */
.dih-stores-list { display: flex; flex-direction: column; }
.dih-store-card-list {
    display        : flex;
    align-items    : flex-start;
    gap            : 14px;
    padding        : 14px 0;
    border-bottom  : 1px solid var(--dih-border);
    text-decoration: none;
    color          : var(--dih-text);
    transition     : background .12s;
}
.dih-store-card-list:hover { background: var(--dih-bg); }
.dih-store-card-list:last-child { border-bottom: none; }

.dih-store-card-list__logo-wrap {
    width         : 56px;
    height        : 56px;
    border-radius : 50%;
    background    : var(--dih-card);
    border        : 1px solid var(--dih-border);
    display       : flex;
    align-items   : center;
    justify-content: center;
    flex-shrink   : 0;
    overflow      : hidden;
    box-shadow    : var(--dih-shadow);
}
.dih-store-card-list__logo { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.dih-store-card-list__initials { font-size: 16px; font-weight: 800; color: #fff; background: #1a1a1a; width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:50%; }

.dih-store-card-list__info { flex: 1; min-width: 0; }
.dih-store-card-list__name { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.dih-store-card-list__delivery {
    display     : flex;
    align-items : center;
    gap         : 4px;
    font-size   : 13px;
    color       : var(--dih-green);
    font-weight : 500;
    margin-bottom: 6px;
}
.dih-store-card-list__delivery svg { width: 13px; height: 13px; flex-shrink: 0; }
.dih-dot { margin: 0 2px; color: var(--dih-text-2); }

/* Tags */
.dih-store-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.dih-store-tag {
    background    : var(--dih-bg);
    border        : 1px solid var(--dih-border);
    border-radius : 999px;
    padding       : 3px 10px;
    font-size     : 12px;
    font-weight   : 500;
    color         : var(--dih-text);
}

/* ── Restaurant banner grid ───────────────────────────────────────────────── */
.dih-restaurant-grid {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 14px;
}
@media (max-width: 480px) { .dih-restaurant-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.dih-store-card-restaurant {
    text-decoration: none;
    color          : var(--dih-text);
    border-radius  : var(--dih-radius);
    overflow       : hidden;
    background     : var(--dih-card);
    border         : 1px solid var(--dih-border);
    box-shadow     : var(--dih-shadow);
    transition     : box-shadow .2s, transform .15s;
}
.dih-store-card-restaurant:hover { box-shadow: var(--dih-shadow-h); transform: translateY(-2px); }
.dih-store-card-restaurant__banner {
    position     : relative;
    aspect-ratio : 16/9;
    background   : var(--dih-bg);
    overflow     : hidden;
    max-height   : 110px;
}
.dih-store-card-restaurant__banner img { width: 100%; height: 100%; object-fit: cover; }
.dih-restaurant-badge {
    position      : absolute;
    top           : 8px;
    left          : 8px;
    background    : var(--dih-yellow);
    color         : #fff;
    border-radius : 6px;
    padding       : 3px 8px;
    font-size     : 11px;
    font-weight   : 800;
}
.dih-store-card-restaurant__info { padding: 10px 12px 12px; }
.dih-store-card-restaurant__name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.dih-store-card-restaurant__meta {
    display     : flex;
    align-items : center;
    gap         : 8px;
    font-size   : 12px;
    color       : var(--dih-text-2);
}
.dih-restaurant-rating { display: flex; align-items: center; gap: 3px; }
.dih-restaurant-rating svg { width: 12px; height: 12px; }

/* ── Back button ──────────────────────────────────────────────────────────── */
.dih-back-btn {
    display     : flex;
    align-items : center;
    gap         : 4px;
    background  : transparent;
    border      : none;
    color       : var(--dih-text-2);
    font-size   : 14px;
    font-weight : 600;
    cursor      : pointer;
    font-family : var(--dih-font);
}
.dih-back-btn svg { width: 18px; height: 18px; }
.dih-back-btn:hover { color: var(--dih-text); }

/* ── Loading ──────────────────────────────────────────────────────────────── */
.dih-loading { text-align: center; padding: 40px; }
.dih-spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--dih-border); border-top: 3px solid var(--dih-green); border-radius: 50%; animation: dih-spin .7s linear infinite; }
@keyframes dih-spin { to { transform: rotate(360deg); } }
.dih-empty { text-align: center; color: var(--dih-text-2); padding: 40px; font-size: 15px; }

/* ── Bottom promo bar ─────────────────────────────────────────────────────── */
.dih-promo-bar {
    position    : fixed;
    bottom      : 0;
    left        : 50%;
    transform   : translateX(-50%);
    width       : min( 960px, 100vw );
    background  : #1a1a1a;
    color       : #fff;
    padding     : 14px 16px;
    display     : flex;
    align-items : center;
    justify-content: space-between;
    gap         : 12px;
    z-index     : 999;
}
.dih-promo-bar__text { font-size: 14px; line-height: 1.5; }
.dih-promo-bar__text strong { color: var(--dih-yellow); }
.dih-promo-bar__text span   { color: #aaa; font-size: 12px; }
.dih-promo-bar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dih-promo-bar__more {
    background    : transparent;
    border        : 1.5px solid #fff;
    border-radius : 999px;
    padding       : 6px 16px;
    font-size     : 13px;
    font-weight   : 700;
    color         : #fff;
    text-decoration: none;
}
.dih-promo-bar__close {
    background  : transparent;
    border      : none;
    color       : #aaa;
    font-size   : 18px;
    cursor      : pointer;
    padding     : 4px;
    line-height : 1;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .dih-section-title    { font-size: 18px; }
    .dih-cat-tab          { width: 68px; padding: 0 6px; }
    .dih-cat-tab__icon    { width: 48px; height: 48px; }
    .dih-cat-tab__label   { font-size: 11px; }
    .dih-store-card-list__name { font-size: 14px; }
}

/* ── All Stores tab ───────────────────────────────────────────────────────── */
.dih-cat-tab__icon--all {
    background : #f3f4f6;
    border     : 2px solid #e5e7eb;
}
.dih-cat-tab__icon--all svg rect { fill: #d1d5db; }
.dih-cat-tab--all.dih-cat-tab--active .dih-cat-tab__icon--all {
    background   : #f0fdf4;
    border-color : #00a651;
}
.dih-cat-tab--all.dih-cat-tab--active .dih-cat-tab__icon--all svg rect { fill: #00a651; }

/* Better icon fit */
.dih-cat-tab__icon svg {
    width  : 100%;
    height : 100%;
    padding: 6px;
}
.dih-cat-tab__icon img {
    width      : 100%;
    height     : 100%;
    object-fit : contain;
    padding    : 6px;
}

/* Scrollable tabs on all screen sizes */
.dih-cat-tabs {
    gap : 0;
}
.dih-cat-tab {
    padding   : 0 8px 10px;
    min-width : 70px;
}

/* ==========================================================================
   Business-type card polish v1.0.5
   Matches the vendor type assigned in admin profile and the store theme.
   ========================================================================== */
[class*="dih-store-card-grid--type-"],
[class*="dih-store-card-list--type-"],
[class*="dih-store-card-restaurant--type-"] {
    --dih-type-accent: var(--dih-green);
    --dih-type-soft: #f0fdf4;
}
.dih-store-card-grid--type-restaurant,
.dih-store-card-list--type-restaurant,
.dih-store-card-restaurant--type-restaurant { --dih-type-accent:#b45309; --dih-type-soft:#fff7ed; }
.dih-store-card-grid--type-bakery,
.dih-store-card-list--type-bakery { --dih-type-accent:#c2410c; --dih-type-soft:#fff1e7; }
.dih-store-card-grid--type-beauty,
.dih-store-card-list--type-beauty { --dih-type-accent:#be185d; --dih-type-soft:#fdf2f8; }
.dih-store-card-grid--type-apparel,
.dih-store-card-list--type-apparel { --dih-type-accent:#111827; --dih-type-soft:#f5f5f4; }
.dih-store-card-grid--type-electronics,
.dih-store-card-list--type-electronics { --dih-type-accent:#2563eb; --dih-type-soft:#eff6ff; }
.dih-store-card-grid--type-pharmacy,
.dih-store-card-list--type-pharmacy { --dih-type-accent:#0f766e; --dih-type-soft:#ecfeff; }
.dih-store-card-grid--type-furniture,
.dih-store-card-list--type-furniture { --dih-type-accent:#7c3f1d; --dih-type-soft:#fafaf9; }
.dih-store-card-grid--type-alcohol,
.dih-store-card-list--type-alcohol { --dih-type-accent:#7f1d1d; --dih-type-soft:#fef2f2; }
.dih-store-card-grid--type-express,
.dih-store-card-list--type-express { --dih-type-accent:#ea580c; --dih-type-soft:#fff7ed; }
.dih-store-card-grid--type-retail,
.dih-store-card-list--type-retail { --dih-type-accent:#4f46e5; --dih-type-soft:#eef2ff; }

.dih-store-card-grid[class*="--type-"] {
    border-color: color-mix(in srgb, var(--dih-type-accent) 18%, var(--dih-border));
}
.dih-store-card-grid[class*="--type-"] .dih-store-card-grid__logo-wrap,
.dih-store-card-list[class*="--type-"] .dih-store-card-list__logo-wrap {
    background: var(--dih-type-soft);
    border-color: color-mix(in srgb, var(--dih-type-accent) 18%, var(--dih-border));
}
.dih-store-card-grid[class*="--type-"]:hover,
.dih-store-card-list[class*="--type-"]:hover {
    border-color: color-mix(in srgb, var(--dih-type-accent) 38%, var(--dih-border));
}
.dih-store-card-list[class*="--type-"] {
    border-left: 4px solid var(--dih-type-accent);
}
.dih-store-card-list[class*="--type-"] .dih-promo-badge,
.dih-store-card-grid[class*="--type-"] .dih-promo-badge {
    background: var(--dih-type-accent);
    color: #fff;
}