/* ====== SDP: Input lebih gelap & jelas ====== */

/* Label */
.sdp-form label{font-weight:600}

/* Hanya gaya untuk text/email/tel (tak sentuh hidden field) */
.sdp-form input[type="text"],
.sdp-form input[type="email"],
.sdp-form input[type="tel"]{
  width:100%;
  padding:12px 14px;
  margin:6px 0 14px;
  border:1px solid #cfd8e3;      /* lebih kontras dari #ddd */
  border-radius:10px;
  background:#f0f4f8;            /* kelabu lembut (lebih gelap dari putih) */
  color:#0d2538;
  font-size:16px;                 /* elak auto-zoom iOS */
  transition:background .15s, border-color .15s, box-shadow .15s;
}

/* Placeholder lebih jelas */
.sdp-form input::placeholder{ color:#8a99a8; opacity:1; }

/* Fokus: highlight ikut brand */
.sdp-form input[type="text"]:focus,
.sdp-form input[type="email"]:focus,
.sdp-form input[type="tel"]:focus{
  outline:none;
  background:#eef3f7;
  border-color:#ff7a00;
  box-shadow:0 0 0 3px rgba(255,122,0,.18);
}

/* Disabled/readonly (contoh field paparan sahaja) */
.sdp-form input[readonly],
.sdp-form input:disabled{
  background:#e6ebf2;
  color:#6b7280;
  cursor:not-allowed;
}

/* Optional: auto gelap jika browser dark mode */
@media (prefers-color-scheme: dark){
  .sdp-form input[type="text"],
  .sdp-form input[type="email"],
  .sdp-form input[type="tel"]{
    background:#eee;
    border-color:#334155;
    color:#111111;
  }
  .sdp-form input::placeholder{ color:#9aa4b2; }
}

/* ====== SDP Directory Page ====== */
.sdp-directory-page{
  max-width:var(--sdp-dir-container-max-width, 1100px);
  margin:24px auto;
  padding:var(--sdp-dir-container-padding, 20px);
  border:1px solid var(--sdp-dir-container-border, #e5e7eb);
  border-radius:var(--sdp-dir-container-radius, 14px);
  background:var(--sdp-dir-container-bg, #fcfcfd);
  font-family:var(--sdp-dir-font-family, system-ui, Arial, sans-serif);
}
.sdp-directory-hero h2{
  margin:0;
  font-size:32px;
  color:var(--sdp-dir-title-color, #101828);
}
.sdp-directory-hero p{
  margin:8px 0 0;
  color:var(--sdp-dir-subtitle-color, #475467);
}
.sdp-directory-filters{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sdp-directory-filter-top{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
}
.sdp-directory-filters input,
.sdp-directory-filter-top > button{
  height:42px;
  border-radius:10px;
}
.sdp-directory-filters input{
  border:1px solid var(--sdp-dir-input-border, #d0d5dd);
  padding:0 12px;
  background:var(--sdp-dir-input-bg, #ffffff);
  color:var(--sdp-dir-input-text, #101828);
}
.sdp-directory-filters input::placeholder{ color:var(--sdp-dir-placeholder, #8a99a8); opacity:1; }
.sdp-directory-filters input:focus{ outline:none; border-color:var(--sdp-dir-input-focus, #ff7a00); box-shadow:var(--sdp-dir-input-focus-shadow, 0 0 0 3px rgba(255,122,0,.18)); }
.sdp-directory-filter-top > button{
  border:0;
  padding:0 16px;
  background:var(--sdp-dir-btn-bg, #111827);
  color:var(--sdp-dir-btn-text, #ffffff);
  font-weight:700;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.sdp-directory-filter-top > button:hover{
  background:var(--sdp-dir-btn-bg-hover, #0b1220);
  color:var(--sdp-dir-btn-text-hover, #ffffff);
}
.sdp-directory-filter-top > button:active{
  color:var(--sdp-dir-btn-text-active, #ffffff);
}
.sdp-directory-filters .sdp-directory-clear{
  background:var(--sdp-dir-btn-bg, #111827);
  color:var(--sdp-dir-btn-text, #ffffff);
}
.sdp-directory-state-flags{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  gap:10px;
}
.sdp-state-flag{
  border:1px solid var(--sdp-dir-state-border, #d0d5dd);
  background:var(--sdp-dir-state-bg, #ffffff);
  color:var(--sdp-dir-state-text, #344054);
  border-radius:12px;
  padding:6px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--sdp-dir-state-min-height, 86px);
  height:auto;
}
.sdp-state-flag img{
  width:100%;
  max-width:92px;
  height:var(--sdp-dir-state-flag-height, 44px);
  object-fit:cover;
  border-radius:6px;
  border:1px solid #e4e7ec;
}
.sdp-state-flag.sdp-state-flag-all{
  min-height:var(--sdp-dir-state-min-height, 86px);
  justify-content:center;
}
.sdp-state-flag.is-active{
  border-color:var(--sdp-dir-state-active-border, #111827);
  background:var(--sdp-dir-state-active-bg, #111827);
  color:var(--sdp-dir-state-active-text, #ffffff);
  box-shadow:0 0 0 2px rgba(17,24,39,.15);
}
.sdp-directory-city-filters{
  display:none;
  flex-wrap:wrap;
  gap:8px;
}
.sdp-directory-city-filters.is-visible{
  display:flex;
}
.sdp-city-flag{
  border:1px solid var(--sdp-dir-city-border, #d0d5dd);
  background:var(--sdp-dir-city-bg, #ffffff);
  color:var(--sdp-dir-city-text, #344054);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  height:auto;
}
.sdp-city-flag.is-active{
  background:var(--sdp-dir-city-active-bg, #111827);
  color:var(--sdp-dir-city-active-text, #ffffff);
  border-color:var(--sdp-dir-city-active-border, #111827);
}
.sdp-directory-feedback{
  margin-top:14px;
  color:var(--sdp-dir-label-color, #344054);
  font-size:14px;
}
.sdp-directory-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.sdp-directory-card{
  border:1px solid var(--sdp-dir-card-border, #e4e7ec);
  border-radius:12px;
  background:var(--sdp-dir-card-bg, #ffffff);
  padding:14px;
}
.sdp-directory-logo{
  width:100%;
  height:180px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #eaecf0;
  background:#f2f4f7;
  display:block;
}
.sdp-directory-shop{
  margin:12px 0 0;
  font-size:17px;
  line-height:1.25;
  color:var(--sdp-dir-card-title, #101828);
}
.sdp-directory-shop-link{
  color:inherit;
  text-decoration:none;
}
.sdp-directory-shop-link:hover{
  text-decoration:underline;
}
.sdp-directory-meta{
  margin-top:10px;
  color:var(--sdp-dir-card-text, #475467);
  font-size:13px;
  line-height:1.5;
}
.sdp-directory-links{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sdp-directory-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  border:1px solid #d0d5dd;
  background:#ffffff;
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  padding:7px 10px;
  text-decoration:none;
}
.sdp-directory-pill svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
}
.sdp-directory-pill.is-directions{
  background:#111827;
  border-color:#111827;
  color:#ffffff;
}
.sdp-directory-pagination{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.sdp-directory-pagination button{
  border:1px solid var(--sdp-dir-pg-btn-border, #d0d5dd);
  background:var(--sdp-dir-pg-btn-bg, #ffffff);
  color:var(--sdp-dir-pg-btn-text, #101828);
  border-radius:8px;
  padding:7px 10px;
  cursor:pointer;
}
.sdp-directory-pagination button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.sdp-directory-detail-page .sdp-directory-hero{
  margin-bottom:14px;
}
.sdp-directory-back-link{
  color:var(--sdp-dir-card-text, #475467);
  font-weight:600;
  text-decoration:none;
}
.sdp-directory-back-link:hover{
  text-decoration:underline;
}
.sdp-directory-detail-title{
  margin:6px 0 0;
  font-size:30px;
  line-height:1.15;
  color:var(--sdp-dir-title-color, #101828);
}
.sdp-directory-card-detail{
  max-width:780px;
}
.sdp-directory-logo-detail{
  height:320px;
}
.sdp-directory-meta-detail{
  font-size:15px;
}
@media (max-width: 900px){
  .sdp-directory-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sdp-directory-logo-detail{ height:240px; }
}
@media (max-width: 640px){
  .sdp-directory-state-flags{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sdp-directory-page{ padding:14px; }
  .sdp-directory-hero h2{ font-size:26px; }
  .sdp-directory-filter-top{ grid-template-columns:1fr; }
  .sdp-directory-logo{ height:160px; }
  .sdp-directory-logo-detail{ height:180px; }
  .sdp-directory-grid{ grid-template-columns:1fr; }
  .sdp-directory-detail-title{ font-size:24px; }
}