/* ============================================================
   Demo Access Manager — Form Styles
   All rules scoped to .dam-* to prevent theme CSS leakage.
   ============================================================ */

/* ---------- Google Font (Nunito — friendly, rounded, matches edu brand) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ---------- Brand tokens */
.dam-wrap {
  --dam-primary:      #144e6e;
  --dam-primary-light: #1a6a8f;
  --dam-primary-dark: #0f3a52;
  --dam-accent:       #1a8cba;
  --dam-green:        #8cc542;
  --dam-green-dark:   #75a836;
  --dam-green-light:  #eef7e0;
  --dam-blue:         #20a8e6;
  --dam-blue-dark:    #1790cc;
  --dam-blue-light:   #e0f4fd;
  --dam-teal:         #144e6e;
  --dam-teal-light:   #e0ecf4;
  --dam-orange:       #e07309;
  --dam-orange-light: #fef0e0;
  --dam-white:        #ffffff;
  --dam-bg:           #f0f7fb;
  --dam-card:         #ffffff;
  --dam-border:       #e0e8f0;
  --dam-text:         #1e2d1a;
  --dam-text-light:   #666;
  --dam-muted:        #6b7c5a;
  --dam-radius:       16px;
  --dam-radius-sm:    10px;
  --dam-shadow:       0 4px 20px rgba(20,78,110,.12);
  --dam-font:         'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Wrapper reset — beats theme specificity */
.dam-wrap,
.dam-wrap *,
.dam-wrap *::before,
.dam-wrap *::after {
  box-sizing: border-box !important;
}

/* Undo theme anchor overrides */
.dam-wrap a,
.dam-wrap a:hover,
.dam-wrap a:visited,
.dam-wrap a:focus {
  color: var(--dam-blue) !important;
  text-decoration: none !important;
}

/* Undo theme margin/padding resets */
.dam-wrap p  { margin: 0 !important; padding: 0 !important; }
.dam-wrap h1,
.dam-wrap h2 { margin: 0 !important; padding: 0 !important; font-weight: inherit !important; }
.dam-wrap ul  { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dam-wrap li  { margin: 0 !important; padding: 0 !important; }
.dam-wrap svg { display: block; max-width: none; }
.dam-wrap br { display: none !important; }

/* ---------- Page background */
.dam-wrap {
  font-family: var(--dam-font);
  color: var(--dam-text);
  padding: 36px 16px;
  min-height: 100%;
  background: transparent !important;
}

/* ---------- Expired alert */
.dam-wrap .dam-alert {
  max-width: 860px;
  margin: 0 auto 24px !important;
  padding: 14px 20px !important;
  border-radius: var(--dam-radius-sm) !important;
  font-size: 14px !important;
  font-family: var(--dam-font) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dam-wrap .dam-alert-warning {
  background: var(--dam-orange-light) !important;
  color: #7a3c00 !important;
  border: 1.5px solid #f0c07a !important;
}

/* ---------- Two-column layout */
.dam-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  align-items: stretch;
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* ---------- Left panel */
.dam-panel-left {
  min-height: 100%;
  background: linear-gradient(160deg, #0f3f58 0%, var(--dam-teal) 100%);
  color: #fff;
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--dam-shadow);
}

.dam-panel-left::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(140,197,66,.12);
  pointer-events: none;
}
.dam-panel-left::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(32,168,230,.10);
  pointer-events: none;
}

.dam-brand-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  padding: 5px 13px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 22px !important;
  font-family: var(--dam-font) !important;
  line-height: 1 !important;
}

.dam-panel-title {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  font-family: var(--dam-font) !important;
}
.dam-panel-title-line { display: block; }
.dam-accent { color: var(--dam-green) !important; }

.dam-panel-desc {
  font-size: 15px !important;
  color: #ffffff !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
  font-family: var(--dam-font) !important;
}

