/* ---------- NEW: Theme Toggle ---------- */
.ltc-theme-toggle-wrap {
  position: absolute;
  top: 22px;
  right: 22px;
}
.ltc-theme-toggle {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 26px;
  cursor: pointer;
}
.ltc-theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ltc-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 26px;
  transition: .4s;
}

/* This is the sliding circle */
.ltc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

.ltc-theme-toggle input:checked + .ltc-toggle-slider {
  background-color: var(--ltc-accent);
}

/* This moves the circle */
.ltc-theme-toggle input:checked + .ltc-toggle-slider:before {
  transform: translateX(24px);
}

/* ---------- ICONS (WITH FADE) ---------- */

/* Base styles for BOTH icons */
.ltc-icon-sun,
.ltc-icon-moon {
    font-family: 'Arial', sans-serif;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    /* This is the key: animate opacity */
    transition: opacity 0.3s ease;
    /* Prevent icons from being selected */
    user-select: none;
}

/* Sun Icon */
.ltc-icon-sun {
    left: 3.5px;
    /* Visible by default (light mode) */
    opacity: 1;
}

/* Moon Icon */
.ltc-icon-moon {
    right: 5px;
    color: white;
    /* Hidden by default (light mode) */
    opacity: 0;
}

/* --- Checked State (Dark Mode) --- */

/* Hide the Sun */
.ltc-theme-toggle input:checked + .ltc-toggle-slider .ltc-icon-sun {
    opacity: 0;
}

/* Show the Moon */
.ltc-theme-toggle input:checked + .ltc-toggle-slider .ltc-icon-moon {
    opacity: 1;
}/* ==================================================
   Lakes Tutoring — Public Lead Form (Refined)
   Mobile-First + matches dashboard design language
   ================================================== */

:root{
  --ltc-navy:#003366;
  --ltc-accent:#FF7A59;
  --ltc-bg:#f4f7fc;
  --ltc-card:#ffffff;
  --ltc-text:#1f2a44;
  --ltc-muted:#6c7a91;
  --ltc-border:#e9eef6;
  --ltc-success:#198754;
  --ltc-warning:#ffc107;
  --ltc-danger:#dc3545;
  --ltc-darkfield:#0b1220;         /* dark field bg for contrast with white text */
  --ltc-focus-ring: 0 0 0 3px rgba(255,122,89,.25);
}

.ltc-enquiry-block{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ltc-text);
  margin: 0 auto;
  padding: 8px;
  max-width: 820px;
}

.ltc-enquiry-block .ltc-form{
  background: var(--ltc-card);
  border: 1px solid var(--ltc-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 18px;
  position: relative; /* Needed for toggle positioning */
}

/* Title */
.ltc-enquiry-block .ltc-form h3{
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ltc-navy); /* Default color for light mode */
  letter-spacing: .2px;
  padding-right: 60px; /* Make space for toggle */
}

/* Decorative accent */
.ltc-enquiry-block .ltc-form::before{
  content:"";
  display:block;
  height: 4px;
  width: 64px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ltc-accent), #ff9f59);
  margin-bottom: 12px;
}

/* Layout */
.ltc-form .ltc-form-row{
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.ltc-form label{
  font-size: .95rem;
  color: var(--ltc-navy);
  font-weight: 600;
}

.ltc-required{ color: var(--ltc-danger); }

/* Base fields (Light Mode Default) */
.ltc-form input[type="text"],
.ltc-form input[type="email"],
.ltc-form input[type="tel"],
.ltc-form input[type="date"],
.ltc-form select,
.ltc-form textarea{
  width: 100%;
  background: #fff; /* White background */
  color: var(--ltc-text); /* Black text */
  border: 1.5px solid var(--ltc-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.35;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease, background-color .15s ease, color .15s ease;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  -webkit-appearance: none; /* Reset appearance */
}

/* Ensure select options are light mode by default */
.ltc-form select option {
  background-color: #fff;
  color: var(--ltc-text);
}

/* Default select arrow (light mode) */
.ltc-form select {
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ltc-muted) 50%),
        linear-gradient(135deg, var(--ltc-muted) 50%, transparent 50%),
        linear-gradient(to right, #fff, #fff);
    background-position:
        calc(100% - 22px) calc(1em),
        calc(100% - 16px) calc(1em),
        calc(100% - 3.2rem) 0.4rem;
    background-size: 6px 6px, 6px 6px, 1px 2.2rem;
    background-repeat: no-repeat;
    padding-right: 3.5rem; /* Ensure space for arrow */
}


.ltc-form textarea{ min-height: 130px; resize: vertical; }

/* Hover/focus (Light Mode) */
.ltc-form input:hover,
.ltc-form select:hover,
.ltc-form textarea:hover{
  border-color: #d7e2f2;
}

/* Focus remains white bg/black text */
.ltc-form input:focus,
.ltc-form select:focus,
.ltc-form textarea:focus{
  border-color: var(--ltc-accent);
  box-shadow: var(--ltc-focus-ring);
  /* No color/bg change needed for light mode */
}

/* Invalid hint */
.ltc-form input:invalid,
.ltc-form select:invalid,
.ltc-form textarea:invalid{
  border-color: #ffd5cc;
}

/* Subtle input group hover elevation */
.ltc-form .ltc-form-row:hover input,
.ltc-form .ltc-form-row:hover select,
.ltc-form .ltc-form-row:hover textarea{
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Button */
.ltc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
  text-decoration: none;
  user-select: none;
}

.ltc-btn-primary{
  background: var(--ltc-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255,122,89,.32);
}

.ltc-btn-primary:hover{ filter: brightness(1.02); }
.ltc-btn-primary:active{ transform: translateY(1px); }

/* Messages (used by public.js) */
.ltc-form-messages{ margin: 10px 0 0; }

.ltc-message{
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
}

.ltc-message.processing{
  background: #fff8f4;
  border-color: #ffe3d7;
  color: #b35a3f;
}

.ltc-message.success{
  background: #eefaf2;
  border-color: #d1f1db;
  color: #136c3d;
}

.ltc-message.error{
  background: #fff2f2;
  border-color: #ffd7d7;
  color: #a22525;
}

/* Subnote */
.ltc-privacy-note{
  margin: 10px 2px 0;
  color: var(--ltc-muted);
  font-size: .9rem;
}

/* Submit size */
#ltc-submit-button{
  min-width: 180px;
  font-size: 1rem;
}

