body {
    font-family: 'Segoe UI', sans-serif;
    background: #f8f9fb;
    padding: 20px;
    color: #111;
}

/* Make page body area span full width like dashboard index */
.pb-3 {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 4rem !important;
    box-sizing: border-box;
}

.banner-container {
    width: 100%;
    max-width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative;
    background: #fff;
}
    .banner-container:first-of-type {
        margin-top: 16px;
    }
.banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 1s;
    background: #fff;
    z-index: 0;
    pointer-events: none;
}

    .banner-img.active {
        opacity: 1;
        z-index: 1;
        pointer-events: auto;
    }

h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

.top-cards {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    height: 110px;
}

.top-card {
    flex: 1;
    border-radius: 18px;
    padding: 18px 8px 16px 8px;
    color: #222;
    position: relative;
    overflow: visible;
    text-align: center;
    background: #f8fafc;
    min-width: 0;
    z-index: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

    .top-card .icon {
        font-size: 30px;
        margin-bottom: 5px;
        display: block;
        line-height: 1;
    }

    .top-card .label {
        font-weight: 600;
        font-size: 1.08em;
        letter-spacing: 0.02em;
        margin-bottom: 2px;
    }

    .top-card .price {
        font-size: 14px;
        margin-top: 5px;
        color: #555;
        opacity: 0.8;
        font-weight: 400;
    }

    .top-card.blue {
        background: linear-gradient(135deg, #e3f0ff 70%, #fafdff 100%);
    }

    .top-card.cyan {
        background: linear-gradient(135deg, #e3faff 80%, #f2fffa 100%);
    }

    .top-card.orange {
        background: linear-gradient(135deg, #fff3e3 70%, #fff7ee 100%);
    }

    .top-card * {
        user-select: none;
    }

    .top-card .light-border {
        pointer-events: none;
        z-index: 3;
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 22px;
        background: none;
    }

        .top-card .light-border svg {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 22px;
            pointer-events: none;
        }

.light-spin {
    stroke: url(#linear-light);
    stroke-width: 4.5;
    fill: none;
    stroke-dasharray: 172 400;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px #fff3) drop-shadow(0 0 12px #fff8);
    animation: spin-dash 7s linear infinite;
}

.top-card.blue .light-spin {
    stroke: url(#linear-blue);
    filter: drop-shadow(0 0 8px #7cc3ff77) drop-shadow(0 0 14px #7cc3ff33);
}

.top-card.cyan .light-spin {
    stroke: url(#linear-cyan);
    filter: drop-shadow(0 0 8px #38ffe977) drop-shadow(0 0 14px #38ffe933);
}

.top-card.orange .light-spin {
    stroke: url(#linear-orange);
    filter: drop-shadow(0 0 8px #ffbe4577) drop-shadow(0 0 14px #ffbe4533);
}

@keyframes spin-dash {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -572;
    }
}

.dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 20px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
}

    .dot.active {
        background: #007bff;
    }

.dots .dot:nth-child(1) {
    background: #2d7dfd; /* Blue */
}
.dots .dot:nth-child(2) {
    background: #00c4ff; /* Cyan */
}
.dots .dot:nth-child(3) {
    background: #ffbe45; /* Orange */
}
.dots .dot.active {
    box-shadow: 0 0 0 2px #fff, 0 0 6px #2d7dfd66;
    border: 2px solid #2d7dfd;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1.25rem; /* Increased gap for more space */
    padding: 0; /* Remove padding to allow full width usage */
    margin-bottom: 32px;
}

.menu-item {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    /* Remove fixed padding if present */
    padding: 0.5em;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem; /* Reduced gap for mobile to fit 4 cards */
    }
}

.menu-item {
    background: #fff;
    border-radius: 16px;
    padding: 15px 5px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

    .menu-item:active {
        box-shadow: 0 2px 12px #007bffa1;
    }

.menu-icon {
    font-size: 22px;
    width: 38px;
    height: 30px;
    line-height: 38px;
    border-radius: 10px;
    margin: 0 auto 6px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* When an image is present, remove background so icon shows as-is */
.menu-icon.has-image {
    background: transparent !important;
}

/* Ensure uploaded 128x128 icons render without distortion */
.menu-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* Safari */
    image-rendering: crisp-edges; /* Most browsers */
}
.menu-label {
    font-size: 12px;
    font-weight: 500;
    width: 68px; /* Container width, should be same as menu-icon */
    overflow: hidden; /* Hides the overflowing text */
    white-space: nowrap; /* Prevents text from wrapping */
}

.marquee-text.is-scrolling {
    display: inline-block;
    padding-left: 100%; /* Starts the text off-screen */
    animation: marquee 15s linear infinite;
}

/* Animation for the marquee effect */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-200%); } /* Scrolls the text across */
}

/* Shine Effect */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shine 3s infinite linear;
}

@keyframes shine {
    from {
        left: -150%;
    }
    to {
        left: 150%;
    }
}

.menu-item.more,
.menu-item.less {
    background: #f4f6fa;
    color: #2d7dfd;
    border: 2px dashed #bcdcff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.13s, border-color 0.14s;
    font-size: 18px;
    cursor: pointer;
    padding:2px;
}

    .menu-item.more .menu-icon,
    .menu-item.less .menu-icon {
        background: none;
        font-size: 30px;
        color: #2d7dfd;
    }

    .menu-item.more:active,
    .menu-item.less:active {
        background: #e3f0ff;
        border-color: #2d7dfd;
    }

.menu-item.less {
    display: none;
}

.menu-grid.expanded .menu-item.more {
    display: none;
}

.menu-grid.expanded .menu-item.less {
    display: flex;
}

.menu-grid.collapsed .extra-row {
    display: none;
}

.menu-grid.expanded .extra-row {
    display: block;
}

@media (max-width: 600px) {
    .main-btn {
        width: 20vw;
        height: 20vw;
        min-width: 48px;
        min-height: 48px;
        max-width: 70px;
        max-height: 70px;
        font-size: 10px;
        margin-top: 24px;
        padding: 0;
    }
    .button-row {
        gap: 6px;
        padding: 0 2px;
    }
}

@media (max-width: 400px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.section-divider {
    width: 100%;
    margin: 36px auto 32px auto;
    height: 1px;
    border: none;
    background: linear-gradient(90deg, #e0e7ef 2%, #bcdcff 40%, #e0e7ef 98%);
    opacity: 0.9;
    border-radius: 1px;
    box-shadow: 0 1px 5px 0 #bcdcff11;
    position: relative;
}

.video-card {
    background: #fff;
    border-radius: 18px;
    margin: 0 0 22px 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    overflow: hidden;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Animated thin border for offcanvas close button */
.offcanvas-close-anim {
    position: relative;
    border: 2px solid transparent !important;
    border-radius: 50%;
}
.offcanvas-close-anim::before {
    content: '';
    position: absolute;
    inset: -3px; /* slightly outside to appear thin */
    border-radius: 50%;
    padding: 2px; /* border thickness */
    background: conic-gradient(
        from 0deg,
        #2d7dfd,
        #00c4ff,
        #38ffe9,
        #ffbe45,
        #2d7dfd
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-border 2s linear infinite;
}
@keyframes rotate-border {
    to { transform: rotate(360deg); }
}

   /*video css*/
    .video-card video {
        width: 100%;
        height: 195px;
        object-fit: cover;
        display: block;
        background: #ececec;
    }

.answer-section {
    padding: 13px 18px;
    background: #f8fafe;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a2756;
}

.answer-section input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.answer-section button {
    padding: 10px;
    background: #1a2756;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}

    .answer-section button:hover {
        background: #0f1839;
    }

/* B2B Category Card Link Styling */
.category-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

.category-card-link .menu-icon {
    background: #f5f7fa;
    height: 128px;
    width: 128px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure transparency applies inside card links as well when image exists */
.category-card-link .menu-icon.has-image {
    background: transparent !important;
}

.b2b-icon {
    font-size: 1.6rem;
    color: #0134d4;
}

.category-card-link .menu-label {
    font-weight: 500;
    margin-top: 6px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    color: #333;
}

/* Shine Animation */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(45deg);
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}



    /*end here */

.button-row {
    display: flex;
    gap: 13px;
    margin: 18px 0 6px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.main-btn {
    flex: 1 1 90px;
    min-width: 80px;
    max-width: 150px;
    background: linear-gradient(90deg, #e3f0ff 0%, #fafdff 100%);
    color: #2d7dfd;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 0;
    margin: 0;
    box-shadow: 0 2px 10px 0 rgba(0,84,235,0.07);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.16s, box-shadow 0.16s, color 0.16s;
    outline: none;
    position: relative;
    overflow: visible;
    z-index: 0;
}

    .main-btn:active {
        background: linear-gradient(90deg, #c6e2ff 0%, #e8f3ff 100%);
        color: #1553a8;
        box-shadow: 0 4px 16px 0 rgba(45,125,253,0.10);
    }

    .main-btn.top {
        background: linear-gradient(90deg, #fffbe6 0%, #fff8ec 100%);
        color: #ffb300;
    }

    .main-btn.manpower {
        background: linear-gradient(90deg, #e3f8f8 0%, #e3ffe7 100%);
        color: #00b894;
    }

    .main-btn .btn-light-border {
        pointer-events: none;
        z-index: 2;
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 17px;
        background: none;
        overflow: visible;
    }

        .main-btn .btn-light-border svg {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 17px;
            pointer-events: none;
        }

.btn-light-spin {
    stroke: url(#linear-blue);
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 85 200;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 3px #7cc3ff77) drop-shadow(0 0 7px #7cc3ff22);
    animation: spin-dash-btn 12s linear infinite;
}

@keyframes spin-dash-btn {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -285;
    }
}

.input::placeholder {
    color: #6e8cff;
}

.input:focus {
    outline: none;
}

#main:focus-within > #input-mask {
    display: none;
}

#input-mask {
    pointer-events: none;
    width: 100px;
    height: 20px;
    position: absolute;
    background: linear-gradient(90deg, transparent, #05071b);
    top: 18px;
    left: 70px;
}

#cosmic-glow {
    pointer-events: none;
    width: 30px;
    height: 20px;
    position: absolute;
    background: #4d6dff;
    top: 10px;
    left: 5px;
    filter: blur(20px);
    opacity: 0.8;
    transition: all 2s;
}

#main:hover > #cosmic-glow {
    opacity: 0;
}

.stardust {
    max-height: 63px;
    max-width: 307px;
    border-radius: 10px;
    filter: blur(2px);
}

    .stardust::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(83deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        filter: brightness(1.4);
        background-image: conic-gradient(rgba(0, 0, 0, 0) 0%, #4d6dff, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 50%, #6e8cff, rgba(0, 0, 0, 0) 58%);
        transition: all 2s;
    }

.cosmic-ring {
    max-height: 59px;
    max-width: 303px;
    border-radius: 11px;
    filter: blur(0.5px);
}

    .cosmic-ring::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(70deg);
        position: absolute;
        width: 600px;
        height: 600px;
        filter: brightness(1.3);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(#05071b, #4d6dff 5%, #05071b 14%, #05071b 50%, #6e8cff 60%, #05071b 64%);
        transition: all 2s;
    }

.starfield {
    max-height: 65px;
    max-width: 312px;
}

    .starfield::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(82deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(rgba(0, 0, 0, 0), #1c2452, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, #2a3875, rgba(0, 0, 0, 0) 60%);
        transition: all 2s;
    }

#search-container:hover > .starfield::before {
    transform: translate(-50%, -50%) rotate(-98deg);
}

#search-container:hover > .nebula::before {
    transform: translate(-50%, -50%) rotate(-120deg);
}

#search-container:hover > .stardust::before {
    transform: translate(-50%, -50%) rotate(-97deg);
}

#search-container:hover > .cosmic-ring::before {
    transform: translate(-50%, -50%) rotate(-110deg);
}

#search-container:focus-within > .starfield::before {
    transform: translate(-50%, -50%) rotate(442deg);
    transition: all 4s;
}

#search-container:focus-within > .nebula::before {
    transform: translate(-50%, -50%) rotate(420deg);
    transition: all 4s;
}

#search-container:focus-within > .stardust::before {
    transform: translate(-50%, -50%) rotate(443deg);
    transition: all 4s;
}

#search-container:focus-within > .cosmic-ring::before {
    transform: translate(-50%, -50%) rotate(430deg);
    transition: all 4s;
}

.nebula {
    overflow: hidden;
    filter: blur(30px);
    opacity: 0.4;
    max-height: 130px;
    max-width: 354px;
}

    .nebula:before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(60deg);
        position: absolute;
        width: 999px;
        height: 999px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(#000, #4d6dff 5%, #000 38%, #000 50%, #6e8cff 60%, #000 87%);
        transition: all 2s;
    }

#wormhole-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    max-height: 40px;
    max-width: 38px;
    height: 100%;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(180deg, #1c2452, #05071b, #2a3875);
    border: 1px solid transparent;
}

.wormhole-border {
    height: 42px;
    width: 40px;
    position: absolute;
    overflow: hidden;
    top: 7px;
    right: 7px;
    border-radius: 10px;
}

    .wormhole-border::before {
        content: "";
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        filter: brightness(1.35);
        background-image: conic-gradient(rgba(0, 0, 0, 0), #4d6dff, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, #6e8cff, rgba(0, 0, 0, 0) 100%);
        animation: rotate 4s linear infinite;
    }

#main {
    position: relative;
}

#search-icon {
    position: absolute;
    left: 20px;
    top: 15px;
}

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(450deg);
    }
}


.smart-search-container {
    display: none;
    animation: slideDown 0.5s forwards;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    padding: 1.3rem 0 0.7rem 0;
    border-bottom: 1px solid #e1e1e1;
    z-index: 999;
    position: relative;
}

.smart-search-box {
    display: flex;
    align-items: center;
    border-radius: 2.2rem;
    overflow: hidden;
    background: #fff;
    min-width: 320px;
    max-width: 650px;
    width: 100%;
    border: 1.5px solid #e6ecf3;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: box-shadow .2s;
}

    .smart-search-box:focus-within {
        box-shadow: 0 6px 26px rgba(0, 123, 255, 0.2);
    }

.search-input {
    flex: 1;
    border: none !important;
    background: #f7fafd !important;
    font-size: 1.15rem;
    padding: 0.65rem 1rem;
    border-radius: 0 !important;
    min-width: 0;
    box-shadow: none !important;
    transition: background 0.2s;
}

    .search-input:focus {
        background: #f3f6ff !important;
        outline: none !important;
        box-shadow: none !important;
    }

.icon-btn {
    background: transparent;
    border: none;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .6rem;
    cursor: pointer;
    color: #6f42c1;
    transition: all 0.25s ease-in-out;
    border-radius: 50%;
    height: 40px;
    width: 40px;
}

    .icon-btn:hover {
        color: #007bff;
        background: #e7f1ff;
    }

#voiceBtn {
    background: #fff;
    border: 1.5px solid #e1e1e1;
    font-size: 1.5rem;
    border-radius: 50%;
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    color: #6f42c1;
}

    #voiceBtn:hover {
        background: #f3e8ff;
        border-color: #b23fff;
        color: #b23fff;
        box-shadow: 0 0 8px #d9a8ff88;
    }

#micIcon {
    font-size: 1.7rem !important;
    color: #007bff !important;
    text-shadow: 0 1px 4px #fff, 0 0 2px #007bff33;
    transition: color 0.3s, text-shadow 0.3s;
}