.dam-notice-card {
  display: grid;
  gap: 12px;
  padding: 18px 18px 18px 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 4px solid var(--dam-green);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.dam-notice-card p {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #ffffff !important;
  font-family: var(--dam-font) !important;
}

/* Feature list */
.dam-feature-list {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px !important;
}
.dam-feature-list li {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-size: 13.5px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-family: var(--dam-font) !important;
}
.dam-feat-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dam-feat-green  { background: rgba(140,197,66,.25);  color: var(--dam-green); }
.dam-feat-blue   { background: rgba(32,168,230,.25);  color: var(--dam-blue); }
.dam-feat-orange { background: rgba(224,115,9,.25);   color: #f0a85a; }
.dam-feat-teal   { background: rgba(255,255,255,.15); color: #a0cfe8; }

/* Testimonial */
.dam-testimonial {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--dam-radius-sm);
  padding: 16px 18px;
  margin-top: auto;
}
.dam-testimonial-stars {
  color: #fbbf24;
  font-size: 13px !important;
  letter-spacing: 2px;
  margin-bottom: 8px !important;
  display: block;
}
.dam-testimonial-text {
  font-size: 13px !important;
  color: #ffffff !important;
  font-style: italic;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
  font-family: var(--dam-font) !important;
}
.dam-testimonial-author {
  font-size: 11.5px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: var(--dam-font) !important;
  display: block;
}

/* ---------- Right panel */
.dam-panel-right {
  min-height: 100%;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--dam-border);
  border-radius: 22px;
  box-shadow: var(--dam-shadow);
}

.dam-form-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 28px;
}

.dam-form-icon-wrap {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--dam-green) 0%, #a8d96a 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 6px 20px rgba(140,197,66,.35);
  color: #fff;
  flex-shrink: 0;
}

.dam-form-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--dam-teal) !important;
  margin-bottom: 6px !important;
  font-family: var(--dam-font) !important;
  line-height: 1.2 !important;
}

.dam-form-sub {
  font-size: 13.5px !important;
  color: var(--dam-muted) !important;
  line-height: 1.45 !important;
  font-family: var(--dam-font) !important;
}

/* ---------- Form fields */
.dam-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dam-field-wrap { display: flex; flex-direction: column; gap: 8px; }

.dam-label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--dam-teal) !important;
  font-family: var(--dam-font) !important;
  line-height: 1.2 !important;
}
.dam-label svg { color: var(--dam-green); flex-shrink: 0; display: block; }

.dam-input {
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--dam-border) !important;
  border-radius: var(--dam-radius-sm) !important;
  font-size: 15px !important;
  font-family: var(--dam-font) !important;
  color: var(--dam-text) !important;
  background: #fbfdf8 !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}
.dam-input:focus {
  border-color: var(--dam-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(32,168,230,.16) !important;
}
.dam-input::placeholder { color: #aab89a !important; font-size: 14px !important; }

/* Error box */
.dam-error-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff5f5;
  border: 1.5px solid #fca5a5;
  border-radius: var(--dam-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #991b1b;
  font-family: var(--dam-font);
}
.dam-error-box svg { flex-shrink: 0; margin-top: 1px; }
.dam-error-text { line-height: 1.4; }

/* CTA button */
.dam-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 15px 24px !important;
  background: #144e6e !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--dam-radius-sm) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  font-family: var(--dam-font) !important;
  cursor: pointer !important;
  letter-spacing: .01em !important;
  transition: filter .2s, transform .1s, box-shadow .2s !important;
  box-shadow: 0 4px 18px rgba(20,78,110,.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 4px 0 0 !important;
}
.dam-cta-btn:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(20,78,110,.35) !important;
  color: #fff !important;
}
.dam-cta-btn:active  { transform: scale(.98) !important; }
.dam-cta-btn:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.dam-btn-arrow {
  display: flex;
  align-items: center;
  transition: transform .2s;
}
.dam-btn-arrow svg { display: block; }
.dam-cta-btn:hover .dam-btn-arrow { transform: translateX(4px); }

.dam-form-footnote {
  margin-top: 16px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--dam-muted) !important;
  text-align: center;
  font-family: var(--dam-font) !important;
}

/* ---------- Responsive */
@media (max-width: 680px) {
  .dam-wrap { padding-left: 14px; padding-right: 14px; }
  .dam-layout { grid-template-columns: 1fr; gap: 16px; }
  .dam-panel-form, .dam-panel-guidance { padding: 20px 18px; }
  .dam-panel-title { font-size: 20px !important; }
  .dam-panel-desc { margin-bottom: 18px !important; }
  .dam-label { font-size: 11px !important; }
  .dam-input { font-size: 14px !important; }
  .dam-cta-btn { font-size: 13px !important; padding: 12px 24px !important; }
}
@media (max-width: 380px) {
  .dam-wrap { padding-left: 12px; padding-right: 12px; }
  .dam-panel-form, .dam-panel-guidance { padding: 18px 14px; }
  .dam-label { font-size: 10px !important; }
  .dam-input { font-size: 13px !important; padding: 10px 12px !important; }
  .dam-cta-btn { font-size: 12px !important; padding: 11px 20px !important; }
}