/*
   Project-side additions on top of the mirrored theme. Everything here either
   supports markup the reference storefront renders from its own backend
   (the Flash Sale chip, the live search list) or fixes a spot where our data
   differs from theirs.
*/

/* --- Header bottom bar ---------------------------------------------- */

.header.style-7 .header-bottom .inner-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header.style-7 .header-bottom .menu > li > a {
    white-space: nowrap;
    color: var(--white-color);
}

.header.style-7 .header-bottom .menu > li:hover > a:not(.menu-title) {
    color: var(--white-color);
    opacity: 0.85;
}

@media (max-width: 991px) {
    .header.style-7 .header-bottom {
        display: none;
    }
}

/* --- Product card ----------------------------------------------------- */

.product.style-6 .product-price .old-price {
    margin-left: 6px;
    color: #999;
    font-size: 0.9em;
    text-decoration: line-through;
}

/* Cards live in a Bootstrap-style row on the "Just For You" grid. */
.recommended_product_section .product-wrap {
    margin-bottom: 24px;
}

/* --- Home rails ------------------------------------------------------- */

.banner-wrapper img {
    width: 100%;
    border-radius: 8px;
}

.r-products-bottom {
    margin-top: 24px;
}

/* --- Breadcrumb / listing -------------------------------------------- */

.pagination__area {
    padding: 24px 0;
}

.toolbox.sticky-toolbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

/* --- Floating contact widget ------------------------------------------ */

.chat-widget {
    position: fixed;
    right: 20px;
    bottom: 92px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

@media (min-width: 992px) {
    .chat-widget {
        bottom: 24px;
    }
}

.chat-widget-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.chat-widget-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
}

.chat-widget.is-open .chat-widget-item {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-widget-item svg {
    width: 22px;
    height: 22px;
}

.chat-widget-item:hover {
    color: #fff;
    transform: translateY(0) scale(1.08);
}

.chat-widget-tip {
    position: absolute;
    right: 56px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--secondary-color);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.chat-widget-item:hover .chat-widget-tip {
    opacity: 1;
}

.chat-widget-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, background 0.25s ease;
}

.chat-widget-toggle:hover {
    transform: scale(1.06);
}

.chat-widget-toggle svg {
    width: 24px;
    height: 24px;
}

.chat-widget-toggle .chat-widget-icon-close,
.chat-widget.is-open .chat-widget-toggle .chat-widget-icon-open {
    display: none;
}

.chat-widget.is-open .chat-widget-toggle .chat-widget-icon-close {
    display: block;
}

/* --- Order success ----------------------------------------------------- */

.order-success-hero {
    margin-bottom: 24px;
    padding: 32px 24px;
    border-radius: 8px;
    background: var(--white-color);
    text-align: center;
}

.order-success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--success-color);
    color: var(--white-color);
    font-size: 26px;
}

.order-success-title {
    margin: 0 0 8px;
    color: var(--title-color);
    font-size: 24px;
    font-weight: 600;
}

.order-success-text {
    margin: 0 auto 12px;
    max-width: 560px;
    color: var(--paragraph-color);
    font-size: 14px;
}

.order-success-number {
    margin: 0;
    color: var(--primary-color);
    font-size: 16px;
}

.order-success-address {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.9;
    color: var(--paragraph-color);
    font-size: 14px;
}

.order-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.order-success-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* --- Empty states, wishlist, tracking --------------------------------- */

.empty-state {
    padding: 56px 20px;
    text-align: center;
}

.empty-state img {
    max-width: 160px;
}

.empty-state p {
    margin: 14px 0 18px;
    color: var(--title-color);
    font-size: 16px;
    font-weight: 600;
}

.wishlist-table {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    overflow: hidden;
}

.wishlist-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.wishlist-row:last-child {
    border-bottom: 0;
}

.wishlist-thumb img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
}

.wishlist-info {
    flex: 1;
    min-width: 0;
}

.wishlist-title {
    display: block;
    color: var(--title-color);
    font-size: 15px;
    font-weight: 500;
}

.wishlist-price {
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
}

.wishlist-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 575px) {
    .wishlist-row {
        flex-wrap: wrap;
    }

    .wishlist-actions {
        width: 100%;
    }
}

/* --- Order tracking ---------------------------------------------------- */

.track-form {
    display: flex;
    gap: 10px;
    max-width: 640px;
    margin: 0 auto 28px;
}

.track-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
}

.track-card {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
}

.track-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.track-status {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.track-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 2;
    color: var(--paragraph-color);
}

.track-lines span {
    float: right;
    color: var(--title-color);
    font-weight: 600;
}

