/*
 * MercaSantiago — Modern storefront overrides.
 * Loaded after vendors.css and style.css so it takes precedence.
 * Reversible: remove the <link> from layouts/main.blade.php to revert.
 */

:root {
  --ms-primary: #2e7d32;
  --ms-primary-dark: #1b5e20;
  --ms-primary-soft: #e8f5e9;
  --ms-primary-tint: #f4faf5;
  --ms-text: #0f1f15;
  --ms-text-muted: #5b6b62;
  --ms-border: #e6ebe7;
  --ms-bg: #fafbfa;
  --ms-radius: 10px;
  --ms-radius-lg: 14px;
  --ms-shadow-sm: 0 1px 3px rgba(15, 31, 21, 0.06);
  --ms-shadow: 0 6px 18px -8px rgba(15, 31, 21, 0.10);
}

body, .header, .footer, .product-info, .nav-bar, .info-bar, .top-bar {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--ms-text);
}

/* ---------- Buttons ---------- */
.btn,
.button,
.add_to_cart_button,
.cart-btn,
button.btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.1px;
  transition: all 0.15s ease !important;
}

.btn-primary,
.btn-success,
.btn-add,
.add_to_cart_button {
  background: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -6px rgba(46, 125, 50, 0.45) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus,
.btn-add:hover,
.add_to_cart_button:hover {
  background: var(--ms-primary-dark) !important;
  border-color: var(--ms-primary-dark) !important;
  transform: translateY(-1px);
}

.btn-default,
.btn-outline {
  background: #fff !important;
  color: var(--ms-text) !important;
  border: 1.5px solid var(--ms-border) !important;
}

.btn-default:hover,
.btn-outline:hover {
  background: var(--ms-primary-soft) !important;
  border-color: var(--ms-primary) !important;
  color: var(--ms-primary-dark) !important;
}

/* ---------- Forms ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
  border-radius: 8px !important;
  border: 1.5px solid var(--ms-border) !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  background: #fff;
  color: var(--ms-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--ms-primary) !important;
  box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.12) !important;
  outline: none !important;
}

/* Header search bar */
.search-form .form-control,
.search-form input {
  border-radius: 8px 0 0 8px !important;
  border-right: 0 !important;
}

.search-form .input-group-btn .btn,
.search-form button[type="submit"] {
  border-radius: 0 8px 8px 0 !important;
}

/* ---------- Product cards ---------- */
.product, .product-thumb, .product-block,
.featured-product, .item-product, .product-item,
.shop-product-item, .ms-product-card,
.product-grid > li, .product-grid > div > .product {
  border-radius: var(--ms-radius-lg) !important;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--ms-shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  border: 1px solid var(--ms-border) !important;
}

.product:hover, .product-thumb:hover, .product-block:hover,
.featured-product:hover, .item-product:hover, .product-item:hover {
  box-shadow: var(--ms-shadow);
  transform: translateY(-2px);
}

.product-title, .product-name,
.product h4, .product h3 {
  font-weight: 700 !important;
  color: var(--ms-text) !important;
  letter-spacing: -0.2px;
}

.price, .product-price {
  color: var(--ms-primary-dark) !important;
  font-weight: 800 !important;
}

/* Category cards */
.category-block, .category-card, .cat-card {
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.category-block:hover, .category-card:hover { box-shadow: var(--ms-shadow); }

/* ---------- Header ---------- */
.header, .main-header, .header-row {
  background: #fff !important;
  border-bottom: 1px solid var(--ms-border) !important;
  box-shadow: var(--ms-shadow-sm);
}

.top-bar, .info-bar {
  background: #fafbfa !important;
  color: var(--ms-text-muted);
  border-bottom: 1px solid var(--ms-border) !important;
  font-size: 13px;
}

.top-bar a, .info-bar a { color: var(--ms-text-muted); }
.top-bar a:hover, .info-bar a:hover { color: var(--ms-primary-dark); }

/* Main navigation bar (categories / vendors / sell) */
.nav-bar, .navbar.navbar-inverse, .ms-nav {
  background: var(--ms-primary) !important;
  border: 0 !important;
}

.nav-bar a, .navbar.navbar-inverse a, .ms-nav a {
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.nav-bar a:hover, .navbar.navbar-inverse a:hover, .ms-nav a:hover {
  background: var(--ms-primary-dark) !important;
  color: #fff !important;
}

/* ---------- Footer ---------- */
.footer, .main-footer {
  background: #0f1f15 !important;
  color: #cfd6d1 !important;
}

.footer h4, .footer h5, .main-footer h4, .main-footer h5 {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.footer a, .main-footer a { color: #cfd6d1 !important; }
.footer a:hover, .main-footer a:hover { color: #fff !important; }

/* ---------- Alerts / messages ---------- */
.alert {
  border-radius: var(--ms-radius) !important;
  border: 0 !important;
  padding: 14px 18px !important;
}

.alert-success { background: var(--ms-primary-soft) !important; color: var(--ms-primary-dark) !important; border-left: 4px solid var(--ms-primary) !important; }
.alert-danger { background: #fdecea !important; color: #991b1b !important; border-left: 4px solid #e53935 !important; }
.alert-info { background: #e3edf7 !important; color: #0d1f33 !important; border-left: 4px solid #1e3a5f !important; }
.alert-warning { background: #fff8e1 !important; color: #8a6d3b !important; border-left: 4px solid #f4b400 !important; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb {
  background: transparent !important;
  padding: 14px 0 !important;
  font-size: 13.5px;
}

.breadcrumb a { color: var(--ms-text-muted); }
.breadcrumb .active { color: var(--ms-text); font-weight: 600; }

/* ---------- Section titles ---------- */
.section-title, .section-header, h2.title, h3.title {
  font-weight: 800 !important;
  color: var(--ms-text) !important;
  letter-spacing: -0.4px;
  position: relative;
}

/* Cards on product detail */
.product-detail-block, .product-detail-content,
.shop-info, .vendor-info {
  border-radius: var(--ms-radius-lg);
  background: #fff;
  box-shadow: var(--ms-shadow-sm);
  border: 1px solid var(--ms-border);
  padding: 20px;
}

/* ---------- Tables (account/orders) ---------- */
.table {
  border-collapse: separate !important;
  border-spacing: 0;
}

.table > thead > tr > th {
  background: #fafbfa !important;
  border-bottom: 1px solid var(--ms-border) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ms-text-muted) !important;
  padding: 12px 14px !important;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--ms-border) !important;
  padding: 12px 14px !important;
  vertical-align: middle;
}

/* ---------- Account / dashboard area ---------- */
.dashboard-content, .account-content {
  background: var(--ms-bg);
}

.account-sidebar, .dashboard-sidebar {
  background: #fff;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
  padding: 14px;
}

.account-sidebar li > a, .dashboard-sidebar li > a {
  border-radius: 8px;
  padding: 10px 14px !important;
  color: var(--ms-text);
  font-weight: 500;
}

.account-sidebar li.active > a,
.account-sidebar li > a:hover,
.dashboard-sidebar li.active > a,
.dashboard-sidebar li > a:hover {
  background: var(--ms-primary-soft);
  color: var(--ms-primary-dark);
}