/* ==========================================================================
   Skipzzy storefront design layer
   --------------------------------------------------------------------------
   Extends the Skipzzy landing page system across the stock storefront.

   This file is loaded LAST, after css/style.css, and only overrides. The
   vendor stylesheet is left untouched so the theme stays upgradable and this
   whole layer can be removed by deleting one <link>.

   The theme's own accent colour is admin-configurable (the `section_color`
   cookie, fed from Firestore `website_color`) and is injected inline in ~233
   places, much of it with !important. Overrides here are therefore scoped
   tightly and use !important only where they must win against that.

   CACHING: this file is served with Cache-Control: public, max-age=1yr,
   immutable (see public/.htaccess). Browsers that already fetched it will
   NEVER revalidate within that year, no matter how hard they reload. Every
   time this file's content changes, bump the ?v= query string on both
   <link> tags that reference it (resources/views/layouts/app.blade.php and
   resources/views/auth/default.blade.php) - otherwise the edit is real on
   the server but invisible to anyone who already has the old response
   cached.
   ========================================================================== */

:root {
    /* Approved colour system - report section 3 */
    --gbe-green: #6C4CFF;         /* primary actions, active nav             */
    --gbe-green-strong: #4F31E0;  /* stronger / high-contrast brand states   */
    --gbe-cream: #FFFFFF;         /* clean storefront header                 */
    --gbe-green-soft: #EFEAFF;    /* selected states, icon surfaces          */
    --gbe-surface: #F6F4FF;       /* general light-mode app background       */
    --gbe-text: #10101A;          /* primary customer-interface text         */
    --gbe-danger: #FF3840;        /* destructive / critical failure         */
    --gbe-warning: #FFCB39;       /* semantic warning                       */

    /* Derived neutrals - kept here so spacing/borders stay consistent */
    --gbe-text-muted: #69697B;
    --gbe-border: #E7E4F5;
    --gbe-radius: 20px;
    --gbe-radius-sm: 12px;
    --gbe-gap: 22px;
    --skipzzy-lime: #C8FF4D;
    --skipzzy-paper: #FFFFFF;
    --skipzzy-shadow: 0 12px 30px rgba(16, 16, 26, .08);
    --skipzzy-shadow-lg: 0 24px 60px rgba(16, 16, 26, .12);
}

/* --------------------------------------------------------------------------
   1. Base surface and typography
   Report rule 3 "useful density": tighten the vertical rhythm without
   shrinking touch targets.
   -------------------------------------------------------------------------- */

body {
    background-color: var(--gbe-surface);
    color: var(--gbe-text);
    -webkit-font-smoothing: antialiased;
}

.siddhi-home-page .section-content,
.siddhi-home-page section {
    background-color: transparent;
}

/* Section headings: one consistent weight and size across every band. */
.siddhi-home-page .title h2,
.siddhi-home-page .title h3,
.siddhi-home-page .title h4,
.siddhi-home-page .title h5 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gbe-text);
    margin-bottom: 0;
}

