/* Grid container for campaign cards */
#contacts-div {
  display: grid;
  /* 260px–280px wide cards, auto-fit across the row */
  grid-template-columns: repeat(auto-fit, minmax(260px, 280px));
  justify-content: center;      /* center the grid within the page */
  gap: 24px 32px;               /* row gap / column gap */
  padding: 16px 0 40px;
}

.email-campaign-card {
  width: 100%;                 /* let the grid define the width */
  max-width: 280px;            /* matches minmax above */
  margin: 0;                   /*  remove big bottom margin here */
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.email-campaign-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Outer thumbnail wrapper inside the card */
.email-thumb-host {
  padding: 10px;
  padding-bottom: 0;
}

/* Preview container */
.email-thumb {
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: #f5f7fb;            /* light grey behind the email */
  border: 1px solid #e1e6f0;      /* subtle border to separate from white card */
  overflow: hidden;               /* make sure nothing spills out */
}

/* Fade at bottom */
.email-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 60px;  /* adjust fade thickness */

  background: linear-gradient(
    to bottom,
    rgba(245,247,251, 0) 0%,
    rgba(245,247,251, 0.9) 100%
  );

  pointer-events: none; /* doesn't block clicks */
}

/* Placeholder / “Preview Unavailable” state */
.email-thumb--placeholder,
.email-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  font-size: 13px;
  color: #9aa6b2;
}

/* Frame itself */
.email-thumb__frame {
  display: block;
}

.email-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px 16px 16px;
}

.email-card-footer-main {
  max-width: 70%;
}

.email-card-title {
  margin:0 0 4px 0;
  font-size:15px;
  font-weight:600;
  color:#243140;
}

.email-card-date {
  margin:0;
  font-size:12px;
  color:#8a94a4;
}

.campaign-status {
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  border:1px solid rgba(0,0,0,0.05);
}

.campaign-status--draft {
  background:#f5f7fb;
  color:#7a8497;
}

.campaign-status--sent {
  background:#e3f7ea;
  color:#2c7a4b;
}

.campaign-status--scheduled {
  background:#fff6e0;
  color:#b0761b;
}

/* Floating "New Campaign" button */
.fab-new-campaign {
  position: fixed;
  right: 10px;
  bottom: 10px;          /* ⬅️ lower position */
  z-index: 200;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  border-radius: 12px;
  padding: 0;
  height: 40px;
  padding: 0 12px;

  background: #008bf0;
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

  box-shadow: 1px 1px 10px rgba(64, 64, 64, 0.54);
  -webkit-box-shadow: 1px 1px 10px rgba(64, 64, 64, 0.54);
}

/* .fab-new-campaign:hover {
  background: #0a7ad0;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.fab-new-campaign:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
} */

/* New icon style (no circle) */
.fab-icon {
  font-size: 24px;   /* ⬅️ bigger plus */
  font-weight: 700;
  line-height: 1;
  margin-top: -2px;   /* small optical adjustment */
}

/* 
@media (max-width: 600px) {
  .fab-new-campaign {
    right: 10px;
    bottom: 20px;
    padding: 10px 16px;
    font-size: 15px;
  }

  .fab-icon {
    font-size: 26px; 
  }
} */