/**
 * ====================================================================
 * RAMP GLOBAL — UNIFIED FORM DESIGN SYSTEM
 * Centralized design tokens, input states, buttons & form components.
 * Matches official RAMP UI Form Specification.
 * ====================================================================
 */

:root {
  /* Surface & Borders */
  --rf-bg: #ffffff;
  --rf-bg-subtle: #f8fafc;
  --rf-bg-disabled: #f1f5f9;
  --rf-border: #e2e8f0;
  --rf-border-hover: #cbd5e1;
  --rf-border-focus: #00c08b;
  --rf-focus-ring: rgba(0, 192, 139, 0.16);
  --rf-border-error: #ef4444;
  --rf-error-ring: rgba(239, 68, 68, 0.16);
  
  /* Text & Labels */
  --rf-text-primary: #0f172a;
  --rf-text-secondary: #475569;
  --rf-text-muted: #64748b;
  --rf-placeholder: #94a3b8;
  --rf-label-size: 0.875rem; /* 14px */
  --rf-label-weight: 600;
  
  /* Sizing & Geometry */
  --rf-input-height: 46px;
  --rf-input-height-lg: 48px;
  --rf-input-height-sm: 36px;
  --rf-input-radius: 10px;
  --rf-input-padding: 0 16px;
  --rf-input-font-size: 0.9375rem; /* 15px */
  
  /* Buttons */
  --rf-btn-primary-bg: #00b894;
  --rf-btn-primary-hover: #009e75;
  --rf-btn-primary-text: #ffffff;
  --rf-btn-primary-shadow: 0 4px 14px rgba(0, 184, 148, 0.28);
  --rf-btn-secondary-border: #00c08b;
  --rf-btn-secondary-text: #00c08b;
  --rf-btn-secondary-hover-bg: rgba(0, 192, 139, 0.08);
  --rf-btn-radius: 10px;
  
  /* Status Colors */
  --rf-req-color: #ef4444;
  --rf-opt-color: #64748b;
}

/* ====================================================================
   1. GLOBAL FORM GROUP & LABELS
   ==================================================================== */
.form-group,
.demo-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
  position: relative;
  text-align: left;
}

.form-group.full-width,
.demo-form-group.full-width {
  grid-column: 1 / -1;
}

/* Labels */
.form-group label,
.demo-form-group label,
.contact-form label,
.registration-form label {
  font-size: var(--rf-label-size);
  font-weight: var(--rf-label-weight);
  color: var(--rf-text-primary);
  margin-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}

/* Mandatory asterisk */
.form-group label .req,
.form-group label .required,
.contact-form .req,
.registration-form label .req,
.demo-form-group label .req {
  color: var(--rf-req-color);
  font-weight: 700;
  margin-left: 1px;
}

/* Optional label text */
.form-group label .optional,
.form-group label span.opt {
  color: var(--rf-opt-color);
  font-weight: 400;
  font-size: 0.8125rem;
  margin-left: 2px;
}

/* Helper & Error text below fields */
.error-message,
.form-error,
.is-invalid + .error-message {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rf-border-error);
  margin-top: 4px;
  line-height: 1.3;
  display: block;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--rf-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ====================================================================
   2. INPUT FIELDS, SELECTS & TEXTAREAS (BASE & STATES)
   ==================================================================== */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="search"],
.form-group select,
.form-group textarea,
.demo-form-group input,
.demo-form-group select,
.demo-form-group textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea,
.registration-form input,
.registration-form select,
.registration-form textarea {
  width: 100%;
  height: var(--rf-input-height);
  padding: var(--rf-input-padding);
  font-size: var(--rf-input-font-size);
  font-family: inherit;
  font-weight: 400;
  color: var(--rf-text-primary);
  background-color: var(--rf-bg);
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-input-radius);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
}

/* Placeholder */
.form-group input::placeholder,
.form-group textarea::placeholder,
.demo-form-group input::placeholder,
.demo-form-group textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--rf-placeholder);
  font-weight: 400;
  opacity: 1;
}

/* Hover State */
.form-group input:hover:not(:disabled):not(:focus),
.form-group select:hover:not(:disabled):not(:focus),
.form-group textarea:hover:not(:disabled):not(:focus),
.demo-form-group input:hover:not(:disabled):not(:focus),
.demo-form-group select:hover:not(:disabled):not(:focus),
.demo-form-group textarea:hover:not(:disabled):not(:focus),
.contact-form input:hover:not(:disabled):not(:focus),
.contact-form select:hover:not(:disabled):not(:focus),
.contact-form textarea:hover:not(:disabled):not(:focus),
.registration-form input:hover:not(:disabled):not(:focus),
.registration-form select:hover:not(:disabled):not(:focus) {
  border-color: var(--rf-border-hover);
}

/* Focused State */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.demo-form-group input:focus,
.demo-form-group select:focus,
.demo-form-group textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.registration-form input:focus,
.registration-form select:focus,
.registration-form textarea:focus {
  border-color: var(--rf-border-focus) !important;
  box-shadow: 0 0 0 3.5px var(--rf-focus-ring) !important;
  background-color: #ffffff;
  outline: none;
}