/* "See all" reads as the secondary action, not as loud as the heading. */
.siddhi-home-page .see-all a,
.siddhi-home-page .see-all {
    color: var(--gbe-green) !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.siddhi-home-page .see-all a:hover {
    color: var(--gbe-green-strong) !important;
    text-decoration: underline;
}

/* Even spacing between merchandising bands. */
.siddhi-home-page section.top-categories,
.siddhi-home-page section.most-popular-item-section,
.siddhi-home-page section.most-popular-store-section,
.siddhi-home-page section.new-arrivals-section,
.siddhi-home-page section.offers-coupons-section {
    padding-top: 28px;
    padding-bottom: 28px;
}

.siddhi-home-page .title {
    margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   2. Delivery-first header on the warm brand surface
   Report section 5: "Delivery timing, location, and account access are
   presented together at the top of the home experience."
   -------------------------------------------------------------------------- */

/* The stock theme positions the header absolutely with no z-index, so the
   banner's slick slides (which create their own stacking context via
   transform) paint straight over it and hide it. An opaque header belongs
   above the hero anyway, so put it back in normal flow and raise it. */
.section-header {
    position: relative !important;
    z-index: 20 !important;
}

.section-header .header-main {
    background-color: var(--gbe-cream) !important;
    border-bottom: 1px solid rgba(12, 131, 31, 0.10);
    box-shadow: none !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* A full address ("Pimpri-Chinchwad, Haveli Subdistrict, Pune District,
   Maharashtra, 411089, India") overruns its column and collides with the
   Search/Offers actions. Clamp it to one ellipsised line. */
.section-header .head-search,
.section-header .head-loc,
.section-header .head-loc .dropdown-toggle {
    min-width: 0;
    max-width: 100%;
}

.section-header .user_locationnew {
    max-width: 200px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-header .header-right > .d-flex {
    padding-right: 1rem !important;
}

.section-header .widget-header {
    white-space: nowrap;
}

/* Location control reads as the primary context, so give it a real affordance. */
.section-header .head-loc .feather-map-pin {
    background-color: var(--gbe-green-soft) !important;
    color: var(--gbe-green) !important;
}

.section-header .user_locationnew {
    font-weight: 600;
    color: var(--gbe-text);
    background: transparent;
    border: 0;
}

/* Header actions: quieter until hovered, so the location and search lead. */
.section-header .widget-header {
    color: var(--gbe-text) !important;
    font-weight: 500;
    transition: color .15s ease;
}

.section-header .widget-header:hover {
    color: var(--gbe-green) !important;
}

/* Search-first: the search affordance gets a filled surface of its own. */
.section-header .head-search .feather-search,
.section-header .widget-header .feather-search {
    color: var(--gbe-green);
}

/* --------------------------------------------------------------------------
   3. Category tiles
   Uniform soft-green surfaces so a missing Firestore image degrades into a
   deliberate-looking tile rather than a ragged gap.
   -------------------------------------------------------------------------- */

.top-categories-section .top-cat-list {
    margin-bottom: 20px;
}

.top-categories-section .cat-link {
    text-decoration: none;
}

.top-categories-section .cat-img {
    background-color: var(--gbe-green-soft);
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius);
    padding: 14px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

.top-categories-section .cat-link:hover .cat-img {
    border-color: var(--gbe-green);
    transform: translateY(-2px);
}

.top-categories-section .cat-img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    margin-bottom: 0 !important;
}

/* Category label: readable, two-line clamp, never overlapping the next tile.
   The theme renders this as <h4 class="m-0">, so it picks up both the global
   h4 size (24px) and the admin accent colour - far too loud for a tile
   caption. Every heading level is listed because the markup has changed
   between theme versions. */
.top-categories-section .cat-link h1,
.top-categories-section .cat-link h2,
.top-categories-section .cat-link h3,
.top-categories-section .cat-link h4,
.top-categories-section .cat-link h5,
.top-categories-section .cat-link h6,
.top-categories-section .cat-link p {
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gbe-text) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* --------------------------------------------------------------------------
   4. Store and product cards
   Report rule 3: carry price/availability without shrinking touch targets.
   Flat, bordered cards read cleaner than the stock drop shadows.
   -------------------------------------------------------------------------- */

.siddhi-home-page .list-card {
    background-color: #FFFFFF;
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius);
    overflow: hidden;
    box-shadow: none !important;
    height: 100%;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.siddhi-home-page .list-card:hover {
    border-color: rgba(12, 131, 31, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(23, 26, 20, 0.08) !important;
}

.siddhi-home-page .list-card-image {
    border-radius: 0;
    overflow: hidden;
}

.siddhi-home-page .list-card-image .item-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .25s ease;
}

.siddhi-home-page .list-card:hover .item-img {
    transform: scale(1.03);
}

.siddhi-home-page .list-card-body {
    padding: 12px 14px 14px;
}

.siddhi-home-page .popul-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gbe-text);
}

.siddhi-home-page .list-card-body .address,
.siddhi-home-page .list-card-body .text-gray {
    color: var(--gbe-text-muted) !important;
    font-size: 12.5px;
}

.siddhi-home-page .product-list {
    margin-bottom: var(--gbe-gap);
    display: flex;
}

/* --------------------------------------------------------------------------
   5. Badges, offers and status
   Colour is always paired with text (report section 8, accessibility).
   -------------------------------------------------------------------------- */

.siddhi-home-page .discount-price {
    background-color: var(--gbe-green) !important;
    color: #FFFFFF !important;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: 0.01em;
}

.siddhi-home-page .member-plan .badge.open {
    background-color: var(--gbe-green) !important;
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 10px;
}

.siddhi-home-page .member-plan .badge.closed {
    background-color: var(--gbe-danger) !important;
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   6. Actions
   Landing-page rule: one obvious next action, in Skipzzy purple.
   -------------------------------------------------------------------------- */

.siddhi-home-page .btn-primary,
.section-header .btn-primary {
    background-color: var(--gbe-green) !important;
    border-color: var(--gbe-green) !important;
    border-radius: var(--gbe-radius-sm);
    font-weight: 600;
    padding: 9px 18px;
    box-shadow: none !important;
}

.siddhi-home-page .btn-primary:hover,
.section-header .btn-primary:hover {
    background-color: var(--gbe-green-strong) !important;
    border-color: var(--gbe-green-strong) !important;
}

.siddhi-home-page .btn-outline-primary {
    color: var(--gbe-green) !important;
    border-color: var(--gbe-green) !important;
    border-radius: var(--gbe-radius-sm);
    font-weight: 600;
}

.siddhi-home-page .btn-outline-primary:hover {
    background-color: var(--gbe-green) !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   7. Banner carousel
   Softer corners and a restrained pager so the artwork leads.
   -------------------------------------------------------------------------- */

.ecommerce-banner .slick-slide img {
    border-radius: var(--gbe-radius);
}

.ecommerce-banner .slick-dots li button:before {
    color: var(--gbe-text-muted);
    opacity: .35;
    font-size: 9px;
}

.ecommerce-banner .slick-dots li.slick-active button:before {
    color: var(--gbe-green);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Small screens
   Keep density useful without letting labels collide.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .siddhi-home-page .title h2,
    .siddhi-home-page .title h3,
    .siddhi-home-page .title h4,
    .siddhi-home-page .title h5 {
        font-size: 17px;
    }

    .siddhi-home-page section.top-categories,
    .siddhi-home-page section.most-popular-item-section,
    .siddhi-home-page section.most-popular-store-section,
    .siddhi-home-page section.new-arrivals-section,
    .siddhi-home-page section.offers-coupons-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .top-categories-section .cat-img {
        padding: 10px;
    }

    .top-categories-section .cat-link p,
    .top-categories-section .cat-link h6 {
        font-size: 12px;
    }
}

/* --------------------------------------------------------------------------
   9. Skipzzy brand polish
   The rules below are intentionally global enough to cover home, search,
   product, checkout, account and order screens which all share the theme.
   -------------------------------------------------------------------------- */

html {
    background: var(--gbe-surface);
}

body,
button,
input,
select,
textarea {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title,
.card-header-title,
.sidebar-header h3 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    letter-spacing: -.02em;
}

a {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.section-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
}

.section-header .header-main {
    min-height: 76px;
    padding: 10px 0;
    background: rgba(255, 255, 255, .88) !important;
    border-bottom: 1px solid var(--gbe-border);
    box-shadow: 0 2px 10px rgba(16, 16, 26, .04) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.section-header .container {
    max-width: 1180px;
}

.skipzzy-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--gbe-text) !important;
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.skipzzy-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--gbe-green), var(--gbe-green-strong));
}

.skipzzy-brand-mark svg {
    width: 21px;
    height: 21px;
}

.skipzzy-brand-accent {
    color: var(--gbe-green);
}

.skipzzy-inline-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gbe-text);
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    vertical-align: middle;
}