.search-btn {
    background: linear-gradient(90deg, #007bff, #00c6ff);
    color: #fff !important;
    border: none;
    font-size: 1.09rem;
    font-weight: 600;
    padding: 0 1.25rem;
    border-radius: 0 2rem 2rem 0;
    min-width: 96px;
    transition: background 0.2s;
    letter-spacing: .01em;
}

    .search-btn:hover {
        background: linear-gradient(90deg, #0056b3, #00aaff);
    }

.listening-popup {
    display: none;
    background-color: #007bff;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.97rem;
    margin-top: 10px;
    text-align: center;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

.scanner-anim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d5afd 60%, #00c6ff 100%);
    box-shadow: 0 0 12px #0d5afd44;
    animation: scannerPulse 1.2s infinite alternate;
    font-size: 1.7rem;
    color: #fff;
    position: relative;
}

.scanner-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boxing-scanner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px #0d5afd22;
    font-size: 2.1rem;
    color: #0d5afd;
    margin-bottom: 0;
    overflow: hidden;
}

    /* Adjust main scanner camera icon positioning with animation */
    .boxing-scanner .bi-camera {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 2.3rem;
        color: #0d5afd;
        z-index: 3;
        /* Start correctly centered */
        transform: translate(-50%, -50%);
        /* Bounce only affects Y movement */
        animation: cameraBounce 1.2s infinite alternate;
    }
    /* New image-based camera icon */
    .boxing-scanner .scanner-camera-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 36px;
        height: 36px;
        z-index: 3;
        animation: cameraBounce 1.2s infinite alternate;
        pointer-events: none;
        display: block;
    }
