body {
    font-family: IRANSansX !important;
    overflow-x: hidden;
}

    /* 1) روی کل متن‌های عادی، کرسر تایپ رو پنهان کن (caret) */
    body: not(input): not(textarea): not([contenteditable = "true"]) {
        caret - color: transparent; /* جلوی چشمک‌زدن کرسر متن را می‌گیرد */
    }

/* 2) کرسر و رفتار درست برای کنترل‌های واقعی */
input, textarea, [contenteditable = "true"] {
    caret - color: auto;
    cursor: text; /* داخل ورودی‌ها همچنان I-beam طبیعی باشد */
}

/* 3) روی متن‌های عادی نشانگر موس، فلش باشد (نه I-beam) */
p, span, label, h1, h2, h3, h4, h5, h6, li, div {
    cursor: default;
}

/* 4) عناصر کلیک‌پذیر با نشانگر دست */
a, button, [role = "button"], .btn,
.owl - carousel.owl - nav button, .owl - carousel.owl - dots button {
    cursor: pointer;
}

/* 5) فوکوس‌های بصری مزاحم روی عناصر غیرتعاملی حذف؛
      اما برای کیبورد، فقط با :focus-visible نمایش داده شود */
: where(p, div, span, li, h1, h2, h3, h4, h5, h6):focus {
    outline: none !important;
}

a: focus - visible, button: focus - visible {
    outline: 2px solid #0d6efd;
    outline - offset: 2px;
}


/* Main login container */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(8 27 255 / 15%) !important;
    padding: 20px;
}

.login-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    padding: 30px;
    text-align: center;
}

/* Title */
.login-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Alert messages */
.alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 14px;
}

/* Form Inputs */
.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }

.form-control {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

    .form-control:focus {
        border-color: #0056b3;
        outline: none;
    }

/* OTP Input */
.otp-input {
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 20px;
    margin: 5px;
    border: 2px solid #ddd;
    border-radius: 5px;
}

    .otp-input:focus {
        outline: none;
        border-color: #007bff; /* رنگ حاشیه زمانی که ورودی فوکوس می‌شود */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* افکت سایه */
    }


.text-end a {
    font-size: 12px;
    color: #0056b3;
}

    .text-end a:hover {
        text-decoration: underline;
    }

.signup-link {
    margin-top: 20px;
    font-size: 14px;
}

    .signup-link a {
        font-weight: 600;
    }

/* Buttons */
.login-container .btn {
    padding: 12px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.login-container .btn-primary {
    background-color: #0056b3;
    color: #fff;
    border: none;
}

    .btn-primary:disabled {
        background-color: #b0c4de;
        cursor: not-allowed;
    }

.forget-link {
    font-size: 12px;
    color: #0056b3;
    cursor: pointer;
}

    .forget-link:hover {
        text-decoration: underline;
    }

/* Responsiveness */
@media (max-width: 768px) {
    .login-card {
        padding: 20px;
    }
}
.btn-login {
    background: #0f3f65;
    color: #fff;
    font-size: 10pt;
}











h1, h2, h3, h4, h5, h6, input, textarea {
    font-family: IRANSansX !important;
}
.book-card img {
    height: 200px;
    object-fit: cover;
}

footer {
    background-color: #353a58;
    padding: 2rem 0;
    color: #fff;
}
.footer a {
    color: #fff;
    text-decoration: none;
}
.footer-links ul {
    padding: 0;
    list-style: none;
}

.carousel-inner img {
    height: 180px;
    object-fit: cover;
}
.w-7rem{
    width:7rem;
}
.section-title {
    margin-bottom: 1rem;
    font-weight: bold;
    border-right: 5px solid #6610f2;
    padding-right: .5rem;
}

/*icon*/
.cart-icon {
    z-index: 1100;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: red;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: bold;
}



/*.hamburger {
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001;
}

    .hamburger span {
        background: #000;
        display: block;
        height: 3px;
        margin: 6px 0;
        transition: 0.4s;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

.side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: right 0.4s ease;
    padding: 2rem;
    transition: 0.5s ease-in-out;
    overflow-y: auto;
}

    .side-menu.active {
        transition: 0.5s ease-in-out;
        right: 0;
    }

    .side-menu .row > div {
        border-left: 1px solid #ddd;
    }
header.bg-light.px-3.border-bottom.sticky-top {
    height: 6rem;
    background-color: #193f8326;
}*/
/* دکمه همبرگر/ضربدر ثابت بالا سمت راست */

.menu-toggle-icon {
    background: transparent !important;
    border: 0;
    padding: .25rem;
    cursor: pointer;
    position: relative;
    z-index: 1101;
}

.side-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 360px);
    background: #fff;
    box-shadow: -12px 0 32px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 1100;
    overflow-y: auto;
}

    .side-menu.active {
        transform: translateX(0);
    }

    .side-menu .nav-link {
        padding: .65rem .25rem;
        color: #202427;
        display: block;
    }

        .side-menu .nav-link.active,
        .side-menu .nav-link:hover {
            color: #0B4887;
            background: #f1f6fb;
            cursor:pointer
        }