/* Error State */
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid,
.contact-form input.is-invalid,
.contact-form select.is-invalid,
.contact-form textarea.is-invalid,
.registration-form input.is-invalid,
.registration-form select.is-invalid {
  border-color: var(--rf-border-error) !important;
  box-shadow: 0 0 0 3.5px var(--rf-error-ring) !important;
}

/* Disabled State */
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled,
.demo-form-group input:disabled,
.demo-form-group select:disabled,
.demo-form-group textarea:disabled,
.contact-form input:disabled,
.contact-form select:disabled,
.contact-form textarea:disabled {
  background-color: var(--rf-bg-disabled) !important;
  border-color: var(--rf-border) !important;
  color: var(--rf-text-disabled) !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Dropdown / Select styling with custom chevron */
.form-group select,
.demo-form-group select,
.contact-form select,
.registration-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Textarea */
.form-group textarea,
.demo-form-group textarea,
.contact-form textarea,
.registration-form textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* ====================================================================
   3. PHONE NUMBER & COUNTRY CODE GROUPS
   ==================================================================== */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.phone-input-wrapper .country-code-field {
  width: 85px;
  flex-shrink: 0;
  background-color: #f8fafc;
  color: var(--rf-text-secondary);
  font-weight: 600;
  text-align: center;
  padding: 0 10px;
  border-radius: var(--rf-input-radius);
}

.phone-input-wrapper .phone-number-field {
  flex: 1;
}

/* ====================================================================
   4. INTEREST CHIPS & CHECKBOXES
   ==================================================================== */
.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip-label {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rf-text-secondary);
  background: #f8fafc;
  border: 1.5px solid var(--rf-border);
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chip:hover .chip-label {
  border-color: var(--rf-border-hover);
  background: #f1f5f9;
}

.chip input[type="checkbox"]:checked + .chip-label {
  background: #e6fbf4;
  color: #00b894;
  border-color: #00b894;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.15);
}

/* Standard Checkbox Terms Agreement */
.form-agreement,
.form-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--rf-text-secondary);
  line-height: 1.45;
  margin-top: 8px;
}

.form-agreement input[type="checkbox"],
.form-terms-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  accent-color: #00c08b;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.form-agreement a,
.form-terms-row a {
  color: #00c08b;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.form-agreement a:hover,
.form-terms-row a:hover {
  color: #009e75;
  text-decoration: underline;
}

/* ====================================================================
   5. ACTION BUTTON VARIANTS, STATES & SIZES
   ==================================================================== */
/* Base Primary Button */
.btn-primary,
.btn-submit-trial,
.btn-submit-demo,
.submit-btn,
.form-actions button[type="submit"],
.contact-form button[type="submit"],
.compact-form button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 26px !important;
  background-color: var(--rf-btn-primary-bg) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border: none !important;
  border-radius: var(--rf-btn-radius) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: var(--rf-btn-primary-shadow) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.btn-primary:hover,
.btn-submit-trial:hover,
.btn-submit-demo:hover,
.submit-btn:hover,
.form-actions button[type="submit"]:hover,
.contact-form button[type="submit"]:hover,
.compact-form button[type="submit"]:hover {
  background-color: var(--rf-btn-primary-hover) !important;
  box-shadow: 0 6px 18px rgba(0, 184, 148, 0.35) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.btn-primary:active,
.btn-submit-trial:active,
.btn-submit-demo:active,
.submit-btn:active,
.form-actions button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(0, 184, 148, 0.2) !important;
}

/* Disabled State */
.btn-primary:disabled,
.btn-submit-trial:disabled,
.btn-submit-demo:disabled,
.submit-btn:disabled,
.form-actions button[type="submit"]:disabled {
  background-color: #a7f3d0 !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.8 !important;
}

/* Loading State */
.btn-loading,
.submit-btn.loading {
  background-color: #00b894 !important;
  color: #ffffff !important;
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
}

.btn-loading::before,
.submit-btn.loading::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: rfBtnSpin 0.7s linear infinite;
}

@keyframes rfBtnSpin {
  to { transform: rotate(360deg); }
}

/* Secondary Button */
.btn-secondary,
.btn-cancel,
.form-actions button.btn-secondary,
.contact-form button.btn-secondary,
.compact-form button.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 24px !important;
  background-color: #ffffff !important;
  color: var(--rf-btn-secondary-text) !important;
  border: 1.5px solid var(--rf-btn-secondary-border) !important;
  border-radius: var(--rf-btn-radius) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.form-actions button.btn-secondary:hover,
.contact-form button.btn-secondary:hover,
.compact-form button.btn-secondary:hover {
  background-color: var(--rf-btn-secondary-hover-bg) !important;
  border-color: #00a876 !important;
  color: #00a876 !important;
}

/* Tertiary / Clear Button */
.btn-tertiary,
.btn-clear {
  background: transparent !important;
  border: none !important;
  color: #00c08b !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 0 14px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease !important;
}

.btn-tertiary:hover,
.btn-clear:hover {
  color: #009e75 !important;
  text-decoration: underline !important;
}