/* Remove padding-top from global .bi-camera */
.bi-camera {
    padding-top: 0 !important; /* Override the previous 60px */
}

/* Animation to mimic the desired offset without global padding */
@keyframes cameraBounce {
    0% {
        transform: translate(-50%, -50%) translateY(4px);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-4px);
    }

    100% {
        transform: translate(-50%, -50%) translateY(4px);
    }
}


.scanner-line {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0d5afd 0%, #00c6ff 100%);
    z-index: 4 !important; /* above camera image */
    animation: scannerLineMove 1.6s infinite alternate;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes scannerLineMove {
    0% {
        transform: translateY(-50%) translateY(-2px);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-50%) translateY(2px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) translateY(-2px);
        opacity: 0.7;
    }
}

.label-scanner {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 500;
    color: #0d5afd;
}

.floating-scanner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1px;
    z-index: 3;
    box-shadow: 0 6px 24px #0d5afd33;
    animation: scannerPop 0.7s cubic-bezier(.68,-0.55,.27,1.55) alternate;
}

/* Ensure the floating scanner centers relative to the whole footer bar, not the middle <li> */
.footer-nav .scanner-nav-li {
    position: static !important; /* override inline position:relative on the li */
}

.scanner-popup-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 62px;
    transform: translateX(-50%);
    width: 180px;
    height: 90px;
    z-index: 99;
    pointer-events: none;
}