.home-box {
    background-color: #242a4d;
    border-radius: 5px;
    width: 18%;
    text-align:center;
}
    .home-box a{
        text-decoration:none;
        color:white;
    }
    /*blog*/
    .blog-card {
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

.blog-img {
    max-height: 200px;
    object-fit: cover;
}

.article-card {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    height: 25rem;
}
    .badge-custom {
    background-color: #eee;
    color: #333;
}





    /*bascket*/
.cart-header {
    background-color: #fff;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

.cart-steps {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem 0;
}

.cart-step {
    text-align: center;
    flex: 1;
}

    .cart-step i {
        font-size: 1.5rem;
        color: #888;
    }

    .cart-step.active i,
    .cart-step.active {
        color: #f7941d;
        font-weight: bold;
    }

.cart-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

    .cart-item img {
        width: 60px;
        height: 80px;
        border-radius: 5px;
        margin-left: 1rem;
    }

.cart-item-details {
    flex: 1;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem;
}

    .summary-box .price-line {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }



.social-icons a {
    color: #666;
    margin-left: 0.5rem;
    font-size: 1.2rem;
}



/*address in bascket*/
.address-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.header-section {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.form-label {
    font-weight: 600;
    margin-bottom: 8px;
}

.form-control {
    border-radius: 8px;
}

.btn-primary {
    background-color: #0d6efd;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    width: 100%;
}

.btn-outline-secondary {
    border-radius: 8px;
    font-weight: 600;
}

.footer-text {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin-top: 20px;
}

.shipping-method {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    color: #6c757d;
}
/**/
.cart-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 20px;
}

.section-title {
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.address-section {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.add-address-btn {
    background-color: #f8f9fa;
    border: 1px dashed #adb5bd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
}

    .add-address-btn:hover {
        background-color: #e9ecef;
    }

.total-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.checkout-btn {
    background-color: #28a745;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 20px;
}

.divider {
    border-top: 1px solid #dee2e6;
    margin: 20px 0;
}

.shipping-section {
    margin-bottom: 20px;
}

.delivery-info {
    font-size: 14px;
    color: #6c757d;
    margin-top: 15px;
}

.price {
    font-weight: 700;
    color: #333;
}



/*address in bascket*/
/*payment in bascket*/
.payment-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 25px;
    margin-bottom: 20px;
}

.section-title {
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.price-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.price-value {
    font-size: 24px;
    font-weight: 700;
    color: #28a745;
}

.discount-btn {
    background-color: white;
    border: 1px solid #28a745;
    color: #28a745;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 15px;
}

.checkout-btn {
    background-color: #28a745;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 20px;
}

.divider {
    border-top: 1px solid #dee2e6;
    margin: 20px 0;
}

.note-section {
    background-color: #fff8e1;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-right: 3px solid #ffc107;
}

.payment-method {
    margin-bottom: 20px;
}

.bank-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

    .bank-card:hover {
        border-color: #28a745;
        background-color: #f8f9fa;
    }

    .bank-card.active {
        border-color: #28a745;
        background-color: #e8f5e9;
    }

.installment-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.publisher-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.publisher-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.publisher-books {
    font-size: 14px;
    color: #6c757d;
}
.zarinpal {
    background-image: url(../images/icon-128x128.png);
    background-repeat:no-repeat;
    width: 100%;
    height: 6rem;
    border:none;
    background-size:cover
}
/*payment in bascket*/
.address {
    font-size: 10pt;
}
h5.card-title {
    font-size: 12pt;
}
.after-footer {
    font-size: 10pt;
    font-weight: bold;
    color: #0f3f65;
    padding-right: 2rem;
    background-color: #353a5859;
    padding-block: 4px;
}
.after-footer a{
    text-decoration:none;
}
footer a{
    color:#fff;
    text-decoration:none;
}

/* پنهان کردن هدر دسکتاپ در موبایل */
.desktop-only-header {
    display: block; /* به صورت پیش‌فرض نمایش داده شود */
}

/* پنهان کردن هدر موبایل در دسکتاپ */
.mobile-only-header {
    display: none; /* به صورت پیش‌فرض پنهان شود */
}

/* Media query برای دستگاه‌های موبایل (عرض کمتر از 768px) */
@media (max-width: 768px) {
    .desktop-only-header {
        display: none; /* هدر دسکتاپ را در موبایل پنهان کن */
    }

    .mobile-only-header {
        display: block; /* هدر موبایل را در موبایل نمایش بده */
    }

    /* استایل‌های سایدبار موبایل */
    .side-menu {
        height: 100%; /* ارتفاع کامل */
        width: 0; /* 0 width - با فعال شدن کلاس 'active' تغییر می‌کند */
        position: fixed; /* در جای خود بماند */
        z-index: 1050; /* بالاتر از محتوای دیگر */
        top: 0;
        left: 0; /* یا right: 0; اگر سایدبار از راست باز می‌شود */
        background-color: #f8f9fa; /* پس زمینه روشن */
        overflow-x: hidden; /* غیر فعال کردن اسکرول افقی */
        transition: 0.5s; /* 0.5 ثانیه انیمیشن برای باز و بسته شدن */
        padding-top: 60px; /* محتوا را کمی پایین‌تر از بالا قرار دهید */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    }

        /* وقتی سایدبار فعال است، عرض آن را تغییر دهید */
        .side-menu.active {
            width: 250px; /* یا هر عرض دلخواه برای سایدبار باز */
        }

        .side-menu ul {
            padding: 0;
            margin: 0;
        }

        .side-menu li {
            margin-bottom: 5px;
        }

        .side-menu .nav-link,
        .side-menu .dropdown-item {
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            display: block;
        }

            .side-menu .nav-link:hover,
            .side-menu .dropdown-item:hover {
                background-color: #e9ecef;
            }

    .menu-toggle-icon {
        cursor: pointer;
        /* مطمئن شوید که این آیکون در موبایل همیشه دیده شود */
        display: block; /* در موبایل نمایش داده شود */
    }
}