/* ================================
   TOKOPEDIA THEME - GREEN COLOR SCHEME
   Primary Color: #00AA5B (Tokopedia Green)
   ================================ */

:root {
    /* Primary Colors - Tokopedia Green */
    --tokopedia-green: #00AA5B;
    --tokopedia-green-hover: #008F4D;
    --tokopedia-green-light: #E1F8EF;
    --tokopedia-green-dark: #006D3A;

    /* Secondary Colors */
    --tokopedia-orange: #FF6B00;
    --tokopedia-red: #FF4A4A;
    --tokopedia-blue: #1870F0;

    /* Neutral Colors */
    --tokopedia-gray-50: #F8F9FA;
    --tokopedia-gray-100: #F0F3F7;
    --tokopedia-gray-200: #E5E7E9;
    --tokopedia-gray-300: #D1D5DB;
    --tokopedia-gray-400: #9CA3AF;
    --tokopedia-gray-500: #6B7280;
    --tokopedia-gray-600: #4B5563;
    --tokopedia-gray-700: #374151;
    --tokopedia-gray-800: #1F2937;
    --tokopedia-gray-900: #111827;

    /* Text Colors */
    --tokopedia-text-primary: #212121;
    --tokopedia-text-secondary: #6D7588;
    --tokopedia-text-muted: #8D96AA;

    /* Border */
    --tokopedia-border-color: #E5E7E9;
    --tokopedia-border-radius: 8px;
    --tokopedia-border-radius-sm: 4px;
    --tokopedia-border-radius-lg: 12px;

    /* Shadow */
    --tokopedia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --tokopedia-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --tokopedia-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --tokopedia-shadow-card: 0 1px 6px rgba(49, 53, 59, 0.12);

    /* Spacing */
    --tokopedia-spacing: 16px;
}

/* ================================
   GENERAL OVERRIDE
   ================================ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--tokopedia-text-primary);
    background-color: var(--tokopedia-gray-100);
}

/* ================================
   PRIMARY BUTTON - Tokopedia Style
   ================================ */
.btn-primary,
.btn-tokopedia {
    background-color: var(--tokopedia-green) !important;
    border-color: var(--tokopedia-green) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--tokopedia-border-radius-sm);
    transition: all 0.2s ease-in-out;
}

/* Padding khusus untuk ukuran default, tidak override btn-sm dan btn-lg */
.btn-primary:not(.btn-sm):not(.btn-lg):not(.btn-xs),
.btn-tokopedia:not(.btn-sm):not(.btn-lg):not(.btn-xs) {
    padding: 10px 20px;
}

.btn-primary:hover,
.btn-tokopedia:hover {
    background-color: var(--tokopedia-green-hover) !important;
    border-color: var(--tokopedia-green-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--tokopedia-shadow-md);
}

.btn-outline-primary {
    color: var(--tokopedia-green) !important;
    border-color: var(--tokopedia-green) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--tokopedia-green) !important;
    border-color: var(--tokopedia-green) !important;
    color: #fff !important;
}

/* ================================
   CARD STYLING - Tokopedia Style
   ================================ */
.card {
    border-radius: var(--tokopedia-border-radius);
    border: 1px solid var(--tokopedia-border-color);
    box-shadow: var(--tokopedia-shadow-card);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--tokopedia-shadow-lg);
    transform: translateY(-2px);
}

.card-body {
    padding: 16px;
}

/* ================================
   PRODUCT CARD
   ================================ */
.product-card {
    border-radius: var(--tokopedia-border-radius);
    border: 1px solid var(--tokopedia-border-color);
    background: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
}

.product-card:hover {
    box-shadow: var(--tokopedia-shadow-lg);
    transform: translateY(-4px);
}

.product-card .product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-card .product-title {
    font-size: 14px;
    color: var(--tokopedia-text-primary);
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 40px;
}

.product-card .product-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--tokopedia-text-primary);
}

.product-card .product-badge {
    background: var(--tokopedia-red);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ================================
   CATEGORY CARD
   ================================ */
.category-card {
    border-radius: var(--tokopedia-border-radius);
    background: #fff;
    border: 1px solid var(--tokopedia-border-color);
    text-align: center;
    padding: 20px;
    transition: all 0.3s ease;
}

.category-card:hover {
    box-shadow: var(--tokopedia-shadow-md);
    border-color: var(--tokopedia-green);
    transform: translateY(-3px);
}

.category-card .category-icon {
    font-size: 48px;
    color: var(--tokopedia-green);
    margin-bottom: 12px;
}

.category-card .category-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tokopedia-text-primary);
}