.scanner-popup-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.97);
    border-top-left-radius: 90px;
    border-top-right-radius: 90px;
    box-shadow: 0 8px 32px #0d5afd22;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s, transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
    pointer-events: none;
}

.scanner-popup-wrap.show .scanner-popup-bg {
    opacity: 1;
    transform: translateX(0);
}

.scanner-choice-popup {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 28px;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 0.3s, transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
    pointer-events: none;
}

.scanner-popup-wrap.show .scanner-choice-popup {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.scanner-choice-btn {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 12px #0d5afd22;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    outline: none;
    transition: box-shadow 0.2s, background 0.2s;
    overflow: hidden;
}

    .scanner-choice-btn .bi {
        font-size: 2rem;
        color: #0d5afd;
        z-index: 2;
        text-shadow: 0 2px 8px #bcdcff33, 0 0px 2px #fff;
        animation: scannerChoiceIconPulse 1.2s infinite alternate;
        position: relative;
    }

.scanner-choice-btn-group .camera .bi-camera {
    /* Ensure no extra padding or offset for popup camera icon */
    padding: 0;
    margin: 0;
}

.scanner-choice-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.1) 100%);
    opacity: 0.7;
    animation: scannerChoiceShineMove 1.8s linear infinite;
    z-index: 3;
}