.skipzzy-inline-brand .skipzzy-brand-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
}

.skipzzy-inline-brand .skipzzy-brand-mark svg {
    width: 16px;
    height: 16px;
}

.section-header .head-search .dropdown-toggle {
    gap: 8px;
    min-height: 42px;
    padding: 5px 12px 5px 5px !important;
    border: 1px solid var(--gbe-border);
    border-radius: 999px;
    background: var(--skipzzy-paper);
}

.section-header .head-loc .feather-map-pin {
    width: 34px;
    height: 34px;
    padding: 9px !important;
    margin-right: 0 !important;
    background: var(--gbe-green-soft) !important;
    color: var(--gbe-green) !important;
}

.section-header .user_locationnew {
    font-size: 13px;
    font-weight: 600;
}

.section-header .header-right > .d-flex {
    padding-right: 0 !important;
}

.section-header .widget-header,
.section-header .takeaway-div {
    color: var(--gbe-text) !important;
    font-size: 13px;
    font-weight: 600;
}

.section-header .widget-header:hover {
    color: var(--gbe-green) !important;
}

.section-header .widget-header .feather-search,
.section-header .widget-header .feather-shopping-cart,
.section-header .widget-header .feather-user {
    color: var(--gbe-green);
}

.section-header .offer-link img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.section-header .toggle span,
.section-header .toggle span::before,
.section-header .toggle span::after {
    background: var(--gbe-text);
}

