/**
 * SiloKala Theme - Footer Styles (Multi-Device Responsive)
 * Pixel-perfect standalone styles for footer, brand column, desktop links, mobile accordion, trust badges, and newsletter.
 * Aligned with silokala-homepage.html specification.
 *
 * @package SiloKala_Theme
 */

/* ═══════════════════════════════════════════════════════════════
   7. FOOTER — from silokala-homepage.html
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  width: 100%;
  position: relative;
  background-color: var(--silo-blue-900, #0d203d);
  color: var(--silo-white, #ffffff);
  direction: rtl;
}

.silo-footer-main {
  width: 100%;
  padding: 48px 0 42px;
  background-color: var(--silo-blue-900, #0d203d);
}

.silo-footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* ── Col 1: Brand & Contact (34%) ────────────────────────────── */
.silo-footer-col-brand {
  flex: 0 0 34%;
  max-width: 400px;
}

.silo-footer-brand-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.silo-footer-brand-header a,
.silo-footer-brand-header .silo-brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--silo-radius-lg, 12px);
  padding: 10px 16px;
  transition: background-color var(--silo-transition-fast, 0.18s ease), border-color var(--silo-transition-fast, 0.18s ease);
}

.silo-footer-brand-header a:hover,
.silo-footer-brand-header .silo-brand-logo-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.silo-footer-brand-header img,
.silo-footer-brand-header .custom-logo,
.silo-footer-brand-header .silo-brand-logo-img {
  height: 32px;
  max-height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.silo-footer-brand-desc {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
}

.silo-footer-contact-box {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--silo-radius-lg, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.silo-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.silo-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(239, 133, 46, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silo-orange-500, #ef852e);
  flex-shrink: 0;
}

.silo-contact-icon svg {
  width: 17px;
  height: 17px;
}

.silo-contact-content {
  display: flex;
  flex-direction: column;
  text-align: right;
  flex: 1;
}

.silo-contact-title {
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--silo-transition-fast, 0.18s ease);
}

.silo-contact-title:hover {
  color: var(--silo-orange-500, #ef852e);
}

.silo-contact-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

/* ── Col 2+3: Links Desktop (36%) ────────────────────────────── */
.silo-footer-col-links-desktop {
  flex: 0 0 36%;
  display: flex;
  gap: 40px;
}

.silo-footer-links-group {
  flex: 1 1 0;
}

.silo-footer-heading {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  position: relative;
}

.silo-footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.silo-footer-links-list li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color var(--silo-transition-fast, 0.18s ease), transform var(--silo-transition-fast, 0.18s ease);
}

.silo-footer-links-list li a:hover {
  color: var(--silo-orange-500, #ef852e);
  transform: translateX(-3px);
}

/* ── Col 4: Newsletter & Trust Badges (26%) ──────────────────── */
.silo-footer-col-newsletter {
  flex: 0 0 26%;
  max-width: 320px;
}

.silo-footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.silo-footer-newsletter-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.silo-social-icon-btn {
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--silo-radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background-color var(--silo-transition-fast, 0.18s ease), border-color var(--silo-transition-fast, 0.18s ease),
              color var(--silo-transition-fast, 0.18s ease), transform var(--silo-transition-fast, 0.18s ease);
}

.silo-social-icon-btn:hover {
  background-color: var(--silo-orange-500, #ef852e);
  border-color: var(--silo-orange-500, #ef852e);
  color: var(--silo-blue-900, #0d203d);
  transform: translateY(-2px);
}

.silo-social-icon-btn:focus-visible {
  outline: 2px solid var(--silo-orange-500, #ef852e);
  outline-offset: 2px;
}

.silo-social-icon-btn svg {
  width: 16px;
  height: 16px;
}

.silo-newsletter-heading {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.silo-newsletter-form {
  position: relative;
  width: 100%;
}

.silo-hp-field {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.silo-newsletter-inputs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.silo-newsletter-input {
  height: 40px;
  flex: 1 1 auto;
  min-width: 0;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--silo-radius-md, 8px);
  color: #ffffff;
  font-size: 13px;
  padding: 0 14px;
  outline: none;
  font-family: inherit;
  transition: border-color var(--silo-transition-fast, 0.18s ease), background-color var(--silo-transition-fast, 0.18s ease);
}

.silo-newsletter-input:focus {
  border-color: var(--silo-orange-500, #ef852e);
  background-color: rgba(255, 255, 255, 0.12);
}

.silo-newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.silo-newsletter-submit {
  height: 40px;
  flex-shrink: 0;
  background-color: var(--silo-orange-500, #ef852e);
  color: var(--silo-blue-900, #0d203d);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--silo-radius-md, 8px);
  padding: 0 20px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--silo-transition-fast, 0.18s ease), transform var(--silo-transition-fast, 0.18s ease);
}

.silo-newsletter-submit:hover {
  background-color: var(--silo-orange-600, #e0741e);
  transform: translateY(-1px);
}

/* ── Trust Badges in Footer ──────────────────────────────────── */
.silo-footer-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.silo-trust-badge-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--silo-radius-md, 8px);
  padding: 10px 12px;
  transition: transform var(--silo-transition-fast, 0.18s ease), box-shadow var(--silo-transition-fast, 0.18s ease);
}

.silo-trust-badge-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.silo-trust-badge-item img {
  display: block;
  object-fit: contain;
  transition: opacity var(--silo-transition-fast, 0.18s ease);
}

.silo-trust-badge-item:hover img {
  opacity: 1;
}

/* ── Bottom Bar ──────────────────────────────────────────────── */
.silo-footer-bottom-bar {
  background-color: var(--silo-blue-950, #081528);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 0;
}

.silo-bottom-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.silo-bottom-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.silo-bottom-links a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--silo-transition-fast, 0.18s ease);
}

.silo-bottom-links a:hover {
  color: #ffffff;
}

.silo-bottom-dot {
  color: rgba(255, 255, 255, 0.25);
  font-size: 10px;
}

.silo-bottom-copyright p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Hide desktop links on mobile, show accordion */
.silo-footer-accordion-mobile {
  display: none;
}

/* ── Mobile / Tablet Accordion & Responsive Breakpoints ──────── */
@media (max-width: 1024px) {
  .silo-footer-trust-strip { display: none !important; }
  .silo-footer-main { padding: 28px 0 20px !important; }
  .silo-footer-columns { flex-direction: column !important; gap: 20px !important; }
  .silo-footer-col-brand,
  .silo-footer-col-newsletter { flex: 1 1 100% !important; max-width: 100% !important; }
  .silo-footer-col-links-desktop { display: none !important; }
  .silo-footer-accordion-mobile {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .silo-accordion-item {
    width: 100% !important;
  }
  .silo-accordion-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 13px 16px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--silo-radius-md, 8px) !important;
    cursor: pointer !important;
    transition: background-color var(--silo-transition-fast, 0.18s ease), border-color var(--silo-transition-fast, 0.18s ease) !important;
  }
  .silo-accordion-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
  }
  .silo-accordion-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: right !important;
    flex: 1 !important;
  }
  .silo-accordion-arrow {
    width: 9px !important;
    height: 9px !important;
    border-right: 2px solid var(--silo-orange-500, #ef852e) !important;
    border-bottom: 2px solid var(--silo-orange-500, #ef852e) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transform-origin: center !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
  }
  .silo-accordion-toggle[aria-expanded="true"] .silo-accordion-arrow {
    transform: rotate(-135deg) translateY(2px) !important;
  }
  .silo-accordion-panel {
    background: rgba(21, 49, 92, 0.6) !important;
    border: 1px solid rgba(239, 133, 46, 0.15) !important;
    border-radius: var(--silo-radius-lg, 12px) !important;
    overflow: hidden !important;
    margin-top: 4px !important;
    transition: all 0.3s ease !important;
  }
  .silo-accordion-panel[hidden] {
    display: none !important;
  }
  .silo-accordion-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .silo-accordion-links li {
    border-bottom: 1px solid rgba(239, 133, 46, 0.08) !important;
  }
  .silo-accordion-links li:last-child {
    border-bottom: none !important;
  }
  .silo-accordion-links li a {
    display: block !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    text-decoration: none !important;
    border-right: 3px solid transparent !important;
    transition: all var(--silo-transition-base, 0.25s ease) !important;
  }
  .silo-accordion-links li a:hover {
    background-color: rgba(239, 133, 46, 0.08) !important;
    color: var(--silo-orange-500, #ef852e) !important;
    border-right-color: var(--silo-orange-500, #ef852e) !important;
    padding-right: 22px !important;
  }
  .silo-footer-bottom-bar {
    padding: 16px 0 !important;
  }
  .silo-bottom-bar-row {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .silo-bottom-links {
    justify-content: center !important;
  }

  /* Suppress site footer on buyer profile SPA on mobile/tablet */
  body.is-profile-page .site-footer,
  body:has(.sk-buyer-profile-site-wrapper) .site-footer,
  body:has(.silokala-buyer-profile-root) .site-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
}