/* ================================
   BADGE & LABEL
   ================================ */
.badge-tokopedia {
    background-color: var(--tokopedia-green-light);
    color: var(--tokopedia-green-dark);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
}

.badge-discount {
    background-color: var(--tokopedia-red);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

/* ================================
   NAVBAR OVERRIDE
   ================================ */
.navbar {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar-brand {
    color: var(--tokopedia-green) !important;
    font-weight: 700;
    font-size: 24px;
}

.nav-link {
    color: var(--tokopedia-text-primary) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--tokopedia-green) !important;
}

/* ================================
   SEARCH BAR
   ================================ */
.search-bar {
    border: 2px solid var(--tokopedia-border-color);
    border-radius: var(--tokopedia-border-radius);
    transition: all 0.2s ease;
}

.search-bar:focus-within {
    border-color: var(--tokopedia-green);
    box-shadow: 0 0 0 3px var(--tokopedia-green-light);
}

.search-bar input {
    border: none;
    outline: none;
}

.search-bar .input-group-text {
    background: transparent;
    border: none;
}

/* ================================
   FOOTER
   ================================ */
.footer-tokopedia {
    background: var(--tokopedia-gray-800);
    color: var(--tokopedia-gray-300);
}

.footer-tokopedia h5 {
    color: #fff;
    font-weight: 600;
}

.footer-tokopedia a {
    color: var(--tokopedia-gray-300);
    transition: color 0.2s ease;
}

.footer-tokopedia a:hover {
    color: var(--tokopedia-green);
}

/* ================================
   FORM CONTROLS
   ================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--tokopedia-green);
    box-shadow: 0 0 0 3px var(--tokopedia-green-light);
}

/* ================================
   ICON BUTTON
   ================================ */
.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tokopedia-gray-100);
    color: var(--tokopedia-text-primary);
    transition: all 0.2s ease;
}

.icon-btn:hover {
    background: var(--tokopedia-green-light);
    color: var(--tokopedia-green);
}

/* ================================
   CART BADGE
   ================================ */
.cart-badge {
    background: var(--tokopedia-red) !important;
    font-size: 10px;
    padding: 2px 6px;
    min-width: 18px;
}

/* ================================
   SECTION TITLE
   ================================ */
.section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--tokopedia-text-primary);
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 14px;
    color: var(--tokopedia-text-secondary);
    margin-bottom: 24px;
}

/* ================================
   BREADCRUMB
   ================================ */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 20px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--tokopedia-text-muted);
}

.breadcrumb-item a {
    color: var(--tokopedia-text-secondary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--tokopedia-green);
}

.breadcrumb-item.active {
    color: var(--tokopedia-text-primary);
}

/* ================================
   PAGINATION
   ================================ */
.pagination .page-link {
    color: var(--tokopedia-text-primary);
    border-color: var(--tokopedia-border-color);
}

.pagination .page-link:hover {
    background-color: var(--tokopedia-green-light);
    border-color: var(--tokopedia-green);
    color: var(--tokopedia-green);
}

.pagination .page-item.active .page-link {
    background-color: var(--tokopedia-green);
    border-color: var(--tokopedia-green);
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 768px) {
    .section-title {
        font-size: 20px;
    }

    .product-card .product-price {
        font-size: 16px;
    }
}

/* ================================
   UTILITIES
   ================================ */
.text-tokopedia {
    color: var(--tokopedia-green) !important;
}

.bg-tokopedia {
    background-color: var(--tokopedia-green) !important;
}

.border-tokopedia {
    border-color: var(--tokopedia-green) !important;
}

/* ================================
   ADMIN SIDEBAR - Tokopedia Green
   ================================ */
.sidebar {
    background-color: var(--tokopedia-green) !important;
}

.sidebar .border-bottom {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.sidebar-link {
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease !important;
}

.sidebar-link:hover {
    background-color: var(--tokopedia-green-hover) !important;
    color: #fff !important;
}

.sidebar-link.active {
    background-color: rgba(0, 0, 0, 0.18) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.sidebar-section-title {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ================================
   ADMIN TOPBAR - Tokopedia Style
   ================================ */
.admin-avatar {
    background-color: var(--tokopedia-green) !important;
    color: #fff !important;
}

/* ================================
   ADMIN FOOTER - Tokopedia Style
   ================================ */
.admin-footer {
    background: #2C3E50;
    color: #BDC3C7;
}

.admin-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}