.btn,
button.btn,
input[type="submit"].btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.btn-primary,
.siddhi-home-page .btn-primary,
.section-header .btn-primary,
.modal-footer .btn-primary,
.contac-fotm-wrap .btn.btn-primary {
    background-color: var(--gbe-green) !important;
    border-color: var(--gbe-green) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(108, 76, 255, .18) !important;
}

.btn-primary:hover,
.siddhi-home-page .btn-primary:hover,
.section-header .btn-primary:hover,
.modal-footer .btn-primary:hover {
    background-color: var(--gbe-green-strong) !important;
    border-color: var(--gbe-green-strong) !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(108, 76, 255, .24) !important;
}

.btn-success {
    background-color: var(--gbe-green) !important;
    border-color: var(--gbe-green) !important;
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--gbe-border) !important;
    color: var(--gbe-green) !important;
    background: var(--skipzzy-paper) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    border-color: var(--gbe-green) !important;
    background: var(--gbe-green) !important;
    color: #fff !important;
}

.form-control,
.custom-select,
.select2-container--default .select2-selection--single {
    min-height: 44px;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius-sm) !important;
    color: var(--gbe-text);
    background: #fff;
    box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gbe-green) !important;
    box-shadow: 0 0 0 3px rgba(108, 76, 255, .12) !important;
}

.ecommerce-banner {
    padding: 20px 0 8px;
    background: var(--gbe-surface);
}

.ecommerce-banner .ecommerce-inner,
.ecommerce-content > section > .container,
.siddhi-home-page > .ecommerce-content > section > .container {
    max-width: 1180px;
}

.ecommerce-banner .slick-slide img,
.ecommerce-banner.multivendor-banner .banner-img img {
    border-radius: var(--gbe-radius) !important;
}

.ecommerce-banner .slick-dots li button:before {
    color: var(--gbe-green);
}

.siddhi-home-page .section-content,
.siddhi-home-page section {
    background-color: transparent;
}

.siddhi-home-page section.top-categories,
.siddhi-home-page section.most-popular-item-section,
.siddhi-home-page section.most-popular-store-section,
.siddhi-home-page section.new-arrivals-section,
.siddhi-home-page section.offers-coupons-section,
.siddhi-home-page section.all-stores-section {
    padding-top: 34px;
    padding-bottom: 34px;
}

.siddhi-home-page section:nth-of-type(even) {
    background: rgba(255, 255, 255, .42);
}

.siddhi-home-page .title {
    align-items: baseline !important;
    margin-bottom: 18px;
}

