/* ============================================================
   SaharPart — Neomorphism generic components (all pages)
   Loaded after neomorphism.css. Covers shared UI across pages.
   ============================================================ */

body {
    background: var(--neu-bg);
    color: var(--neu-text);
}

/* ---------- Bootstrap buttons ---------- */
body .btn {
    border: none;
    border-radius: 14px;
    background: var(--neu-bg);
    color: var(--neu-text);
    font-weight: 700;
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, background .2s ease, color .2s ease;
}

body .btn:hover {
    transform: translateY(-1px);
    box-shadow: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
    color: var(--neu-primary);
}

body .btn:active {
    transform: translateY(0);
    box-shadow: var(--neu-in-sm);
}

body .btn-primary,
body .btn-info {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    color: #fff;
}

body .btn-primary:hover,
body .btn-info:hover {
    color: #fff;
}

body .btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}

body .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

body .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

body .btn-secondary,
body .btn-light,
body .btn-outline-primary,
body .btn-outline-secondary,
body .btn-outline-danger,
body .btn-outline-info,
body .btn-outline-success,
body .btn-outline-warning {
    background: var(--neu-bg);
    color: var(--neu-primary);
    border: none;
}

/* ---------- form controls ---------- */
body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="range"]),
body select,
body textarea {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-text);
}

body input:focus,
body select:focus,
body textarea:focus {
    outline: none;
    box-shadow: var(--neu-in);
}

/* ---------- cards ---------- */
body .card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
}

body .card-header,
body .card-footer {
    background: transparent;
    border: none;
}

/* ---------- category / search product cards ---------- */
body .product-card {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
    transition: transform .25s ease, box-shadow .25s ease;
}

body .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-out-lg);
    border-color: transparent;
}

body .product-card .image-container,
body .product-card .image-wrapper {
    background: var(--neu-bg);
    box-shadow: var(--neu-in-sm);
}

body .product-card .product-name {
    color: var(--neu-text);
}

body .product-card .price-box {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    padding: 8px 10px;
}

body .product-card .normal-price {
    color: var(--neu-primary);
}

body .product-card .discounted-price {
    color: #dc2626;
}

body .product-card .original-price {
    color: var(--neu-muted);
}

body .product-card .discount-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    box-shadow: var(--neu-out-sm);
}

body .product-card .out-of-stock-label {
    background: linear-gradient(135deg, #5b5b5b, #333);
    color: #fff;
    border: none;
    box-shadow: var(--neu-out-sm);
}

body .product-card .stock-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: none;
    box-shadow: var(--neu-out-sm);
}

/* ---------- pagination ---------- */
body .pagination-link {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    color: var(--neu-text);
    box-shadow: var(--neu-out-sm);
    transition: box-shadow .2s ease, transform .15s ease, color .2s ease;
}

body .pagination-link:hover {
    transform: translateY(-1px);
    color: var(--neu-primary);
    box-shadow: var(--neu-out);
}

body .pagination-link.active {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    color: #fff;
    box-shadow: var(--neu-in-sm);
}

/* ---------- breadcrumb ---------- */
body .breadcrumb {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
}

body .breadcrumb a {
    color: var(--neu-primary);
}

/* ---------- filter select ---------- */
body .filter-select {
    background: var(--neu-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-text);
}

/* ---------- tables ---------- */
body table {
    border-collapse: separate;
    border-spacing: 0;
}

body table thead th {
    background: var(--neu-bg);
    color: var(--neu-text);
    border: none;
}

body table td,
body table th {
    border-color: rgba(196, 205, 218, .6);
}

/* ---------- badges / alerts ---------- */
body .badge {
    border: none;
    box-shadow: var(--neu-out-sm);
}

body .alert {
    border: none;
    border-radius: 14px;
    box-shadow: var(--neu-out-sm);
}

/* ---------- links ---------- */
body a {
    color: var(--neu-primary);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body .btn,
    body .product-card,
    body .pagination-link {
        transition: none;
    }
}

/* ============================================================
   PAGE-LEVEL NEOMORPHIC SURFACES (all pages)
   ============================================================ */

/* page wrappers & containers: transparent so the neomorphic surface shows */
body [class$="-page"],
body [class*="-page "] {
    background: transparent;
}

body [class$="-container"],
body [class*="-container "] {
    background: transparent;
}

body .page,
body .page-body,
body .container,
body .container-fluid {
    background: transparent;
}

/* common content surfaces -> raised neomorphic cards */
body .auth-card,
body .thank-you-card,
body .supplier-card,
body .request-track-card,
body .order-card,
body .order-item,
body .order-section,
body .profile-card,
body .profile-section,
body .cart-item,
body .cart-summary,
body .summary-card,
body .sidebar-card,
body .blog-card,
body .faq-item,
body .about-section,
body .offer-price-content,
body .page-card,
body .wallet-card,
body .product-info,
body .product-image-section {
    background: var(--neu-bg);
    border: none;
    border-radius: var(--neu-radius);
    box-shadow: var(--neu-out);
}

