/* my-php-website/assets/style.css (সম্পূর্ণ এবং চূড়ান্ত কোড) */

/* =================================================================
   Global Styles
   ================================================================= */
:root {
    --primary-color: #007bff;
    --secondary-color: #28a745;
    --dark-color: #343a40;
    --light-color: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #495057;
    --footer-bg: #232f3e;
    --footer-text-color: #dddddd;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background-color: #fff;
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* মোবাইল ডিভাইসে আনুভূমিক স্ক্রলবার প্রতিরোধ করতে */
}

main {
    flex-grow: 1;
    padding-top: 20px;
}

.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =================================================================
   Homepage Sections & Slider
   ================================================================= */
.main-slider {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
    background-color: #f0f2f5;
}
.main-slider .swiper-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.main-slider .slider-content {
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 90%;
}
.main-slider h2 {
    font-size: 1.5rem;
    margin: 0 0 10px;
}
.main-slider p {
    font-size: 0.9rem;
    margin: 0 0 15px;
}
.main-slider .slider-btn {
    background: var(--primary-color);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
    color: white;
}
.main-slider .swiper-pagination-bullet-active {
    background: white;
}

/* =================================================================
   AJAX পেজ লোডার
   ================================================================= */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.loader-wrapper.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light grey */
    border-top: 5px solid #28a745; /* Green */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =================================================================
   ডাইনামিক স্লাইডার কন্টেন্টের জন্য স্টাইল
   ================================================================= */
.slider-content-overlay {
    position: absolute;
    width: 1200px;
    height: 700px;
    top: 0;
    left: 0;
    transform-origin: top left;
    overflow: hidden;
    pointer-events: none;
}
.slider-element {
    position: absolute;
    pointer-events: auto;
}
.slider-element, .slider-element * {
    box-sizing: border-box !important;
}
.slider-element > a, 
.slider-element > a > button, 
.slider-element > h1, 
.slider-element > img {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.slider-element > img {
    object-fit: cover;
}
.slider-element button {
    font-size: inherit;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    pointer-events: none;
}

/* =================================================================
   ক্যাটাগরি ক্যাটালগ সেকশন
   ================================================================= */
.category-catalog-section {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.section-header h4 {
    margin: 0;
    font-size: 0.813rem;
}

.category-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.category-catalog-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.category-catalog-item:hover {
    background-color: var(--light-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* =================================================================
   ক্যাটাগরি পেজ এবং প্রোডাক্ট গ্রিড
   ================================================================= */
.product-category-section {
    margin-bottom: 40px;
}
.product-category-section .section-header h2 {
    font-size: 0.813rem;
    font-weight: 600;
    margin: 0;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.product-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s;
}
.product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.product-image-wrapper {
    position: relative;
    overflow: hidden;
}
.product-image {
    width: 100%;
    aspect-ratio: 1 / 1.1;
}
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-info {
    padding: 15px;
}
.product-category {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.product-name-link {
    text-decoration: none;
}
.product-name {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--dark-color);
    line-height: 1.4;
    height: 2.5em;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-price-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.product-price {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--primary-color);
}
.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--secondary-color);
    color: white;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
}
.product-actions {
    position: absolute;
    top: 15px;
    right: -50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 3;
}
.product-card:hover .product-actions {
    right: 15px;
}
.action-btn {
    background: #fff;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-color);
    transition: all 0.3s;
}
.action-btn:hover, .action-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* =================================================================
   Product Details Page
   ================================================================= */
.breadcrumb {
    margin-bottom: 15px;
    font-size: 0.9rem;
}
.breadcrumb a {
    color: var(--primary-color);
}
.product-details-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.product-gallery .product-details-image {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1; 
    background-color: var(--light-color); 
}
.product-gallery .product-details-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-gallery-thumbnails {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 0;
}
.product-gallery-thumbnails::-webkit-scrollbar { height: 5px; }
.product-gallery-thumbnails::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.thumbnail-item {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
}
.thumbnail-item:hover, .thumbnail-item.active {
    border-color: var(--primary-color);
}
.product-info-details h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
}
.product-price-large {
    font-size: 1.4rem;
    color: var(--primary-color);
    font-weight: bold;
    margin: 10px 0 20px 0;
}
.actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.quantity-input {
    width: 60px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    padding: 10px;
}
.btn-add-to-cart {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.product-meta span {
    font-size: 0.9rem;
    display: block;
    margin-top: 5px;
}
.tabs-section {
    margin-top: 40px;
}
.tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 -1px 0;
    display: flex;
    border-bottom: 1px solid var(--border-color);
}
.tabs-nav li a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color: var(--text-color);
    border: 1px solid transparent;
}
.tabs-nav li.active a {
    font-weight: bold;
    border-color: var(--border-color);
    border-bottom-color: #fff;
    border-radius: 5px 5px 0 0;
}
.tabs-content {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-top: none;
}
.tab-content { display: none; }
.tab-content.active { display: block; }


/* =================================================================
   All Other Page Styles (Cart, Checkout, Auth, My Account etc.)
   ================================================================= */
