/* ========================================
   GLOBAL.CSS - Complete Header & Footer Styles
   Source Grid Agricultural Platform
   
   This file contains ALL shared component styles that appear on every page:
   - Header & Navigation
   - Footer & Contact Forms
   - Search functionality
   ======================================== */

/* CSS Variables for Consistent Theming */
:root {
  --olive-green: #636B2F;
  --olive-green-hover: #7a8439;
  --olive-green-light: rgba(99, 107, 47, 0.1);
  --white: #FFFFFF;
  --black: #000000;
  --text-secondary: #333333;
  --grey: #808080;
  --grey-light: #f5f5f5;
  --shadow: rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--white);
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   LOADER
   ======================================== */
.loader_bg {
  position: fixed;
  z-index: 9999;
  background: var(--white);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  text-align: center;
}

.loader img {
  width: 400px;
  height: 400px;
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */
/* Editorial three-zone header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  border-bottom-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.85rem 2rem;
}

/* Brand */
.header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.header__brand img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* Collapse wrapper — Bootstrap controls display via .collapse/.show classes */
.header__collapse {
  align-items: center;
  flex: 1 1 auto;
  gap: 1.5rem;
}

/* Force collapse to render at desktop sizes even without .show */
@media (min-width: 1200px) {
  .header__collapse {
    display: flex !important;
  }
}

/* Nav */
.header__nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline: auto;
}

.header__nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.97rem;
  text-decoration: none;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  position: relative;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 70%;
  height: 2px;
  background-color: var(--olive-green);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__nav-link:hover {
  color: var(--olive-green);
}

.header__nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.header__nav-link.is-active {
  color: var(--olive-green);
  font-weight: 600;
}

.header__nav-link.is-active::after {
  transform: translateX(-50%) scaleX(1);
}

/* Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 0 0 auto;
}

/* Search — pill with leading icon (IDs preserved for search.js) */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 0.95rem;
  color: var(--grey);
  pointer-events: none;
  font-size: 0.9rem;
  transition: color 0.25s ease;
  z-index: 1;
}

.search-input {
  padding: 0.55rem 1rem 0.55rem 2.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--grey-light);
  font-size: 0.9rem;
  width: 200px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.search-input::placeholder {
  color: var(--grey);
}

.search-input:focus {
  outline: none;
  width: 260px;
  background-color: var(--white);
  border-color: var(--olive-green);
  box-shadow: 0 0 0 3px var(--olive-green-light);
}

.search-container:hover .search-icon,
.search-input:focus ~ .search-icon {
  color: var(--olive-green);
}

.search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(99, 107, 47, 0.15);
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 1010;
}

.search-results.active {
  display: block;
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CTA */
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--olive-green);
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.3rem;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(99, 107, 47, 0.18);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.header__cta:hover {
  background-color: var(--olive-green-hover);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(99, 107, 47, 0.28);
}

.header__cta:focus,
.header__cta:focus-visible {
  outline: none;
  box-shadow: 0 2px 6px rgba(99, 107, 47, 0.18);
}

.header__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.header__cta:hover .header__cta-arrow {
  transform: translateX(4px);
}

/* ================================================
   REQUEST SOURCING DROPDOWN  (sgrs- prefix)
   ================================================ */

.sgrs-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.sgrs-trigger .sgrs-chevron i {
  font-size: 0.75rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.sgrs-trigger[aria-expanded="true"] .sgrs-chevron i {
  transform: rotate(180deg);
}

.sgrs-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 0.5rem;
  z-index: 1100;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top right;
}

.sgrs-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sgrs-panel__heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  padding: 0.6rem 0.75rem 0.4rem;
  margin: 0;
}

.sgrs-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
  font-family: inherit;
}

.sgrs-option:hover {
  background-color: rgba(99, 107, 47, 0.07);
  text-decoration: none;
  color: inherit;
}

.sgrs-option--featured {
  background-color: rgba(99, 107, 47, 0.05);
}

.sgrs-option--featured:hover {
  background-color: rgba(99, 107, 47, 0.12);
}

.sgrs-option__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 107, 47, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.sgrs-option:hover .sgrs-option__icon {
  background: rgba(99, 107, 47, 0.18);
}

