/* assets/gpl-frontend.css — modern visible style v1.0.2 */

:root{
  --bg: #071025;          /* deep background */
  --card: #0f1724;        /* surface */
  --accent-a: #06b6d4;    /* teal */
  --accent-b: #7c3aed;    /* purple */
  --muted: #9bb0c8;
  --text: #eaf6fb;
  --danger: #ff6b6b;
  --radius: 12px;
  --gap: 18px;
}

/* page container */
.gpl-container {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, rgba(6,11,20,0.65), rgba(4,8,14,0.85));
  padding: 24px;
  box-sizing: border-box;
}

.gpl-pill.qty { min-width:36px; text-align:center; padding:6px 10px; border-radius:8px; background:rgba(0,0,0,0.03); font-weight:700; }
.gpl-button.ghost.gpl-remove { color: #e11d48; border:1px solid rgba(225,29,72,0.12); }
.gpl-button.ghost.gpl-remove:hover { background: #e11d48; color:#fff; }
.gpl-button.ghost.gpl-inc, .gpl-button.ghost.gpl-dec { padding:6px 8px; min-width:36px; }
.gpl-button.added { transform: scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }


.gpl-button.added {
  background: linear-gradient(90deg, var(--accent2), var(--accent1));
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}


/* card */
.gpl-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: calc(var(--gap) - 6px);
  box-shadow: 0 12px 36px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.03);
}

/* grid layout */
/* Grid layout: stack cart under table */
/* --- Two-column responsive layout --- */
/* --- Two-column aligned layout (table + cart side by side) --- */
.gpl-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* left = table (2x width), right = cart */
  align-items: flex-start;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Left column (table area) */
.gpl-table-wrap, #gpl-sites {
  grid-column: 1;
}

/* Right column (cart) */
.gpl-cart {
  grid-column: 2;
  position: sticky;          /* keeps cart visible when scrolling */
  top: 90px;                 /* adjust if header overlaps */
  align-self: start;
  height: fit-content;
  margin-top: 0;             /* removes extra spacing */
}

/* Stack vertically on small screens */
@media (max-width: 768px) {
  .gpl-grid {
    display: flex;
    flex-direction: column;
  }
  .gpl-cart {
    position: static;
    width: 100%;
    margin-top: 20px;
  }
}


.gpl-table-wrap {
  grid-column: 1;
}

.gpl-cart {
  grid-column: 2;
}

/* On small screens, stack vertically */
@media (max-width: 768px) {
  .gpl-grid {
    display: flex;
    flex-direction: column;
  }
  .gpl-cart {
    order: 2;
  }
}

/* Table card on top */
.gpl-table-wrap {
  order: 1;
}

@media (max-width:980px){ .gpl-grid { grid-template-columns:1fr; } }

/* table */
.gpl-table{
  width:100%;
  border-collapse:collapse;
  border-radius:10px;
  overflow:hidden;
  background: transparent;
  color: var(--text);
}
/* ===== Modern Beautiful Table Headings ===== */
.gpl-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;

  padding: 14px 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text);
  border-bottom: 2px solid rgba(15, 23, 36, 0.06);
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Accent underline with gradient */
.gpl-table thead th::after {
  content: "";
  display: block;
  height: 3px;
  width: 0%;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.gpl-coupon input { padding:8px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); }
.gpl-coupon #gpl-apply-coupon { min-width:90px; }
.gpl-coupon #gpl-remove-coupon { min-width:90px; }
#gpl-coupon-message { font-size:13px; margin-top:6px; color:#e11d48; }


/* Hover & focus glow */
.gpl-table thead th:hover::after,
.gpl-table thead th:focus::after {
  width: 100%;
}

/* First header cell styling for emphasis */
.gpl-table thead th:first-child {
  border-top-left-radius: 10px;
}
.gpl-table thead th:last-child {
  border-top-right-radius: 10px;
  text-align: center;
}

/* Subtle glass effect on scroll */
.gpl-table thead {
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.85);
}

