/* ===================================================
   OrderFromTR — Brand Override
   Report Global Trading Ltd. Color Scheme
   Palette: Steel Blue #2D86C4 · Cyan #45B8D9 · Charcoal #2C3E50
   Loads AFTER bootstrap.min.css & style.css
   =================================================== */

:root {
  /* Primary: Steel Blue */
  --bs-primary: #2D86C4;
  --bs-primary-rgb: 45, 134, 196;

  /* Secondary: Cyan */
  --bs-secondary: #45B8D9;
  --bs-secondary-rgb: 69, 184, 217;

  /* Link color */
  --bs-link-color: #2D86C4;
  --bs-link-hover-color: #45B8D9;

  /* Brand accent */
  --brand-primary: #2D86C4;
  --brand-accent: #45B8D9;
  --brand-dark: #2C3E50;
  --brand-gradient: linear-gradient(135deg, #2D86C4, #45B8D9);
}

/* ---- Bootstrap utility overrides ---- */
.text-primary   { color: #2D86C4 !important; }
.bg-primary     { background-color: #2D86C4 !important; }
.border-primary { border-color: #2D86C4 !important; }

.text-secondary   { color: #45B8D9 !important; }
.bg-secondary     { background-color: #45B8D9 !important; }
.border-secondary { border-color: #45B8D9 !important; }

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, #2D86C4, #45B8D9) !important;
  border-color: #2D86C4 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(45, 134, 196, 0.25);
  transition: transform .15s, box-shadow .2s, opacity .2s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(45, 134, 196, 0.35) !important;
  border-color: #45B8D9 !important;
}

.btn-secondary {
  background-color: #45B8D9 !important;
  border-color: #45B8D9 !important;
  color: #fff !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: #2D86C4 !important;
  border-color: #2D86C4 !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: #2D86C4 !important;
  border-color: #2D86C4 !important;
}
.btn-outline-primary:hover {
  background-color: #2D86C4 !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #45B8D9 !important;
  border-color: #45B8D9 !important;
}
.btn-outline-secondary:hover {
  background-color: #45B8D9 !important;
  color: #fff !important;
}

/* ---- Links ---- */
a { color: #2D86C4; }
a:hover { color: #45B8D9; }

/* ---- Navbar ---- */
.nav-bar .bg-primary {
  background-color: #fff !important;
  border-bottom: 2px solid #45B8D9;
  box-shadow: 0 2px 16px rgba(45, 134, 196, 0.12);
}

/* Hide dropdown caret on pill buttons (lang/currency/cart) */
.nav-bar .d-flex .nav-item.dropdown > .btn.dropdown-toggle::after { display: none; }

/* Mini-cart item row */
.mini-cart-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.mini-cart-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.mini-cart-item-info { flex: 1; min-width: 0; }
.mini-cart-item-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2C3E50; }
.mini-cart-item-meta { font-size: 0.75rem; color: #888; }

/* ---- All Categories toggle — match nav-link vertical padding ---- */
.nav-bar .col-lg-3 .navbar-toggler {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* All Categories button — keep FR on one line; other langs shrink proportionally */
.nav-bar .col-lg-3 .navbar-toggler h4 {
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navbar link hover */
.nav-bar .navbar-nav .nav-link:hover,
.nav-bar .navbar-nav .nav-link.active {
  color: #2D86C4 !important;
}

/* ---- Spinner ---- */
.spinner-border.text-primary {
  color: #2D86C4 !important;
}

/* ---- Pagination ---- */
.pagination a.active {
  background: linear-gradient(135deg, #2D86C4, #45B8D9);
  border-color: #2D86C4;
}
.pagination a:hover:not(.active) {
  background-color: #2D86C4;
  border-color: #2D86C4;
}

/* ---- Copyright / footer bar ---- */
.copyright {
  background: #2C3E50 !important;
}

/* ---- Form focus states ---- */
.form-control:focus,
.form-select:focus {
  border-color: #45B8D9;
  box-shadow: 0 0 0 0.25rem rgba(69, 184, 217, 0.20);
}

/* ---- Back to top ---- */
.btn.back-to-top {
  background: linear-gradient(135deg, #2D86C4, #45B8D9) !important;
  border: none;
}

/* ---- Logo styling ---- */
.navbar-brand img {
  max-height: 90px;
  width: auto;
}
@media (min-width: 992px) {
  .navbar-brand img {
    max-height: 110px;
  }
}

/* ---- Product badges ---- */
.product-new {
  background: #45B8D9 !important;
}
.product-sale {
  background: #c0392b !important;
}

/* ---- Nav tabs ---- */
.nav.nav-tabs .nav-link.active {
  color: #2D86C4 !important;
  border-bottom-color: #2D86C4 !important;
}
.nav.nav-tabs .nav-link:hover {
  color: #45B8D9 !important;
}

/* ---- Carousel dots (single product) ---- */
.single-product .single-carousel .owl-dots .owl-dot img {
  border-color: #2D86C4;
}
.single-product .single-carousel .owl-dots .owl-dot.active img {
  border-color: #45B8D9;
}

/* ---- Star ratings keep gold ---- */
.fas.fa-star.text-primary {
  color: #f39c12 !important;
}

/* ---- Page header gradient ---- */
.page-header {
  background: linear-gradient(rgba(45, 134, 196, 0.75), rgba(44, 62, 80, 0.75)), url(../img/carousel-1.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll; /* fixed breaks on iOS Safari */
}

/* ---- Product card hover glow + image zoom ---- */
.product-item { overflow: visible !important; }
.product-item-inner {
  transition: box-shadow .25s, border-color .25s !important;
}
.product-item:hover .product-item-inner {
  box-shadow: 0 6px 24px rgba(45, 134, 196, 0.18) !important;
  border-color: #45B8D9 !important;
}

/* Image zoom on hover — universal for all product grids */
.product-item-inner-item {
  overflow: hidden;
}
.product-item-inner-item img {
  transition: transform 0.4s ease;
  will-change: transform;
}
.product-item:hover .product-item-inner-item img {
  transform: scale(1.06);
}

/* ---- Action button always visible (override template's hidden/slide-up) ---- */
.product .product-item .product-item-add,
.products .product-item .product-item-add {
  position: static !important;
  opacity: 1 !important;
  margin-bottom: 0 !important;
  background: transparent;
}
.product .product-item:hover .product-item-add,
.products .product-item:hover .product-item-add {
  margin-bottom: 0 !important;
}

/* ---- Product card eye-icon overlay (.products mirrors .product from style.css) ---- */
.products .product-item .product-item-inner .product-item-inner-item {
  position: relative;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  overflow: hidden;
}
.products .product-item .product-item-inner .product-item-inner-item .product-details {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: 0.5s;
}
.products .product-item:hover .product-item-inner .product-details {
  opacity: 1;
}
.products .product-item .product-item-inner .product-item-inner-item .product-details a i {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  color: var(--bs-white);
  transition: 0.5s;
}
.products .product-item:hover .product-item-inner .product-item-inner-item .product-details a i:hover {
  background: var(--bs-secondary);
  color: var(--bs-white);
}

/* ---- Search category select — restore right padding for dropdown arrow ---- */
#searchCategory {
  padding-right: 2.25rem !important;
  width: 240px !important;
}

/* ---- Cyan search button (matches phone/WA button color) ---- */
#searchBtn,
#shopSearchBtn {
  background: #45B8D9 !important;
  border-color: #45B8D9 !important;
  color: #fff !important;
  box-shadow: none !important;
}
#searchBtn:hover,
#shopSearchBtn:hover {
  background: #2D86C4 !important;
  border-color: #2D86C4 !important;
}

/* ---- Topbar My Account button (cyan, matches phone button) ---- */
.btn-alibaba-account {
  background: #45B8D9;
  color: #fff !important;
  border: none;
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-alibaba-account:hover {
  background: #2D86C4;
  color: #fff !important;
}

/* ---- Topbar accent ---- */
.top-bar {
  background: #2C3E50 !important;
  border-bottom: 1px solid #374f61;
}

/* ---- Section headings accent ---- */
.section-title h1::after,
.section-title h2::after {
  background: linear-gradient(90deg, #2D86C4, #45B8D9);
}

/* ---- Featured/services icon circles ---- */
.service-item .service-icon,
.featured .featured-icon {
  background: linear-gradient(135deg, rgba(45,134,196,0.12), rgba(69,184,217,0.12));
  border: 1px solid rgba(69, 184, 217, 0.25);
  color: #2D86C4;
}

/* ---- Category nav highlight ---- */
.category-filter .btn.active,
.category-filter .btn:hover {
  background: linear-gradient(135deg, #2D86C4, #45B8D9) !important;
  border-color: #2D86C4 !important;
  color: #fff !important;
}

/* ---- Hero Product Carousel ---- */
.hero-product-carousel {
  position: relative;
  height: 440px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.hero-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.hero-carousel-slide {
  flex: 0 0 100%;
  position: relative;
  overflow: hidden;
}
.hero-carousel-slide img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}
.hero-carousel-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 20px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}
.hero-carousel-dots {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  gap: 7px;
  z-index: 2;
}
.hero-carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  border: none;
  padding: 0;
}
.hero-carousel-dot.active {
  background: #fff;
  transform: scale(1.35);
}
.hero-carousel-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(45,134,196,0.3), rgba(69,184,217,0.2));
}

/* ====================================================
   Mobile Responsiveness
   ==================================================== */

/* ---- Carousel nav buttons: hide on mobile ---- */
@media (max-width: 767px) {
  .carousel-nav-btn { display: none !important; }
}

/* ---- Tablet: slightly smaller cards in home carousel ---- */
@media (max-width: 767px) {
  #featuredProductsGrid > * { width: 230px !important; }
}

/* ---- Navbar logo smaller on mobile ---- */
@media (max-width: 575px) {
  .navbar-brand img { max-height: 55px !important; }
}

/* ---- Navbar action buttons: compact on mobile ---- */
@media (max-width: 575px) {
  .nav-bar .d-flex.flex-wrap.gap-2 {
    gap: 6px !important;
  }
  .nav-bar .d-flex.flex-wrap .btn {
    padding: 8px 12px !important;
    font-size: 0.8rem;
  }
  .nav-bar .navbar-nav .nav-link {
    padding: 10px 0 !important;
    font-size: 0.95rem;
  }
}

/* ---- Trust bar (homepage): smaller text + tighter padding on mobile ---- */
@media (max-width: 575px) {
  .trust-bar .trust-item {
    font-size: 0.72rem;
    padding: 10px 2px;
  }
  .trust-bar .trust-item i {
    font-size: 0.8rem;
    margin-right: 4px !important;
  }
}

/* ---- Shop Services / Trust Badges: responsive grid ---- */
@media (max-width: 575px) {
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: 1px solid #e9ecef;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] .p-4 {
    padding: 12px 16px !important;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] h6 {
    font-size: 0.8rem;
    margin-bottom: 2px !important;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] p {
    font-size: 0.78rem;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] .fa-2x {
    font-size: 1.3rem !important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] .p-4 {
    padding: 10px 12px !important;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] h6 {
    font-size: 0.75rem;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] p {
    font-size: 0.72rem;
  }
  .container-fluid.px-0 > .row.g-0 > [class*="col-6"] .fa-2x {
    font-size: 1.2rem !important;
  }
}

/* ---- Page header: smaller on mobile ---- */
@media (max-width: 575px) {
  .container-fluid.page-header {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .container-fluid.page-header h1 {
    font-size: 1.5rem !important;
  }
  .container-fluid.page-header .breadcrumb {
    font-size: 0.82rem;
  }
}

/* ---- Hero section: mobile adjustments ---- */
@media (max-width: 575px) {
  .hero-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .hero-section h1.display-4 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }
  .hero-section .fs-5 {
    font-size: 0.92rem !important;
  }
  .hero-stat-chip {
    font-size: 0.72rem;
    padding: 7px 12px;
  }
  .hero-section .btn {
    width: 100%;
    text-align: center;
    padding: 12px 20px !important;
  }
  .hero-section .d-flex.flex-wrap.gap-3 {
    gap: 8px !important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .hero-section h1.display-4 {
    font-size: 2rem !important;
  }
}

/* ---- Category cards: 2 cols on small mobile ---- */
@media (max-width: 575px) {
  .cat-card .cat-bg {
    height: 140px;
  }
  .cat-card .cat-bg img {
    max-height: 100px;
  }
  .cat-card .cat-body {
    padding: 14px 16px;
  }
  .cat-card .cat-body h4 {
    font-size: 1rem;
  }
  .cat-card .cat-body p {
    font-size: 0.78rem;
  }
}

/* ---- Shop product grid: 1 column on xs, 2 on sm ---- */
@media (max-width: 575px) {
  #shopProductGrid .col-md-6 { width: 100% !important; max-width: 100% !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  #shopProductGrid .col-md-6 { width: 50% !important; }
}

/* ---- Product card: responsive image height ---- */
@media (max-width: 575px) {
  .product-item-inner-item img { height: 200px !important; object-fit: cover; }
}

/* ---- Shop sidebar: collapsible on mobile ---- */
@media (max-width: 991px) {
  .shop-sidebar { margin-bottom: 1.5rem; }
  .shop .container > .row > .col-lg-3 {
    margin-bottom: 0.5rem;
  }
  .shop .col-lg-3 h4 {
    font-size: 1rem;
  }
  /* Filter toggle button styling */
  #shopFilters {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
  }
}

/* ---- Shop sort & count bar ---- */
@media (max-width: 575px) {
  #shopSort {
    font-size: 0.82rem;
    padding: 6px 8px;
  }
  #shopResultCount {
    font-size: 0.78rem !important;
  }
}

/* ---- Pagination: better touch targets ---- */
@media (max-width: 575px) {
  #shopPagination .page-link {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px !important;
    font-size: 0.85rem;
  }
}

/* ---- Search bar: full width on mobile ---- */
@media (max-width: 575px) {
  #shopSearchInput { font-size: 0.9rem; }
  #searchCategory { width: 100% !important; max-width: 100%; }
}

/* ---- RFQ Form: better touch targets ---- */
@media (max-width: 575px) {
  .rfq-section .form-control,
  .rfq-section .form-select {
    padding: 12px 14px !important;
    font-size: 0.92rem;
    min-height: 46px;
  }
  .rfq-section .btn {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ---- Step cards (How It Works): smaller on mobile ---- */
@media (max-width: 575px) {
  .step-card {
    padding: 20px 16px;
  }
  .step-number {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}

/* ---- Export destination flags: readable on mobile ---- */
@media (max-width: 575px) {
  .flag-grid {
    gap: 10px;
    justify-content: center;
  }
  .flag-item {
    width: 58px;
    font-size: 0.82rem;
  }
  .export-stat-box h2 {
    font-size: 2rem;
  }
}

/* ---- Footer: center + compact on mobile ---- */
@media (max-width: 767px) {
  .footer .row.g-4 > [class*="col-"] { text-align: center; }
  .footer .row.g-4 > [class*="col-"] .rounded-circle { margin-left: auto; margin-right: auto; }
  .footer { padding: 2rem 0 !important; }
  .footer h4 { font-size: 1.1rem; }
}

/* ---- General: prevent horizontal overflow ---- */
html, body {
  overflow-x: hidden;
}

/* ---- Touch targets: minimum 44px for all interactive elements ---- */
@media (max-width: 767px) {
  .spec-filter + label {
    padding: 6px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .form-check {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .categories-item a,
  .categories-bars-item a {
    padding: 10px 12px;
    display: block;
  }
}

/* ---- Price filter: stack on mobile ---- */
@media (max-width: 575px) {
  .shop .col-lg-3 .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap;
  }
  .shop .col-lg-3 #priceMin,
  .shop .col-lg-3 #priceMax {
    width: 70px !important;
  }
}

/* ---- Carousel nav buttons: 44px touch target ---- */
.carousel-nav-btn {
  width: 44px;
  height: 44px;
}

/* ---- Contact form: proper touch targets on mobile ---- */
@media (max-width: 767px) {
  .form-control,
  .form-select {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  textarea.form-control {
    min-height: 120px;
  }
  .btn[type="submit"],
  form .btn-primary {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ---- Shop pagination: bottom-centered, polished pill buttons ---- */
/* NOTE: !important on display/flex because theme style.css overrides .pagination to inline-block */
#shopPagination .pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center;
  gap: 8px;
  padding: 0;
  list-style: none;
}
#shopPagination .page-item {
  display: inline-flex;
  list-style: none;
}
#shopPagination .page-link {
  border-radius: 50px;
  min-width: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid #e5e7eb;
  color: #374151;
  text-align: center;
  font-weight: 500;
  transition: all 0.15s ease;
  margin-left: 0;
}
#shopPagination .page-link:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
}
#shopPagination .page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
#shopPagination .page-item.disabled .page-link {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}
#shopPagination .page-link-ellipsis {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default;
}
#shopPagination .pagination-info {
  text-align: center;
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0.85rem 0 0;
}
@media (max-width: 575px) {
  #shopPagination .pagination { gap: 6px; }
  #shopPagination .page-link {
    min-width: 40px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}