/* inner media / thumbs: recessed */
body .image-hover-container,
body .gallery-thumb,
body .cart-item img,
body .blog-card img {
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
}

body .category-badge {
    background: var(--neu-bg);
    border: none;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-primary);
}

/* ============================================================
   PRODUCTS LISTING (search / category) — neomorphic redesign
   ============================================================ */

.category-page {
    color: var(--neu-text);
}

.category-page .category-title {
    display: table;
    margin-inline: auto;
    color: var(--neu-text);
    font-weight: 800;
    text-shadow: 1px 1px 0 #ffffff, -1px -1px 1px rgba(0, 0, 0, .08);
}

.category-page .category-title::after {
    background: linear-gradient(90deg, transparent, var(--neu-primary), transparent);
}

.category-page .product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
}

.category-page .product-grid > .product-card {
    flex: 1 1 200px;
    max-width: 240px;
}

@media (max-width: 560px) {
    .category-page .product-grid > .product-card {
        flex: 1 1 calc(50% - 9px);
        max-width: calc(50% - 9px);
    }
}

.category-page .product-card {
    background: var(--neu-bg);
    border: none;
    border-radius: 22px;
    box-shadow: var(--neu-out);
    padding: 12px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-page .product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--neu-out-lg);
    border-color: transparent;
}

.category-page .product-card.out-of-stock {
    opacity: .7;
}

.category-page .image-container {
    background: var(--neu-bg);
    border-radius: 16px;
    box-shadow: var(--neu-in);
    height: 190px;
    padding: 10px;
    overflow: hidden;
}

.category-page .image-wrapper {
    background: transparent;
    box-shadow: none;
}

.category-page .product-image {
    padding: 6px;
}

.category-page .product-info {
    padding: 14px 6px 4px;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.category-page .product-name {
    color: var(--neu-text);
    font-weight: 700;
}

.category-page .price-box {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 4px;
}

.category-page .normal-price {
    color: var(--neu-primary);
    font-weight: 800;
}

.category-page .discounted-price {
    color: #dc2626;
    font-weight: 800;
}

.category-page .original-price {
    color: var(--neu-muted);
}

.category-page .discount-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 5px 10px;
    font-weight: 700;
    box-shadow: var(--neu-out-sm);
    z-index: 5;
}

.category-page .out-of-stock-label {
    background: linear-gradient(135deg, #5b5b5b, #333);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 5px 10px;
    font-weight: 700;
    box-shadow: var(--neu-out-sm);
    z-index: 5;
}

.category-page .stock-warning {
    background: var(--neu-bg);
    color: #92400e;
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
    margin: 6px 12px 0;
    font-weight: 700;
}

/* filter bar + results (category page) */
.category-page .filter-bar {
    background: var(--neu-bg);
    border: none;
    border-radius: 16px;
    box-shadow: var(--neu-out);
    padding: 14px;
}

.category-page .filter-select {
    background: var(--neu-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-in-sm);
    color: var(--neu-text);
    font-weight: 600;
}

.category-page .results-count {
    background: var(--neu-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-muted);
    padding: 6px 12px;
}

/* empty state */
.category-page .no-products-container {
    background: var(--neu-bg);
    border: none;
    border-radius: 20px;
    box-shadow: var(--neu-out);
    color: var(--neu-text);
}

.category-page .no-products-icon {
    color: var(--neu-primary);
    text-shadow: 1px 1px 0 #fff;
}

.category-page .back-to-home {
    background: linear-gradient(135deg, var(--neu-primary), var(--neu-primary-2));
    color: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-out-sm);
}

/* ============================================================
   SINGLE PRODUCT PAGE — neomorphic redesign
   ============================================================ */

.product-page .product-container {
    gap: 26px;
}

.product-page .product-image-section {
    background: var(--neu-bg);
    border: none;
    border-radius: 24px;
    box-shadow: var(--neu-out);
    padding: 18px;
}

.product-page .image-hover-container {
    border-radius: 18px;
    box-shadow: var(--neu-in);
    overflow: hidden;
    background: var(--neu-bg);
}

.product-page .gallery-thumb {
    background: var(--neu-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-out-sm);
    padding: 4px;
    transition: box-shadow .2s ease, transform .15s ease;
}

.product-page .gallery-thumb:hover,
.product-page .gallery-thumb.active {
    box-shadow: var(--neu-in-sm);
}

.product-page .product-info {
    background: var(--neu-bg);
    border: none;
    border-radius: 24px;
    box-shadow: var(--neu-out);
    padding: 22px;
}

.product-page .product-info h1 {
    color: var(--neu-text);
}