/* Table body cells — readable site names */
.gpl-table tbody td {
  padding:14px 18px;
  vertical-align: middle;
  font-size:14px;
  color:var(--text);
  border-bottom:1px solid rgba(15,20,30,0.03);
  line-height:1.4;
  white-space:normal; /* allow wrapping */
  word-break:break-word;
}

/* Column width tweaks */
.gpl-table td:nth-child(1) { width: 32%; } /* Site column */
.gpl-table td:nth-child(2) { width: 12%; text-align:right; color:#000; } /* Price */
.gpl-table td:nth-child(3),
.gpl-table td:nth-child(4) { width: 10%; text-align:center; color:#000; } /* DR & Traffic */
.gpl-table td:nth-child(5) { width: 16%; color:#000; } /* Niche */
.gpl-table td:nth-child(6) { width: 12%; text-align:center; color:#000; } /* Button */

/* Site link refinement */
.gpl-site-link {
  color: var(--accent1);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.3;
  word-break: break-word;
  max-width: none;
}


/* site link */
.gpl-site-link{
  color: var(--accent-a);
  font-weight:700;
  text-decoration:none;
}

/* price badge */
.gpl-price {
  display:inline-block;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  box-shadow: 0 8px 20px rgba(12,74,100,0.12);
}

/* cart aside */
/* Cart comes below table */
.gpl-cart {
  order: 2;
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(180deg,#ffffff,#fbfcfe);
  border: 1px solid rgba(15,23,36,0.04);
  box-shadow: var(--shadow-strong);
  min-height: 220px;
  margin-top: 16px;
}

/* Add a soft divider style */
.gpl-cart::before {
  content: "";
  display: block;
  height: 4px;
  width: 120px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border-radius: 6px;
  margin: 0 auto 20px auto;
  opacity: 0.9;
}

/* Cart header */
.gpl-cart h3 {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  color: var(--text);
}

/* Center totals and checkout buttons */
.gpl-total-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-weight: 900;
  font-size: 18px;
}

.gpl-checkout {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.gpl-cart-item {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  color:#000;
  border-radius:10px;
  margin-bottom:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border: 1px solid rgba(255,255,255,0.02);
}
.gpl-cart-empty{ color:var(--muted); font-style:italic; padding:6px 0; }

/* buttons */
.gpl-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(90deg,var(--accent-a),var(--accent-b));
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  border:0;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gpl-button:hover{ transform: translateY(-3px); box-shadow:0 12px 30px rgba(7,16,30,0.5); }
.gpl-button.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:#000; }

/* --- Remove button styling --- */

.gpl-button.ghost.gpl-remove {
  background: transparent;
  border: 1px solid rgba(15,23,36,0.08);
  color: var(--danger);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 13px;
}

.gpl-button.ghost.gpl-remove:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239,68,68,0.25);
}



/* total */
.gpl-total { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-weight:900; font-size:18px; color:#000;}

/* mobile tweaks */
@media (max-width:720px){
  .gpl-table thead { display:none; }
  .gpl-table tbody td { display:block; width:100%; box-sizing:border-box; }
  .gpl-table tbody tr { margin-bottom:12px; display:block; padding:12px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
  .gpl-cart { order:2; margin-top:16px; }
}

/* diagnostics block */
.gpl-diagnostics pre { background:#071028; color:#d8eef8; padding:12px; border-radius:8px; overflow:auto; }

/* assets/gpl-frontend.css - GPL Plugin frontend styling
   Clean, compact, responsive styles for the sites list + cart UI
*/

/* Reset / base */
.gpl-container {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #222;
  line-height: 1.4;
}

/* Card */
.gpl-card {
  background: #fff;
  border: 1px solid rgba(27,31,35,0.08);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(20,20,20,0.03);
}

/* Grid layout: main + aside */
.gpl-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}

/* Responsive: stack columns on small screens */
@media (max-width: 880px) {
  .gpl-grid {
    grid-template-columns: 1fr;
  }
}