.sgrs-option__icon i {
  font-size: 1.1rem;
  color: var(--olive-green);
}

.sgrs-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.sgrs-option__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sgrs-option__badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #636B2F, #8bc34a);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.sgrs-option__desc {
  font-size: 0.8rem;
  color: #777;
}

.sgrs-option__arrow {
  font-size: 0.75rem;
  color: #ccc;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.sgrs-option:hover .sgrs-option__arrow {
  transform: translateX(3px);
  color: var(--olive-green);
}

/* ================================================
   SUPPLIER MODAL  (sgrs-modal- prefix)
   ================================================ */

.sgrs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: sgrsModalFadeIn 0.2s ease;
}

@keyframes sgrsModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sgrs-modal-box {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 2.5rem 2.5rem 2rem;
  animation: sgrsModalSlideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

@keyframes sgrsModalSlideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sgrs-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1;
}

.sgrs-modal-close:hover {
  background: var(--olive-green);
  color: #fff;
  border-color: var(--olive-green);
  transform: rotate(90deg);
}

.sgrs-modal-header {
  text-align: center;
  margin-bottom: 2rem;
}

.sgrs-modal-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--olive-green), #8bc34a);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 20px rgba(99, 107, 47, 0.3);
}

.sgrs-modal-icon i { font-size: 1.8rem; color: #fff; }

.sgrs-modal-header h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--olive-green);
  margin-bottom: 0.5rem;
}

.sgrs-modal-header p { font-size: 0.95rem; color: #777; margin: 0; }

/* Product search — label */
.sgrs-modal-form .product-search-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 0.2rem;
}

.sgrs-modal-form .footer-privacy-check {
  margin-bottom: 1.25rem;
}

.sgrs-modal-form .product-search-label .label-hint {
  font-weight: 400;
  font-size: 0.85rem;
  color: #888;
}

/* Selected product tags row */
.selected-products-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  min-height: 0;
}

.selected-products-container:empty {
  margin-bottom: 0;
}

.selected-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(99, 107, 47, 0.1);
  color: #636B2F;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.remove-tag {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  margin-left: 0.15rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.remove-tag:hover {
  opacity: 1;
}

/* Hint text — now sits directly under the label as a subtitle */
.sgrs-modal-form .product-search-hint {
  display: block;
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.15rem;
  margin-bottom: 0.5rem;
}

/* Suggestions dropdown */
.product-search-container {
  position: relative;
}

.product-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  margin-top: 0.25rem;
}

.product-suggestions.show {
  display: block;
}

.suggestion-item {
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.15s ease;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.active {
  background-color: rgba(99, 107, 47, 0.07);
  color: #636B2F;
}

.suggestion-item.selected {
  color: #636B2F;
  font-weight: 600;
}

.no-suggestions {
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: #888;
}

.sgrs-modal-box::-webkit-scrollbar { width: 6px; }
.sgrs-modal-box::-webkit-scrollbar-thumb {
  background: var(--olive-green-light);
  border-radius: 3px;
}

/* Mobile toggler */
.header__toggler {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(99, 107, 47, 0.35);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.header__toggler:hover {
  background-color: var(--olive-green-light);
  border-color: var(--olive-green);
}

.header__toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--olive-green-light);
}

.header__toggler-icon {
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23636B2F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  display: inline-block;
}