.scanner-choice-label {
    font-size: 13px;
    color: #0d5afd;
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
    letter-spacing: 0.01em;
    user-select: none;
}
/*categories css*/
.category-card {
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

    .category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    }

.text-gradient {
    background: linear-gradient(to right, #2e86de, #6c5ce7);
    background-clip: text; /* standard */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback */
}
    .slider-caption h3 {
        font-size: 1.5rem;
        margin-bottom: 5px;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    }

    .slider-caption p {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-bottom: 0;
    }

/* Category grid styling */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Responsive columns */
    gap: 20px;
    padding: 10px;
}
.categories-area {
    margin-top: 0 !important;
    padding-bottom: 60px !important; /* Height of footer + some space */

    padding-top: 40px !important; /* Just a little space after header */
}
    .categories-area .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
   }
.menu-item {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border: 1px solid rgba(0,0,0,0.05);
}

    .menu-item::after {
        content: '';
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        top: -20px;
        right: -20px;
        z-index: 0;
    }

    .category-item .emoji {
        font-size: 28px;
        margin-bottom: 8px;
        display: block;
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }

    .category-item .label {
        display: block;
        font-size: 14px;
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }

    .category-item:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    }

        .category-item:hover .emoji {
            transform: scale(1.2) rotate(5deg);
        }

        .category-item:hover .label {
            transform: translateY(2px);
        }
        /*notification */
#notificationModal {
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

 /*quick actions css*/
.quick-actions-container {
    margin-bottom: 24px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #111;
}

.actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-button {
    width: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    outline: none;
}

    .action-button:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .action-button:active {
        transform: scale(0.98);
    }

    .action-button.action-green {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
        border-color: rgba(34, 197, 94, 0.2);
    }

    .action-button.action-purple {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(147, 51, 234, 0.1));
        border-color: rgba(168, 85, 247, 0.2);
    }

.action-icon {
    font-size: 30px;
}

.action-content {
    flex: 1;
    text-align: left;
}

.action-title {
    font-weight: 600;
    font-size: 14px;
    color: #111;
}

.action-subtitle {
    color: #6b7280;
    font-size: 12px;
}

.action-arrow {
    color: #6b7280;
    font-size: 18px;
}
/*Trusted by Thousands css*/
.stats-container {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
    color: #111;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stat-item {
    text-align: center;
}

.stat-icon {
    font-size: 32px;
    margin-bottom: 4px;
}

.stat-count {
    font-size: 20px;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: #6b7280;
}

.stats-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

    .stats-footer p {
        text-align: center;
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }
/*what ou app is about css*/
.about-container {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.about-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    text-align: center;
    color: #2563eb;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 20px;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 4px;
    color: #111;
}

.feature-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.about-footer {
    margin-top: 24px;
    padding: 16px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.1));
    border-radius: 12px;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

    .about-footer p {
        text-align: center;
        font-size: 14px;
        color: #6b7280;
        margin: 0;
    }
        
    .about-footer strong {
        color: #2563eb;
    }


    /*b2b* options 1st/*/