/* --- Category directory ------------------------------------------------ */

.category-group {
    margin-bottom: 32px;
}

.category-group-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 20px;
}

.category-group-list .category-card {
    display: block;
    text-align: center;
}

.category-group-list .category-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.category-group-list .category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-group-list .category-card:hover .category-img img {
    transform: scale(1.04);
}

.category-group-list .category-info p {
    margin: 10px 0 0;
    color: var(--title-color);
    font-size: 14px;
    font-weight: 500;
}

/* --- Listing toolbox count -------------------------------------------- */

.toolbox-count {
    color: var(--paragraph-color);
    font-size: 13px;
    font-weight: 600;
}

/* --- Auth pages -------------------------------------------------------- */

.auth-status,
.auth-success,
.auth-error {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.auth-status,
.auth-success {
    background: #ecfdf3;
    color: #166534;
}

.auth-error {
    background: #fef2f2;
    color: var(--alert-color);
}

.auth-footer-text {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
}

.auth-footer-text a {
    color: var(--primary-color);
    font-weight: 600;
}

.auth-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border-radius: 8px;
    background: var(--off-white-color);
}

.auth-tab {
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--paragraph-color);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.auth-tab.is-active {
    background: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* --- Account area ------------------------------------------------------ */

.account-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .account-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.account-nav {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    height: fit-content;
}

.account-nav-head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.account-nav-head strong {
    display: block;
    color: var(--title-color);
    font-size: 15px;
}

.account-nav-head span {
    color: var(--hints-color);
    font-size: 13px;
}

.account-nav a,
.account-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--paragraph-color);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.25s ease;
}

.account-nav a:hover,
.account-nav button:hover {
    background: var(--off-white-color);
    color: var(--primary-color);
}

.account-nav a.is-active {
    background: var(--primary-color);
    color: var(--white-color);
}

.account-panel {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
}

/* The reference signin page has two columns (OTP + credentials); ours has one,
   so the single column takes the full width instead of a third of it. */
.auth-container .auth-forms:not(:has(.forms-divider)) {
    grid-template-columns: 1fr;
}

/* --- Product detail: brand chip ---------------------------------------- */

/* The brand chip sat flush against the WhatsApp / Call row, so it read as a
   third button. Give it its own breathing room. */
.product-single .product-details-action-group + .product-brand,
.product-details .product-brand {
    margin-top: 20px;
}

/* --- Checkout: payment methods ---------------------------------------- */

/* The theme sizes payment tiles through `.payment-method-input label`, but the
   options here are divs, so they were left to size themselves and came out
   ragged. Lay them out as an even two-column grid instead. */
.checkout-payment-method .payment-method-input {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.checkout-payment-method .payment-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: var(--white-color);
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.checkout-payment-method .payment-option:hover {
    border-color: var(--primary-color);
}

.checkout-payment-method .payment-option.selected {
    border-color: var(--primary-color);
    background: #fff6ee;
}

.checkout-payment-method .payment-method-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.checkout-payment-method .payment-method-info img {
    width: 30px;
    min-width: 30px;
    height: 24px;
    object-fit: contain;
}

.checkout-payment-method .payment-method-info p {
    margin: 0;
    color: var(--title-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    /* Long labels such as "SSLCommerz (Card/bKash/Nagad)" wrap instead of
       stretching the tile past its column. */
    overflow-wrap: anywhere;
}

.checkout-payment-method .selection-indicator {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border: 1px solid #d7d7d7;
    border-radius: 50%;
    transition: all 0.25s ease;
}

.checkout-payment-method .payment-option.selected .selection-indicator {
    border-color: var(--primary-color);
    background: var(--primary-color)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-6'/%3e%3c/svg%3e") center / 13px no-repeat;
}

@media (max-width: 575px) {
    .checkout-payment-method .payment-method-input {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Checkout: phone field -------------------------------------------- */

/* The theme pins the +88 chip on top of the input and leaves the text clear of
   it with padding, which any other padding rule can knock out — and then the
   first digits sit under the chip. Lay the two out side by side instead, so
   they can never overlap whatever the padding says. */
.checkout-area .phone-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-area .phone-group .shipPhoneCode,
.checkout-area .phone-group .billPhoneCode {
    position: static;
    transform: none;
    flex: 0 0 auto;
}

.checkout-area .phone-group input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 14px !important;
}

/* --- Checkout: order summary ------------------------------------------ */

/* The list items are flex, which outranks the browser's own [hidden] rule, so
   an empty discount row stayed on screen. */
.cart-order-summary-main-list li[hidden] {
    display: none !important;
}