/* ---------- NEW: Theme Toggle ---------- */
.ltc-theme-toggle-wrap {
  position: absolute;
  top: 22px;
  right: 22px;
}
.ltc-theme-toggle {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 26px;
  cursor: pointer;
}
.ltc-theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ltc-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 26px;
  transition: .4s;
}

/* This is the sliding circle */
.ltc-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

.ltc-theme-toggle input:checked + .ltc-toggle-slider {
  background-color: var(--ltc-accent);
}

/* This moves the circle */
.ltc-theme-toggle input:checked + .ltc-toggle-slider:before {
  transform: translateX(24px);
}

/* ---------- ICONS (WITH FADE) ---------- */

/* Base styles for BOTH icons */
.ltc-icon-sun,
.ltc-icon-moon {
    font-family: 'Arial', sans-serif;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    /* This is the key: animate opacity */
    transition: opacity 0.3s ease;
    /* Prevent icons from being selected */
    user-select: none;
}

/* Sun Icon */
.ltc-icon-sun {
    left: 3.5px;
    /* Visible by default (light mode) */
    opacity: 1;
}

/* Moon Icon */
.ltc-icon-moon {
    right: 5px;
    color: white;
    /* Hidden by default (light mode) */
    opacity: 0;
}

/* --- Checked State (Dark Mode) --- */

/* Hide the Sun */
.ltc-theme-toggle input:checked + .ltc-toggle-slider .ltc-icon-sun {
    opacity: 0;
}

/* Show the Moon */
.ltc-theme-toggle input:checked + .ltc-toggle-slider .ltc-icon-moon {
    opacity: 1;
}


/* ---------- Responsive ---------- */
@media (min-width: 576px){
  .ltc-enquiry-block .ltc-form{ padding: 22px; }
  .ltc-enquiry-block .ltc-form h3{ font-size: 1.45rem; }
  .ltc-theme-toggle-wrap {
    top: 26px;
    right: 22px;
  }
}

/* Optional two-column helper if you wrap fields in .ltc-grid-2 */
@media (min-width: 768px){
  .ltc-grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}


/* ---------- NEW: Dark Mode (Toggled) ---------- */
.ltc-enquiry-block.dark-mode .ltc-form {
  background: #000000; /* User requested black */
  border-color: #1e2a42;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.ltc-enquiry-block.dark-mode {
  color: #e8eefc;
}
.ltc-enquiry-block.dark-mode .ltc-form h3 {
  color: #fff;
}
.ltc-enquiry-block.dark-mode .ltc-form label {
  color: #e8eefc;
}

/* Dark mode fields */
.ltc-enquiry-block.dark-mode .ltc-form input[type="text"],
.ltc-enquiry-block.dark-mode .ltc-form input[type="email"],
.ltc-enquiry-block.dark-mode .ltc-form input[type="tel"],
.ltc-enquiry-block.dark-mode .ltc-form input[type="date"],
.ltc-enquiry-block.dark-mode .ltc-form select,
.ltc-enquiry-block.dark-mode .ltc-form textarea {
  background: var(--ltc-darkfield);
  color: #e8eefc;
  border-color: #1e2a42;
  -webkit-text-fill-color: #e8eefc; /* iOS Safari */
}

/* Dark mode select options */
.ltc-enquiry-block.dark-mode .ltc-form select option {
  color: #fff;
  background-color: var(--ltc-darkfield);
}

/* Dark mode select arrow */
.ltc-enquiry-block.dark-mode .ltc-form select {
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #c9d3ea 50%),
    linear-gradient(135deg, #c9d3ea 50%, transparent 50%),
    linear-gradient(to right, var(--ltc-darkfield), var(--ltc-darkfield));
  background-position:
    calc(100% - 22px) calc(1em),
    calc(100% - 16px) calc(1em),
    calc(100% - 3.2rem) 0.4rem;
  background-size: 6px 6px, 6px 6px, 1px 2.2rem;
  background-repeat: no-repeat;
}

.ltc-enquiry-block.dark-mode .ltc-form input:hover,
.ltc-enquiry-block.dark-mode .ltc-form select:hover,
.ltc-enquiry-block.dark-mode .ltc-form textarea:hover {
  border-color: #2a3a59;
}

/* Focus styles for dark mode */
.ltc-enquiry-block.dark-mode .ltc-form input:focus,
.ltc-enquiry-block.dark-mode .ltc-form select:focus,
.ltc-enquiry-block.dark-mode .ltc-form textarea:focus {
  border-color: var(--ltc-accent); /* Keep accent focus border */
  box-shadow: var(--ltc-focus-ring); /* Keep accent focus ring */
  color: #fff; /* Ensure text stays white */
  -webkit-text-fill-color: #fff;
  background-color: var(--ltc-darkfield); /* Maintain dark bg on focus */
}

.ltc-enquiry-block.dark-mode .ltc-privacy-note {
  color: #c4cee4;
}