/* WCIS Advertiser Dashboard – CLEAN LOCKED UI */

/* Base */
.wcis-dashboard.advertiser-dashboard{
  max-width: 1180px;
  margin: 40px auto;
  padding: 0 18px 40px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a;
}

.wcis-kicker{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color:#0f172a;
  opacity:.85;
  margin-bottom: 8px;
}

.wcis-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.wcis-header h1{
  margin:0;
  font-size: 56px;
  line-height: 1.02;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.wcis-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.wcis-user{
  font-weight:600;
  color:#111827;
}

.wcis-logout{
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
}
.wcis-logout:hover{ text-decoration:underline; }

.wcis-auth-msg{
  max-width: 900px;
  margin: 30px auto;
  padding: 18px 16px;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  background:#fff;
}

/* Metrics grid (THIS is where your cards were looking weak) */
.wcis-metric-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin: 18px 0 18px;
}

.wcis-metric-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 25px rgba(2,6,23,0.06);
}

.wcis-metric-label{
  font-weight: 700;
  font-size: 14px;
  color:#334155;
  margin-bottom: 10px;
}

.wcis-metric-value{
  font-size: 34px;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.wcis-metric-sub{
  font-size: 13px;
  color:#64748b;
}

/* Cards */
.wcis-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  margin: 14px 0;
  box-shadow: 0 10px 25px rgba(2,6,23,0.05);
}

.wcis-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}

.wcis-card h3{
  margin:0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.wcis-muted{
  margin:6px 0 0;
  color:#64748b;
  font-size:14px;
}

/* Analytics top controls */
.wcis-analytics-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.wcis-toggle{
  display:flex;
  gap:8px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
}

.wcis-toggle__btn{
  appearance:none;
  border:1px solid #cbd5e1;
  background:#fff;
  padding:6px 10px;
  border-radius: 10px;
  font-weight:700;
  font-size: 13px;
  cursor:pointer;
}
.wcis-toggle__btn.is-active{
  border-color:#2563eb;
  background:#eff6ff;
}

.wcis-select{
  border:1px solid #cbd5e1;
  border-radius: 12px;
  padding: 8px 12px;
  background:#fff;
  font-weight:600;
  font-size: 13px;
}

/* Analytics summary mini cards */
.wcis-analytics-summary{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}

.wcis-mini{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 170px;
}
.wcis-mini__label{
  font-size: 12px;
  color:#64748b;
  font-weight:700;
  margin-bottom: 4px;
}
.wcis-mini__value{
  font-size: 20px;
  font-weight:850;
}

/* Chart */
.wcis-chart-wrap{
  height: 260px;
  border:1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  background:#ffffff;
}

/* Actions row */
.wcis-actions-row{
  display:flex;
  justify-content:flex-start;
  margin: 16px 0 6px;
}

.wcis-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}