/* Header — responsive */
@media (max-width: 1199px) {
  .header__inner {
    flex-wrap: wrap;
    padding: 0.65rem 1.25rem;
    gap: 0.75rem;
  }

  .header__brand img {
    max-width: 150px;
  }

  .header__toggler {
    display: inline-flex;
  }

  /* Bootstrap's .collapse:not(.show) handles display:none on close.
     No padding here — padding on the container prevents height reaching 0
     during Bootstrap's collapse animation. Spacing lives on the children. */
  .header__collapse {
    flex: 1 0 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .header__collapse.show {
    display: flex !important;
  }

  /* The header is sticky, and with the menu open it is taller than many phone
     screens (604px measured) — and the search suggestions hang up to 400px
     below the search box on top of that. Nothing past the bottom of the screen
     could ever be scrolled into view, so the last suggestions (and, on short
     phones, the end of the menu) stayed hidden. While the menu is open, cap
     the header at the screen height and let it scroll itself. :has() needs a
     2022+ browser; older ones simply keep today's behaviour. */
  header:has(.header__collapse.show) {
    max-height: 100vh;
    max-height: 100dvh; /* excludes the phone browser's own toolbars */
    overflow-y: auto;
    overscroll-behavior: contain; /* don't drag the page behind the menu */
  }

  /* One scroll area, not a scroller inside a scroller: inside the open menu
     the suggestions list shows all of its (at most 8) results at full height. */
  header:has(.header__collapse.show) .search-results {
    max-height: none;
  }

  .header__nav {
    padding: 1rem 1.25rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-inline: 0;
  }

  .header__nav-link {
    padding: 0.65rem 1rem;
    border-radius: 8px;
  }

  /* Re-enable the underline on mobile — works well at natural (text) width */
  .header__nav-link::after {
    display: block;
    bottom: 4px;
  }

  .header__nav-link.is-active {
    color: var(--olive-green);
    font-weight: 600;
  }

  .header__actions {
    padding: 0 1.25rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
  }

  /* Restructure search on mobile: container becomes the styled pill,
     icon sits naturally inside as a flex item (no absolute positioning needed) */
  .search-container {
    display: inline-flex;
    background-color: var(--grey-light);
    border-radius: 999px;
    border: 1px solid transparent;
    width: auto;
    max-width: 260px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }

  .search-container:focus-within {
    background-color: white;
    border-color: var(--olive-green);
    box-shadow: 0 0 0 3px rgba(99, 107, 47, 0.1);
  }

  .search-icon {
    position: static;
    display: flex;
    align-items: center;
    padding-left: 0.85rem;
    font-size: 0.9rem;
    color: var(--grey);
  }

  .search-input {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0.4rem;
    padding-right: 1rem;
    width: 180px;
  }

  .search-input:focus {
    background-color: transparent;
    border: none;
    box-shadow: none;
    width: 200px;
  }

  .header__cta {
    justify-content: center;
    padding: 0.75rem 1.3rem;
  }
}

@media (max-width: 576px) {
  .header__inner {
    padding: 0.55rem 1rem;
  }

  .header__brand img {
    max-width: 130px;
  }

  .header__toggler {
    width: 40px;
    height: 40px;
  }

  .header__toggler-icon {
    width: 20px;
    height: 20px;
  }
}

/* ========================================
   FOOTER & CONTACT SECTION
   ======================================== */
footer {
  background-color: var(--olive-green);
  color: var(--white);
  padding: 1rem 0 0;
}

.footer .titlepage {
  margin-bottom: 2rem;
}

.footer .titlepage h2 {
  font-size: 2.5rem;
  color: var(--white);
}

/* Contact Form */
.main_form {
  margin-top: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.contactus,
.contactus1 {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 2px solid #ddd;
  border-radius: 50px;
  font-size: 1rem;
  color: var(--black);
  background-color: var(--white);
  transition: var(--transition);
}

.contactus1 {
  border-radius: 20px;
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.contactus:focus,
.contactus1:focus {
  outline: none;
  border-color: var(--olive-green);
  box-shadow: 0 0 0 3px var(--olive-green-light);
}

.focus-border {
  display: none;
}

/* ========================================
   PHONE INPUT WITH COUNTRY CODE SELECTOR
   ======================================== */
.phone-input-wrapper {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
}

.country-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #ddd;
  border-right: none;
  border-radius: 50px 0 0 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 110px;
  justify-content: center;
}

.country-selector:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border-color: var(--olive-green-light);
}

.country-selector:focus {
  outline: none;
  border-color: var(--olive-green);
  box-shadow: 0 0 0 3px var(--olive-green-light);
}

.country-flag {
  font-size: 1.3rem;
  line-height: 1;
}

.country-dial-code {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.dropdown-arrow {
  font-size: 0.65rem;
  color: var(--grey);
  transition: transform 0.3s ease;
}

.country-selector:focus .dropdown-arrow,
.country-dropdown.show + .country-selector .dropdown-arrow {
  transform: rotate(180deg);
}

.phone-input-wrapper .phone-number-input {
  flex: 1;
  border-radius: 0 50px 50px 0 !important;
  border-left: none !important;
}

.phone-input-wrapper .phone-number-input:focus {
  border-color: var(--olive-green) !important;
  box-shadow: 0 0 0 3px var(--olive-green-light) !important;
}

/* Country Dropdown */
.country-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  max-width: 100%;
  background: var(--white);
  border: 2px solid var(--olive-green);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  margin-top: 8px;
  display: none;
  animation: dropdownFadeIn 0.2s ease;
}

.country-dropdown.show {
  display: block;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.country-search-wrapper {
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.country-search {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.country-search:focus {
  outline: none;
  border-color: var(--olive-green);
  box-shadow: 0 0 0 3px var(--olive-green-light);
}

.country-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 0;
}

.country-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.country-item:hover {
  background-color: var(--olive-green-light);
}

.country-item.selected {
  background-color: var(--olive-green);
  color: var(--white);
}

.country-item.selected .country-dial-code {
  color: var(--white);
}

.country-item .country-flag {
  font-size: 1.4rem;
}

.country-item .country-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
}

.country-item .country-dial-code {
  font-size: 0.9rem;
  color: var(--grey);
  font-weight: 600;
}

/* Scrollbar styling for country list */
.country-list::-webkit-scrollbar {
  width: 6px;
}

.country-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.country-list::-webkit-scrollbar-thumb {
  background: var(--olive-green-light);
  border-radius: 3px;
}

.country-list::-webkit-scrollbar-thumb:hover {
  background: var(--olive-green);
}

/* Phone input inside booking form */
#booking-page-content .phone-input-wrapper .country-selector {
  border-radius: 10px 0 0 10px;
  border: 2px solid #e0e0e0;
  border-right: none;
}

#booking-page-content .phone-input-wrapper .phone-number-input {
  border-radius: 0 10px 10px 0 !important;
}