.product-page .category-badge {
    background: var(--neu-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-primary);
    padding: 4px 10px;
}

.product-page .attributes-section table {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--neu-in-sm);
}

.product-page .attributes-section table th,
.product-page .attributes-section table td {
    border: none;
}

.product-page .price-section {
    background: var(--neu-bg);
    border: none;
    border-radius: 16px;
    box-shadow: var(--neu-in-sm);
    padding: 16px;
}

.product-page .final-price {
    color: var(--neu-primary);
    font-weight: 800;
}

.product-page .discount-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
}

.product-page .original-price {
    color: var(--neu-muted);
}

.product-page .quantity-control {
    background: var(--neu-bg);
    border: none;
    border-radius: 14px;
    box-shadow: var(--neu-in-sm);
    padding: 4px;
}

.product-page .qty-btn {
    background: var(--neu-bg);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-out-sm);
    color: var(--neu-text);
}

.product-page .quantity-input {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--neu-text);
    text-align: center;
}

.product-page .section-title {
    color: var(--neu-text);
}

.product-page .description {
    color: var(--neu-text);
}

.product-page .reviews-section,
.product-page .qa-section {
    background: var(--neu-bg);
    border: none;
    border-radius: 22px;
    box-shadow: var(--neu-out);
    padding: 22px;
    margin-top: 24px;
}

.product-page .review-item {
    background: var(--neu-bg);
    border: none;
    border-radius: 16px;
    box-shadow: var(--neu-out-sm);
    padding: 14px;
}

.product-page .qa-list .qa-item,
.product-page .qa-ask-form {
    background: var(--neu-bg);
    border: none;
    border-radius: 16px;
    box-shadow: var(--neu-out-sm);
    padding: 14px;
}

.product-page .related-products .product-card {
    background: var(--neu-bg);
    border: none;
    border-radius: 18px;
    box-shadow: var(--neu-out);
    padding: 10px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-page .products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
}

.product-page .products-grid > .product-card-link {
    flex: 1 1 200px;
    max-width: 240px;
}

.product-page .related-products .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--neu-out-lg);
}

/* ============================================================
   SELECT FIELDS & DROPDOWN OPTIONS (filters, sort)
   ============================================================ */

body select {
    background-color: var(--neu-bg);
    color: var(--neu-text);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    font-weight: 600;
}

body select:focus {
    outline: none;
    box-shadow: var(--neu-in);
}

/* native option list (best-effort styling) */
body select option {
    background-color: var(--neu-bg);
    color: var(--neu-text);
    padding: 8px 10px;
}

body select option:checked {
    background-color: var(--neu-bg-2);
    color: var(--neu-primary);
}

.category-page .filter-select {
    background-color: var(--neu-bg);
    color: var(--neu-text);
    border: none;
    border-radius: 10px;
    box-shadow: var(--neu-in-sm);
    font-weight: 600;
}

/* ============================================================
   CUSTOM NEOMORPHIC DROPDOWNS (filter selects)
   ============================================================ */

.sp-dd {
    position: relative;
    display: inline-block;
}

.sp-dd__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.sp-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--neu-bg);
    color: var(--neu-text);
    border: none;
    border-radius: 12px;
    box-shadow: var(--neu-in-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow .2s ease;
}

.sp-dd__trigger:hover { box-shadow: var(--neu-in); }

.sp-dd__trigger i {
    margin-inline-start: auto;
    font-size: .68rem;
    color: var(--neu-muted);
    transition: transform .2s ease;
}

.sp-dd.is-open .sp-dd__trigger i { transform: rotate(180deg); }

.sp-dd__list {
    position: absolute;
    z-index: 70;
    inset-inline-start: 0;
    top: calc(100% + 8px);
    min-width: 100%;
    background: var(--neu-bg);
    border-radius: 14px;
    box-shadow: var(--neu-out-lg);
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
}

.sp-dd.is-open .sp-dd__list { display: flex; }

.sp-dd__item {
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--neu-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow .15s ease, background .15s ease, color .15s ease;
}

.sp-dd__item:hover {
    background: var(--neu-bg-2);
    box-shadow: var(--neu-in-sm);
    color: var(--neu-primary);
}

.sp-dd__item.is-selected {
    color: var(--neu-primary);
    box-shadow: var(--neu-in-sm);
}

/* ============================================================
   BLOG IMAGES — professional framing
   ============================================================ */

.blog-page .card {
    overflow: hidden;
    border-radius: var(--neu-radius);
}

.blog-page .card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    border-radius: var(--neu-radius) var(--neu-radius) 0 0;
}

.blog-page article img.img-fluid,
.blog-page .article-image img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: var(--neu-out);
}

@media (max-width: 576px) {
    .blog-page .card-img-top { height: 200px; }
    .blog-page article img.img-fluid,
    .blog-page .article-image img { max-height: 320px; }
}