.wcis-btn-primary{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.wcis-btn-primary:hover{
  filter: brightness(0.98);
}

/* Table */
.wcis-table-wrap{
  overflow:auto;
  border-radius: 14px;
  border:1px solid #e5e7eb;
}

.wcis-table{
  width:100%;
  border-collapse:collapse;
  min-width: 900px;
}

.wcis-table thead th{
  text-align:left;
  font-size: 13px;
  color:#334155;
  background:#f8fafc;
  padding: 12px 12px;
  border-bottom:1px solid #e5e7eb;
  font-weight:800;
}

.wcis-table tbody td{
  padding: 12px 12px;
  border-bottom:1px solid #eef2f7;
  vertical-align: middle;
  font-size: 14px;
  color:#0f172a;
}

.wcis-table tbody tr:hover{
  background:#fbfdff;
}

.wcis-actions .wcis-link{
  color:#2563eb;
  text-decoration:none;
  font-weight:800;
}
.wcis-actions .wcis-link:hover{ text-decoration:underline; }

/* Status pills */
.wcis-status{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  color:#0f172a;
}

.wcis-status--active{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#065f46;
}
.wcis-status--pending{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
}
.wcis-status--expired{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}

/* Responsive */
@media (max-width: 980px){
  .wcis-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .wcis-header h1{ font-size: 44px; }
  .wcis-metric-grid{ grid-template-columns: 1fr; }
  .wcis-card h3{ font-size: 28px; }
}

@media (max-width: 520px){
  .wcis-header h1{ font-size: 38px; }
}

/* ======================================================
   ADVERTISER LOGIN (MATCH DASHBOARD STYLE)
   ====================================================== */

.wcis-auth.wcis-login{
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 16px;
}

.wcis-auth-card{
  width:100%;
  max-width: 420px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: 0 20px 40px rgba(2,6,23,0.08);
}

.wcis-auth-head{
  margin-bottom: 18px;
}

.wcis-auth-head h1{
  margin: 4px 0 8px;
  font-size: 34px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.wcis-auth-form{
  margin-top: 14px;
}

.wcis-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom: 14px;
}

.wcis-field label{
  font-size: 13px;
  font-weight: 700;
  color:#334155;
}

.wcis-field input{
  border:1px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 600;
  outline:none;
}

.wcis-field input:focus{
  border-color:#2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.wcis-btn-full{
  width:100%;
  margin-top: 6px;
}

/* Alerts */
.wcis-alert{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.wcis-alert.is-err{
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

/* ===============================
   OPTION CARDS (Slots / Payment)
================================ */

.wcis-option-card {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s ease;
  background: #fff;
}

.wcis-option-card input {
  display: none;
}

.wcis-option-card .card-body {
  flex: 1;
}

.wcis-option-card h4 {
  margin: 0 0 6px;
  font-size: 16px;
}

.wcis-option-card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.wcis-option-card:hover {
  border-color: #2563eb;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.wcis-option-card input:checked + .card-body {
  outline: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px;
}

.wcis-option-card.disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ===============================
   THANK YOU
================================ */

.wcis-thankyou {
  text-align: center;
}

.wcis-checklist {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.wcis-checklist li {
  margin-bottom: 8px;
}

/* ======================================================
   ADVERTISE SELECTOR – PRICING STYLE UI (LOCKED)
   ====================================================== */

.wcis-advertise-selector {
    max-width: 1100px;
    margin: 0 auto;
}

.wcis-advertise-selector h1 {
    margin-bottom: 24px;
}

/* Card container */
.wcis-advertise-selector .wcis-card {
    margin-bottom: 28px;
}

/* Grid layout */
.wcis-advertise-selector .wcis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

/* Option cards */
.wcis-advertise-selector .wcis-option {
    position: relative;
    padding: 22px;
    border-radius: 14px;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Hide radio */
.wcis-advertise-selector .wcis-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Title */
.wcis-advertise-selector .wcis-option strong {
    font-size: 16px;
    font-weight: 600;
}

/* Meta text */
.wcis-advertise-selector .wcis-option span {
    font-size: 14px;
    color: #6b7280;
}

/* Hover */
.wcis-advertise-selector .wcis-option:hover {
    border-color: #2563eb;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12);
}

/* Selected state */
.wcis-advertise-selector
.wcis-option input[type="radio"]:checked + strong,
.wcis-advertise-selector
.wcis-option input[type="radio"]:checked ~ span {
    color: #1e40af;
}

.wcis-advertise-selector
.wcis-option input[type="radio"]:checked {
    display: none;
}

.wcis-advertise-selector
.wcis-option:has(input[type="radio"]:checked) {
    border-color: #2563eb;
    background: #f0f6ff;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
}

/* Duration select */
.wcis-advertise-selector select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    font-size: 15px;
}

/* CTA button */
.wcis-advertise-selector .btn.primary {
    margin: 30px auto 0;
    display: block;
    padding: 14px 34px;
    font-size: 16px;
    border-radius: 999px;
}