.siddhi-home-page .title h1,
.siddhi-home-page .title h2,
.siddhi-home-page .title h3,
.siddhi-home-page .title h4,
.siddhi-home-page .title h5,
.siddhi-home-page .title h6 {
    color: var(--gbe-text) !important;
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.siddhi-home-page .see-all a,
.siddhi-home-page .see-all {
    color: var(--gbe-green) !important;
    font-weight: 700;
}

.top-categories-section .cat-img {
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius);
    background: var(--gbe-green-soft);
    padding: 16px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.top-categories-section .cat-link:hover .cat-img {
    border-color: var(--gbe-green);
    box-shadow: var(--skipzzy-shadow);
    transform: translateY(-3px);
}

.top-categories-section .cat-link h1,
.top-categories-section .cat-link h2,
.top-categories-section .cat-link h3,
.top-categories-section .cat-link h4,
.top-categories-section .cat-link h5,
.top-categories-section .cat-link h6,
.top-categories-section .cat-link p {
    color: var(--gbe-text) !important;
    font-size: 13.5px;
    font-weight: 600;
}

.siddhi-home-page .list-card,
.product-list .list-card,
.multi-vendore-content .pro-list .list-card,
.siddhi-card,
.card {
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius) !important;
    background: var(--skipzzy-paper);
    box-shadow: none !important;
}

.siddhi-home-page .list-card:hover,
.product-list .list-card:hover,
.multi-vendore-content .pro-list .list-card:hover {
    border-color: rgba(108, 76, 255, .35);
    box-shadow: var(--skipzzy-shadow) !important;
    transform: translateY(-2px);
}

.siddhi-home-page .list-card-image,
.product-list .list-card-image {
    overflow: hidden;
    border-radius: var(--gbe-radius) var(--gbe-radius) 0 0;
}

.siddhi-home-page .list-card-image .item-img,
.product-list .list-card-image img {
    transition: transform .25s ease;
}

.siddhi-home-page .list-card:hover .item-img,
.product-list .list-card:hover .list-card-image img {
    transform: scale(1.03);
}

.siddhi-home-page .list-card-body,
.product-list .list-card-body {
    padding: 14px 16px 16px;
}

.siddhi-home-page .popul-title,
.product-list .product-title,
.list-card h6.popul-title {
    color: var(--gbe-text) !important;
    font-size: 15px;
    font-weight: 700;
}

.siddhi-home-page .list-card-body .address,
.siddhi-home-page .list-card-body .text-gray,
.product-list .list-card-body .pro-cat {
    color: var(--gbe-text-muted) !important;
}

.siddhi-home-page .discount-price,
.discount-price {
    background: var(--gbe-green) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700;
}

.section-footer {
    margin-top: 42px;
    border-top: 0 !important;
    background: var(--gbe-text) !important;
    color: #fff;
}

.section-footer .footer-top,
.section-footer .footer-bottom {
    background: transparent !important;
}

.section-footer a:hover {
    color: var(--skipzzy-lime) !important;
}

.footer-top .title:after {
    background: var(--skipzzy-lime) !important;
}

.footer-top .title:before {
    background: rgba(255, 255, 255, .25) !important;
}

#main-nav .second-nav li a:hover,
#main-nav .second-nav li a.active,
.hc-offcanvas-nav .nav-item-link:hover {
    color: var(--gbe-green) !important;
    background: var(--gbe-green-soft) !important;
}

.hc-offcanvas-nav h2,
.hc-offcanvas-nav .nav-title {
    font-family: "Sora", "Inter", sans-serif;
}

.siddhi-card-header,
.card-header,
.sidebar-header {
    border-color: var(--gbe-border) !important;
    background: transparent !important;
}

/* Loading overlay: a plain CSS spinner instead of the old animated GIF,
   which couldn't be recoloured cleanly (it was hue-rotated as a hack). */
.page-overlay {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(2px);
}

.skipzzy-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid var(--gbe-border);
    border-top-color: var(--gbe-green);
    animation: skipzzy-spin .8s linear infinite;
}

@keyframes skipzzy-spin {
    to { transform: rotate(360deg); }
}

/* "No store here" / zone-error empty state: was plain Bootstrap
   text-danger red on a bare page, out of step with the rest of the
   brand. Give it the same card treatment as everything else. */
