/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
  --line: 34,197,94;
  --text: #e7f7ec;
  --muted: #9ab7a6;
  --accent: #9ef0c3;

  --card-bg: #eaffea;
  --card-text: #0e3a2b;
  --card-label: #0a2f22;
  --card-border: rgba(13, 122, 72, 0.35);
  --card-border-hover: rgba(13, 122, 72, 0.65);

  --g-700: #0f4f39; /* dark green for icons/borders */

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --radius: 14px;
}
html, body { height: 100%; }

body.bg-overlay{
  background: linear-gradient(rgba(3,20,12,0.75),rgba(3,20,12,0.75)),
              url("./login_background.png") center/cover fixed no-repeat;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ===== Container & header ===== */
.contacts-shell{
  max-width: 1280px;

  /* MATCHED TO ABOUT US DESKTOP: top 110px, bottom 64px */
  margin: 46px auto 48px;

  border-radius: 18px;
  padding: clamp(16px, 2.5vw, 28px);
  border: 2px solid rgba(var(--line), 0.6);
  background: linear-gradient(180deg, rgba(15,49,34,0.55), rgba(10,28,20,0.55));
  box-shadow: 0 15px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--line),0.25) inset;
  backdrop-filter: blur(8px);
  min-height: 72vh;
}

.title-banner{
  width: 100%;
  font-size: clamp(22px, 3.8vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  padding: 14px 18px;
  color: var(--text);
  text-align: center;
  border-radius: 14px;
  border: 2px solid rgba(var(--line),0.65);
  box-shadow: 0 0 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--line),0.2) inset;
  background: linear-gradient(90deg,rgba(4,18,10,1) 0%, rgba(3,74,31,1) 50%, rgba(4,18,10,1) 100%);
  margin-bottom: 16px;
}

/* ===== Tabs & search ===== */
.tabs-wrap{ margin-bottom: 14px; }
.tabs-pill{
  display: inline-flex; gap: 10px; padding: 4px;
  background: rgba(8, 32, 24, 0.45);
  border: 1px solid rgba(var(--line),0.35);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(var(--line),0.18) inset;
}
.tab-btn{
  border: 1px solid rgba(var(--line),0.35);
  background: rgba(8, 32, 24, 0.65);
  color: var(--text);
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .18s, box-shadow .18s, color .18s, border-color .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  min-width: 44px; min-height: 44px;
}
.tab-btn:hover{ background: rgba(12, 40, 28, 0.7); border-color: rgba(var(--line),0.6); }
.tab-btn.is-active{
  background: var(--accent); color: #082018; border-color: rgba(var(--line),0.85);
  box-shadow: 0 0 0 2px rgba(158,240,195,.35);
}

.search-wrapper{
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  margin-top: 14px; margin-bottom: 18px;
}
#contact-search{
  width: 100%; padding: 12px 16px; border-radius: 12px;
  border: 1px solid rgba(var(--line),0.35); background: rgba(8, 32, 24, 0.55);
  color: var(--text); outline: none; font-size: 16px;
}
#contact-search::placeholder{ color: var(--muted); }
.btn-search, .btn-reset{
  padding: 12px 20px; border-radius: 12px; font-weight: 700; min-height: 44px;
}
.btn-search{ border: 1px solid rgba(var(--line),0.6); background: rgba(8, 50, 28, 0.85); color: var(--text); }
.btn-search:hover{ filter: brightness(1.08); }
.btn-reset{ border: 1px solid rgba(var(--line),0.35); background: rgba(230,230,230,0.95); color: #233; }
.btn-reset:hover{ filter: brightness(0.98); }

/* ===== Grid ===== */
.contacts-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

/* ===== Card ===== */
.contact-card{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--card-text);
  padding: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  transition: transform .18s, border-color .18s, filter .18s;
  overflow: hidden; /* keep everything inside the card */
}
.contact-card:hover{
  transform: translateY(-3px);
  border-color: var(--card-border-hover);
  filter: saturate(1.04);
}

/* Left info block — give room for the actions on the right */
.contact-main{ padding-right: 140px; } /* room for compact rail */
.contact-main * { text-align: left !important; }
.contact-main h2{
  font-size: clamp(18px, 2.4vw, 20px);
  font-weight: 800; margin-bottom: 8px; color: var(--card-label);
}
.contact-main p{
  margin: 6px 0;
  font-size: clamp(14px, 2.5vw, 15px);
  color: var(--card-text);
}
.contact-main p strong{ color: var(--card-label); }

/* ===== Right action rail (compact, fixed inside card) ===== */
.contact-actions{
  position: absolute;
  top: 12px; right: 12px;
  width: 120px;                 /* compact so text has space */
  display: flex; flex-direction: column; gap: 8px;
}

/* Buttons */
.action-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 12px; height: 40px;
  border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: .2px;
  border: 2px solid var(--g-700); color: var(--g-700); background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .14s, filter .14s;
  width: 100%;
}
.action-btn i{ font-size: 0.95rem; line-height: 1; }
.action-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.action-btn:active{ transform: translateY(0); }
.action-btn.is-disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Facebook round icon (first) */
.action-icon{
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--g-700); border: 2px solid var(--g-700);
  text-decoration: none; box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .14s, filter .14s;
  margin-left: auto;            /* right align small icon above buttons */
}
.action-icon:hover{ transform: translateY(-1px); }
.action-icon.is-disabled{ opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Empty state */
.contacts-grid .empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: var(--space-4);
}

/* ===== Responsive ===== */

/* 3→2 columns on large screens */
@media (max-width: 1199px){
  .contacts-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}

/* LARGE TABLETS & SMALL LAPTOPS (≤ 992px)
   — spacing matched to About Us (96px / 56px) */
@media (max-width: 992px){
  .contacts-shell{
    margin: 46px auto 48px;
    padding: 24px;
  }
}

/* Medium tablets: actions drop below content */
@media (max-width: 820px){
  /* Actions drop below content, inline grid: FB | Call | SMS */
  .contact-main{ padding-right: 0; }
  .contact-actions{
    position: static; width: 100%; margin-top: 10px;
    display: grid; grid-template-columns: 44px 1fr 1fr; gap: 10px;
  }
  .action-btn{ width: 100%; }
  .action-icon{ margin-left: 0; }
}

/* TABLETS & BIG PHONES (≤ 768px)
   — single column, spacing matched to About Us (90px / 40px) */
@media (max-width: 768px){
  .contacts-shell{
    margin: 46px auto 48px;
    padding: var(--space-4);
    border-width: 1.5px;
  }
  .tabs-wrap{ width: 100%; }
  .tabs-pill{
    gap: 6px; padding: 6px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tab-btn{ width: 100%; padding: 12px 14px; }
  .search-wrapper{ grid-template-columns: 1fr; }
  .btn-search, .btn-reset{ width: 100%; }
  .contacts-grid{ grid-template-columns: 1fr; }
}

/* SMALL PHONES (≤ 480px)
   — extra top margin like About Us (96px / 28px) */
@media (max-width: 480px){
  .contacts-shell{
    margin: 46px auto 48px;
    padding: 16px;
  }
}

/* EXTRA-SMALL PHONES (≤ 360px)
   — keep spacing consistent, tighten gaps */
@media (max-width: 360px){
  .contacts-shell{
    margin: 46px auto 48px;
  }
  .contacts-grid { gap: 12px; }
}