/* ============================================================
   Dealers Deal — Public Styles
   BuyCCTVs.com  |  Brand: #f60 orange
   ============================================================ */
:root {
  --dd-orange: #f60;
  --dd-orange-dark: #e55a00;
  --dd-green: #1a9e1a;
  --dd-red: #e00;
  --dd-gray: #666;
  --dd-light: #f8f8f8;
  --dd-border: #e0e0e0;
  --dd-wa: #25d366;
}

/* --- Auth Bar --- */
.dd-auth-bar {
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px; background:#fff;
  border:1px solid var(--dd-border); border-radius:10px;
  padding:12px 20px; margin:16px 0 0;
}
.dd-auth-msg { font-size:.92rem; color:#444; }
.dd-auth-sep { font-size:.85rem; color:#aaa; }
.dd-auth-btn { padding:7px 18px; background:var(--dd-orange); color:#fff;
  border:none; border-radius:6px; font-weight:700; font-size:.85rem;
  cursor:pointer; text-decoration:none; transition:background .15s; display:inline-block; }
.dd-auth-btn:hover { background:var(--dd-orange-dark); color:#fff; }
.dd-auth-btn-outline { background:#fff; color:var(--dd-orange); border:2px solid var(--dd-orange); }
.dd-auth-btn-outline:hover { background:#fff8f3; color:var(--dd-orange); }

/* --- Page Header --- */
.dd-page-header { text-align:center; padding:32px 16px 20px; }
.dd-page-header h1 { font-size:2rem; color:#333; margin-bottom:8px; }
.dd-page-header p { color:#555; max-width:600px; margin:0 auto; }

/* --- Deal Grid --- */
.dd-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
  padding:16px 0 32px;
}
.dd-empty { text-align:center; padding:48px; color:#888; }

/* --- Deal Card --- */
.dd-card {
  position:relative;
  background:#fff;
  border:1px solid var(--dd-border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  transition:transform .2s, box-shadow .2s;
}
.dd-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.13); }

.dd-badge {
  position:absolute;
  top:12px; left:12px;
  background:var(--dd-orange);
  color:#fff;
  font-size:.75rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  z-index:1;
}

.dd-img { width:100%; height:180px; overflow:hidden; background:#f4f4f4; }
.dd-img img { width:100%; height:100%; object-fit:cover; }

.dd-card-body { padding:16px; }
.dd-title { font-size:1rem; font-weight:700; margin:0 0 6px; color:#222; }
.dd-offer-text { font-size:.82rem; color:var(--dd-orange); font-weight:600; margin:0 0 4px; }
.dd-desc { font-size:.82rem; color:#777; margin:0 0 10px; }

.dd-pricing { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.dd-original { font-size:.9rem; color:#aaa; text-decoration:line-through; }
.dd-dealer-price { font-size:1.25rem; font-weight:800; color:var(--dd-green); }

.dd-by { font-size:.78rem; color:#888; margin-bottom:10px; }

.dd-countdown { font-size:.8rem; color:#555; margin-bottom:12px; }
.dd-timer { font-weight:700; color:var(--dd-red); }
.dd-timer.ending-soon { animation: pulse-red 1s infinite; }
@keyframes pulse-red { 0%,100%{color:var(--dd-red);} 50%{color:#ff8080;} }

/* --- Buttons --- */
.dd-btn {
  display:inline-block;
  padding:10px 20px;
  border-radius:6px;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  border:none;
  text-decoration:none;
  transition:background .18s;
}
.dd-btn-primary { background:var(--dd-orange); color:#fff; }
.dd-btn-primary:hover { background:var(--dd-orange-dark); color:#fff; }
.dd-btn-whatsapp { background:var(--dd-wa); color:#fff; }
.dd-btn-whatsapp:hover { background:#1fb855; color:#fff; }
.dd-btn-full { width:100%; text-align:center; padding:13px; font-size:1rem; }

.dd-btn-wa.dd-get-price {
  width:100%;
  padding:12px;
  background:var(--dd-wa);
  color:#fff;
  border:none;
  border-radius:6px;
  font-weight:700;
  font-size:.95rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .18s;
}
.dd-btn-wa.dd-get-price:hover { background:#1fb855; }

/* --- Modal --- */
.dd-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dd-modal {
  background:#fff;
  border-radius:12px;
  padding:32px;
  max-width:420px;
  width:90%;
  position:relative;
  max-height:90vh;
  overflow-y:auto;
}
.dd-modal-wide { max-width:600px; }
.dd-modal-close {
  position:absolute;
  top:12px; right:16px;
  background:none;
  border:none;
  font-size:1.3rem;
  cursor:pointer;
  color:#888;
}
.dd-modal h3 { margin:0 0 16px; }

/* Modal tabs */
.dd-modal-tabs { display:flex; gap:8px; margin-bottom:20px; border-bottom:2px solid #eee; }
.dd-modal-tab { padding:8px 16px; border:none; background:none; cursor:pointer; font-weight:600; color:#888; border-bottom:3px solid transparent; margin-bottom:-2px; }
.dd-modal-tab.active { color:var(--dd-orange); border-bottom-color:var(--dd-orange); }

/* --- Notices --- */
.dd-notice {
  padding:14px 18px;
  border-radius:8px;
  margin:16px 0;
  font-size:.95rem;
}
.dd-notice-warning { background:#fff8e6; border-left:4px solid #f5a623; color:#7a5200; }
.dd-notice-info    { background:#e8f4ff; border-left:4px solid #4a90d9; color:#1a4a7a; }
.dd-notice-error   { background:#fff0f0; border-left:4px solid var(--dd-red); color:#800; }
.dd-notice-success { background:#f0fff4; border-left:4px solid var(--dd-green); color:#1a5a1a; }

/* --- Forms --- */
.dd-form .dd-form-row { margin-bottom:14px; }
.dd-form label { display:block; font-weight:600; font-size:.88rem; margin-bottom:5px; color:#444; }
.dd-form input[type=text],
.dd-form input[type=email],
.dd-form input[type=tel],
.dd-form input[type=url],
.dd-form input[type=password],
.dd-form input[type=number],
.dd-form input[type=datetime-local],
.dd-form select,
.dd-form textarea {
  width:100%;
  padding:9px 12px;
  border:1px solid var(--dd-border);
  border-radius:6px;
  font-size:.9rem;
  box-sizing:border-box;
  transition:border .15s;
}
.dd-form input:focus, .dd-form select:focus, .dd-form textarea:focus {
  outline:none;
  border-color:var(--dd-orange);
  box-shadow:0 0 0 3px rgba(255,102,0,.15);
}
.dd-form small { color:#999; font-size:.78rem; }
.dd-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px) { .dd-form-2col { grid-template-columns:1fr; } }
.dd-form-msg { margin-top:8px; font-size:.9rem; }
.dd-form-msg.success { color:var(--dd-green); }
.dd-form-msg.error   { color:var(--dd-red); }

/* --- Register Page --- */
.dd-register-wrap {
  display:grid;
  grid-template-columns:1fr 340px;
  gap:32px;
  align-items:start;
  max-width:960px;
  margin:0 auto;
  padding:24px 0;
}
@media(max-width:768px) { .dd-register-wrap { grid-template-columns:1fr; } }
.dd-register-box { background:#fff; border:1px solid var(--dd-border); border-radius:12px; padding:28px; }
.dd-register-header { margin-bottom:24px; }
.dd-register-header h2 { color:#222; margin:0 0 8px; }
.dd-register-header p { color:#666; font-size:.9rem; }
.dd-register-benefits {
  background:var(--dd-orange);
  color:#fff;
  border-radius:12px;
  padding:24px;
}
.dd-register-benefits h3 { color:#fff; margin:0 0 16px; }
.dd-register-benefits ul { list-style:none; padding:0; margin:0; }
.dd-register-benefits li { padding:7px 0; font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.2); }
.dd-register-benefits li:last-child { border-bottom:none; }
.dd-login-link { text-align:center; font-size:.88rem; margin-top:12px; color:#666; }

/* --- Dashboard --- */
.dd-dashboard { max-width:960px; margin:0 auto; padding:16px 0; }
.dd-dash-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid var(--dd-border);
  border-radius:10px;
  padding:20px;
  margin-bottom:20px;
}
.dd-dash-header h2 { margin:0 0 4px; }
.dd-dash-header p { margin:0; color:#666; font-size:.88rem; }
.dd-tier-badge {
  text-align:center;
  border:3px solid #ccc;
  border-radius:10px;
  padding:12px 20px;
  min-width:120px;
}
.dd-tier-name { display:block; font-size:1.1rem; font-weight:800; }
.dd-tier-pts { display:block; font-size:.85rem; color:#555; margin-top:2px; }

/* Dashboard Tabs */
.dd-dash-tabs {
  display:flex;
  gap:4px;
  background:#f4f4f4;
  border-radius:8px;
  padding:4px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.dd-tab-btn {
  flex:1;
  padding:9px 14px;
  border:none;
  background:transparent;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  font-size:.88rem;
  color:#666;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.dd-tab-btn.active { background:#fff; color:var(--dd-orange); box-shadow:0 1px 4px rgba(0,0,0,.1); }

.dd-tab-pane { display:none; }
.dd-tab-pane.active { display:block; }

/* Deal Rows */
.dd-deals-list { display:flex; flex-direction:column; gap:10px; }
.dd-deal-row {
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--dd-border);
  border-radius:8px;
  padding:12px;
}
.dd-deal-thumb { width:56px; height:56px; object-fit:cover; border-radius:6px; }
.dd-deal-info { flex:1; }
.dd-deal-info strong { display:block; font-size:.95rem; margin-bottom:2px; }
.dd-deal-prices, .dd-deal-end, .dd-deal-stats {
  display:block;
  font-size:.8rem;
  color:#777;
}
.dd-deal-status { font-size:.8rem; font-weight:600; white-space:nowrap; }
.dd-deal-actions { display:flex; gap:6px; flex-wrap:wrap; }
.dd-btn-sm {
  padding:5px 10px;
  font-size:.78rem;
  border:1px solid #ccc;
  border-radius:4px;
  cursor:pointer;
  background:#fff;
  transition:background .15s;
  white-space:nowrap;
}
.dd-btn-sm:hover { background:#f4f4f4; }
.dd-btn-close { border-color:#999; }
.dd-btn-delete { border-color:var(--dd-red); color:var(--dd-red); }
.dd-btn-delete:hover { background:#fff0f0; }

/* Points Tab */
.dd-points-hero { text-align:center; padding:24px; }
.dd-points-big { font-size:3rem; font-weight:900; line-height:1; }
.dd-points-label { font-size:.95rem; color:#888; margin:4px 0 16px; }
.dd-tier-display { display:inline-block; border:2px solid; border-radius:8px; padding:10px 24px; font-size:.95rem; }

.dd-tiers-list { display:flex; flex-direction:column; gap:8px; margin:12px 0 24px; }
.dd-tier-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--dd-border);
  border-radius:6px;
  background:#fff;
  font-size:.88rem;
}
.dd-tier-current { border-color:var(--dd-orange); background:#fff8f3; }
.dd-tier-done { opacity:.5; }
.dd-tier-color-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.dd-tier-row-name { font-weight:700; min-width:70px; }
.dd-tier-row-range { color:#888; min-width:100px; }
.dd-tier-row-reward { flex:1; }
.dd-tier-badge-you { font-size:.78rem; color:var(--dd-orange); font-weight:700; }

.dd-points-log-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.dd-points-log-table th { background:#f4f4f4; padding:8px 12px; text-align:left; border-bottom:2px solid #e0e0e0; }
.dd-points-log-table td { padding:7px 12px; border-bottom:1px solid #f0f0f0; }

.dd-earn-more-box { background:#fff8f3; border:1px solid #ffe0c0; border-radius:8px; padding:16px 20px; margin-top:20px; }
.dd-earn-more-box h4 { margin:0 0 10px; }
.dd-earn-more-box ul { margin:0; padding-left:20px; }
.dd-earn-more-box li { padding:3px 0; font-size:.9rem; }

/* WhatsApp request tab */
.dd-wa-request-box {
  background:#f0fff6;
  border:1px solid #b6e8c6;
  border-radius:10px;
  padding:20px;
  margin:16px 0;
  text-align:center;
}
.dd-wa-note { margin-top:12px; }
.dd-commission-info { background:#f8f8f8; border-radius:8px; padding:16px 20px; }

/* Login/status in deal card */
.dd-link-btn { background:none; border:none; color:var(--dd-orange); cursor:pointer; font-weight:600; padding:0; text-decoration:underline; }

@media(max-width:600px) {
  .dd-grid { grid-template-columns:1fr; }
  .dd-dash-header { flex-direction:column; gap:12px; text-align:center; }
  .dd-deal-row { flex-wrap:wrap; }
}