/*
 * FITIG TradeHub — Frontend Styles
 * Matches fitigassociation.com FITIG Theme v2.0 brand palette
 * --navy: #1A3C6E | --blue: #2D5FA0 | --teal: #00c896 | --gold: #f0a500
 */
:root {
  --fth-navy:  #1A3C6E;
  --fth-blue:  #2D5FA0;
  --fth-teal:  #00c896;
  --fth-gold:  #f0a500;
  --fth-bg:    #f4f6f9;
  --fth-card:  #ffffff;
  --fth-text:  #1d2d44;
  --fth-muted: #6c7a8d;
  --fth-r:     10px;
}
*,*::before,*::after { box-sizing: border-box; }

/* ── Layout ── */
.fth-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.fth-hero { background: linear-gradient(135deg,var(--fth-navy),var(--fth-blue)); color: #fff; padding: 60px 20px; text-align: center; }
.fth-hero h1 { font-size: clamp(1.6rem,3vw,2.6rem); margin: 0 0 12px; }
.fth-hero p  { opacity: .85; font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

/* ── Grid ── */
.fth-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 20px; margin-top: 28px; }

/* ── Card ── */
.fth-card {
  background: var(--fth-card);
  border-radius: var(--fth-r);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.fth-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.fth-card-img { width: 100%; height: 160px; object-fit: cover; background: var(--fth-bg); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.fth-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.fth-card-title { font-size: 1rem; font-weight: 700; color: var(--fth-navy); margin: 0; line-height: 1.35; }
.fth-card-desc  { font-size: .85rem; color: var(--fth-muted); flex: 1; }
.fth-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid #eef0f4; }
.fth-price { font-size: 1.15rem; font-weight: 700; color: var(--fth-navy); }
.fth-member-price { font-size: .8rem; color: var(--fth-teal); display: block; }
.fth-badge { font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; }
.fth-badge-level { background: #e8f4fd; color: var(--fth-blue); }
.fth-badge-cat   { background: #e8fdf5; color: #00875a; }

/* ── Buttons ── */
.fth-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  min-height: 44px;
  text-align: center;
}
.fth-btn:hover { opacity: .88; transform: translateY(-1px); }
.fth-btn-primary { background: var(--fth-navy); color: #fff; }
.fth-btn-teal    { background: var(--fth-teal); color: #fff; }
.fth-btn-outline { background: transparent; color: var(--fth-navy); border: 2px solid var(--fth-navy); }
.fth-btn-gold    { background: var(--fth-gold); color: #fff; }
.fth-btn-block   { display: block; width: 100%; }
.fth-btn-sm      { padding: 7px 14px; font-size: .8rem; min-height: 36px; }

/* ── Filter bar ── */
.fth-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; align-items: center; }
.fth-search  { flex: 1; min-width: 200px; padding: 10px 14px; border: 2px solid #dde2ec; border-radius: 8px; font-size: .9rem; }
.fth-search:focus { outline: none; border-color: var(--fth-blue); }
.fth-cat-btn { padding: 8px 14px; border: 2px solid #dde2ec; border-radius: 20px; background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600; transition: all .2s; }
.fth-cat-btn.active,.fth-cat-btn:hover { background: var(--fth-navy); color: #fff; border-color: var(--fth-navy); }

/* ── Single course / product ── */
.fth-single { display: grid; grid-template-columns: 1fr 320px; gap: 32px; margin-top: 32px; }
.fth-sidebar { position: sticky; top: 100px; align-self: start; background: var(--fth-card); border-radius: var(--fth-r); box-shadow: 0 2px 12px rgba(0,0,0,.09); padding: 24px; }
.fth-sidebar .fth-price { font-size: 1.8rem; display: block; margin-bottom: 4px; }

/* ── Lessons list ── */
.fth-lessons { list-style: none; padding: 0; margin: 0; }
.fth-lessons li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef0f4; font-size: .9rem; }
.fth-lessons li:last-child { border-bottom: none; }
.fth-lesson-done { color: var(--fth-teal); font-weight: 700; }
.fth-progress-bar { height: 8px; background: #eef0f4; border-radius: 4px; overflow: hidden; margin: 12px 0; }
.fth-progress-fill { height: 100%; background: var(--fth-teal); border-radius: 4px; transition: width .4s; }

/* ── Marketplace ── */
.fth-listing-card .fth-card-img { font-size: 2rem; }
.fth-hs-badge { font-size: .72rem; color: var(--fth-muted); }

/* ── RFP Board ── */
.fth-rfp-card { border-left: 4px solid var(--fth-gold); }
.fth-rfp-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--fth-muted); }
.fth-rfp-meta span { background: var(--fth-bg); padding: 3px 10px; border-radius: 20px; }

/* ── Escrow widget ── */
.fth-escrow-box { background: #f0f9f5; border: 2px solid var(--fth-teal); border-radius: var(--fth-r); padding: 20px; margin-top: 20px; }
.fth-escrow-box h4 { color: var(--fth-navy); margin: 0 0 10px; }
.fth-escrow-step { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-size: .85rem; }
.fth-escrow-step-num { background: var(--fth-teal); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }

/* ── UPI QR modal ── */
.fth-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; }
.fth-modal-overlay.open { display: flex; }
.fth-modal { background: #fff; border-radius: 14px; max-width: 480px; width: 100%; padding: 28px; position: relative; }
.fth-modal-close { position: absolute; top: 14px; right: 16px; font-size: 1.4rem; cursor: pointer; background: none; border: none; color: #999; }
.fth-qr-img { display: block; margin: 0 auto 12px; border: 2px solid #eee; border-radius: 10px; }
.fth-utr-input { width: 100%; padding: 10px 14px; border: 2px solid #dde2ec; border-radius: 8px; font-size: .95rem; margin: 10px 0; }

/* ── Forms ── */
.fth-form { display: grid; gap: 14px; }
.fth-form label { font-weight: 600; font-size: .85rem; color: var(--fth-navy); display: block; margin-bottom: 4px; }
.fth-form input,.fth-form select,.fth-form textarea {
  width: 100%; padding: 10px 14px; border: 2px solid #dde2ec; border-radius: 8px;
  font-size: .95rem; font-size: 16px; /* prevent iOS zoom */
  transition: border-color .2s;
}
.fth-form input:focus,.fth-form select:focus,.fth-form textarea:focus { outline: none; border-color: var(--fth-blue); }
.fth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Tabs ── */
.fth-tabs { display: flex; gap: 0; border-bottom: 2px solid #eef0f4; margin-bottom: 24px; }
.fth-tab { padding: 10px 20px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--fth-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.fth-tab.active { color: var(--fth-navy); border-bottom-color: var(--fth-navy); }

/* ── Alerts ── */
.fth-alert { padding: 14px 18px; border-radius: 8px; margin: 14px 0; font-size: .9rem; }
.fth-alert-success { background: #e8fdf5; color: #00875a; border: 1px solid #b2dfc9; }
.fth-alert-error   { background: #fdf0ed; color: #c0392b; border: 1px solid #f5b7b1; }
.fth-alert-info    { background: #eaf2ff; color: var(--fth-blue); border: 1px solid #b8d4f5; }

/* ── Member badge ── */
.fth-member-tag { background: linear-gradient(90deg,var(--fth-gold),#e67e22); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .fth-single { grid-template-columns: 1fr; }
  .fth-sidebar { position: static; }
  .fth-form-grid { grid-template-columns: 1fr; }
  .fth-hero { padding: 40px 16px; }
}