/* Phone input inside contact page form */
#contact-page-content .phone-input-wrapper .country-selector {
  border-radius: 8px 0 0 8px;
  border: 2px solid #e0e0e0;
  border-right: none;
}

#contact-page-content .phone-input-wrapper .phone-number-input {
  border-radius: 0 8px 8px 0 !important;
}

/* Submit Button */
.send_btn {
  background-color: var(--grey);
  color: var(--white);
  padding: 1rem 3rem;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.send_btn:hover {
  background-color: var(--olive-green);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 107, 47, 0.4);
}

.send_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Footer Info */
.footer-info {
  margin-top: 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.border_right {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-box h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--white);
}

/* Location Icons */
.location_icon {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.location_icon li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}

.location_icon li i {
  color: var(--white);
  font-size: 1.2rem;
}

/* Footer Links */
.link_menu {
  list-style: none;
  padding: 0;
}

.link_menu li {
  margin-bottom: 0.8rem;
}

.link_menu li a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  transition: var(--transition);
  display: inline-block;
}

.link_menu li a:hover {
  color: var(--white);
  transform: translateX(5px);
}

/* Social Icons */
.social_icon {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.social_icon li a {
  width: 45px;
  height: 45px;
  background-color: var(--white);
  color: var(--olive-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: var(--transition);
}

.social_icon li a:hover {
  background-color: var(--olive-green-hover);
  color: var(--white);
  transform: translateY(-3px);
}

/* Quick Links */
.link {
  list-style: none;
  padding: 0;
}

.link li {
  margin-bottom: 0.8rem;
}

.link li a {
  color: rgba(255, 255, 255, 0.9);
  transition: var(--transition);
}

.link li a:hover {
  color: var(--white);
  padding-left: 5px;
}

/* Privacy Section */
.privacy-text {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.sub_btn {
  background-color: var(--white);
  color: var(--olive-green);
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  display: inline-block;
  transition: var(--transition);
}

.sub_btn:hover {
  background-color: var(--olive-green-hover);
  color: var(--white);
  transform: translateY(-2px);
}

/* Copyright */
.copyright {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1.5rem 0;
  margin-top: 3rem;
}

.copyright p {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 0.95rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 991px) {
  /* Header responsiveness for tablets */
  .navbar-collapse {
    background-color: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
  }

  .navbar-nav {
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
  }

  .nav-item {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: 0.75rem 1.5rem;
  }

  .nav-link::after {
    bottom: 8px;
  }

  .nav-link:hover {
    color: #333;
    background: none !important;
  }

  .nav-link:hover::after {
    width: 40%;
    left: 30%;
  }

  .nav-item.active .nav-link {
    color: #333;
    font-weight: 600;
    background: none !important;
  }

  /* legacy header overrides removed — handled by .header__* rules in the editorial header block above */

  /* Phone input responsive - tablet */
  .country-dropdown {
    width: 280px;
  }

  .border_right {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .logo_section img {
    max-width: 180px;
  }

  .btn-primary-custom {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
  }

  .footer .titlepage h2 {
    font-size: 2rem;
  }

  /* Dropdown — full width on mobile */
  .sgrs-dropdown { position: relative; }

  .sgrs-panel {
    display: none;
    position: static;
    width: 100%;
    box-shadow: none;
    border: 1px solid rgba(99, 107, 47, 0.15);
    border-radius: 12px;
    margin-top: 0.5rem;
    transform: none;
    opacity: 1;
    pointer-events: none;
  }

  .sgrs-panel.is-open {
    display: block;
    pointer-events: auto;
  }
}

/* Tablet hamburger range (769px–1199px): panel must not overflow the collapse
   container — absolute overflow inflates Bootstrap's scrollHeight and causes
   a white gap flash when the menu opens. Hide panel entirely when closed. */
@media (min-width: 769px) and (max-width: 1199px) {
  .sgrs-panel {
    display: none;
    position: static;
    width: 100%;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: 1px solid rgba(99, 107, 47, 0.15);
    border-radius: 12px;
    margin-top: 0.5rem;
    pointer-events: none;
  }

  .sgrs-panel.is-open {
    display: block;
    pointer-events: auto;
  }
}

/* 767.98px, not 768px: at exactly 768px Bootstrap's col-md-6 has already
   engaged, so the centred/stacked treatment below must stop just short of it. */
@media (max-width: 767.98px) {
  /* Override all page-specific footer padding uniformly on mobile */
  body footer {
    padding: 1rem 0 0;
  }

  /* Override all page-specific .footer-info margin-top on mobile */
  .footer .footer-info {
    margin-top: 0.5rem;
  }

  .sgrs-modal-box { padding: 2rem 1.5rem 1.5rem; }
  .sgrs-modal-overlay { padding: 0.75rem; }

  .sgrs-modal-form .form-group {
    margin-bottom: 1rem;
  }

  .contactus,
  .contactus1 {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }

  .sgrs-modal-form .product-search-label {
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
  }

  .sgrs-modal-form .product-search-hint {
    font-size: 0.8rem;
    margin-top: 0.35rem;
  }

  .selected-product-tag {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
  }

  .product-suggestions {
    max-height: 160px;
  }

  .suggestion-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
  }

  .send_btn {
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
  }

  /* Phone input responsive - mobile */
  .phone-input-wrapper {
    flex-wrap: nowrap;
  }

  .country-selector {
    min-width: 95px;
    padding: 0 8px;
  }

  .country-dial-code {
    font-size: 0.85rem;
  }

  .country-dropdown {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
  }

  .country-item {
    padding: 10px 12px;
  }

  /* Fix: center footer content on mobile */
  .footer-box {
    text-align: center;
  }

  .footer-box h3 {
    text-align: center;
  }

  .location_icon li {
    justify-content: center;
  }

  .social_icon {
    justify-content: center;
  }

  .link li {
    text-align: center;
  }

  .link li a:hover {
    padding-left: 0;
  }

  .privacy-text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer .titlepage h2 {
    font-size: 1.75rem;
  }

  .sgrs-modal-box { padding: 1.75rem 1.25rem 1.25rem; }

  /* Phone input responsive - small mobile */
  .country-selector {
    min-width: 85px;
    padding: 0 6px;
  }

  .country-flag {
    font-size: 1.1rem;
  }

  .country-dial-code {
    font-size: 0.8rem;
  }

  .dropdown-arrow {
    font-size: 0.55rem;
  }

  .phone-input-wrapper .phone-number-input {
    padding: 0.75rem 0.8rem;
    font-size: 0.9rem;
  }

  .country-search {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .country-item {
    padding: 8px 10px;
    gap: 8px;
  }

  .country-item .country-flag {
    font-size: 1.2rem;
  }

  .country-item .country-name {
    font-size: 0.85rem;
  }

  .country-item .country-dial-code {
    font-size: 0.8rem;
  }
}

/* ============================================================
   Photographic imagery — shared styling across user-facing pages
   ============================================================ */

/* Circular thumbnail used inside icon-card slots
   (About expertise, Partners benefits, Contact departments, Careers why) */
.sg-card-thumb {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(99, 107, 47, 0.18);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    background-color: var(--olive-green-light);
}

.sg-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--olive-green);
    pointer-events: none;
    transition: box-shadow 0.4s ease;
}

.sg-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.6s ease;
}

.sg-card-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(99, 107, 47, 0.28);
}

