/* ============== Tokens (no Tailwind dependency) ============== */
:root {
  /* Typography */
  --tw-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --tw-text-base: 1.5rem; /* ~24px (was commented 16px, value unchanged) */

  /* Radius */
  --tw-radius: 0.375rem; /* 6px */

  /* Palette */
  --tw-color-white: #ffffff;
  --tw-color-gray-700: #374151;
  --tw-color-gray-300: #D1D5DB;
  --tw-color-gray-100: #F3F4F6;
  --tw-color-red-600: #dc2626;
  --tw-color-red-700: #b91c1c;
  --tw-color-green-600: #16a34a;

  /* Alerts */
  --og-success-bg: #ecfdf5;
  --og-success-border: #bbf7d0;
  --og-error-bg: #fff1f2;
  --og-error-border: #fecaca;

  /* Effects */
  --og-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --tw-focus-ring: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ============== Container ============== */
.og-sms-reserve {
  
  display: flex;
  flex-direction: column;      
  align-items: flex-start;      
  gap: 0;                       
  margin: 1.5rem 0;             
  font-family: var(--tw-font-sans);
  font-size: var(--tw-text-base);
}

/* ============== Form ============== */
.og-sms-form {
  max-width: 320px;
  width: 100%;
  background: var(--tw-color-gray-100);
  border: 1px solid var(--tw-color-gray-300);
  border-radius: var(--tw-radius);
  padding: 1rem;
  box-shadow: var(--og-shadow-sm);
}


/* ============== Layout ============== */
.og-sms-row { margin-bottom: 0.75rem; }

/* ============== Labels ============== */
.og-sms-label {
  display: block;
  color: var(--tw-color-gray-700);
  margin-bottom: 0.25rem;
}

/* ============== Inputs ============== */
.og-sms-input,
.og-sms-email {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tw-color-gray-300);
  border-radius: var(--tw-radius);
  background: var(--tw-color-white);
  font-size: var(--tw-text-base);
}

.og-sms-input:focus,
.og-sms-email:focus {
  outline: none;
  box-shadow: var(--tw-focus-ring);
  border-color: var(--tw-color-red-600);
}

/* Mirror focus style for keyboard users without changing visuals */
.og-sms-input:focus-visible,
.og-sms-email:focus-visible {
  outline: none;
  box-shadow: var(--tw-focus-ring);
  border-color: var(--tw-color-red-600);
}

/* Hide native checkbox (UI is controlled by label text) */
.og-sms-check input {
  display: none !important;
}

/* ============== Consent copy ============== */
.og-sms-consent {
  font-size: 1rem;
  color: var(--tw-color-gray-700);
  line-height: 1.25rem;
  font-weight: normal !important;
}

/* ============== Button ============== */
.og-sms-button {
  display: inline-block;
  width: 100%;
  background: var(--tw-color-red-600);
  color: var(--tw-color-white);
  border: none;
  border-radius: var(--tw-radius);
  margin-top: 1rem;
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.og-sms-button:hover { background: var(--tw-color-red-700); }
.og-sms-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============== Alerts ============== */
.og-sms-alert {
  border-radius: var(--tw-radius);
  padding: 0.75rem;
  margin-top: 1rem;
  font-size: 1.5rem;
}

.og-sms-alert--success {
  background: var(--og-success-bg);
  color: var(--tw-color-green-600);
  border: 1px solid var(--og-success-border);
}

.og-sms-alert--error {
  background: var(--og-error-bg);
  color: var(--tw-color-red-700);
  border: 1px solid var(--og-error-border);
}

/* ============== Utilities ============== */
.og-hidden { display: none !important; }

/* ============== WP autop/formatting guards ============== */
/* Hide <br> that can create extra gaps inside the container */
.og-sms-reserve br { display: none !important; }

/* Remove empty/auto-inserted <p> wrappers WordPress sometimes adds */
.og-sms-reserve > p,
.og-sms-reserve form > p,
.og-sms-form > p { display: none !important; margin: 0; padding: 0; }
.og-sms-reserve p:empty { display: none !important; }

/* If WP wraps labels/inputs in <p>, collapse margins */
.og-sms-reserve p .og-sms-label,
.og-sms-reserve p .og-sms-input,
.og-sms-reserve p .og-sms-email { margin: 0; }

/* ============== Media (kept for future extension) ============== */
@media (min-width: 720px) {
  .og-sms-row { margin-bottom: 0.75rem; }
}