/* ==========================================================
   Demo — Public Shared Page Styles

   NOTE: Shared component CSS is loaded via <link> tags in HTML
   See: web/css/shared/ directory for shared components
   ========================================================== */

/* CSS Variables - Public-Specific
   NOTE: Core variables loaded from /css/shared/variables.css
   NOTE: Tenant-specific variables loaded dynamically from /css/variables.css (database) */

/* Base */
*{box-sizing:border-box}

html, body {
  min-height: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  background:var(--c-bg);
  color:var(--c-fg);
  font:16px/1.6 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Layout helpers */
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.container-fluid{width:100%}
section{margin:0;padding:0;border:0}


/* ==========================================================
   NOTE: Legacy modal styles removed - use shared/modals.css instead
   ========================================================== */

/* ==========================================================
   Fields
   ========================================================== */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  text-align: left;
}

.field label {
  font-weight: 500;
  margin-bottom: 6px;
}

.field input {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.field textarea {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  resize: vertical;
  font-family: inherit;
  min-height: 100px;
}

/* ==========================================================
   Dropdowns
   ========================================================== */
.field select {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fff;
  color: var(--c-fg);
  font-family: inherit;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-brand) 50%),
    linear-gradient(135deg, var(--c-brand) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 12px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field select {
  background-position:
    calc(100% - 18px) center,
    calc(100% - 12px) center;
}

/* Remove arrow on older browsers and align padding */
.field select::-ms-expand {
  display: none;
}

/* Hover and focus states to match inputs */
.field select:hover {
  border-color: var(--c-accent);
}

/* ==========================================================
   Unified focus style for all fields
   ========================================================== */
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.field label,
.field input,
.field select,
.field textarea,
.transcript-label,
.transcript-text {
  font-size: 16px;
}


/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  text-align: center;
  padding: 12px 0;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.1s ease;
  white-space: nowrap;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn-primary {
  background: var(--c-brand);
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background: var(--c-accent);
}

.btn-secondary {
  background: #fff;
  color: var(--c-brand);
  border: 2px solid var(--c-brand);
}

.btn-secondary:hover {
  background: var(--c-accent);
  color: #fff;
}

.btn-tertiary {
  background: #fff;
  color: var(--c-brand);
  border: 2px solid var(--c-brand);
}

.btn-tertiary:hover {
  background: var(--c-accent);
  color: #fff;
}

.btn-reg {
  width: 100px;;
  font-size: 16px;
  font-weight: 700;
}

.btn-small {
  padding: 8px 16px;
  font-size: 0.8rem;
  border-radius: 40px;
  font-weight: 600;
  min-width: 100px;
  text-align: center;
}

@supports (-webkit-touch-callout: none) {
  input, select, textarea, button, .btn, .btn-small {
    font-size: 16px !important;
  }
}