/*
Theme Name: Conextile Platform
Theme URI: https://conextile.com
Author: Conextile
Description: B2B platform for the global used textile industry
Version: 2.0
*/

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* .page-wrap: the shared content-width wrapper (max-width + side padding)
   used by footer.php, which is loaded on every single page. This rule used
   to exist only inside template-home.php's own scoped <style> block, so the
   homepage looked fine but every other page's footer -- register, login,
   FAQ, terms, privacy, complaints, the dashboard, etc. -- rendered this
   class with no CSS at all: no max-width, no side padding, so the logo and
   text sat flush against the browser edge instead of matching the header's
   margins. Defined here instead, in the global stylesheet loaded on every
   page, so the footer (and anything else using this class) is consistent
   site-wide. template-home.php's own copy is left in place -- identical
   values, so it's a harmless no-op override there, not a conflict. */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
@media (max-width: 768px) { .page-wrap { padding: 0 16px; } }

/* Color strategy: blue (--accent) for trust/navigation/informational
   elements, dark slate (--text-*) instead of pure black for all copy, and a
   white/light-gray base (--ink/--ink2) for a calm, readable background.
   Accents layer on top for anything actionable: green (--green) for real
   conversion actions (Register, Post Offer, Buy/Message a company — the
   "yes, do this" clicks), orange (--orange) for things that should draw the
   eye without reading as urgent/destructive (Write a Review, Saved), and
   teal (--teal) reserved for the chat/messaging surfaces specifically. */
:root {
  --ink:          #f1f5f9;
  --ink2:         #ffffff;
  --ink3:         #ffffff;

  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: rgba(37,99,235,.15);

  --green:        #16a34a;
  --green-hover:  #15803d;
  --green-light:  rgba(22,163,74,.15);

  --orange:       #ea580c;
  --orange-hover: #9a3412;
  --orange-light: rgba(234,88,12,.15);

  --teal:         #0e7490;
  --teal-hover:   #0f766e;
  --teal-light:   rgba(14,116,144,.15);

  --glass:        rgba(15,23,42,.06);
  --glass-border: rgba(15,23,42,.28);
  --glass-hover:  rgba(15,23,42,.12);

  --text-primary:   rgba(15,23,42,.92);
  --text-secondary: #1e293b;
  --text-muted:     #334155;

  --c-red: #f87171;

  --border: rgba(15,23,42,.28);

  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-card: 0 4px 24px rgba(0,0,0,.4);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════
   NAVIGATION — dark, tall, full logo
══════════════════════════════════════════════════════ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(15,17,23,.92);
  border-bottom: 1px solid rgba(15,23,42,0.225);
  width: 100%;
}

.site-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 80px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

.site-nav__left  { display: flex; align-items: center; justify-content: flex-start; }
.site-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Logo */
.site-nav__logo { display: flex; align-items: center; justify-content: center; text-decoration: none; }

.tc-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tc-logo__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.tc-logo__text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
}

.tc-logo__text span { color: #2563eb; }

/* Nav buttons */
.btn--nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn--nav-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(15,23,42,0.35);
}

.btn--nav-ghost:hover { background: var(--glass); color: var(--text-primary); border-color: rgba(15,23,42,0.55); }

.btn--nav-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(37,99,235,.35);
}

