/* ---------- General layout ---------- */
.dl-loyalty-wrapper {
  max-width: 80%;
  margin: 32px auto;
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

.dl-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 8px 22px rgba(17,17,17,0.06);
  border: 1px solid #efefef;
}

/* ---------- Title / Info ---------- */
.dl-title {
  color: #336733;
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 12px;
}
.dl-info-text { text-align:center; color:#666; margin-bottom:18px; font-style:italic; }

/* ---------- Inputs & row ---------- */
.dl-row { display:flex; gap:12px; align-items:center; }
.dl-input, .dl-select {
  width:100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1.4px solid #d8d8d8;
  box-sizing: border-box;
  font-size: 15px;
}
.dl-input:focus, .dl-select:focus {
  border-color: #336733;
  box-shadow: 0 6px 18px rgba(51,103,51,0.08);
  outline: none;
}

/* custom city wrapper (hidden by default) */
#dl_custom_city_wrap { display:none; width:100%; }

/* ---------- Buttons ---------- */
.dl-actions { margin-top: 12px; display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; }
.dl-btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-weight:700;
  cursor:pointer;
  border:none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.dl-btn.dl-primary {
  background:#336733; color:#fff;
}
.dl-btn.dl-primary:hover { background:#294d24; transform: translateY(-1px); }
.dl-btn#dl_view_dashboard {
  background:#d9534f; color:#fff;
}
.dl-btn#dl_view_dashboard:hover { background:#b52b27; }


/* ---------- Dashboard table ---------- */
#dl_dashboard { margin-top: 22px; }
.dl-dashboard-table {
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.dl-dashboard-table th, .dl-dashboard-table td{
  border:1px solid #eee;
  padding:10px 12px;
  text-align:left;
}
.dl-dashboard-table th {
  background:#336733; color:#fff; font-weight:700; font-size:14px;
}
.dl-dashboard-table tr:nth-child(even){ background:#f9f9f9; }
.dl-dashboard-table tr:hover { background:#eef7ee; }
.dl-total-points { margin-top:14px; text-align:right; font-weight:800; color:#336733; }

/* ---------- Closed mode / newsletter ---------- */
.dl-closed-wrapper {
  max-width: 920px;
  margin: 40px auto;
  padding: 34px;
  background: linear-gradient(180deg,#fffaf7 0%,#fbfbfb 100%);
  border: 1px solid #e6e4e1;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(34,34,34,0.06);
  color: #374151;
}
.dl-btn.dl-primary {
  background: #336733; /* dark green */
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: background-color 0.3s ease;
}

.dl-btn.dl-primary:hover {
  background: #294d24; /* darker green on hover */
}


.dl-closed-wrapper h2 { color:#B9860C; font-weight:800; font-size:1.9rem; margin-bottom:6px; }
.dl-closed-wrapper p { color:#616161; font-size:1.05rem; margin-bottom:8px; }
.dl-closed-wrapper .dl-closed-sub { color:#7a7a7a; margin-bottom:18px; }
#dl-newsletter-form { display:flex; gap:12px; justify-content:center; align-items:center; max-width:760px; margin:0 auto; padding-top:6px; }
#dl-newsletter-form input[type="email"] {
  flex:1; padding:12px 18px; font-size:1rem; border:1.4px solid #e0e0e0; border-radius:28px; transition:box-shadow .18s, border-color .18s;
}
#dl-newsletter-form input[type="email"]:focus { outline:none; border-color:#336733; box-shadow:0 6px 18px rgba(51,103,51,0.12); }
#dl_subscribe_btn { background:#336733; color:#fff; border:none; padding:12px 22px; border-radius:28px; font-weight:700; cursor:pointer; text-transform:uppercase; box-shadow: 0 6px 18px rgba(51,103,51,0.18); }
#dl_subscribe_btn:hover { background:#294d24; transform:translateY(-2px); box-shadow: 0 10px 30px rgba(41,77,36,0.22); }
#dl_news_response { margin-top:12px; font-weight:600; color:#336733; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .dl-loyalty-wrapper { max-width:95%; padding:0 12px; }
  .dl-row { flex-direction: column; }
  .dl-actions { justify-content: center; }
}
@media (max-width: 680px) {
  #dl-newsletter-form { flex-direction: column; gap:10px; }
  #dl-newsletter-form input[type="email"], #dl_subscribe_btn { width:100%; border-radius:10px; }
  .dl-title { font-size:1.6rem; }
}