.sg-card-thumb:hover img {
    transform: scale(1.06);
}

.sg-card-thumb:hover::after {
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px var(--olive-green-hover);
}

@media (max-width: 768px) {
    .sg-card-thumb {
        width: 120px;
        height: 120px;
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 480px) {
    .sg-card-thumb {
        width: 110px;
        height: 110px;
    }
}

/* Landscape feature thumbnail (About upper feature blocks) */
.sg-feature-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sg-feature-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.sg-feature-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.sg-feature-thumb:hover img {
    transform: scale(1.04);
}

/* Wide scenic banner used on the home page between sections */
.sg-section-banner {
    width: 100%;
    max-height: 380px;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 14px;
    margin: 0 auto 2.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
    position: relative;
}

.sg-section-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sg-section-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .sg-section-banner {
        aspect-ratio: 16 / 9;
        margin-bottom: 1.75rem;
        border-radius: 10px;
    }
}

/* Sidekick image used inside .col-md-5 next to a heading (home page) */
.sg-side-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    margin-top: 1.5rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.sg-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.sg-side-image:hover img {
    transform: scale(1.04);
}

/* 4-up producers grid (home page Premium Exports section) */
.sg-producers-row {
    margin-top: 2.5rem;
}

.sg-producer-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sg-producer-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 0.6s ease;
}