.zone-error {
    max-width: 460px;
    margin: 64px auto !important;
    padding: 40px 32px !important;
    text-align: center;
    background: var(--skipzzy-paper);
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius);
    box-shadow: var(--skipzzy-shadow);
}

.zone-error .zone-image img {
    max-width: 96px;
    opacity: .9;
}

.zone-error .title {
    color: var(--gbe-text) !important;
    font-size: 20px;
    margin: 16px 0 8px;
}

.zone-error .text {
    color: var(--gbe-text-muted) !important;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   10. Modals, alerts, pagination
   Same treatment everywhere a modal/alert/pager appears (auth, checkout,
   orders, gift cards) rather than page-by-page.
   -------------------------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: var(--gbe-radius);
    box-shadow: var(--skipzzy-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--gbe-border);
    padding: 20px 24px;
}

.modal-header .modal-title {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-weight: 700;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--gbe-border);
    padding: 16px 24px;
}

.modal-header .close {
    color: var(--gbe-text);
    text-shadow: none;
    opacity: .5;
    transition: opacity .15s ease;
}

.modal-header .close:hover {
    opacity: 1;
}

.alert {
    border: none;
    border-radius: var(--gbe-radius-sm);
    font-weight: 500;
}

.alert-success {
    background: var(--gbe-green-soft);
    color: var(--gbe-green-strong);
}

.alert-danger {
    background: rgba(255, 56, 64, .1);
    color: var(--gbe-danger);
}

.pagination .page-link {
    border: 1px solid var(--gbe-border);
    color: var(--gbe-text);
    margin: 0 3px;
    border-radius: 999px !important;
    min-width: 38px;
    text-align: center;
}

.pagination .page-item.active .page-link {
    background-color: var(--gbe-green);
    border-color: var(--gbe-green);
    color: #fff;
}

.pagination .page-link:hover {
    background-color: var(--gbe-green-soft);
    border-color: var(--gbe-green);
    color: var(--gbe-green-strong);
}

/* SweetAlert2 dialogs are used site-wide for confirmations/errors and
   still had the library's stock look (system font, square corners,
   blue confirm button) against an otherwise fully rebranded storefront. */
.swal2-popup {
    border-radius: var(--gbe-radius) !important;
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
}

.swal2-title {
    font-family: "Sora", "Inter", system-ui, sans-serif !important;
    font-size: 20px !important;
}

.swal2-confirm {
    background-color: var(--gbe-green) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(108, 76, 255, .25) !important;
}

.swal2-cancel {
    border-radius: 999px !important;
}

.swal2-icon.swal2-success {
    border-color: var(--gbe-green) !important;
    color: var(--gbe-green) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--gbe-green) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--gbe-warning) !important;
    color: #b8860b !important;
}

.swal2-icon.swal2-error {
    border-color: var(--gbe-danger) !important;
    color: var(--gbe-danger) !important;
}

@media (max-width: 991px) {
    .section-header .header-main {
        min-height: 68px;
    }

    .section-header .head-search {
        margin-left: 0 !important;
    }

    .section-header .header-right > .d-flex {
        padding-right: 0 !important;
    }
}

@media (max-width: 767px) {
    .section-header {
        position: relative !important;
    }

    .section-header .header-main {
        min-height: 64px;
        padding: 8px 0;
    }

    .skipzzy-brand {
        font-size: 19px;
    }

    .skipzzy-brand-mark {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .ecommerce-banner {
        padding-top: 12px;
    }

    .siddhi-home-page section.top-categories,
    .siddhi-home-page section.most-popular-item-section,
    .siddhi-home-page section.most-popular-store-section,
    .siddhi-home-page section.new-arrivals-section,
    .siddhi-home-page section.offers-coupons-section,
    .siddhi-home-page section.all-stores-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .siddhi-home-page .title h1,
    .siddhi-home-page .title h2,
    .siddhi-home-page .title h3,
    .siddhi-home-page .title h4,
    .siddhi-home-page .title h5,
    .siddhi-home-page .title h6 {
        font-size: 18px;
    }

    .top-categories-section .cat-img {
        padding: 10px;
    }
}

/* --------------------------------------------------------------------------
   11. Auth pages (login, signup, forgot password)
   Shared ".login-page" wrapper across all three. Was a plain white
   background with a bare Bootstrap card - centered, but nothing about it
   said "Skipzzy".
   -------------------------------------------------------------------------- */

.login-page {
    background:
        radial-gradient(600px 400px at 15% 10%, var(--gbe-green-soft), transparent),
        radial-gradient(500px 360px at 100% 100%, rgba(200, 255, 77, .18), transparent),
        var(--gbe-surface);
}

.login-page .card {
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius);
    box-shadow: var(--skipzzy-shadow-lg);
    padding: 12px 8px !important;
}