.btn--nav-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: all .15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(37,99,235,.35); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn--green { background: var(--green); color: #fff; box-shadow: 0 2px 12px rgba(22,163,74,.3); }
.btn--green:hover { background: #15803d; transform: translateY(-1px); }

.btn--ghost { background: var(--glass); color: var(--text-secondary); border: 1px solid var(--glass-border); }
.btn--ghost:hover { background: var(--glass-hover); color: var(--text-primary); }

.btn--lg { padding: 14px 32px; font-size: 15px; border-radius: var(--radius-md); }

/* ── Badges ───────────────────────────────────────────── */
.badge-dark {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
}

.badge-dark--sorter     { background: rgba(37,99,235,.2);  color: #1d4ed8; }
.badge-dark--collector  { background: rgba(180,83,9,.2);   color: #b45309; }
.badge-dark--wholesaler { background: rgba(22,163,74,.2);  color: #15803d; }
.badge-dark--retailer   { background: rgba(124,58,237,.2); color: #6d28d9; }

/* ── Dark form fields ─────────────────────────────────── */
.dark-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.dark-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dark-field label .req { color: #f87171; margin-left: 2px; }

.dark-field input,
.dark-field select,
.dark-field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.dark-field input:focus,
.dark-field select:focus,
.dark-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.dark-field input::placeholder,
.dark-field textarea::placeholder { color: var(--text-muted); }
.dark-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(15,23,42,0.3)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.dark-field select option { background: #ffffff; color: #fff; }
.dark-field textarea { resize: vertical; min-height: 90px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full { grid-column: 1 / -1; }

/* ── Footer ───────────────────────────────────────────── */
.site-footer {
  background: #f1f5f9;
  border-top: 1px solid var(--glass-border);
  padding: 52px 0 28px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand__text { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-top: 14px; max-width: 260px; }

.footer-col__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.footer-col__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col__links a { font-size: 13px; color: var(--text-muted); transition: color .15s; }
.footer-col__links a:hover { color: var(--text-primary); }

.site-footer__bottom { border-top: 1px solid var(--glass-border); padding-top: 22px; display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav__inner { padding: 0 18px; height: 68px; }
  .tc-logo__text { font-size: 18px; }
  .tc-logo__icon { width: 36px; height: 36px; }
  .field-row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* ── RTL Support (Arabic) ─────────────────────────────── */
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="rtl"] .site-nav__left  { justify-content: flex-end; }
[dir="rtl"] .site-nav__right { justify-content: flex-start; }
[dir="rtl"] .tc-logo { flex-direction: row-reverse; }
[dir="rtl"] .hero__inner { direction: rtl; }
[dir="rtl"] .value-list li { flex-direction: row-reverse; }
[dir="rtl"] .db-left { border-right: none; border-left: 1px solid rgba(15,23,42,0.2); }
[dir="rtl"] .db-right { border-left: none; border-right: 1px solid rgba(15,23,42,0.2); }
[dir="rtl"] .db-item.active { border-left: none; border-right: 3px solid #2563eb; }
[dir="rtl"] .site-footer__grid { direction: rtl; }

/* ── Language Switcher ────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.lang-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.3);
  background: transparent;
  color: rgba(15,23,42,.4);
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  line-height: 1;
}

.lang-btn:hover { background: rgba(15,23,42,.08); color: rgba(15,23,42,.8); }
.lang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — complete mobile overhaul
   Target: phones 320px–768px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── NAV ── */
  .site-nav__inner {
    height: 60px !important;
    padding: 0 14px !important;
  }

  .site-nav__logo img {
    height: 36px !important;
    max-width: 180px !important;
  }

  .btn--nav {
    font-size: 11px !important;
    padding: 6px 11px !important;
    border-radius: 7px !important;
  }

  .lang-switcher { display: none !important; }

  /* ── LOGIN PAGE ── */
  .login-card {
    margin: 20px 16px !important;
    padding: 28px 20px !important;
    border-radius: 14px !important;
  }

  .login-logo { height: 44px !important; }

  /* ── REGISTER PAGE ── */
  .reg-card {
    margin: 16px !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }

  .step-indicator { overflow-x: auto; padding-bottom: 4px; }

  .field-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .reg-form input,
  .reg-form select,
  .reg-form textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
  }

  /* ── PENDING PAGE ── */
  .pending-card {
    margin: 20px 16px !important;
    padding: 32px 20px !important;
  }

  /* ── FOOTER ── */
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .site-footer { padding: 40px 20px !important; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE ADMIN BAR
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tc-admin-bar {
    font-size: 10px !important;
    padding: 5px 12px !important;
    gap: 6px !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  .tc-admin-bar a { font-size: 10px !important; }
}