/*section {
    background: #111827;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.glow-btn {
    position: relative;
    padding: 15px 40px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    z-index: 0;
}

    .glow-btn::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background-size: 400%;
        z-index: -1;
        border-radius: 10px;
        animation: glowing 5s linear infinite;
    }

    .glow-btn::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        background: #111827;
        border-radius: 6px;
        z-index: -1;
    }

 Category Colors 
.b2b::before {
    background: linear-gradient(45deg, #0ea5a3, #06b6d4, #0ea5a3);
}

.b2c::before {
    background: linear-gradient(45deg, #f97316, #fb923c, #f97316);
}

.b2s::before {
    background: linear-gradient(45deg, #8b5cf6, #a78bfa, #8b5cf6);
}

.manpower::before {
    background: linear-gradient(45deg, #10b981, #34d399, #10b981);
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}
.button-row {
    display: flex;
    justify-content: space-between;  Even spacing 
    gap: 10px;  Small gap for mobile 
    flex-wrap: nowrap;  Force single row 
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

     Make all buttons equal width for PWA 
    .button-row .main-btn {
        flex: 1 1 0;  Equal size distribution 
        max-width: none;
        padding: 12px 0;  Adjust for touch size 
        font-size: 14px;  Fit text nicely 
    }
*/

.button-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-top: 1px;
}

.horizontal-line {
    position: absolute;
    top: -33px;
    left: 0;
    right: 0;
    height: 2px;
    background: #666;
    z-index: 1;
}

.button-row {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    gap: 5px;
    padding: 0 5px;
}

.button-hanger {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 70px;
    margin-top: -40px;
}

.rope {
    position: absolute;
    top: -10px !important;
    width: 2px;
    height: 50px;
    background: #666;
    z-index: 2;
}

.main-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    color: white !important;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    padding: 5px;
    word-break: break-word;
}

    .main-btn::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background-size: 400%;
        z-index: -1;
        border-radius: 50%;
        animation: glowing 5s linear infinite;
    }

    .main-btn::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
        border-radius: 50%;
        z-index: -1;
    }