/* Button Sizing Utilities */
.btn-lg,
.btn-size-lg {
  height: 48px;
  padding: 0 26px;
  font-size: 1rem;
}

.btn-md,
.btn-size-md {
  height: 42px;
  padding: 0 20px;
  font-size: 0.9rem;
}

.btn-sm,
.btn-size-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 0.8125rem;
  border-radius: 8px;
}

/* ====================================================================
   6. MODALS, FORMS & SCROLLING ARCHITECTURE
   ==================================================================== */
/* Form Grid */
.form-grid,
.dynamic-demo-form,
.registration-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}

/* Form Actions Row */
.form-actions,
.demo-form-actions,
.form-submit-wrapper {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Modal Overlays (Enable full vertical scrolling for tall content) */
.modal,
.demo-modal-overlay,
.trial-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* Modal Content Card Architecture */
.modal-content,
.modal-content.compact-modal,
.demo-modal-content,
.trial-modal-content {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #edf2f7;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  max-width: 640px;
  width: 100%;
  margin: 20px auto;
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.trial-modal-content {
  max-width: 820px;
}

.demo-modal-content {
  max-width: 620px;
}

/* Sticky Modal Header */
.modal-header,
.modal-header.compact-header,
.demo-modal-header,
.trial-form-header {
  flex-shrink: 0;
  background: #f8fafc;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

.modal-header.compact-header h2,
.demo-modal-header h2,
.trial-form-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rf-text-primary);
  margin: 0;
}

.modal-subtitle {
  font-size: 0.85rem;
  color: var(--rf-text-muted);
  margin: 2px 0 0 0;
}

/* Modal Body (Fully Scrollable on Tall Forms) */
.modal-body,
.compact-modal .modal-body,
.demo-modal-body,
.trial-form-body {
  flex: 1 1 auto;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 28px 28px;
  max-height: calc(90vh - 75px);
  box-sizing: border-box;
}

/* Custom Sleek Scrollbar for Modal Body & Overlays */
.modal-body::-webkit-scrollbar,
.demo-modal-body::-webkit-scrollbar,
.trial-form-body::-webkit-scrollbar,
.demo-modal-content::-webkit-scrollbar,
.trial-modal-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.searchable-options::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.modal-body::-webkit-scrollbar-track,
.demo-modal-body::-webkit-scrollbar-track,
.trial-form-body::-webkit-scrollbar-track,
.demo-modal-content::-webkit-scrollbar-track,
.trial-modal-content::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.searchable-options::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb,
.demo-modal-body::-webkit-scrollbar-thumb,
.trial-form-body::-webkit-scrollbar-thumb,
.demo-modal-content::-webkit-scrollbar-thumb,
.trial-modal-content::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.searchable-options::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.demo-modal-body::-webkit-scrollbar-thumb:hover,
.trial-form-body::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: #00c08b;
}

/* Firefox scrollbar support */
.modal-body,
.demo-modal-body,
.trial-form-body,
.modal-content,
.searchable-options {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

/* Close Button */
.modal-close,
.close-demo-modal,
.close-trial-modal {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  line-height: 1;
}

.modal-close:hover,
.close-demo-modal:hover,
.close-trial-modal:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ====================================================================
   7. SEARCHABLE SELECTS & CUSTOM DROPDOWNS
   ==================================================================== */
.searchable-select {
  position: relative;
  width: 100%;
}

.searchable-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-input-radius);
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  display: none;
}

.searchable-options.active {
  display: block;
  animation: rfDropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rfDropdownFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.option-group-label {
  padding: 8px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #f1f5f9;
}

.searchable-option {
  padding: 10px 16px;
  font-size: 0.9375rem;
  color: var(--rf-text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.searchable-option:hover {
  background: #e6fbf4;
  color: #00b894;
  font-weight: 500;
}

.searchable-option.no-results {
  color: var(--rf-placeholder);
  font-style: italic;
  cursor: default;
}

/* ====================================================================
   8. RESPONSIVE BREAKPOINTS (MOBILE & TABLET)
   ==================================================================== */
@media (max-width: 768px) {
  .modal,
  .demo-modal-overlay,
  .trial-modal-overlay {
    padding: 12px 8px !important;
  }

  .modal-content,
  .modal-content.compact-modal,
  .demo-modal-content,
  .trial-modal-content {
    margin: 8px auto !important;
    max-height: calc(100vh - 20px) !important;
    width: 98% !important;
    border-radius: 14px !important;
  }

  .modal-header.compact-header,
  .demo-modal-header,
  .trial-form-header {
    padding: 14px 18px !important;
  }

  .modal-body,
  .compact-modal .modal-body,
  .demo-modal-body,
  .trial-form-body {
    padding: 16px 16px 20px !important;
    max-height: calc(100vh - 80px) !important;
  }

  .form-grid,
  .dynamic-demo-form,
  .registration-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-actions,
  .demo-form-actions,
  .form-submit-wrapper {
    flex-direction: column-reverse;
    gap: 10px;
    width: 100%;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .demo-form-actions button,
  .form-submit-wrapper button,
  .submit-btn {
    width: 100%;
  }
}