.sg-producer-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.4s ease;
}

.sg-producer-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(99, 107, 47, 0.22);
}

.sg-producer-tile:hover img {
    transform: scale(1.07);
}

.sg-producer-tile:hover::after {
    opacity: 0.4;
}

@media (max-width: 576px) {
    .sg-producers-row {
        margin-top: 1.75rem;
    }
}

/* Hero illustration shown on the five footer-service pages
   beneath the page-hero subtitle */
.sg-hero-image {
    max-width: 760px;
    margin: 2rem auto 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 1;
}

.sg-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .sg-hero-image {
        margin-top: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
    }
}

/* ==========================================================================
   Footer 2-up band (768px - 1199px)

   Four columns only fit from 1200px up: the social icons need 228px
   (4 x 45px + 3 x 16px gap) and a quarter-width column gives them just
   156px at 768px. The footer therefore runs 2-up in this band, so the
   dividers have to follow the 2x2 grid rather than the stacked layout.

   Selectors are deliberately more specific than the bare `.border_right`
   rules duplicated across the page-level stylesheets, which load after
   this file - specificity wins without needing !important.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .footer-info .row > div.border_right {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* right-hand column of each pair sits against the edge - no divider */
    .footer-info .row > div:nth-child(2n).border_right {
        border-right: none;
    }

    /* horizontal divider under the first pair only */
    .footer-info .row > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .footer-info .row > div:nth-child(n + 3) {
        border-bottom: none;
    }
}

/* Safety net: icons wrap onto a second line rather than overflowing their
   column if a fifth social link is ever added. */
.footer .social_icon {
    flex-wrap: wrap;
}