/* Improved Inner Colors */
/* Category Colors matching your services cards */
/* For B2B Button (Teal) */
.b2b::after {
    background: linear-gradient(to bottom, #0ea5a3, #06b6d4); /* Inner color */
}

.b2b::before {
    background: linear-gradient(45deg, #0ea5a3, #06b6d4, #0ea5a3); /* Glowing edge */
}

/* For B2C Button (Orange) */
.b2c::after {
    background: linear-gradient(to bottom, #f97316, #fb923c); /* Inner color */
}

.b2c::before {
    background: linear-gradient(45deg, #f97316, #fb923c, #f97316); /* Glowing edge */
}

/* For B2S Button (Purple) */
.b2s::after {
    background: linear-gradient(to bottom, #8b5cf6, #a78bfa); /* Inner color */
}

.b2s::before {
    background: linear-gradient(45deg, #8b5cf6, #a78bfa, #8b5cf6); /* Glowing edge */
}

/* For MANPOWER Button (Green) */
.manpower::after {
    background: linear-gradient(to bottom, #10b981, #34d399); /* Inner color */
}

.manpower::before {
    background: linear-gradient(45deg, #10b981, #34d399, #10b981); /* Glowing edge */
}


/*chats(support)  page css*/

.container {
    max-width: 672px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header Styles */
.header {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: white;
    padding: 2rem 1rem;
}

.back-button {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0.1rem;
    transition: background-color 0.2s;
}

    .back-button:hover {
        background: rgba(255, 255, 255, 0.2);
    }

.header h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.header p {
    opacity: 0.9;
}

/* Card Styles */
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    margin-top: -1rem;
}

.card-header {
    padding: 1.5rem 1.5rem 0;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-description {
    color: #6b7280;
    margin-bottom: 1rem;
}

.card-content {
    padding: 0 1.5rem 1.5rem;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
}

.input, .textarea, .select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .input:focus, .textarea:focus, .select:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.textarea {
    min-height: 100px;
    resize: vertical;
}

/* Radio Group Styles */
.radio-group {
    margin-top: 0.5rem;
}

.radio-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .radio-item:hover {
        background-color: #f9fafb;
    }

    .radio-item input[type="radio"] {
        margin-right: 0.75rem;
    }

.radio-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Button Styles */
.button-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .button-group {
        grid-template-columns: 1fr 1fr;
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-size: 1rem;
}

.button-whatsapp {
    background-color: #22c55e;
    color: white;
}

    .button-whatsapp:hover {
        background-color: #16a34a;
    }

.button-email {
    background-color: transparent;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

    .button-email:hover {
        background-color: #3b82f6;
        color: white;
    }

/* Contact Info Styles */
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.contact-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.whatsapp-icon {
    color: #22c55e;
}

.email-icon {
    color: #3b82f6;
}

/* FAQ Styles */
.faq-item {
    margin-bottom: 1rem;
}

.faq-question {
    font-weight: 500;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.faq-answer {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Icons (simplified) */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
}

.icon-primary {
    color: #3b82f6;
}

.icon-success {
    color: #22c55e;
}

.icon-accent {
    color: #16a34a;
}

/* Error message */
.error-message {
    background-color: #fef2f2;
    color: #dc2626;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    display: none;
}



/* =============================
   Sell Page (Dashboard/sell)
   Beautiful mobile-first styles
   Scoped via unique IDs to avoid conflicts
   ============================= */

#sellContainer {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

#sellHeader { margin: 0px 2px 14px; }
#sellTitle {
    font-size: clamp(22px, 5.6vw, 26px);
    line-height: 1.25;
    font-weight: 800;
    margin: 2px 0 6px;
    letter-spacing: .2px;
}
#sellSubtitle {
    color: #2563eb;
    font-weight: 700;
    background: linear-gradient( 90deg, #2563eb 0%, #bcdcff 20%, #fff 40%, #bcdcff 60%, #2563eb 100% );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: subtitle-glow-move 5.2s linear infinite;
}

@keyframes subtitle-glow-move {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
#sellCard {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #eef2f8;
    box-shadow: 0 10px 26px rgba(15, 27, 61, 0.10);
    overflow: hidden;
}
#sellCardHeader {
    padding: 16px 16px 10px;
    border-bottom: 1px solid #eef2f8;
}
#sellCardTitle { font-weight: 800; letter-spacing: .2px; }
#sellCardDescription { font-size: 13px; }
#sellCardContent { padding: 14px 14px 18px; }

/* Step indicator */
#sellStepIndicator { padding: 8px 4px 12px; margin-bottom: 8px; overflow-x: hidden; }
#sellStepsContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 6px; /* consistent spacing between steps */
    overflow-x: unset; /* allow horizontal scroll if needed on small screens */
}
#sellStepIndicator .step-item {
    flex: 1 1 0;
    min-width: 60px; /* adjust as needed for your design */
    max-width: 80px; /* adjust as needed for your design */
    text-align: center;
}
#sellStepIndicator .step-circle-container { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#sellStepIndicator .step-circle {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
#sellStepIndicator .step-label {
    display: block;
    font-size: 10px;
    line-height: 1.1;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Form */
#sellFormContent { margin-top: 8px; }
#sellFormContent .form-group { margin-bottom: 14px; }
#sellFormContent .form-label { font-size: 13px; font-weight: 700; color: #1a2756; margin-bottom: 6px; display: block; }
#sellFormContent .form-input,
#sellFormContent .form-select,
#sellFormContent .form-textarea {
    width: 100%; border: 1px solid #d9e2f1; background: #fbfdff; color: #0f1b3d;
    border-radius: 14px; padding: 13px; font-size: 16px; line-height: 1.35; outline: none;
    transition: box-shadow .15s, border-color .15s; appearance: none; -webkit-appearance: none; min-height: 44px;
}
#sellFormContent .form-input:focus,
#sellFormContent .form-select:focus,
#sellFormContent .form-textarea:focus { border-color: #246bff; box-shadow: 0 0 0 4px rgba(36,107,255,0.10); }
#sellFormContent .form-textarea { min-height: 110px; resize: vertical; }
#sellFormContent .form-description { font-size: 12px; color: #6c7aa8; margin-top: 6px; }

/* Buttons */
#sellButtonGroup {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-top: 1px solid #eef2f8; background: #fff;
    border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}
#sellButtonLeft { display: flex; gap: 8px; }
#sellButtonGroup .btn { border-radius: 14px; padding: 12px 16px; font-weight: 800; font-size: 15px; }
/* keep original button colors from existing theme; only radius/spacing is applied */

@media (max-width: 420px) {
    #sellTitle { font-size: 20px; }
    #sellCardContent { padding: 12px 10px 16px; }
    #sellButtonGroup { flex-direction: column; align-items: stretch; }
    #sellButtonLeft { width: 100%; }
    #sellButtonGroup .btn-next { width: 100%; }
}
@media (max-width: 600px) {
    #sellStepIndicator {
        padding-left: 19px !important;
        padding-right: 5px !important; 
    }

    #sellStepsContainer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 2px;
    }

    #sellStepIndicator .step-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        text-align: center;
        margin: 0;
    }
}

/* =============================
    Chat Header (Scoped, Mobile)
    IDs: #chatHeader, #chatHeaderContainer, #chatBackButton, #chatTitle, #chatSubtitle
    Only styles specific to Chat header to avoid conflicts
 ============================= */
 #chatHeader {
     /* Match Sell header: clean white bar, no extra padding */
     background: #ffffff;
     border-bottom: 1px solid #eef2f8;
     padding: 0; /* override generic .header padding */
     color: inherit; /* override generic .header color */
     margin: 40px 2px 14px; /* chat page requires larger top margin */
 }
 #chatHeaderContainer {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 14px;
     min-height: 56px; /* touch-friendly */
 }
 #chatBackButton {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 12px;
     border: 1px solid #eef2f8;
     background: #fff;
 }
 #chatBackButton i,
 #chatBackButton .bi {
     font-size: 18px;
     line-height: 1;
 }
 #chatTitle {
     /* Align with #sellTitle */
     font-size: clamp(22px, 5.6vw, 26px);
     line-height: 1.25;
     font-weight: 800;
     color: #1a2756; /* theme heading color */
     margin: 2px 0 6px;
     letter-spacing: .2px;
 }
 #chatSubtitle {
     /* Match #sellSubtitle gradient style */
     color: #2563eb;
     font-weight: 700;
     background: linear-gradient( 90deg, #2563eb 0%, #bcdcff 20%, #fff 40%, #bcdcff 60%, #2563eb 100% );
     background-size: 200% auto;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
     animation: subtitle-glow-move 5.2s linear infinite;
     font-size: 12px;
     line-height: 1.2;
     margin: 0;
 }
 
 /* Stack title/subtitle neatly on very small screens */
 @media (max-width: 420px) {
     #chatHeaderContainer { padding: 10px 12px; }
     #chatBackButton { width: 38px; height: 38px; border-radius: 12px; }
     #chatTitle { font-size: 18px; color: white;}
 }
 
 /* Hide back button and add safe spacing on mobile/tablet */
 @media (max-width: 768px) {
     /* Remove back button as requested */
     #chatBackButton { display: none; }

     /* Prevent header content from sitting too high under the logo area (handled by explicit margin above) */
    /* #chatHeader { margin-top: 8px; } */

     /* If a generic .header is used and creeps into the logo area, nudge it down slightly */
     .header { margin-top: 8px; }
 }

