/* ================================================================
   ForumCosta Business Cards v7
   Author: Basit Iqbal
   - max-width 640px (desktop)
   - compact font sizes throughout
   - business meta color #e63946
   - no overflow on mobile
   - all styles strictly scoped to .gp-card or .fcbc-* prefixes
   - zero global CSS side effects
================================================================ */

/* Scoped font reset — ONLY inside our card, never global */
.gp-card, .gp-card *, .gp-card *::before, .gp-card *::after,
.fcbc-modal-overlay, .fcbc-modal-overlay *, .fcbc-modal-overlay *::before, .fcbc-modal-overlay *::after,
#fcbc-toast, #fcbc-open-form-btn {
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}
.gp-card *, .gp-card *::before, .gp-card *::after { margin: 0; padding: 0; }

/* ================================================================
   CARD — max 640px, compact
================================================================ */
.gp-card {
  position: relative;
  width: 100%;
  max-width: 640px;           /* ← 640px desktop max */
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  padding: 22px 28px 18px;   /* compact padding */
}
.gp-card.fcbc-card-new {
  animation: fcbc-ce .3s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes fcbc-ce {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to   { opacity:1; transform:none; }
}

/* Decorative circles */
.gp-deco-pink {
  position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(230,170,175,0.20); top:-35px; right:80px;
  pointer-events:none;
}
.gp-deco-ring {
  position:absolute; width:260px; height:260px; border-radius:50%;
  border:40px solid rgba(180,185,195,0.11); bottom:-90px; right:-50px;
  pointer-events:none;
}
.gp-deco-ring-inner {
  position:absolute; width:160px; height:160px; border-radius:50%;
  border:26px solid rgba(180,185,195,0.09); bottom:-40px; right:16px;
  pointer-events:none;
}

/* Watermark */
.gp-watermark {
  position:absolute; bottom:14px; right:24px;
  font-size:38px; font-weight:800;
  color:rgba(160,168,180,0.15); line-height:1; letter-spacing:-1px;
  text-align:right; pointer-events:none; user-select:none;
}
.gp-watermark .gp-dot { color:rgba(220,90,90,0.20); }

/* ── Header ── */
.gp-header {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px;
  position:relative; z-index:2;
}
.gp-header-left { display:flex; align-items:center; gap:14px; min-width:0; flex:1; }

/* Logo circle */
.gp-logo-circle {
  width:58px; height:58px; border-radius:50%;
  background:#f0ebe3;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.gp-logo-circle img {
  width:100%; height:100%; object-fit:contain;
  padding:5px;
}
/* Initial letter fallback */
.gp-logo-circle.gp-logo-init { background:#e63946; }
.gp-logo-circle.gp-logo-init span {
  font-size:1.5rem; font-weight:900; color:#fff; line-height:1;
}

/* Business name */
.gp-business-info { min-width:0; }
.gp-business-info h1 {
  font-size:1.15rem; font-weight:800;
  color:#1a1a2e; line-height:1.15; letter-spacing:-0.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gp-business-info h1 a { text-decoration:none; color:inherit; }
.gp-business-info h1 a:hover { color:#e63946; }
.gp-business-meta {
  display:flex; gap:12px; margin-top:3px; flex-wrap:wrap;
}
.gp-business-meta span {
  font-size:0.72rem; font-weight:700;
  color:#e63946;                /* ← red meta color */
  text-transform:uppercase; letter-spacing:0.04em;
}

/* Discount */
.gp-discount {
  font-size:0.72rem; font-weight:700;
  color:#1a1a2e; white-space:nowrap;
  text-align:right; padding-top:3px;
  position:relative; z-index:2; flex-shrink:0;
  background:#fff8f8; border:1px solid #fde0e2;
  padding:4px 8px; border-radius:4px;
  line-height:1.3;
}
.gp-discount strong { color:#e63946; }

/* ── Description ── */
.gp-description {
  margin-top:14px; position:relative; z-index:2;
}
.gp-description p {
  font-size:0.82rem; color:#3c3c4e; line-height:1.55;
  font-weight:400; margin-bottom:2px;
}
.gp-description .gp-bold-note {
  font-size:0.76rem; font-weight:800; color:#1a1a2e; margin-top:4px;
}

/* ── Contact section ── */
.gp-contact {
  margin-top:14px; display:flex; flex-direction:column; gap:7px;
  position:relative; z-index:2;
  padding-top:12px; border-top:1px solid #eceef1;
}
.gp-contact-row { display:flex; align-items:flex-start; gap:10px; }
.gp-contact-icon {
  width:22px; height:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.gp-contact-icon svg { width:17px; height:17px; }
.gp-contact-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.gp-contact-text .gp-main {
  font-size:0.8rem; font-weight:700; color:#1a1a2e;
  word-break:break-word; text-decoration:none;
}
.gp-contact-text a.gp-main:hover { color:#e63946; }
.gp-contact-text .gp-link { color:#5b87c5; }
.gp-contact-text .gp-sub {
  font-size:0.72rem; font-weight:600; color:#6b9fd4; text-decoration:none;
}
.gp-contact-text .gp-sub:hover { text-decoration:underline; }

/* Social */
.gp-social-row { display:flex; align-items:center; gap:10px; margin-top:3px; }
.gp-social-icon {
  width:28px; height:28px; display:flex;
  align-items:center; justify-content:center;
  text-decoration:none !important; transition:opacity .2s;
}
.gp-social-icon:hover { opacity:.7; }
.gp-social-icon svg { width:24px; height:24px; }

/* ── Footer ── */
.gp-footer {
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding-top:10px;
  border-top:1px solid #f2f3f5;
  position:relative; z-index:2; flex-wrap:wrap;
}
.fcbc-shbtn {
  display:inline-flex; align-items:center; gap:4px;
  background:#f3f4f6; border:none; padding:4px 10px;
  border-radius:20px; font-size:0.68rem; font-weight:700;
  cursor:pointer; color:#374151; text-transform:uppercase;
  letter-spacing:.04em; transition:background .14s; position:relative;
}
.fcbc-shbtn:hover { background:#e5e7eb; }
.fcbc-shconf {
  display:none; position:absolute; bottom:calc(100% + 5px); left:50%;
  transform:translateX(-50%); background:#1a1a2e; color:#fff;
  font-size:0.62rem; padding:3px 7px; border-radius:4px;
  white-space:nowrap; pointer-events:none; font-weight:700;
}
.fcbc-shconf::after {
  content:''; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); border:4px solid transparent;
  border-top-color:#1a1a2e;
}
.gp-manage-actions { display:flex; gap:5px; align-items:center; margin-left:auto; }
.gp-act {
  display:inline-flex; align-items:center; gap:3px;
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:3px 8px;
  border:none; border-radius:3px; cursor:pointer;
  text-decoration:none; background:#f3f4f6; color:#374151;
  transition:background .13s; line-height:1.4;
}
.gp-act-edit { color:#2563eb !important; }
.gp-act-edit:hover { background:#eff6ff; }
.gp-act-del { color:#e63946 !important; }
.gp-act-del:hover { background:#fff1f2; }

/* ================================================================
   FORUMWP THREAD OVERRIDES
   Card reply rows render with full ForumWP reply UI (author, date,
   vote up/down, like, report, reply — identical to normal replies).
   We only override layout so the card body sits cleanly inside the
   standard reply shell. We do NOT hide fmwp-reply-bottom because
   that is where ForumWP renders votes, likes and action buttons.
================================================================ */
.fcbc-card-reply-row .fmwp-reply-base {
  display:flex !important;           /* keep flex — avatar + data side by side */
  flex-wrap:wrap !important;
  padding:0 !important; background:transparent !important;
  border:none !important; box-shadow:none !important;
}
/* Avatar keeps its normal width and stays visible */
.fcbc-card-reply-row .fmwp-reply-avatar { flex-shrink:0; }
/* Data column fills remaining width */
.fcbc-card-reply-row .fmwp-reply-data {
  flex:1 1 0 !important; min-width:0 !important;
  max-width:100% !important; padding:0 0 0 6px !important;
}
/* Author name + date row — keep exactly like a normal reply */
.fcbc-card-reply-row .fmwp-reply-top { margin-bottom:6px !important; }
/* Card body sits inside content, no extra bottom margin */
.fcbc-card-reply-row .fmwp-reply-content { margin-bottom:0 !important; width:100% !important; }
/* Vote/like/actions bar — do NOT hide; let ForumWP render it normally */
/* .fcbc-card-reply-row .fmwp-reply-bottom is intentionally NOT touched */
.fcbc-card-reply-row .gp-card { max-width:100% !important; margin:4px 0 !important; }
/* Ensure gp-card internal layout is never collapsed by ForumWP's flex context */
.fcbc-card-reply-row .gp-header  { display:flex !important; }
.fcbc-card-reply-row .gp-contact { display:flex !important; }
.fcbc-card-reply-row .gp-footer  { display:flex !important; }

/* ================================================================
   TOOLBAR BUTTON
================================================================ */
#fcbc-open-form-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 12px; background:#e63946; color:#fff !important;
  border:none; border-radius:0;
  font-size:0.72rem; font-weight:700; cursor:pointer;
  letter-spacing:.05em; text-transform:uppercase;
  vertical-align:middle; margin-left:4px;
  /* Fix mobile crop: never shrink, respect available space */
  white-space:nowrap; flex-shrink:0;
  /* overflow:hidden keeps shimmer animation inside button only */
  position:relative; overflow:hidden; line-height:1;
  transition:background .2s; box-sizing:border-box;
  animation:fcbc-pulse 2.8s ease-in-out infinite;
}
#fcbc-open-form-btn::after {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  animation:fcbc-shimmer 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes fcbc-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(230,57,70,.5); }
  55%      { box-shadow:0 0 0 7px rgba(230,57,70,0); }
}
@keyframes fcbc-shimmer {
  0%       { left:-100%; }
  55%,100% { left:160%; }
}
#fcbc-open-form-btn:hover { background:#c1121f; box-shadow:0 3px 14px rgba(230,57,70,.38); animation:none; }

/* ================================================================
   MODAL
================================================================ */
.fcbc-modal-overlay {
  display:none; position:fixed; inset:0; z-index:999999;
  background:rgba(8,12,28,.65);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:12px;
}
.fcbc-modal-overlay.fcbc-open { display:flex; animation:fcbc-fi .18s ease; }
@keyframes fcbc-fi  { from{opacity:0} to{opacity:1} }
@keyframes fcbc-su  { from{transform:translateY(22px) scale(.97);opacity:0} to{transform:none;opacity:1} }
.fcbc-modal {
  background:#fff; border-radius:4px;
  box-shadow:0 28px 70px rgba(0,0,0,.28);
  width:100%; max-width:520px; max-height:94vh;
  overflow-y:auto; overflow-x:hidden;
  animation:fcbc-su .22s cubic-bezier(.22,.61,.36,1) forwards;
  scrollbar-width:thin; scrollbar-color:#eee transparent;
}
.fcbc-modal::-webkit-scrollbar { width:4px; }
.fcbc-modal::-webkit-scrollbar-thumb { background:#e5e7eb; }
.fcbc-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 11px; border-bottom:2px solid #e63946;
  position:sticky; top:0; background:#fff; z-index:2;
}
.fcbc-mh-title { display:flex; align-items:center; gap:7px; }
.fcbc-mh-title h2 { margin:0; font-size:0.87rem; font-weight:800; color:#1d3557; letter-spacing:.01em; }
.fcbc-modal-close {
  background:none; border:none; cursor:pointer; color:#9ca3af;
  padding:4px; display:flex; align-items:center; border-radius:2px;
  transition:color .14s,background .14s; line-height:1;
}
.fcbc-modal-close:hover { color:#e63946; background:#fff1f2; }
.fcbc-modal-body { padding:13px 16px 16px; }
.fcbc-alert { padding:7px 10px; border-radius:2px; font-size:0.78rem; margin-bottom:9px; font-weight:600; }
.fcbc-ae { background:#fff1f2; color:#b91c1c; border-left:3px solid #e63946; }
.fcbc-as { background:#f0fdf4; color:#15803d; border-left:3px solid #16a34a; }
.fcbc-f { margin-bottom:8px; }
.fcbc-f label {
  display:flex; align-items:center; gap:3px;
  font-size:0.67rem; font-weight:700; color:#6b7280;
  margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em;
}
.fcbc-req span, .fcbc-f .fcbc-req-star { color:#e63946; }
.fcbc-f input[type=text], .fcbc-f input[type=email],
.fcbc-f input[type=url],  .fcbc-f input[type=tel],
.fcbc-f textarea, .fcbc-f select {
  display:block; width:100%; padding:6px 8px;
  border:1.5px solid #e5e7eb; border-radius:2px;
  font-size:0.82rem; color:#111827; background:#fff;
  box-sizing:border-box; transition:border-color .14s,box-shadow .14s;
  line-height:1.4;
}
.fcbc-f input:focus, .fcbc-f textarea:focus, .fcbc-f select:focus {
  outline:none; border-color:#e63946;
  box-shadow:0 0 0 2px rgba(230,57,70,.1);
}
.fcbc-f textarea { resize:vertical; min-height:56px; }
.fcbc-f select { appearance:auto; cursor:pointer; }
.fcbc-row { display:grid; gap:8px; margin-bottom:8px; }
.fcbc-row .fcbc-f { margin-bottom:0; }
.fcbc-r2 { grid-template-columns:1fr 1fr; }
.fcbc-r3 { grid-template-columns:repeat(3,1fr); }
.fcbc-slabel {
  font-size:0.65rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:#9ca3af;
  margin:9px 0 6px; padding-bottom:4px; border-bottom:1px solid #f3f4f6;
}
.fcbc-logo-row {
  display:flex; align-items:center; gap:10px;
  background:#fafafa; border:1.5px dashed #e5e7eb;
  border-radius:4px; padding:10px; margin-bottom:10px;
  transition:border-color .14s;
}
.fcbc-logo-row:hover { border-color:#e63946; }
.fcbc-lp {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:#f3f4f6; border:1.5px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fcbc-lp img { width:100%; height:100%; object-fit:contain; }
.fcbc-lu { display:flex; flex-direction:column; gap:3px; }
.fcbc-ubtn {
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
  background:#fff; border:1.5px solid #e63946; color:#e63946;
  border-radius:0; font-size:0.7rem; font-weight:700; cursor:pointer;
  transition:background .14s,color .14s; width:fit-content;
  text-transform:uppercase;
}
.fcbc-ubtn:hover { background:#e63946; color:#fff; }
.fcbc-uhint { font-size:0.66rem; color:#9ca3af; }
#fcbc-rl { font-size:0.68rem; color:#e63946; text-decoration:none; font-weight:600; }
#fcbc-rl:hover { text-decoration:underline; }
.fcbc-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:0; font-size:0.78rem; font-weight:700;
  cursor:pointer; border:none; transition:all .14s;
  letter-spacing:.04em; text-transform:uppercase; line-height:1;
}
.fcbc-bp { background:#e63946; color:#fff !important; }
.fcbc-bp:hover { background:#c1121f; }
.fcbc-bp:disabled { background:#f4a5aa; cursor:not-allowed; }
.fcbc-bg { background:transparent; color:#6b7280 !important; border:1.5px solid #e5e7eb; }
.fcbc-bg:hover { background:#f9fafb; color:#374151 !important; }
.fcbc-btn-spinner {
  width:11px; height:11px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:fcbc-sp .5s linear infinite; flex-shrink:0;
}
@keyframes fcbc-sp { to{transform:rotate(360deg)} }
.fcbc-mfoot {
  display:flex; align-items:center; justify-content:flex-end;
  gap:7px; padding-top:11px; margin-top:4px; border-top:1px solid #f3f4f6;
}
.fcbc-success-view { text-align:center; padding:28px 14px; }
.fcbc-si-wrap { margin-bottom:10px; animation:fcbc-pop .3s cubic-bezier(.17,.67,.5,1.4); }
@keyframes fcbc-pop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.fcbc-success-view h3 { font-size:1.1rem; font-weight:800; color:#1a1a2e; margin:0 0 5px; }
.fcbc-success-view p  { color:#6b7280; font-size:0.84rem; margin-bottom:12px; }
#fcbc-sact { display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; margin-bottom:10px; }

/* Single card page */
.fcbc-single-page-wrap { padding:30px 16px; background:#f4f6f9; min-height:60vh; }
.fcbc-single-inner     { max-width:680px; margin:0 auto; }
.fcbc-back-link        { margin-top:14px; font-size:0.78rem; }
.fcbc-back-link a      { color:#e63946; text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.fcbc-back-link a:hover{ text-decoration:underline; }

/* Toast */
#fcbc-toast {
  position:fixed; bottom:18px; left:50%;
  transform:translateX(-50%) translateY(18px);
  background:#1a1a2e; color:#fff;
  padding:9px 16px; border-radius:0;
  font-size:0.75rem; font-weight:700; z-index:9999999;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  display:flex; align-items:center; gap:10px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s;
  opacity:0; border-left:3px solid #e63946;
  max-width:calc(100vw - 32px);
}

/* ================================================================
   RESPONSIVE — mobile overflow fix
   overflow:hidden on the card, all elements constrained to card width
================================================================ */
@media (max-width: 680px) {
  /* Card fills container, no side overflow */
  .gp-card {
    max-width:100%;
    padding:16px 15px 14px;
    border-radius:14px;
  }
  /* Header stacks on very small screens */
  .gp-header { gap:10px; }
  .gp-header-left { gap:10px; }
  .gp-logo-circle { width:46px; height:46px; }
  .gp-logo-circle.gp-logo-init span { font-size:1.2rem; }
  .gp-business-info h1 { font-size:1rem; }
  .gp-business-meta span { font-size:0.67rem; }
  .gp-discount { font-size:0.67rem; padding:3px 6px; }
  .gp-description p { font-size:0.78rem; }
  .gp-contact-text .gp-main { font-size:0.76rem; }
  .gp-contact-text .gp-sub  { font-size:0.68rem; }
  /* Watermark smaller so it doesn't overflow */
  .gp-watermark { font-size:28px; right:12px; bottom:10px; }
  /* Shrink deco circles to avoid overflow */
  .gp-deco-pink { width:120px; height:120px; top:-25px; right:60px; }
  .gp-deco-ring { width:180px; height:180px; border-width:30px; }
  .gp-deco-ring-inner { width:110px; height:110px; border-width:20px; }
  /* Modal full-screen on mobile */
  .fcbc-modal { border-radius:0; max-height:100dvh; }
  .fcbc-modal-body { padding:10px 12px 14px; }
  .fcbc-modal-header { padding:10px 12px 9px; }
  .fcbc-r2, .fcbc-r3 { grid-template-columns:1fr; }
}
@media (max-width: 440px) {
  .gp-header { flex-wrap:wrap; }
  .gp-discount { width:100%; text-align:left; }
  .gp-business-info h1 { font-size:0.95rem; white-space:normal; }
  .gp-business-meta { gap:8px; }
  /* Keep button at its normal size on small screens — no font shrink */
  #fcbc-open-form-btn { font-size:0.72rem; padding:9px 12px; }
}

/* ── Mobile popup: button on its own full-width row, nothing cut off ─────────
   The popup is position:fixed; bottom:0; height:500px on mobile (fmwp-ui-xs/s).
   Our full-width button row adds ~50px, pushing Discard & Submit below the
   viewport edge where they get cut off.
   Fix: let the popup grow to fit its content (height:auto) on mobile.
   We also keep flex-wrap so our button wraps to its own row above Discard/Submit.
   order:-1 ensures our button appears FIRST (above Discard/Submit) visually.
──────────────────────────────────────────────────────────────────────────── */
.fmwp-post-popup-wrapper.fmwp-ui-xs,
.fmwp-post-popup-wrapper.fmwp-ui-s {
  height: auto !important;
  min-height: 500px !important;
}
.fmwp-post-popup-actions-bottom {
  flex-wrap: wrap !important;
}
.fmwp-post-popup-actions-bottom #fcbc-open-form-btn {
  order: -1;
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  text-align: center;
  box-sizing: border-box !important;
  overflow: hidden;
}

/* ── Sort dropdown arrow — normalize size on mobile ─────────────────────────
   ForumWP's .fmwp-topic-sort <select> shows an oversized native browser arrow
   on mobile. Constrain its font/line-height so it renders at a normal size.
──────────────────────────────────────────────────────────────────────────── */
.fmwp-topic-sort {
  font-size: 13px !important;
  line-height: 1.4 !important;
  height: auto !important;
  padding: 2px 4px !important;
  vertical-align: middle !important;
}

/* ── Personal message above business card ────────────────────────────────────
   Styled as plain readable text sitting above the gp-card block.
   Scoped to .fcbc-reply-msg so it never affects anything else.
──────────────────────────────────────────────────────────────────────────── */
.fcbc-reply-msg {
  margin: 0 0 6px 0;
  padding: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: #374151;
  font-family: inherit;
}

/* Optional label in form */
.fcbc-opt {
  font-size: .78rem;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 4px;
}