/* =============================================
   UloomulAakhirah — Frontend CSS
   Design: Deep Green #1B5E20 | Gold #C8A951 | Cream #FFF8F0
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

/* ---- CSS Variables ---- */
:root {
    --primary-dark: #1B5E20;
    --primary-mid: #2E7D32;
    --primary-light: #4CAF50;
    --accent-gold: #C8A951;
    --accent-gold-dark: #A8892F;
    --cream: #FFF8F0;
    --dark-text: #1a1a1a;
    --radius: 12px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --transition: 0.25s ease;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #ffffff;
    color: var(--dark-text);
    line-height: 1.6;
}

/* ---- Color Utilities ---- */
.text-primary-dark  { color: var(--primary-dark) !important; }
.text-accent-gold   { color: var(--accent-gold) !important; }
.bg-primary-dark    { background-color: var(--primary-dark) !important; }
.bg-accent-gold     { background-color: var(--accent-gold) !important; }

/* ---- Buttons ---- */
.btn-primary-dark {
    background-color: var(--primary-dark);
    color: #ffffff;
    border: none;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary-dark:hover {
    background-color: var(--primary-mid);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(27,94,32,0.35);
}
.btn-primary-dark:active { transform: translateY(0); }

.btn-outline-primary-dark {
    border: 2px solid var(--primary-dark);
    color: var(--primary-dark);
    background: transparent;
    transition: all var(--transition);
}
.btn-outline-primary-dark:hover {
    background-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.btn-accent-gold {
    background-color: var(--accent-gold);
    color: #1a1a1a;
    border: none;
    transition: all var(--transition);
}
.btn-accent-gold:hover {
    background-color: var(--accent-gold-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(200,169,81,0.4);
}

/* ---- Main Header ---- */
.main-header { z-index: 1030; }

.category-nav .nav-link {
    font-size: 0.88rem;
    transition: color var(--transition);
    padding: 0.6rem 0.75rem;
}
.category-nav .nav-link:hover { color: var(--accent-gold) !important; }

/* Search Form */
.search-form .form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.2rem rgba(27,94,32,0.15);
}

/* ---- Hover Effects ---- */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md) !important;
}

/* ---- Splash Screen ---- */
.z-index-splash { z-index: 9999; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.8s ease forwards; }

/* ---- Hero Carousel ---- */
.carousel-item img, .hero-banner-img {
    border-radius: 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    padding: 12px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    opacity: 0.85;
}

/* ---- Section Title ---- */
.section-title {
    font-family: 'Outfit', sans-serif;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 3px;
    background: var(--accent-gold);
    border-radius: 3px;
}

/* ---- Category Card ---- */
.category-card {
    border-radius: var(--radius) !important;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    border: 2px solid transparent !important;
}
.category-card:hover {
    border-color: var(--primary-dark) !important;
    transform: translateY(-6px);
    box-shadow: var(--shadow-md) !important;
}

/* ---- Product Card ---- */
.product-card {
    border-radius: var(--radius) !important;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md) !important;
}

.product-img-wrapper {
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
}
.product-img-wrapper img {
    transition: transform 0.4s ease;
}
.product-card:hover .product-img-wrapper img {
    transform: scale(1.06);
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Pager / Pagination ---- */
.shop-pagination-wrap {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}

.shop-pagination,
.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
}

.shop-pagination .page-item,
.pagination li {
    list-style: none !important;
    margin: 0 !important;
}

.shop-pagination .page-link,
.pagination li a,
.pagination .page-link {
    min-width: 44px;
    height: 44px;
    padding: 0 16px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none;
}

.shop-pagination .page-link:hover,
.pagination li a:hover,
.pagination .page-link:hover {
    color: var(--primary-dark, #1B5E20) !important;
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(27, 94, 32, 0.14) !important;
}

.shop-pagination .page-item.active .page-link,
.shop-pagination .page-link.current,
.pagination li.active a,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #1B5E20 0%, #0d4616 100%) !important;
    border-color: #1B5E20 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 18px rgba(27, 94, 32, 0.32) !important;
}

.shop-pagination .page-arrow {
    background: #ffffff !important;
    color: #475569 !important;
    font-size: 14px !important;
}

.shop-pagination .page-arrow:hover {
    color: var(--primary-dark, #1B5E20) !important;
    border-color: #86efac !important;
    background: #f0fdf4 !important;
}

/* ---- Footer ---- */
.footer-links a:hover { color: #ffffff !important; }
.social-icon:hover {
    background-color: rgba(200,169,81,0.3) !important;
    transform: translateY(-2px);
}

/* ---- Cart ---- */
.cart-item {
    transition: background var(--transition);
}
.cart-item:hover { background: #f8f9fa; }

/* ---- Order Timeline ---- */
.timeline-dot { transition: background var(--transition); }

/* ---- Thumbnail Hover ---- */
.thumbnail-wrapper {
    cursor: pointer;
    transition: border-color var(--transition);
}
.thumbnail-wrapper:hover { border-color: var(--primary-dark) !important; }

/* ---- Form Controls ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-mid);
    box-shadow: 0 0 0 0.2rem rgba(27,94,32,0.15);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .section-title { font-size: 1.4rem; }
}