/* ======================================
   Fix: lowercase Bootstrap Icons mapping
   Your bootstrap-icons.min.css uses capital 'C' in chat selectors
   (e.g., .bi-Chat-dots). Our markup uses lowercase classes
   (e.g., .bi-chat-dots), so map them here.
   Source codepoints from bootstrap-icons.min.css near header.
====================================== */
.bi-chat-dots::before { content: "\f24a"; }
.bi-chat::before { content: "\f268"; }
/* Optional extra mappings if used anywhere */
.bi-chat-left-dots::before { content: "\f24d"; }
.bi-chat-text::before { content: "\f267"; }
.bi-chat-right-dots::before { content: "\f257"; }
.bi-chat-square-dots::before { content: "\f25f"; }

/* ======================================
   Global Preloader (ensure centered on all pages)
   Moved here so pages not loading style.css still center the spinner
====================================== */
#preloader {
  background-color: var(--primary-100, #e8f0ff);
  position: fixed;
  inset: 0; /* shorthand for top/right/bottom/left:0 */
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*second banner css*/
#banner2Dots .dot.active {
    animation: banner2-dot-blink 1s ease-in-out infinite;
}
@keyframes banner2-dot-blink {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
    50% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(0,0,0,0.08); }
}

/* ===== Footer nav active state ===== */
.footer-nav a.active i,
.footer-nav a.active span,
.footer-nav li.active a i,
.footer-nav li.active a span {
    color: #0134d4 !important; /* theme blue */
}

/* Subtle underline or pill to emphasize active */
.footer-nav a.active span::after,
.footer-nav li.active a span::after {
    content: '';
    display: block;
    margin: 2px auto 0;
    width: 22px;
    height: 2px;
    background: #0134d4;
    border-radius: 2px;
}

/* ===== Button pressed feedback before navigation ===== */
.main-btn.pressed {
    background: linear-gradient(90deg, #c6e2ff 0%, #e8f3ff 100%) !important;
    color: #1553a8 !important;
    box-shadow: 0 4px 16px 0 rgba(45,125,253,0.10) !important;
    transform: translateY(1px);
}