.login-page h3 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-weight: 700;
}

.login-page .form-group label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gbe-text);
}

.login-page .standard-link,
.login-page .forgot-password a {
    color: var(--gbe-green) !important;
    font-weight: 600;
}

.login-page .or-line {
    position: relative;
    text-align: center;
}

.login-page .or-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--gbe-border);
}

.login-page .or-line span {
    position: relative;
    background: #fff;
    padding: 0 12px;
    color: var(--gbe-text-muted) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The theme gives Login and Sign up the same solid btn-primary treatment,
   reading as two equally-weighted actions when only one is the primary
   one on this screen. */
.login-page #login-box > a.btn.btn-primary[href*="signup"] {
    background: transparent !important;
    color: var(--gbe-green) !important;
    box-shadow: none !important;
}

.login-page #login-box > a.btn.btn-primary[href*="signup"]:hover {
    background: var(--gbe-green-soft) !important;
}

/* --------------------------------------------------------------------------
   12. Dropdown menus (account menu, language/currency switchers, etc.)
   Stock Bootstrap: square corners, 1px grey border, no hover feedback
   beyond a background tint.
   -------------------------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius-sm);
    box-shadow: var(--skipzzy-shadow);
    padding: 8px;
}

.dropdown-item {
    border-radius: 8px;
    padding: 9px 12px;
    font-weight: 500;
    color: var(--gbe-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--gbe-green-soft);
    color: var(--gbe-green-strong);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--gbe-green) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   13. FAQ / support accordion
   -------------------------------------------------------------------------- */

.osahan-profile .box {
    border: 1px solid var(--gbe-border);
    border-radius: var(--gbe-radius-sm) !important;
    box-shadow: none !important;
}

.osahan-profile .card-btn {
    font-weight: 600;
    color: var(--gbe-text);
}

.osahan-profile .card-btn-arrow .feather-chevron-down {
    transition: transform .2s ease;
    color: var(--gbe-text-muted);
}

.osahan-profile .card-btn:not(.collapsed) .card-btn-arrow .feather-chevron-down {
    transform: rotate(180deg);
    color: var(--gbe-green);
}

/* --------------------------------------------------------------------------
   14. Location-gate hero (Firestore settings/homepageTemplate)
   The very first thing a new visitor sees, before a delivery location is
   set. Was a bare, unstyled "Stay home..." block with broken image icons.
   -------------------------------------------------------------------------- */

.skipzzy-gate .header-main {
    background: var(--skipzzy-paper);
    border-bottom: 1px solid var(--gbe-border);
    padding: 16px 0;
}

.skipzzy-gate-hero {
    background:
        radial-gradient(500px 360px at 85% 0%, var(--gbe-green-soft), transparent),
        radial-gradient(420px 320px at 0% 100%, rgba(200, 255, 77, .15), transparent),
        var(--gbe-surface);
    padding: 56px 0;
}

.skipzzy-gate-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--gbe-green-soft);
    color: var(--gbe-green-strong);
    margin-bottom: 18px;
}

.skipzzy-gate-hero-left h1 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--gbe-text);
    margin-bottom: 16px;
}

.skipzzy-gate-hero-left p {
    color: var(--gbe-text-muted);
    font-size: 16px;
    max-width: 460px;
    margin-bottom: 28px;
}