.page-wrapper { padding: 20px 0; }
.cart-header { text-align: center; margin-bottom: 20px; }
#cart-content { display: flex; flex-direction: column; gap: 20px; }
.cart-layout-column { display: flex; flex-direction: column; gap: 20px; }
.cart-card { background-color: #ffffff; padding: 20px; border: 1px solid #e9ecef; border-radius: 12px; width: 100%; box-sizing: border-box; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); }
.cart-items-header { padding-bottom: 15px; margin-bottom: 5px; font-weight: 600; font-size: 1.2rem; color: #333; border-bottom: 1px solid #f0f0f0; }
.cart-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
#cart-items-wrapper form .cart-item:last-of-type { border-bottom: none; }
.product-image-cart { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.item-details-wrapper { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.item-details-header { display: flex; justify-content: space-between; align-items: flex-start; }
.product-name-cart { font-weight: 600; font-size: 1rem; color: var(--dark-color); line-height: 1.4; padding-right: 10px; }
.remove-from-cart { color: #999; font-size: 1.2rem; background: none; border: none; cursor: pointer; }
.product-price-cart { font-size: 1rem; color: #666; }
.quantity-control { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 25px; overflow: hidden; height: 40px; width: fit-content; }
.quantity-btn, .quantity-input-cart { margin: 0; padding: 0; background: none; border: none; height: 100%; box-sizing: border-box; font-family: inherit; display: flex; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; }
.quantity-btn { width: 40px; cursor: pointer; font-size: 1.2rem; color: #555; }
.quantity-input-cart { width: 45px; font-size: 1.1rem; font-weight: 700; color: #333; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; -moz-appearance: textfield; }
.quantity-input-cart::-webkit-outer-spin-button, .quantity-input-cart::-webkit-inner-spin-button { -webkit-appearance: none; }
.cart-actions { text-align: right; margin-top: 20px; }
.btn-update-cart { border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; opacity: 0.6; transition: opacity 0.3s; font-weight: bold; background-color: #28a745; color: white; }
.btn-update-cart:not(:disabled) { opacity: 1; }
.coupon-card h3 { margin: 0 0 15px 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; color: #333; font-weight: 600; }
.coupon-area { display: flex; }
#coupon-code-input { flex-grow: 1; padding: 12px; border: 1px solid var(--border-color); border-right: none; border-radius: 5px 0 0 5px; outline: none; }
#apply-coupon-btn { padding: 12px 20px; border: 1px solid var(--dark-color); background-color: var(--dark-color); color: white; cursor: pointer; border-radius: 0 5px 5px 0; }
.cart-summary-new h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.summary-row-new { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.total-row-new { font-size: 1.2rem; font-weight: bold; border-bottom: none; }
.btn-checkout-new { display: block; text-align: center; width: 100%; box-sizing: border-box; padding: 15px; border-radius: 5px; margin-top: 20px; font-weight: bold; background-color: #28a745; color: white; }
.empty-cart-message { text-align: center; padding: 50px 20px; background-color: #fff; border: 1px solid var(--border-color); border-radius: 5px; }
.btn-return-to-shop { background: var(--dark-color); color: white; padding: 12px 25px; border-radius: 5px; font-weight: bold; display: inline-block; }
.shipping-row > div { text-align: right; }
.shipping-row p { margin: 0 0 5px; font-size: 0.9rem; color: #666; }
.shipping-row a { text-decoration: underline; cursor: pointer; color: var(--primary-color); font-size: 0.9rem; }
#shipping-calculator { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.form-group-shipping { display: flex; gap: 10px; margin-top: 10px; }
#shipping-address-input { flex-grow: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; }
#update-shipping-btn { padding: 8px 12px; border: none; border-radius: 4px; background-color: var(--dark-color); color: white; cursor: pointer; }
.coupon-discount-row span button { background: none; border: none; color: #e74c3c; font-weight: bold; cursor: pointer; margin-left: 5px; }
.auth-wrapper { display: flex; justify-content: center; align-items: center; padding: 40px 15px; min-height: 70vh; }
.auth-container { background-color: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); width: 100%; max-width: 420px; border: 1px solid var(--border-color); }
.auth-header { text-align: center; margin-bottom: 25px; }
.auth-header span { font-size: 2rem; font-weight: 600; color: var(--dark-color); }
.auth-form .input_box { position: relative; margin-bottom: 25px; }
.auth-form .input-field { width: 100%; height: 50px; font-size: 1rem; color: var(--text-color); background: transparent; border: 1px solid var(--border-color); border-radius: 5px; padding: 0 15px 0 40px; box-sizing: border-box; outline: none; }
.auth-form .input_box .label { position: absolute; top: 15px; left: 15px; color: #888; transition: all 0.2s ease; pointer-events: none; background-color: #fff; padding: 0 5px; }
.auth-form .input_box .input-field:focus ~ .label, .auth-form .input_box .input-field:valid ~ .label { top: -8px; font-size: 0.8rem; color: var(--primary-color); }
.auth-form .input_box .icon { position: absolute; top: 17px; left: 15px; font-size: 1.1rem; color: #888; }
.auth-form .input-submit { width: 100%; height: 50px; background: var(--primary-color); border: none; border-radius: 5px; color: #fff; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
.auth-form .input-submit:hover { background: #0056b3; }
.auth-switch { text-align: center; margin-top: 20px; }
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.my-account-container { padding: 20px; min-height: 50vh; }
.account-container { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.account-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; border-bottom: 1px solid var(--border-color); }
.account-sidebar ul li a { display: block; padding: 15px; color: var(--dark-color); text-decoration: none; }
.account-sidebar ul li.active a { font-weight: bold; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
.account-content { flex-grow: 1; }
.account-content .tab-content { display: none; }
.account-content .tab-content.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.table-responsive-wrapper { overflow-x: auto; width: 100%; }
.responsive-table { width: 100%; border-collapse: collapse; }
.status { padding: 4px 10px; border-radius: 12px; color: white; font-size: 0.8rem; text-transform: capitalize; }
.status.order-placed, .status.order-confirmed { background-color: #17a2b8; }
.status.pending-payment, .status.payment-failed { background-color: #ffc107; color: #333; }
.status.delivered { background-color: #28a745; } .status.cancelled { background-color: #dc3545; }
.status.in-transit { background-color: #fd7e14; }
.status.shipped { background-color: #007bff; }
.btn-view { background: var(--primary-color); color: white; padding: 5px 12px; border-radius: 4px; font-size: 0.9rem; text-decoration: none; }
.order-details-summary { background: var(--light-color); padding: 20px; border-radius: 8px; margin-bottom: 30px; line-height: 1.8; }
.order-items-table { width: 100%; border-collapse: collapse; }
.order-items-table th, .order-items-table td { padding: 12px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }
.order-items-table th { background: #f8f9fa; }
.product-cell-content { display: flex; align-items: center; gap: 15px; }
.product-cell-image { border-radius: 4px; flex-shrink: 0; width: 60px; height: 60px; object-fit: cover; }
.checkout-page-container { max-width: 1100px; margin: 20px auto; padding: 0 15px; width: 100%; box-sizing: border-box; }
.checkout-form-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }
.checkout-section { background: transparent; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.checkout-column-main .checkout-section:last-of-type { margin-bottom: 0; }
.order-summary-card { background: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.checkout-section h5 { margin-top: 0; margin-bottom: 15px; font-size: 0.95rem; font-weight: 600; border-bottom: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 0.8rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 15px; border: 1px solid #ced4da; border-radius: 25px; box-sizing: border-box; background-color: #fff; font-size: 0.85rem; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #28a745; box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25); }
.form-group select:disabled { background-color: #e9ecef; cursor: not-allowed; }
.schedule-header { display: flex; justify-content: space-between; align-items: center; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #28a745; }
input:checked + .slider:before { transform: translateX(14px); }
.slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
.payment-method-option { border: 1px solid #ced4da; padding: 12px; border-radius: 25px; display: flex; align-items: center; cursor: pointer; }
.payment-method-option input { margin-right: 10px; }
.payment-method-option label { margin-bottom: 0; font-size: 0.9rem; }
.summary-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f1f1; }
.summary-item:last-of-type { border-bottom: none; }
.summary-item img { width: 45px; height: 45px; border-radius: 4px; object-fit: cover; }
.summary-item-details { flex-grow: 1; }
.summary-item-details span { display: block; font-weight: 500; font-size: 0.85rem; }
.summary-item-details small { color: #6c757d; font-size: 0.75rem; }
.summary-item-price { font-weight: 600; font-size: 0.85rem; }
.summary-totals { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e9ecef; }
.summary-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; }
.summary-line.total { font-weight: bold; font-size: 1.05rem; margin-top: 10px; }
.btn-place-order { display: block; width: 100%; padding: 10px 15px; color: white; border: none; cursor: pointer; border-radius: 25px; font-size: 0.9rem; font-weight: bold; margin-top: 20px; background-color: #007bff; transition: background-color 0.3s; }
.btn-place-order:hover { background-color: #0056b3; }
.btn-view-all { font-size: 0.8rem; font-weight: bold; background-color: transparent; color: var(--primary-color); padding: 3px 12px; border-radius: 15px; text-decoration: none; border: 1px solid var(--primary-color); transition: background-color 0.3s, color 0.3s; }
.btn-view-all:hover { background-color: var(--primary-color); color: white; }
.compare-table-wrapper { overflow-x: auto; margin-top: 20px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.compare-table th, .compare-table td { border: 1px solid var(--border-color); padding: 15px; text-align: center; vertical-align: top; }
.compare-table th { background-color: #f8f8f8; font-weight: bold; text-align: left; }
.compare-table img { max-width: 150px; margin: 0 auto; }
.compare-table .action-btn { margin: 5px; display: inline-block; padding: 8px 12px; font-size: 0.9rem; }
.product-rating { margin-bottom: 8px; color: #ffc107; font-size: 0.9rem; }
.review-count { color: #6c757d; margin-left: 5px; font-size: 0.8rem; }
.search-results-header { text-align: center; padding: 20px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
.search-results-header h1 { margin-top: 0; }
.no-results-message { text-align: center; padding: 50px 20px; background-color: #fff; }
.no-results-message p { font-size: 1.2rem; margin-bottom: 20px; }
.btn-return-to-shop { background: var(--dark-color); color: white; padding: 12px 25px; border-radius: 5px; font-weight: bold; display: inline-block; }
.coupon-slider-section { margin: 40px 0; position: relative; }
.coupon-slider { padding: 10px; }
.coupon-ticket { display: flex; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 10px; height: 120px; position: relative; border: 1px solid #f0f0f0; cursor: grab; }
.coupon-ticket:active { cursor: grabbing; }
.coupon-ticket::before, .coupon-ticket::after { content: ''; position: absolute; width: 20px; height: 20px; background: #f8f9fa; border-radius: 50%; top: 50%; transform: translateY(-50%); }
.coupon-ticket::before { left: -10px; } .coupon-ticket::after { right: -10px; }
.ticket-left { width: 100px; border-right: 2px dashed #e0e0e0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; flex-shrink: 0; }
.ticket-left img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.ticket-left p { font-size: 0.75rem; text-align: center; margin: 0; font-weight: 500; color: #555; }
.ticket-right { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; overflow: hidden; }
.ticket-right span { font-size: 0.8rem; color: #888; }
.ticket-right .coupon-code { font-size: 1.2rem; font-weight: bold; color: var(--primary-color); letter-spacing: 1px; margin: 5px 0; }
.copy-coupon-btn { background: #e9ecef; color: #495057; border: none; padding: 6px 12px; border-radius: 15px; cursor: pointer; font-size: 0.8rem; font-weight: bold; transition: background-color 0.3s; }
.copy-coupon-btn:hover { background-color: #ced4da; }
.copy-coupon-btn .fa-regular, .copy-coupon-btn .fa-solid { margin-right: 5px; }
.page-block-image { margin: 20px 0; }
.page-block-image.align-left { margin-right: auto; margin-left: 0; text-align: left; }
.page-block-image.align-center { margin-left: auto; margin-right: auto; text-align: center; }
.page-block-image.align-right { margin-left: auto; margin-right: 0; text-align: right; }
.page-block-image img { max-width: 100%; height: auto; display: inline-block; border-radius: 8px; }
.page-block-image.full-width { width: 100vw; max-width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.page-block-image.full-width img { width: 100%; border-radius: 0; }
.page-block-header { word-wrap: break-word; line-height: 1.4; margin: 20px 0; }

/* Responsive Media Queries */
@media (min-width: 768px) and (max-width: 991px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .category-catalog-grid { grid-template-columns: repeat(5, 1fr); }
    .main-slider { height: 400px; } .main-slider h2 { font-size: 2.5rem; } .main-slider p { font-size: 1.1rem; } .main-slider .slider-btn { padding: 12px 25px; }
    .product-details-container { flex-direction: row; gap: 40px; }
    .product-gallery, .product-info-details { flex: 1; }
    .account-container { flex-direction: row; gap: 30px; }
    .account-sidebar { flex-basis: 220px; flex-shrink: 0; border-right: 1px solid var(--border-color); border-bottom: none; }
    .account-sidebar ul { flex-direction: column; }
    .account-sidebar ul li a { border-bottom: none !important; }
    .account-sidebar ul li.active a { border-left: 2px solid var(--primary-color); background: var(--light-color); }
    .responsive-table thead { display: table-header-group; background-color: #f8f9fa; }
    .responsive-table th { padding: 15px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--border-color); }
    .responsive-table tr { display: table-row; }
    .responsive-table td { display: table-cell; text-align: left; border-bottom: 1px solid var(--border-color); padding: 15px; vertical-align: middle; }
    .responsive-table th:not(:last-child), .responsive-table td:not(:last-child) { border-right: 1px solid var(--border-color); }
    .responsive-table tbody tr:last-child td { border-bottom: none; }
    .responsive-table td::before { display: none; } 
}

@media (min-width: 992px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
    #cart-content { flex-direction: row; align-items: flex-start; } 
    .cart-layout-column { flex: 1; }
    #cart-summary-column { flex-basis: 380px; flex-shrink: 0; position: sticky; top: 20px; }
    .checkout-page-container { max-width: 1200px; } .checkout-form-grid { grid-template-columns: 1fr 420px; align-items: flex-start; } .checkout-column-sidebar { position: sticky; top: 20px; }
}

@media (max-width: 767px) {
    .responsive-table thead, .order-items-table thead { display: none; } 
    .responsive-table tbody tr, .order-items-table tr { display: block; margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 5px; padding: 10px; }
    .responsive-table td, .order-items-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; border-bottom: 1px dotted var(--border-color); padding: 12px 5px; }
    .responsive-table td:last-child, .order-items-table td:last-child { border-bottom: none; }
    .responsive-table td::before, .order-items-table td::before { content: attr(data-label); font-weight: bold; text-align: left; padding-right: 10px; }
    .order-items-table td[data-label="Product"] { display: block; padding-bottom: 15px; }
    .order-items-table td[data-label="Product"]::before { display: none; }
}

/* === নতুন এবং সংশোধিত: Deals of The Week সেকশনের জন্য বর্ডারসহ স্টাইল === */

.deals-header-container {
    box-sizing: border-box; /* এটি নিশ্চিত করে যে প্যাডিং এবং বর্ডার প্রস্থের অন্তর্ভুক্ত */
    display: flex;
    flex-direction: column; /* আইটেমগুলোকে একটির নিচে আরেকটি সাজানো */
    align-items: center;    /* মাঝখানে সারিবদ্ধ করা */
    text-align: center;
    margin-bottom: 25px;
    padding: 25px 15px;      /* ভেতরের কন্টেন্টের জন্য প্যাডিং */
    border: 2px solid white; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */
    border-radius: 8px;      /* সামান্য গোলাকার কর্নার */
    box-shadow: 0 0 0 3px #ff6f61; /* সাদা বর্ডারের চারপাশে লাল শ্যাডো */
    background-color: #fff;  /* একটি ব্যাকগ্রাউন্ড কালার, যদি পেজের ব্যাকগ্রাউন্ড ভিন্ন হয় */
}

.deals-title-unified {
    font-size: 1.313rem;      /* আপনার অনুরোধ অনুযায়ী ফন্ট সাইজ */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark-color);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.deal-countdown {
    background-color: #ff6f61;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 15px 0;
}

.deals-of-the-week .btn-view-all {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.deals-of-the-week .btn-view-all:hover {
    color: var(--dark-color);
}


/* === নতুন এবং চূড়ান্ত ফুটার স্টাইল === */

/* --- ফুটারের সাধারণ স্টাইল --- */
.site-footer {
    background-color: #1e2732;
    color: #aeb4b9;
    padding-top: 50px;
    font-size: 15px;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap; /* ছোট স্ক্রিনে কলামগুলোকে নিচে নামানোর জন্য */
    padding-bottom: 40px;
}

.footer-bottom {
    background-color: #121a22;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: #aeb4b9;
    font-size: 14px;
}


/* --- কলামের ভেতরের কন্টেন্টের স্টাইল --- */
.footer-column-about .footer-logo {
    font-size: 24px; color: #ffffff; font-weight: 700; margin-top: 0; margin-bottom: 15px;
}
.footer-column-about .footer-description {
    margin-bottom: 20px; line-height: 1.8;
}
.footer-contact-info {
    list-style: none; padding: 0; margin: 0;
}
.footer-contact-info li {
    display: flex; align-items: flex-start; margin-bottom: 12px;
}
.footer-contact-info i {
    color: var(--primary-color); margin-right: 15px; margin-top: 4px; width: 15px; text-align: center;
}
.footer-heading {
    font-size: 18px; color: #ffffff; font-weight: 600; margin-top: 0; margin-bottom: 20px;
}
.footer-links {
    list-style: none; padding: 0; margin: 0;
}
.footer-links a {
    color: #aeb4b9; text-decoration: none; display: block; margin-bottom: 10px; transition: all 0.2s ease-in-out;
}
.footer-links a:hover {
    color: #ffffff; padding-left: 5px;
}
.footer-social-icons {
    display: flex;
    gap: 15px;
}
.footer-social-icons a {
    color: #ffffff;
    background-color: #3a4553;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
}
.footer-social-icons a:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}
.footer-payment-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.footer-payment-icons img {
    height: 30px;
}


/* --- মোবাইল এবং ট্যাবলেটের জন্য স্টাইল (767px পর্যন্ত) --- */
@media (max-width: 767px) {
    .footer-grid {
        flex-direction: column; /* কলামগুলো নিচে নিচে আসবে */
        gap: 30px;
    }
    .footer-column {
        width: 100%; /* প্রতিটি কলাম পুরো জায়গা নিবে */
        padding-bottom: 30px;
        border-bottom: 1px solid #3a4553;
    }
    .footer-column:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}


/* --- শুধুমাত্র ডেস্কটপের জন্য স্টাইল (768px থেকে শুরু) --- */
@media (min-width: 768px) {
    .footer-grid {
        flex-wrap: nowrap; /* কলামগুলোকে নিচে নামতে বাধা দেওয়া হচ্ছে */
    }
    .footer-column {
        width: 25%; /* প্রতিটি কলামের জন্য সমান 25% জায়গা */
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
    }
    /* ডিভাইডার (সোজা রেখা) */
    .footer-column:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #3a4553;
    }
    .footer-column:first-child {
        padding-left: 0;
    }
    .footer-column:last-child {
        padding-right: 0;
    }
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন এবং চূড়ান্ত: পেজ এডিটর থেকে আনা ব্যানার গ্রিডের জন্য স্টাইল === */
.banner-grid-container-from-editor {
    display: grid;
    /* ডেস্কটপে ৩টি কলাম */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.pre-designed-banner-item-wrapper {
    /* এই র‍্যাপারটি JS দ্বারা প্রস্থ পরিমাপের জন্য ব্যবহৃত হবে */
    width: 100%;
}

.pre-designed-banner-item {
    position: relative;
    width: 100%;
    /* 420x200 অনুপাত বজায় রাখার জন্য */
    padding-top: 47.62%; /* (200 / 420) * 100% */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pre-designed-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* এডিটরের মূল ক্যানভাস সাইজ এখানে ফিক্সড করে দেওয়া হচ্ছে */
    width: 420px;
    height: 200px;
    /* স্কেলিং এর জন্য এটি অত্যন্ত গুরুত্বপূর্ণ */
    transform-origin: top left; 
    pointer-events: none;
}

.banner-element {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto; /* বাটন বা লিংকে ক্লিক করার জন্য */
}

.banner-element.heading-block h1 {
    margin: 0;
    padding: 10px;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.banner-element.button-block a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.banner-element.button-block button {
    width: 100%;
    height: 100%;
    font-size: inherit;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    box-sizing: border-box;
    /* === টেক্সটকে মাঝখানে আনার জন্য Flexbox ব্যবহার === */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === মোবাইল ডিভাইসের জন্য রেসপন্সিভ স্টাইল === */
@media (max-width: 767px) {
    .banner-grid-container-from-editor {
        /* মোবাইলে ১টি কলাম */
        grid-template-columns: 1fr;
    }
}

/* === নতুন এবং চূড়ান্ত সংশোধিত: প্রোডাক্ট ডিটেইল পেজ V2 স্টাইল === */
.breadcrumb {
    padding: 15px 0;
    font-size: 0.9rem;
    color: #666;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
}
.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}
.breadcrumb .fa-house {
    margin-right: 5px;
}
.breadcrumb span {
    color: var(--text-color);
}

.product-details-container-v2 {
    display: grid;
    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট: এক কলাম */
    gap: 25px;
    margin-bottom: 30px;
}

/* === কার্ড স্টাইল এখানে যোগ করা হয়েছে === */
.product-gallery-v2,
.product-info-v2 {
    border: 1px solid var(--border-color);
    padding: 20px;
    background-color: #fff;
    border-radius: 0; /* আপনার অনুরোধ অনুযায়ী শার্প কর্নার */
    box-sizing: border-box;
}

/* === বাম কার্ড (গ্যালারি) এর ভেতরের লেআউট === */
.product-gallery-v2 {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.thumbnail-list-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.thumbnail-item-v2 {
    width: 80px;
    height: 80px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    padding: 2px;
    transition: border-color 0.3s;
}
.thumbnail-item-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-item-v2.active {
    border-color: var(--primary-color);
}

/* === পরিবর্তন: মূল ছবির কন্টেইনারকে সেন্টারে আনা হয়েছে === */
.main-image-v2 {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;   /* Vertically center */
}

.main-image-v2 img {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}


/* --- ডান কার্ড (প্রোডাক্টের তথ্য) এর ভেতরের স্টাইল --- */
.product-info-v2 {
    display: flex;
    flex-direction: column;
}
.product-info-v2 h1 {
    font-size: 1.6rem; font-weight: 600; color: var(--dark-color); margin: 0 0 5px;
}
.rating-reviews-v2 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.star-rating-display .fa-star {
    color: #d1d1d1; font-size: 0.9em;
}
.star-rating-display .fa-star.filled {
    color: #ffc107;
}
.reviews-count-link {
    font-size: 0.85rem; color: var(--primary-color); text-decoration: none;
}
.product-id-v2 {
    font-size: 0.85rem; color: #888; margin-bottom: 8px;
}
.price-section-v2 {
    display: flex; gap: 15px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color);
}
.price-item {
    display: flex; flex-direction: column;
}
.price-item label {
    font-size: 0.75rem; color: #888; margin-bottom: 2px;
}
.price-item .price-value {
    font-size: 1.1rem; font-weight: 600; color: var(--dark-color);
}
.price-item .price-value.regular {
    text-decoration: line-through; color: #999; font-size: 0.9rem;
}
.price-item .price-value.emi {
    font-size: 0.9rem;
}
.special-price-box {
    background-color: #f3f4f6; padding: 5px 10px; border-radius: 5px;
}
.special-price-box .price-value {
    font-size: 1.3rem; color: var(--primary-color); font-weight: 700;
}
#check-availability-btn {
    background-color: var(--secondary-color); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: 500; margin-bottom: 8px;
}
.quick-overview-v2 {
    margin-bottom: 8px; flex-grow: 1;
}
.quick-overview-v2 h4 {
    margin: 0 0 8px; font-size: 1rem;
}
.quick-overview-v2 ul {
    list-style-type: disc; padding-left: 20px; margin: 0; color: #555; font-size: 0.9rem;
}
.quick-overview-v2 ul li {
    margin-bottom: 3px;
}
.actions-v2 {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
}
.quantity-control-v2 {
    display: flex; align-items: center; border: 1px solid #ccc; border-radius: 5px;
}
.quantity-control-v2 .quantity-btn {
    background: none; border: none; width: 32px; height: 36px; cursor: pointer; font-size: 1.1rem;
}
.quantity-input-v2 {
    width: 45px; height: 36px; text-align: center; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; font-size: 1rem; font-weight: 500;
}
.btn-add-to-cart-v2 {
    background-color: var(--secondary-color); color: white; border: none; padding: 0 20px; height: 38px; border-radius: 5px; cursor: pointer; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.action-btn-v2 {
    height: 38px; padding: 0 18px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 8px;
}
.action-btn-v2.active {
    border-color: var(--primary-color); color: var(--primary-color);
}
.action-btn-v2 .fa-heart {
    color: #e44d26;
}
.emi-offer-v2, .support-buttons-v2, .share-section-v2 {
    margin-top: 8px;
}
.emi-offer-v2 p {
    margin: 3px 0 0; font-size: 0.8rem;
}
.support-buttons-v2 {
    display: flex; gap: 8px;
}
.support-buttons-v2 button {
    background-color: #f3f4f6; border: 1px solid #e5e7eb; padding: 6px 12px; border-radius: 5px; cursor: pointer; color: #374151; font-size: 0.8em;
}
.share-section-v2 {
    display: flex; align-items: center; gap: 10px;
}
.share-icons {
    display: flex; gap: 8px;
}
.share-icons .social-icon {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: white; border-radius: 50%; text-decoration: none; font-size: 0.9em;
}
.whatsapp { background-color: #25D366; }
.email { background-color: #7f8c8d; }
.facebook { background-color: #1877F2; }
.messenger { background-color: #00B2FF; }

/* রিভিউ ফর্মের স্টাইল */
.review-form-container {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color);
}
.rating-group .star-rating {
    display: flex; flex-direction: row-reverse; justify-content: flex-end;
}
.star-rating input[type="radio"] { display: none; }
.star-rating label {
    font-size: 1.5rem; color: #ddd; cursor: pointer; transition: color 0.2s;
}
.star-rating input[type="radio"]:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc107;
}
.review-item {
    padding: 15px 0; border-bottom: 1px solid var(--border-color);
}
.review-item:last-child { border-bottom: none; }
.review-rating .fa-star { color: #ffc107; }
.review-meta { font-size: 0.9rem; color: #666; margin: 5px 0; }
.review-comment { margin: 5px 0 0; }

/* === বড় স্ক্রিনের জন্য দুই কলাম লেআউট === */
@media (min-width: 992px) {
    .product-details-container-v2 {
        grid-template-columns: 1fr 1fr; /* 50% - 50% split */
    }
}

/* === ট্যাবলেট এবং মোবাইলের জন্য লেআউট === */
@media (max-width: 767px) {
    .product-gallery-v2 {
        flex-direction: column-reverse; /* মূল ছবি উপরে, থাম্বনেইল নিচে */
        padding: 15px;
    }
    .product-info-v2 {
        padding: 15px;
    }

    .thumbnail-list-v2 {
        flex-direction: row; /* থাম্বনেইল পাশাপাশি */
        overflow-x: auto; /* প্রয়োজনে স্ক্রল করার ব্যবস্থা */
    }
}

/* === পরিবর্তন শুরু: সেন্টারিং এবং এক-কলাম লেআউটের জন্য CSS === */
.product-details-bottom-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

.tabs-section {
    margin-top: 0;
}

.product-spec-tabs-container {
    height: 100%;
}

.spec-tabs-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: inline-flex;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}

.spec-tabs-nav li {
    margin: 0;
    text-align: center;
}

.spec-tabs-nav li a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    font-size: 0.85rem;
    border-right: 1px solid var(--border-color);
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.spec-tabs-nav li:last-child a {
    border-right: none;
}

.spec-tabs-nav li.active a {
    background-color: var(--dark-color);
    color: white;
}

.spec-tabs-nav li:not(.active) a:hover {
    background-color: #e9ecef;
}

.spec-tabs-content {
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    text-align: left; /* কন্টেন্ট কার্ডের ভেতরের লেখা বামে অ্যালাইন করা */
}

.spec-tabs-content .tab-content { display: none; }
.spec-tabs-content .tab-content.active { display: block; animation: fadeIn 0.5s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 992px) {
    .product-details-bottom-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .product-details-bottom-layout {
        gap: 25px;
    }
}

@media (max-width: 767px) {
    .spec-tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 5px;
    }
    .spec-tabs-nav::-webkit-scrollbar {
        display: none;
    }
    .spec-tabs-nav li {
        flex-shrink: 0;
    }
}
/* === পরিবর্তন শেষ === */
/* === নতুন এবং চূড়ান্ত: প্রোডাক্ট ডিটেইলস পেজের বটম গ্রিড এবং সিমিলার প্রোডাক্টস (উচ্চতা কমানো) === */

.product-details-bottom-grid {
    display: grid;
    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট: এক কলাম */
    gap: 30px;
    margin-top: 40px;
}

.similar-products-section {
    background-color: #fff;
    height: 100%;
}

/* ডিজাইন অনুযায়ী সিমিলার প্রোডাক্টের হেডার (উচ্চতা কমানো) */
.similar-products-header-wrapper {
    border-bottom: 2px solid black;
    position: relative;
    height: 38px; /* পরিবর্তন: উচ্চতা 48px থেকে 38px করা হয়েছে */
    margin-bottom: 20px;
}
.similar-products-header {
    position: absolute;
    bottom: -2px;
    left: 0;
    background-color: #000000;
    color: #ffffff;
    padding: 8px 25px; /* পরিবর্তন: প্যাডিং 12px থেকে 8px করা হয়েছে */
    clip-path: polygon(0 100%, 100% 100%, 88% 0, 0 0);
}
.similar-products-header h4 {
    margin: 0;
    font-size: 1rem; /* পরিবর্তন: ফন্ট সাইজ 1.1rem থেকে 1rem করা হয়েছে */
    font-weight: 600;
    white-space: nowrap;
}

.similar-products-list {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* সাইডবারের প্রোডাক্ট কার্ডগুলোকে আরও কমপ্যাক্ট করার জন্য স্টাইল */
.similar-products-list .product-card {
    display: flex;
    gap: 15px;
    box-shadow: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
    align-items: center;
}
.similar-products-list .product-card:hover {
     box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.similar-products-list .product-card .product-image-wrapper {
    flex-basis: 80px;
    flex-shrink: 0;
}
.similar-products-list .product-card .product-image-wrapper .product-image {
     aspect-ratio: 1 / 1;
}
.similar-products-list .product-card .product-actions {
    display: none; /* এই ভিউতে অ্যাকশন বাটনগুলো লুকানো থাকবে */
}
.similar-products-list .product-card .product-info {
    padding: 0;
    flex-grow: 1;
}
.similar-products-list .product-card .product-name {
    font-size: 0.85rem;
    height: auto;
    margin-bottom: 5px;
    -webkit-line-clamp: 2;
}
.similar-products-list .product-card .product-price {
    font-size: 1rem;
}
.similar-products-list .product-card .product-rating {
    margin-bottom: 5px;
    font-size: 0.8rem;
}
.similar-products-list .product-card .product-category {
    display: none; /* সাইডবারে ক্যাটেগরির নাম দেখানোর প্রয়োজন নেই */
}


/* ডেস্কটপ লেআউট (992px এর বেশি চওড়া স্ক্রিনের জন্য) */
@media (min-width: 992px) {
    .product-details-bottom-grid {
        /* প্রায় 70% / 30% অনুপাতের কলাম */
        grid-template-columns: 2.33fr 1fr;
    }
}
/* === নতুন এবং চূড়ান্ত: সিমিলার প্রোডাক্ট কার্ড V2 (ছবি অনুযায়ী ডিজাইন) === */

.similar-products-list {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* কার্ডগুলোর মধ্যে ফাঁকা জায়গা */
}

.similar-product-card {
    display: flex;
    gap: 15px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 12px;
    align-items: center;
    min-height: 125px; /* কার্ডের উচ্চতা কিছুটা বাড়ানো হলো */
    border-radius: 0; /* আপনার অনুরোধ অনুযায়ী শার্প কর্নার */
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.similar-product-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sp-card-image-link {
    flex-basis: 90px;
    flex-shrink: 0;
    align-self: flex-start; /* ছবিকে উপরের দিকে অ্যালাইন করা */
}

.sp-card-image-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 1px solid #eee;
}

.sp-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 5px; /* টাইটেল, প্রাইস এবং বাটনের মধ্যেকার স্পেস */
    align-self: stretch; /* তথ্য সেকশনকে পুরো উচ্চতা দেওয়া */
}

.sp-card-title-link {
    text-decoration: none;
}

.sp-card-title {
    font-size: 0.9rem; /* 14px */
    font-weight: 500;
    color: #212529;
    margin: 0;
    line-height: 1.4;
    height: 2.8em; /* সর্বোচ্চ দুই লাইন দেখানোর জন্য উচ্চতা নির্ধারণ */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* লাইন সংখ্যা ২-এ সীমাবদ্ধ করা */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* দুই লাইনের বেশি হলে "..." দেখানো */
}

.sp-card-price {
    font-size: 1.1rem; /* 18px */
    font-weight: 600;
    color: #333;
    margin: 0;
}

.sp-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto; /* বাটনগুলোকে কার্ডের নিচে রাখার জন্য */
}

.btn-add-to-cart-small {
    background-color: #82b440; /* ছবি থেকে নেওয়া সবুজ রঙ */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-add-to-cart-small:hover {
    background-color: #6a9435;
}

.btn-icon-small {
    background-color: #f1f1f1;
    color: #555;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s, color 0.2s;
}

.btn-icon-small:hover {
    background-color: #e0e0e0;
    color: #000;
}

.btn-icon-small.active {
    background-color: var(--primary-color);
    color: white;
}
/* === নতুন এবং চূড়ান্ত: Related Products সেকশনের জন্য স্টাইল (চওড়া এবং উচ্চতা কমানো) === */

.related-products-section {
    margin-top: 50px;
    padding: 20px;
    background-color: #f8f9fa;
}

.related-products-grid {
    display: grid;
    /* পরিবর্তন: কলাম সংখ্যা 6 থেকে 5 করা হয়েছে, এতে কার্ডগুলো চওড়া হবে */
    grid-template-columns: repeat(5, 1fr); 
    gap: 1px;
    margin-top: 25px;
}

.related-product-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.related-product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.rp-card-image-link {
    display: block;
    margin-bottom: 10px;
}

.rp-card-image-link img {
    width: 100%;
    /* পরিবর্তন: aspect-ratio এর পরিবর্তে নির্দিষ্ট উচ্চতা দেওয়া হয়েছে উচ্চতা কমানোর জন্য */
    height: 160px; 
    object-fit: contain;
}

.rp-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rp-card-title-link {
    text-decoration: none;
}

.rp-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #343a40;
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    margin: 0 0
    8px 0; /* পরিবর্তন: মার্জিন সামান্য কমানো হয়েছে */
}

.rp-card-price-container {
    margin-top: auto;
}

.rp-card-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.rp-card-offer {
    font-size: 0.8rem;
    font-weight: 500;
    color: #800080;
    margin: 3px 0 0 0; /* পরিবর্তন: মার্জিন সামান্য কমানো হয়েছে */
}

.btn-view-more {
    display: block;
    width: fit-content;
    margin: 20px 0 0 auto;
    color: #28a745;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* === রেসপন্সিভ ডিজাইন আপডেট করা হয়েছে === */
@media (max-width: 1200px) {
    .related-products-grid {
        /* ট্যাবলেট স্ক্রিনে ৪টি কলাম */
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .related-products-grid {
        /* ছোট ট্যাবলেট স্ক্রিনে ৩টি কলাম */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .related-products-grid {
        /* মোবাইল স্ক্রিনে ২টি কলাম */
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
    }
    .related-products-section {
        padding: 10px;
    }
}
/* === নতুন এবং সংশোধিত: কার্ট পেজ V2 স্টাইল (চূড়ান্ত কম্প্যাক্ট ভার্সন এবং স্পেস কমানো) === */
.cart-page-container-v2 {
    padding: 2px 0 15px 0; /* হেডার এবং কন্টেন্টের মধ্যকার গ্যাপ কমানো হয়েছে */
}

.cart-breadcrumb {
    font-size: 0.85rem;
    padding: 6px 15px;
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
}
.cart-breadcrumb a {
    color: var(--dark-color);
}

.cart-layout-grid-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 992px) {
    .cart-layout-grid-v2 {
        grid-template-columns: 2.5fr 1fr;
        align-items: flex-start;
    }
    .cart-summary-column {
        position: sticky;
        top: 20px;
    }
}

/* --- Card Styles --- */
.cart-items-card-v2, .cart-summary-card-v2 {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

/* --- Left Column: Items Card --- */
.card-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    padding: 8px 15px;
}
.card-header-v2 h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.need-help-link {
    color: #8DC63F;
    font-weight: 500;
    font-size: 0.8rem;
}
.need-help-link i { margin-right: 5px; }

.card-content-v2 {
    padding: 10px 15px;
}

.bulk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    font-size: 0.85rem;
}
.check-all-container { display: flex; align-items: center; gap: 8px; }

.delete-btn-v2 {
    background-color: #e0e0e0; border: 1px solid #ccc; color: #333;
    padding: 5px 12px; font-size: 0.8rem; border-radius: 4px; cursor: pointer;
}
.delete-btn-v2:not(:disabled) {
    background-color: #dc3545; color: white; border-color: #dc3545;
}

.cart-item-v2 {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto auto;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-top: none;
}
.product-image-cart-v2 { width: 45px; height: 45px; object-fit: cover; border: 1px solid #eee; }
.product-info-cart-v2 a { font-weight: 400; color: var(--dark-color); margin-bottom: 4px; font-size: 0.85rem; }
.product-info-cart-v2 span { font-size: 0.8rem; color: #555; }
.btn-emi { background: #8DC63F; color: white; border: none; padding: 6px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; white-space: nowrap; }

.quantity-control-v2 { display: flex; border: 1px solid #ccc; width: 82px; }
.quantity-control-v2 .quantity-btn, .quantity-control-v2 .quantity-input-cart { border: none; background: white; height: 26px; text-align: center; }
.quantity-control-v2 .quantity-btn { width: 26px; cursor: pointer; }
.quantity-control-v2 .quantity-input-cart { width: 30px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.item-total-price { font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.remove-from-cart-v2 { background: #e0e0e0; border: 1px solid #ccc; color: #333; width: 26px; height: 26px; cursor: pointer; border-radius: 4px; }

/* --- Right Column: Summary Card & Buttons --- */
.summary-header-v2 {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #f7f7f7;
    padding: 8px 15px;
    border-bottom: 1px solid #e0e0e0;
}
.summary-content-v2 {
    padding: 10px 15px;
}
.summary-line-v2 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.85rem;
}
.summary-line-v2.total {
    font-weight: bold;
    font-size: 0.95rem;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-bottom: 0;
}

.cart-action-buttons-v2 {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-continue-shopping, .btn-checkout-v2 {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.85rem;
}
.btn-continue-shopping { background-color: black; }
.btn-checkout-v2 { background-color: #8DC63F; }

/* --- Responsive Adjustments --- */
@media (max-width: 767px) {
    .cart-item-v2 {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        row-gap: 10px;
        align-items: center;
    }
    .cart-item-v2 > input[type="checkbox"] { grid-area: 1 / 1; }
    .product-image-cart-v2 { grid-area: 1 / 2; }
    .product-info-cart-v2 { grid-area: 1 / 3; }
    .btn-emi { grid-area: 2 / 1 / 3 / 2; }
    .quantity-control-v2 { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
    .item-total-price { grid-area: 2 / 3 / 3 / 4; justify-self: end; }
    .remove-from-cart-v2 { grid-area: 3 / 3 / 4 / 4; justify-self: end; }
}
/* === নতুন: খালি কার্টের বার্তা এবং নিষ্ক্রিয় বাটনের জন্য স্টাইল === */
.no-items-message {
  text-align: center;
  padding: 40px 20px;
  color: #888;
  font-style: italic;
}

.btn-checkout-v2.disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === সংশোধিত এবং চূড়ান্ত: চেকআউট পেজের জন্য নতুন স্টাইল === */

/* .container এর ডিফল্ট প্যাডিংকে ওভাররাইড করে দুই পাশের গ্যাপ সরানো হয়েছে */
.checkout-page-container.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%; /* সম্পূর্ণ প্রস্থ নিশ্চিত করার জন্য */
    margin-top: 2px;
}

/* ব্রেডক্রাম্বকে কার্ট পেজের মতো স্লিম এবং ফুল-উইডথ করা হয়েছে */
.checkout-breadcrumb {
    font-size: 0.85rem;
    font-weight: normal;
    padding: 6px 15px; /* কার্ট পেজের সাথে হুবহু মিলানো হয়েছে */
    background-color: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-left: none;
    border-right: none;
    border-radius: 0; /* শার্প কর্নার */
    margin-bottom: 20px;
    color: var(--text-color);
}

.checkout-breadcrumb a {
    color: var(--dark-color);
    text-decoration: none;
}

.checkout-breadcrumb a:hover {
    color: var(--primary-color);
}

/* ফর্ম এবং অন্যান্য কন্টেন্টকে আবার আগের মতো প্যাডিং দেওয়া হচ্ছে */
.checkout-form-grid {
    padding-left: 15px;
    padding-right: 15px;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === চূড়ান্ত সংশোধিত: চেকআউট পেজের জন্য চূড়ান্ত লেআউট ও স্টাইল === */

.checkout-page-container.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    margin-top: 2px;
}

.checkout-breadcrumb {
    font-size: 0.85rem;
    padding: 6px 15px;
    background-color: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}
.checkout-breadcrumb a { color: var(--dark-color); }

/* === পরিবর্তন: ডান পাশে সামান্য গ্যাপ রাখার জন্য প্যাডিং অ্যাডজাস্ট করা হয়েছে === */
.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট */
    gap: 25px;
    padding: 0 1px; /* দুই পাশে সামান্য গ্যাপ */
}

@media (min-width: 992px) {
    .checkout-form-grid {
        grid-template-columns: 1fr 1fr; /* ডেস্কটপে ৫০-৫০ কলাম */
    }
}


.checkout-section {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-bottom: 20px;
}

.checkout-section h5 {
    background-color: #f0f0f0;
    padding: 8px 15px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold; /* হেডার বোল্ড করা হয়েছে */
    border-bottom: 1px solid #e0e0e0;
}

.checkout-section .form-group {
    padding: 0 15px;
    margin-bottom: 15px;
}
.checkout-section .form-group:first-of-type {
    padding-top: 15px;
}
.checkout-section .form-group:last-of-type,
.checkout-section .attention-box {
    margin-bottom: 0;
    padding-bottom: 15px;
}

/* ... (অন্যান্য ফর্ম স্টাইল অপরিবর্তিত) ... */
.form-group label, .delivery-method-group > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.85rem;
}
.delivery-method-group > label {
    font-weight: bold; color: #333; font-size: 0.9rem;
}

.form-group select, .customer-info-field input, .customer-info-field textarea, .custom-pickup-address-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.85rem;
}
.form-group select:disabled { background-color: #e9ecef; cursor: not-allowed; }

.radio-option {
    display: flex;
    align-items: center;
}
.radio-option input[type="radio"] { margin: 0 8px 0 0; width: auto; }
.radio-option label { font-weight: normal; font-size: 0.9rem; margin-bottom: 0; }

.pickup-location-subgroup { margin-top: 12px; }
.custom-pickup-address-group { margin-top: 10px; }
.customer-information-group { padding-top: 10px; }
.customer-info-field { margin-top: 10px; }

.billing-checkbox-group { display: flex; align-items: center; margin-top: 10px; }
.billing-checkbox-group input { width: auto; margin-right: 8px; }
.billing-checkbox-group label { margin: 0; font-size: 0.85rem; }

.billing-information-group { margin-top: 15px; }
.billing-information-group > label { font-weight: bold; color: #333; font-size: 0.9rem; display: block; margin-bottom: 5px; }
.billing-information-group textarea, .custom-pickup-address-group textarea { min-height: 80px; resize: vertical; }

.attention-box {
    background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;
    padding: 15px; margin: 15px; font-size: 0.8rem; line-height: 1.6;
}
.attention-box strong { display: block; margin-bottom: 10px; font-size: 0.9rem; }
.attention-box p { margin: 0 0 5px 0; }
.attention-box p:last-child { margin-bottom: 0; }

/* === নতুন: পেমেন্ট সেকশনের জন্য স্টাইল === */
.payment-options-wrapper {
    padding: 15px;
}
.payment-options-wrapper .radio-option {
    margin-bottom: 12px; /* অপশনগুলোর মধ্যে দূরত্ব */
}
.payment-options-wrapper .radio-option:last-child {
    margin-bottom: 0;
}

.checkout-section select:focus, .checkout-section textarea:focus, .checkout-section input:focus {
    outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* === চূড়ান্ত সংশোধিত: Complete Order সেকশনের জন্য স্টাইল === */

/* নতুন র‍্যাপার, যা বর্ডার ধারণ করবে */
.complete-order-wrapper {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* ডেলিভারি সেকশনের মতো বর্ডার */
}

.complete-order-card {
    background-color: #ffffff;
    padding: 0;
    margin-bottom: 0;
    border: none; /* পরিবর্তন: বর্ডার সরানো হয়েছে কারণ র‍্যাপারে বর্ডার আছে */
}

.complete-order-title {
    background-color: #f0f0f0;
    padding: 10px 15px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
}

.order-summary-content {
    margin: 15px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.summary-body {
    padding: 15px 0 5px 0;
}

.summary-product-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #333;
    padding-bottom: 10px;
}
.summary-product-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.summary-product-item span:first-child {
    max-width: 70%;
    padding-right: 10px;
}
.summary-product-item span:last-child {
    white-space: nowrap;
}

.summary-totals-list {
    padding: 15px 15px 0 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-total-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.summary-total-item.grand-total {
    font-weight: bold;
    font-size: 1.1rem;
    margin-top: 5px;
}

.terms-agreement-group {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.terms-agreement-group input[type="checkbox"] {
    margin: 0;
}
.terms-agreement-group label {
    margin: 0;
    font-weight: normal;
    color: #555;
}
.terms-agreement-group strong {
    color: #000;
}

.order-actions {
    display: flex;
    margin-top: 20px;
    gap: 1px;
}

.order-actions button {
    width: 50%;
    flex-grow: 1;
    padding: 15px 20px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    border-radius: 0;
    color: #ffffff;
}

.btn-back-checkout {
    background-color: #000000;
}

.btn-place-order-final {
    background-color: #a4d092;
}

.btn-place-order-final:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === থ্যাঙ্কিউ পেজের জন্য চূড়ান্ত এবং সম্পূর্ণ রেসপন্সিভ স্টাইল === */

.thankyou-page-wrapper {
    max-width: 800px; margin: 30px auto; background-color: #fff;
    font-family: Arial, sans-serif; color: #333;
    border: 1px solid #e0e0e0; border-radius: 0; padding: 30px;
}
.thankyou-page-wrapper .thankyou-header { text-align: center; margin-bottom: 30px; }
.thankyou-page-wrapper .thankyou-icon-container { color: #28a745; font-size: 4rem; line-height: 1; margin-bottom: 15px; }
.thankyou-page-wrapper .thankyou-header h1, .thankyou-page-wrapper .thankyou-header p { margin: 0 0 10px; }
.thankyou-page-wrapper .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.thankyou-page-wrapper .info-card { border: 1px solid #e0e0e0; border-radius: 0; background-color: #f9f9f9; }
.thankyou-page-wrapper .info-card .card-header { background-color: #f1f1f1; padding: 10px 15px; border-bottom: 1px solid #e0e0e0; }
.thankyou-page-wrapper .info-card .card-header h4 { margin: 0; font-size: 1rem; }
.thankyou-page-wrapper .info-card .card-body { padding: 15px; }
.thankyou-page-wrapper .info-card .card-body p { margin: 0 0 12px; font-size: 0.9rem; }
.thankyou-page-wrapper .info-card .card-body p:last-child { margin-bottom: 0; }

/* === ডেস্কটপ টেবিল === */
.thankyou-page-wrapper .order-summary-card { margin-bottom: 30px; }
.thankyou-page-wrapper .order-summary-card h4 { margin-bottom: 15px; border-bottom: 1px solid #ccc; padding-bottom: 10px; font-size: 1.2rem; }
.thankyou-page-wrapper .summary-table { width: 100%; border-collapse: collapse; }
.thankyou-page-wrapper .summary-table th, .thankyou-page-wrapper .summary-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }
.thankyou-page-wrapper .summary-table thead th { background-color: #f8f8f8; }
.thankyou-page-wrapper .summary-table tfoot td { border-bottom: none; }
.thankyou-page-wrapper .summary-table .text-right { text-align: right; }

/* === ডেস্কটপ বাটন === */
.thankyou-page-wrapper .thankyou-page-actions { display: flex; gap: 15px; margin-top: 20px; }
.thankyou-page-wrapper .btn-view-details, .thankyou-page-wrapper .btn-continue-shopping {
    width: 50%; padding: 15px 10px; text-decoration: none; font-weight: bold; color: white;
    text-align: center; border: none; cursor: pointer; transition: opacity 0.3s; border-radius: 0;
}
.thankyou-page-wrapper .btn-view-details { background-color: #000000; }
.thankyou-page-wrapper .btn-continue-shopping { background-color: #8DC63F; } /* === রঙ সংশোধন করা হয়েছে === */
.thankyou-page-wrapper .btn-view-details:hover, .thankyou-page-wrapper .btn-continue-shopping:hover { opacity: 0.85; }


/* === মোবাইল রেসপন্সিভ স্টাইল === */
@media (max-width: 767px) {
    .thankyou-page-wrapper { padding: 20px 15px; }
    .thankyou-page-wrapper .info-grid { grid-template-columns: 1fr; }

    /* === মোবাইল অর্ডার সামারি স্টাইল === */
    .thankyou-page-wrapper .summary-table { display: block; border: none; }
    .thankyou-page-wrapper .summary-table thead, .thankyou-page-wrapper .summary-table td[data-label="Subtotal"] { display: none; }
    .thankyou-page-wrapper .summary-table tbody { display: block; }
    .thankyou-page-wrapper .summary-table tr { display: block; }
    .thankyou-page-wrapper .summary-table tbody tr { border: 1px solid #e9ecef; border-radius: 4px; padding: 15px; margin-bottom: 15px; }
    .thankyou-page-wrapper .summary-table td { display: flex; justify-content: space-between; align-items: center; text-align: right; padding: 8px 0; border-bottom: 1px dotted #ccc; }
    .thankyou-page-wrapper .summary-table tbody td:last-of-type { border-bottom: none; }
    .thankyou-page-wrapper .summary-table td::before { content: attr(data-label); font-weight: 600; text-align: left; }
    .thankyou-page-wrapper .summary-table tfoot { display: block; }
    .thankyou-page-wrapper .summary-table tfoot tr { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
    .thankyou-page-wrapper .summary-table tfoot tr:last-child { border-top: 1px solid #ccc; margin-top: 8px; padding-top: 12px; font-size: 1.15rem; font-weight: bold; }
    .thankyou-page-wrapper .summary-table tfoot td { display: contents; }
    .thankyou-page-wrapper .summary-table tfoot td[colspan="3"] { font-weight: 600; }
    
    /* === চূড়ান্ত সংশোধিত মোবাইল বাটন স্টাইল === */
    .thankyou-page-wrapper .thankyou-page-actions { flex-direction: column; gap: 10px; }
    .thankyou-page-wrapper .btn-view-details, .thankyou-page-wrapper .btn-continue-shopping {
        width: 100%;
        padding: 12px 10px;
        font-size: 1rem;
        border-radius: 0; /* === শার্প কর্নার === */
        box-sizing: border-box; /* === প্রস্থের সমস্যা সমাধানের জন্য === */
    }
}
/* === মাই একাউন্ট পেজের জন্য সম্পূর্ণ এবং চূড়ান্ত CSS === */

/* পেজ কন্টেইনারের দুই পাশের গ্যাপ সরানো হয়েছে */
.my-account-page-container.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    margin-top: 2px;
}

/* === পরিবর্তন শুরু: শুধুমাত্র My Account পেজের ব্রেডক্রাম্বের জন্য স্টাইল নির্দিষ্ট করা হয়েছে === */
.my-account-page-container .checkout-breadcrumb {
    font-size: 0.85rem;
    font-weight: normal;
    padding: 6px 15px;
    background-color: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin-bottom: 0; /* এই পেজের জন্য কোনো বটম মার্জিন থাকবে না */
    color: var(--text-color);
}
/* === পরিবর্তন শেষ === */

.checkout-breadcrumb a {
    color: var(--dark-color);
    text-decoration: none;
}

/* My Account পেজের মূল লেআউট গ্রিড */
.account-layout-grid {
    display: grid;
    grid-template-columns: 3fr 7fr; 
    gap: 25px;
    padding: 20px 1px;
    align-items: start;
}

/* ব্যবহারকারীর তথ্য কার্ডের স্টাইল (কমপ্যাক্ট ভার্সন) */
.account-user-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    background-color: #fff;
    border-radius: 0;
}

/* ব্যবহারকারীর আইকনের স্টাইল (আকার কমানো হয়েছে) */
.user-card-icon {
    font-size: 2.5rem;
    color: #4a5568;
    flex-shrink: 0;
}

/* ব্যবহারকারীর তথ্যের ফন্ট সাইজ কমানো হয়েছে */
.user-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-card-info .user-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-color);
}

.user-card-info .user-phone,
.user-card-info .user-email {
    font-size: 0.85rem;
    color: var(--text-color);
}

/* Account Navigation Card (উচ্চতা ও ফন্ট কমানো হয়েছে) */
.account-navigation-card {
    border: 1px solid var(--border-color);
    background-color: #fff;
    border-radius: 0;
    margin-top: 20px;
    overflow: hidden;
}

.account-navigation-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-navigation-card a {
    display: block;
    padding: 12px 20px;
    text-align: center;
    color: var(--dark-color);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease-in-out;
}

.account-navigation-card li:last-child a {
    border-bottom: none;
}

.account-navigation-card a:not(.active):hover {
    background-color: #f8f9fa;
}

.account-navigation-card a.active {
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
}

/* Account Main Content and Tabs */
.account-main-content {
    background-color: #fff;
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: 0;
}

.account-tab-content {
    display: none;
    animation: fadeIn 0.4s;
}

.account-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* My Orders পেজের নতুন ডিজাইন */
.orders-header {
    margin-bottom: 15px;
}
.orders-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}
.orders-item-count {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 5px 0 0;
}

.order-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.order-id-block, .order-status-block, .order-date-block, .order-total-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-id-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.order-number {
    font-size: 1.1rem;
    font-weight: 600;
}
.view-order-link {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #6c757d;
}

/* ডাইনামিক স্ট্যাটাস ডটের জন্য রঙ */
.status-dot.status-dot-order-placed,
.status-dot.status-dot-order-confirmed { background-color: #17a2b8; }
.status-dot.status-dot-pending-payment,
.status-dot.status-dot-payment-failed { background-color: #ffc107; }
.status-dot.status-dot-delivered { background-color: #28a745; }
.status-dot.status-dot-cancelled { background-color: #dc3545; }
.status-dot.status-dot-in-transit { background-color: #fd7e14; }
.status-dot.status-dot-shipped { background-color: #007bff; }

.order-date-block i {
    font-size: 1.1rem;
}

.order-total-block {
    font-size: 1.1rem;
    font-weight: 500;
}

/* প্রোফাইল পেজের ফর্মের জন্য স্টাইল */
.profile-form-section {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}
.profile-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.profile-form-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.password-grid {
    grid-template-columns: repeat(3, 1fr);
}

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

.profile-form-group input[type="text"],
.profile-form-group input[type="email"],
.profile-form-group input[type="tel"],
.profile-form-group input[type="password"],
.profile-form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 0.95rem;
}
.profile-form-group input.readonly-field {
    background-color: #e9ecef;
    cursor: not-allowed;
}

.phone-input-group {
    display: flex;
}
.phone-input-group .country-code {
    flex-basis: 60px;
    flex-shrink: 0;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background-color: #e9ecef;
    text-align: center;
}
.phone-input-group input[type="tel"] {
    border-radius: 0 4px 4px 0;
}

.btn-update-profile {
    background-color: #212529;
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}

/* রেসপন্সিভ ডিজাইন */
@media (max-width: 991px) {
    .password-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .account-layout-grid {
        grid-template-columns: 1fr;
    }
    .order-list-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 576px) {
    .form-row-grid {
        grid-template-columns: 1fr;
    }
}
/* === নতুন: প্রোফাইল ইমেজ আপলোড ফিল্ডের জন্য চূড়ান্ত স্টাইল === */

.profile-form-group input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0; /* ভেতরের কন্টেন্ট ঠিকমতো দেখানোর জন্য প্যাডিং রিসেট */
    font-size: 0.9rem; /* টেক্সটকে সামঞ্জস্যপূর্ণ করতে */
    color: #495057;
    background-color: #fff;
    line-height: 2.5; /* টেক্সটকে ভার্টিকালি সেন্টারে আনার জন্য */
}

/* Webkit (Chrome, Safari) এবং অন্যান্য আধুনিক ব্রাউজারের জন্য বাটন স্টাইল */
.profile-form-group input[type="file"]::file-selector-button {
    background-color: #e9ecef;
    padding: 10px 12px;
    border: none;
    border-right: 1px solid #ced4da;
    margin-right: 12px;
    font-weight: 500;
    font-family: inherit;
    color: #495057;
    cursor: pointer;
    transition: background-color 0.2s;
}

.profile-form-group input[type="file"]::file-selector-button:hover {
    background-color: #dee2e6;
}
/* === অর্ডার ডিটেইলস পেজের জন্য সম্পূর্ণ এবং চূড়ান্ত CSS === */

.order-details-page-container.container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.order-details-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* মোবাইল ডিফল্ট */
    gap: 25px;
    /* পরিবর্তন: উপরের প্যাডিং 0 করা হয়েছে */
    padding: 0 1px 20px; 
}

@media (min-width: 992px) {
    .order-details-layout-grid {
        /* ডেস্কটপে 70% / 30% অনুপাত */
        grid-template-columns: 7fr 3fr;
    }
}

.items-ordered-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0; /* শার্প কর্নার */
}

.items-ordered-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.items-ordered-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn-print-order {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 0.85rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-print-order:hover {
    background-color: #5a6268;
}
.btn-print-order i {
    margin-right: 8px;
}

.items-ordered-card .card-body {
    padding: 20px;
}

.ordered-product-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 40px;
    padding: 8px 0; /* উচ্চতা কমানোর জন্য প্যাডিং */
    border-bottom: 1px solid #f0f0f0;
}
.ordered-product-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ordered-product-item:first-child {
    padding-top: 0;
}

.product-image-container img {
    width: 50px; /* উচ্চতা কমানোর জন্য ছবির আকার */
    height: 50px; /* উচ্চতা কমানোর জন্য ছবির আকার */
    object-fit: cover;
    border: 1px solid #eee;
}

.product-details-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-details-container .product-name {
    font-weight: 600;
    color: #333;
}

.product-details-container .product-sku {
    font-size: 0.9rem;
    color: #777;
}

.product-quantity-container,
.product-price-container {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

/* মোবাইল ডিভাইসের জন্য রেসপন্সিভ স্টাইল */
@media (max-width: 576px) {
    .order-details-layout-grid {
        padding: 0 15px 20px; /* মোবাইলের জন্য উপরের প্যাডিংও 0 করা হলো */
    }

    .ordered-product-item {
        grid-template-columns: auto 1fr; /* ছবি এবং বাকি তথ্য দুই কলামে */
        grid-template-rows: auto auto;
        row-gap: 10px;
        gap: 15px; /* মোবাইলের জন্য গ্যাপ কমানো হলো */
    }
    .product-image-container {
        grid-row: 1 / 3; /* ছবিকে দুই রো জুড়ে জায়গা দেওয়া */
    }
    .product-details-container {
        grid-column: 2 / 3;
    }
    .product-quantity-container {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        justify-self: start; /* কোয়ান্টিটি বাম দিকে অ্যালাইন করা */
    }
    .product-price-container {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        justify-self: end; /* মূল্য ডান দিকে অ্যালাইন করা */
    }
    
    .items-ordered-card .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: অর্ডার ট্র্যাকিং ইনফরমেশন কার্ড === */
.tracking-info-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */
}

.tracking-info-card .card-header {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.tracking-info-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.tracking-info-card .card-body {
    padding: 30px 20px;
}

.tracking-timeline-horizontal {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}

.tracking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
    color: #b0b0b0; /* ডিফল্ট রঙ (inactive) */
}

.step-icon-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: #f9f9f9;
    margin-bottom: 10px;
}

.status-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background-color: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 2px solid white;
}

.step-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* যখন কোনো ধাপ Active হবে */
.tracking-step.active {
    color: #333; /* Active টেক্সটের রঙ */
}

.tracking-step.active .step-icon-wrapper {
    border-color: #333;
    background-color: #fff;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: FAQ কার্ডের জন্য স্টাইল === */
.faq-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */
}

.faq-card .card-header {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.faq-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-card .card-body {
    padding: 20px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question, .faq-answer {
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.faq-question strong, .faq-answer strong {
    margin-right: 8px;
}
/* my-php-website/assets/style.css ফাইলে এই কোডটুকু আপডেট করুন */

/* === অর্ডার ডিটেইলস সাইডবার কার্ড (সংশোধিত) === */
.order-summary-sidebar-card {
    background-color: #ffffff; /* পরিবর্তন: ব্যাকগ্রাউন্ডের রঙ সাদা করা হয়েছে */
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 0;
}

.order-summary-sidebar-card p {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.order-summary-sidebar-card p:last-child {
    margin-bottom: 0;
}

.order-summary-sidebar-card .order-date {
    font-size: 0.95rem;
    color: #333;
}

.order-summary-sidebar-card .payment-amount,
.order-summary-sidebar-card .order-id-status {
    font-size: 1.1rem;
    font-weight: bold;
    color: #212529;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: অর্ডার সামারি ডিটেইলস কার্ড === */
.order-summary-details-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */
}

.order-summary-details-card .card-header {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.order-summary-details-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.order-summary-details-card .card-body {
    padding: 20px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.summary-line:last-child {
    margin-bottom: 0;
}

.summary-line.grand-total {
    font-weight: bold;
    font-size: 1.1rem;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: ডেলিভারি ইনফরমেশন সাইডবার কার্ড === */
.delivery-info-sidebar-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 25px; /* উপরের কার্ড থেকে দূরত্ব */
}

.delivery-info-sidebar-card .card-header {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.delivery-info-sidebar-card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #212529;
}

.delivery-info-sidebar-card .card-body {
    padding: 20px;
}

.delivery-info-sidebar-card .card-body p {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.delivery-info-sidebar-card .card-body p:last-child {
    margin-bottom: 0;
}

.delivery-info-sidebar-card .card-body p strong {
    font-weight: bold;
    margin-right: 5px;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: পেমেন্ট এবং সাপোর্ট সাইডবার কার্ড === */
.payment-support-sidebar-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 25px;
    padding: 20px;
}

.payment-support-sidebar-card h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: #212529;
}

.payment-support-sidebar-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
}

.payment-support-sidebar-card .section-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: Pay Now বাটন এবং স্ট্যাটাস লেআউটের জন্য === */
.order-status-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.order-id-status-wrapper {
    flex-grow: 1;
}

.btn-pay-now {
    background-color: #28a745;
    color: white;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-pay-now:hover {
    background-color: #218838;
    color: white;
}

.order-id-status {
    font-size: 1.1rem;
    font-weight: bold;
    color: #212529;
    margin: 0 !important;
}
/* === নতুন: পেমেন্ট স্ট্যাটাস ও ট্রানজ্যাকশন আইডি বক্সের জন্য স্টাইল === */
.transaction-info-box {
    border: 1px solid #333; /* কালো বর্ডার */
    border-radius: 4px;
    padding: 12px;
    margin-top: 15px;
    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
}
.transaction-info-box p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
}
.transaction-info-box p:last-child {
    margin-bottom: 0;
}
.transaction-info-box strong {
    font-weight: 600;
    color: #212529;
}
/* === নতুন: ডেলিভারি ইনফরমেশন কার্ডের ভেতরের ট্র্যাকিং বক্সের জন্য স্টাইল === */
.tracking-details-box {
    border: 1px solid #ffffff; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */
    box-shadow: 0 0 0 1px #e0e0e0; /* সাদা বর্ডারকে দৃশ্যমান করার জন্য হালকা শ্যাডো */
    border-radius: 4px;
    padding: 12px;
    margin-top: 15px;
    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
}
.tracking-details-box p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
}
.tracking-details-box p:last-child {
    margin-bottom: 0;
}
.tracking-details-box strong {
    font-weight: 600;
    color: #212529;
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === শুধুমাত্র অর্ডার ডিটেইলস পেজের জন্য সম্পূর্ণ মোবাইল CSS === */
@media (max-width: 767px) {
    /* মূল লেআউটকে এক কলামে আনা */
    .order-details-layout-grid {
        grid-template-columns: 1fr;
        padding: 0 15px 20px;
    }

    /* "Items Ordered" হেডার এবং প্রিন্ট বাটনকে পাশাপাশি রাখা */
    .items-ordered-card .card-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    /* অন্য কার্ডের হেডারগুলোকে একটির নিচে একটি রাখা */
    .tracking-info-card .card-header,
    .faq-card .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* অর্ডার করা আইটেমগুলোর লেআউট পরিবর্তন করা */
    .ordered-product-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        row-gap: 10px;
        column-gap: 15px;
        padding: 15px 0;
    }

    .product-image-container {
        grid-row: 1 / 3; /* ছবিকে দুটি রো জুড়ে জায়গা দেওয়া */
    }

    .product-details-container {
        grid-column: 2 / 3;
    }

    .product-quantity-container {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        justify-self: start; /* কোয়ান্টিটি বাম দিকে অ্যালাইন করা */
    }

    .product-price-container {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        justify-self: end; /* মূল্য ডান দিকে অ্যালাইন করা */
    }

    /* ট্র্যাকিং টাইমলাইনকে আনুভূমিক থেকে উলম্ব করা */
    .tracking-timeline-horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    
    .tracking-step {
        flex-direction: row;
        align-items: center;
        text-align: left;
        width: 100%;
        gap: 15px;
    }
    
    .step-icon-wrapper {
        margin-bottom: 0;
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
}
/* my-php-website/assets/style.css (ফাইলের শেষে যোগ করুন) */

/* === নতুন: ডেলিভারি ইনফরমেশন কার্ডের ভেতরের ট্র্যাকিং বক্সের জন্য স্টাইল === */
.tracking-details-box {
    border: 1px solid #ffffff; /* আপনার অনুরোধ অনুযায়ী সাদা বর্ডার */
    box-shadow: 0 0 0 1px #e0e0e0; /* সাদা বর্ডারকে দৃশ্যমান করার জন্য হালকা শ্যাডো */
    border-radius: 4px;
    padding: 12px;
    margin-top: 15px;
    background-color: #f8f9fa; /* হালকা ধূসর ব্যাকগ্রাউন্ড */
}
.tracking-details-box p {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
}
.tracking-details-box p:last-child {
    margin-bottom: 0;
}
.tracking-details-box strong {
    font-weight: 600;
    color: #212529;
}