/* Core box styling */
.lgai-box {border:1px solid #2a2a2a; padding:16px; border-radius:12px; background:#0d0d0d; color:#e9f1ff;}
.lgai-box h3, .lgai-box h4 {margin-top:0}

/* Plans */
.lgai-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px;}
.lgai-plan {border:1px solid #333; padding:12px; border-radius:10px; background:#111; color:#e9f1ff;}
.lgai-plan-title {color:#e9f1ff; font-weight:700;}

/* Buttons */
.lgai-btn {display:inline-flex; align-items:center; gap:8px; margin-right:8px; margin-top:6px; text-decoration:none;}
.lgai-btn .lgai-ico {display:inline-flex; line-height:0;}
.lgai-btn-pay-card.button-primary {background:#2563eb; border-color:#1d4ed8; color:#fff !important;}
.lgai-btn-pay-card.button-primary:hover {background:#1d4ed8; border-color:#1e40af;}
.lgai-btn-pay-crypto.button {background:#0f172a; color:#e9f1ff !important; border:1px solid #334155;}
.lgai-btn-pay-crypto.button:hover {background:#111827; border-color:#1f2937;}

/* Status & table */
.lgai-ok {color:#6ee7a8;}
.lgai-warn {color:#fca5a5;}
.lgai-table {width:100%; border-collapse: collapse; color:#e9f1ff;}
.lgai-table th, .lgai-table td {border-bottom:1px solid #222; padding:6px 8px;}

/* Countdown */
.lgai-countdown {margin:10px 0; font-weight:600;}

/* Masking / blur */
.lgai-locked {position:relative; overflow:hidden;}
.lgai-locked .lgai-locked-content {filter: blur(5px); pointer-events:none; user-select:none;}
.lgai-locked:before {content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1;}
.lgai-locked .lgai-locked-msg {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; max-width:680px; width:90%;
  padding:16px; border-radius:12px; background:#0b1220; border:1px dashed #335; color:#e9f1ff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Center plan content */
.lgai-plan { text-align:center; }
.lgai-actions { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-top:8px; }
@media (min-width: 520px) { .lgai-actions { flex-direction:row; } }

/* Make crypto button same blue style as card */
.lgai-btn-pay-crypto.button-primary {background:#2563eb; border-color:#1d4ed8; color:#fff !important;}
.lgai-btn-pay-crypto.button-primary:hover {background:#1d4ed8; border-color:#1e40af; color:#fff !important;}

/* Equal-width, centered actions */
.lgai-actions { display:grid; grid-template-columns: 1fr; gap:10px; margin-top:8px; }
@media (min-width: 560px) { .lgai-actions { grid-template-columns: 1fr 1fr; } }
.lgai-actions .lgai-btn { width:100%; justify-content:center; text-align:center; padding:10px 14px; }

/* v1.0.7 - Fix buttons touching/overflowing */
.lgai-actions { gap:12px; width:100%; }
.lgai-actions .lgai-btn { margin:0; width:100%; max-width:100%; box-sizing:border-box; white-space:nowrap; }
.lgai-plan { overflow:hidden; } /* keep content neatly inside rounded border */

/* v1.1.2 — Equalize buttons inside each plan without changing the original layout */
.lgai-actions { display:flex; gap:12px; width:100%; }
.lgai-actions .lgai-btn { flex:1 1 0; width:auto; max-width:none; margin:0; box-sizing:border-box; white-space:nowrap; }

/* v1.1.3 — Framed plans for clearer separation */
.lgai-grid { gap:16px; }
.lgai-plan {
  border:2px solid #1f2937; border-radius:14px;
  background:#0f1422;
  padding:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.lgai-plan-title {
  margin:-16px -16px 12px -16px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:700;
}

/* Accents per plan */
.lgai-plan-day { border-color:#1d4ed8; }
.lgai-plan-day .lgai-plan-title { background:rgba(29,78,216,.12); border-bottom-color:#1e40af; }
.lgai-plan-month { border-color:#6d28d9; }
.lgai-plan-month .lgai-plan-title { background:rgba(109,40,217,.12); border-bottom-color:#5b21b6; }

/* Keep buttons equal and tidy inside the framed cards */
.lgai-actions { display:flex; gap:12px; width:100%; }
.lgai-actions .lgai-btn { flex:1 1 0; margin:0; width:auto; max-width:none; box-sizing:border-box; white-space:nowrap; }

/* v1.1.4 — Force Day Pass (left) and Monthly (right) to share the same borders */
.lgai-grid { display:grid; grid-template-columns: 1fr; gap:16px; align-items:stretch; }
@media (min-width: 720px){
  .lgai-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}

/* Make sure both cards calculate sizes the same way */
.lgai-grid, .lgai-plan, .lgai-actions, .lgai-actions .lgai-btn { box-sizing:border-box; }

/* v1.1.5 — Two separate side-by-side blocks */
.lgai-row { display:flex; flex-wrap:wrap; gap:16px; align-items:stretch; }
.lgai-card {
  flex: 1 1 360px;
  border:2px solid #1f2937; border-radius:14px;
  background:#0f1422;
  padding:16px; margin:0;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.lgai-card-title {
  margin:-16px -16px 12px -16px; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-weight:700; text-align:center;
}

/* Accents */
.lgai-card-day { border-color:#1d4ed8; }
.lgai-card-day .lgai-card-title { background:rgba(29,78,216,.12); border-bottom-color:#1e40af; }
.lgai-card-month { border-color:#6d28d9; }
.lgai-card-month .lgai-card-title { background:rgba(109,40,217,.12); border-bottom-color:#5b21b6; }

/* Equal buttons inside each card */
.lgai-actions { display:flex; gap:12px; width:100%; margin-top:8px; }
.lgai-actions .lgai-btn { flex:1 1 0; min-width:0; margin:0; width:auto; max-width:none; box-sizing:border-box; white-space:nowrap; }

/* v1.1.7 — Always two side-by-side cards; safer headers to protect outer frame */
.lgai-box, .lgai-row, .lgai-card, .lgai-actions, .lgai-actions .lgai-btn { box-sizing: border-box; }

/* Two equal columns at all widths (will squeeze on very small screens per your request) */
.lgai-row { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; align-items:stretch; }

/* Card framing */
.lgai-card { border:2px solid #1f2937; border-radius:14px; background:#0f1422; padding:16px; margin:0; box-shadow: 0 10px 24px rgba(0,0,0,.35); overflow:hidden; display:flex; flex-direction:column; }

/* Header without negative margins (prevents outer frame issues) */
.lgai-card-title { margin:0 0 12px 0; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); font-weight:700; text-align:center; border-top-left-radius:10px; border-top-right-radius:10px; }

/* Accents */
.lgai-card-day { border-color:#1d4ed8; }
.lgai-card-day .lgai-card-title { background:rgba(29,78,216,.12); border-bottom-color:#1e40af; }
.lgai-card-month { border-color:#6d28d9; }
.lgai-card-month .lgai-card-title { background:rgba(109,40,217,.12); border-bottom-color:#5b21b6; }

/* Actions: equal buttons */
.lgai-actions { display:flex; gap:12px; width:100%; margin-top:8px; }
.lgai-actions .lgai-btn { flex:1 1 0; min-width:0; margin:0; width:auto; max-width:none; white-space:nowrap; justify-content:center; }

/* Primary button look for both */
.lgai-btn-pay-card.button-primary, .lgai-btn-pay-crypto.button-primary { background:#2563eb; border-color:#1d4ed8; color:#fff !important; }
.lgai-btn-pay-card.button-primary:hover, .lgai-btn-pay-crypto.button-primary:hover { background:#1d4ed8; border-color:#1e40af; color:#fff !important; }

/* v1.1.8 — Prevent button label from being cut off */
.lgai-actions .lgai-btn {
  white-space: normal;           /* allow wrapping */
  overflow: visible;             /* don't clip text */
  line-height: 1.25;             /* comfy multi-line */
  padding: 12px 14px;            /* more breathing room */
}
.lgai-actions .lgai-btn .lgai-ico { flex: 0 0 auto; } /* keep icon stable when text wraps */

/* v1.1.9 — Card glow & refined button sizing */
:root {
  --lgai-blue: #2563eb;
  --lgai-blue-soft: rgba(37,99,235,.35);
  --lgai-blue-softer: rgba(37,99,235,.18);
  --lgai-purple: #6d28d9;
  --lgai-purple-soft: rgba(109,40,217,.35);
  --lgai-purple-softer: rgba(109,40,217,.18);
}

/* Softer base card; allow exterior glow */
.lgai-card { overflow: visible; }

/* Day Pass glow */
.lgai-card-day {
  box-shadow:
    0 0 0 2px rgba(29,78,216,.6) inset,
    0 6px 24px var(--lgai-blue-soft),
    0 10px 38px var(--lgai-blue-softer);
}

/* Monthly glow */
.lgai-card-month {
  box-shadow:
    0 0 0 2px rgba(109,40,217,.6) inset,
    0 6px 24px var(--lgai-purple-soft),
    0 10px 38px var(--lgai-purple-softer);
}

/* Slight hover pop for both cards */
.lgai-card:hover {
  transform: translateY(-1px);
  transition: transform .15s ease, box-shadow .15s ease;
}
.lgai-card-day:hover {
  box-shadow:
    0 0 0 2px rgba(29,78,216,.7) inset,
    0 8px 28px var(--lgai-blue-soft),
    0 14px 44px var(--lgai-blue-softer);
}
.lgai-card-month:hover {
  box-shadow:
    0 0 0 2px rgba(109,40,217,.7) inset,
    0 8px 28px var(--lgai-purple-soft),
    0 14px 44px var(--lgai-purple-softer);
}

/* Buttons — keep equal widths, but reduce visual bulk */
.lgai-actions .lgai-btn {
  font-size: clamp(14px, 1.4vw, 15.5px);
  line-height: 1.25;
  padding: 10px 12px;
  white-space: normal;         /* allow wrap if truly needed */
  overflow: visible;
}
.lgai-actions .lgai-btn .lgai-ico { flex:0 0 auto; }

/* Primary look & subtle glow for both buttons */
.lgai-btn-pay-card.button-primary, .lgai-btn-pay-crypto.button-primary {
  background: var(--lgai-blue);
  border-color: #1d4ed8;
  color:#fff !important;
  box-shadow: 0 6px 18px rgba(37,99,235,.28);
}
.lgai-btn-pay-card.button-primary:hover,
.lgai-btn-pay-crypto.button-primary:hover {
  background:#1d4ed8; border-color:#1e40af;
  box-shadow: 0 8px 24px rgba(37,99,235,.34);
}

/* v1.2.0 — Green glow for Day Pass & Monthly titles */
:root {
  --lgai-green: #10b981;           /* emerald */
  --lgai-green-soft: rgba(16,185,129,.65);
  --lgai-green-softer: rgba(16,185,129,.35);
  --lgai-green-text: #a7f3d0;      /* mint text */
}
.lgai-card-title {
  color: var(--lgai-green-text);
  text-shadow:
    0 0 6px var(--lgai-green-soft),
    0 0 14px var(--lgai-green-softer);
}