.skipzzy-gate-location {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--gbe-border);
    border-radius: 999px;
    padding: 6px 8px 6px 18px;
    box-shadow: var(--skipzzy-shadow);
    max-width: 480px;
}

.skipzzy-gate-location-icon {
    flex-shrink: 0;
}

.skipzzy-gate-location input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    padding: 10px 0;
}

.skipzzy-gate-locate-me {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gbe-green);
    cursor: pointer;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--gbe-green-soft);
}

.skipzzy-gate-locate-me img {
    width: 14px;
    height: 14px;
}

.skipzzy-gate-cta {
    margin-top: 22px;
}

.skipzzy-gate-cta .btn-continue {
    padding: 13px 32px;
    font-size: 15px;
}

.skipzzy-gate-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.skipzzy-gate-visual {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gbe-green), var(--gbe-green-strong));
    box-shadow: var(--skipzzy-shadow-lg);
}

.skipzzy-gate-emoji {
    font-size: 88px;
    line-height: 1;
}

.skipzzy-gate-features {
    padding: 48px 0;
}

.skipzzy-gate-feature {
    padding: 8px 12px;
}

.skipzzy-gate-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--gbe-green-soft);
    font-size: 26px;
    margin-bottom: 16px;
}

.skipzzy-gate-feature h3 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--gbe-text);
    margin-bottom: 8px;
}

.skipzzy-gate-feature p {
    color: var(--gbe-text-muted);
    font-size: 14px;
}

.skipzzy-gate-stats {
    padding: 32px 0 56px;
}

.skipzzy-gate-stat-num {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--gbe-text);
}

.skipzzy-gate-stat-label {
    color: var(--gbe-text-muted);
    font-size: 13.5px;
}

@media (max-width: 767px) {
    .skipzzy-gate-hero { padding: 36px 0; }
    .skipzzy-gate-hero-right { margin-top: 32px; }
    .skipzzy-gate-visual { width: 160px; height: 160px; }
    .skipzzy-gate-emoji { font-size: 64px; }
    .skipzzy-gate-location { flex-wrap: wrap; border-radius: var(--gbe-radius); padding: 14px; }
    .skipzzy-gate-location input { width: 100%; order: 1; }
    .skipzzy-gate-locate-me { order: 2; }
    .skipzzy-gate-cta .btn-continue { width: 100%; }
}

/* --------------------------------------------------------------------------
   15. Social sign-up (complete-your-profile after Google auth)
   -------------------------------------------------------------------------- */

.skipzzy-social-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gbe-green-soft);
    color: var(--gbe-green-strong);
    border-radius: var(--gbe-radius-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 18px;
}

.skipzzy-social-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.skipzzy-phone-row {
    gap: 8px;
}

.skipzzy-phone-row .country_code {
    flex: 0 0 auto;
    width: auto;
    max-width: 140px;
}

.skipzzy-phone-row #mobileNumber {
    flex: 1;
    min-width: 0;
}

#recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   16. Location selector (header pill + "Delivery Address" modal)
   The header control was a bare autocomplete input with no indication of
   what it was for; the modal had a malformed nested <button> (a hidden
   "close" button wrapping the visible "Save changes" one - both rendered,
   since browsers auto-close the missing tag, but semantically broken) and
   a tiny icon-only "use current location" affordance easy to miss.
   -------------------------------------------------------------------------- */

.skipzzy-location-pill {
    border: 1px solid var(--gbe-border);
    border-radius: 999px;
    padding: 6px 14px 6px 6px !important;
    background: var(--skipzzy-paper);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.skipzzy-location-pill:hover {
    border-color: var(--gbe-green);
    box-shadow: 0 2px 10px rgba(16, 16, 26, .06);
}

.skipzzy-location-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.skipzzy-location-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gbe-text-muted);
}

.skipzzy-location-chevron {
    color: var(--gbe-text-muted);
    margin-left: 6px;
    flex-shrink: 0;
}

.location_modal .modal-header {
    border-bottom: 1px solid var(--gbe-border);
}

.skipzzy-locate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 18px;
}

.location_modal .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gbe-text);
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .skipzzy-location-label {
        display: none;
    }
}