/* Form Elements - Perfectly Unified Design */

/* ============================================
   BASE STYLES (SHARED BY ALL INPUTS)
   ============================================ */
.cod-input,
.cod-select,
.cod-textarea {
  box-sizing: border-box;
  font-family: var(
    --font-family-base,
    "IBM Plex Sans Arabic",
    "Inter",
    sans-serif
  );
  font-size: var(--font-size-base, 15px);
  font-weight: var(--font-weight-medium, 500);

  /* ✅ UNIFIED DEFAULT STATE - EXACTLY THE SAME */
  width: 100%;
  background: var(--cod-state-default-bg, #ffffff);
  border: 2px solid var(--cod-state-default-border, #e5e7eb);
  color: var(--cod-text, #052f1b);
  border-radius: var(--radius-lg, 12px);

  /* Behavior */
  transition: all var(--transition-base, 0.2s ease);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================
   TEXT INPUTS
   ============================================ */
.cod-input {
  height: 56px;
  padding: 0 var(--spacing-lg, 16px);
}

.cod-input::placeholder {
  color: var(--cod-text-placeholder, #a0bfad);
  font-weight: var(--font-weight-normal, 400);
}

/* ============================================
   SELECT DROPDOWN (Clean, Single Arrow)
   ============================================ */
.cod-select {
  height: 56px;
  padding: 0 var(--spacing-lg, 16px);
  padding-right: 44px;
  cursor: pointer;

  /* ✅ Single arrow definition - Gray by default */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

/* Green arrow on hover, focus, or when filled */
.cod-select:hover:not(:disabled),
.cod-select:focus,
.cod-select.has-value {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230adb62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Select options */
.cod-select option {
  padding: var(--spacing-md, 12px);
  background: var(--cod-surface-primary, #ffffff);
  color: var(--cod-text, #052f1b);
}

.cod-select option[value=""] {
  color: var(--cod-text-tertiary, #6b7280);
}

/* ============================================
   TEXTAREA
   ============================================ */
.cod-textarea {
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
  resize: vertical;
  min-height: 60px;
  line-height: var(--line-height-normal, 1.5);
}

.cod-textarea::placeholder {
  color: var(--cod-text-placeholder, #a0bfad);
  font-weight: var(--font-weight-normal, 400);
}

/* ============================================
   HOVER STATE (UNIFIED)
   ============================================ */
.cod-input:hover:not(:disabled),
.cod-select:hover:not(:disabled),
.cod-textarea:hover:not(:disabled) {
  border-color: var(--cod-state-hover-border, var(--cod-primary, #0adb62));
}

/* ============================================
   FOCUS STATE (UNIFIED)
   ============================================ */
.cod-input:focus,
.cod-select:focus,
.cod-textarea:focus {
  outline: none;
  border-color: var(--cod-state-focus-border, var(--cod-primary, #0adb62));
  box-shadow: var(--cod-shadow-focus, none);
}

/* ❌ REMOVED: Duplicate arrow definition was here on line 115 */

/* ============================================
   FILLED/ACTIVE STATE (UNIFIED)
   Same green border when field has content
   ============================================ */

/* Input with text */
.cod-input:not(:placeholder-shown) {
  border-color: var(--cod-state-active-border, var(--cod-primary, #0adb62));
}

/* Select with value - Using JS class for reliability */
.cod-select.has-value {
  border-color: var(--cod-state-active-border, var(--cod-primary, #0adb62));
}

/* Textarea with text */
.cod-textarea:not(:placeholder-shown) {
  border-color: var(--cod-state-active-border, var(--cod-primary, #0adb62));
}

/* ============================================
   VALIDATION STATES
   ============================================ */
.simple-cod-form.was-validated .cod-input:invalid:not(:focus),
.simple-cod-form.was-validated .cod-select:invalid:not(:focus),
.simple-cod-form.was-validated .cod-textarea:invalid:not(:focus) {
  border-color: var(--cod-error, #ef4444);
  background: var(--cod-error-bg, #fef2f2);
}

/* ============================================
   DISABLED STATE
   ============================================ */
.cod-input:disabled,
.cod-select:disabled,
.cod-textarea:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================
   FIELD LABELS
   ============================================ */
.cod-field-label,
.cod-section-label {
  display: block;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--cod-text-secondary, #374151);
  margin-bottom: var(--spacing-sm, 6px);
}

.cod-section-label {
  font-size: var(--font-size-sm, 14px);
  color: var(--cod-text, #052f1b);
}

/* ============================================
   DELIVERY SECTION
   ============================================ */
.cod-delivery-section {
  margin-top: 0;
  margin-bottom: 0px;
}

.cod-section-label {
  font-size: var(--font-size-sm, 14px);
  color: var(--cod-text, #052f1b);
  margin-bottom: var(--spacing-sm, 8px); /* Increased from 6px */
}

/* ============================================
   ERROR MESSAGES
   ============================================ */
.cod-no-companies {
  padding: var(--spacing-xl, 20px);
  background: var(--cod-error-bg, #fef2f2);
  border: 2px solid var(--cod-error-border, #fecaca);
  border-radius: var(--radius-lg, 12px);
  text-align: center;
}

.cod-no-companies p {
  margin: 0;
  color: var(--cod-error-text, #991b1b);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-sm, 14px);
}

/* Full Width Field */
.cod-field.full-width {
  grid-column: 1 / -1;
}

/* ============================================
   SELECT2 CUSTOM STYLING
   ============================================ */
.select2-container--default .select2-selection--single {
  height: 56px !important;
  border: 2px solid var(--cod-state-default-border, #e5e7eb) !important;
  border-radius: var(--radius-lg, 12px) !important;
  background: var(--cod-state-default-bg, #ffffff) !important;
  transition: all var(--transition-base, 0.2s ease) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 52px !important;
  padding-left: 16px !important;
  color: var(--cod-text, #052f1b) !important;
  font-size: var(--font-size-base, 15px) !important;
  font-weight: var(--font-weight-medium, 500) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--cod-text-placeholder, #a0bfad) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 52px !important;
  right: 12px !important;
}

/* Hover state */
.select2-container--default .select2-selection--single:hover {
  border-color: var(--cod-primary, #0adb62) !important;
}

/* Focus state */
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cod-primary, #0adb62) !important;
  box-shadow: var(--cod-shadow-focus, none) !important;
}

/* Dropdown */
.select2-dropdown {
  border: 2px solid var(--cod-primary, #0adb62) !important;
  border-radius: var(--radius-lg, 12px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.select2-results__option {
  padding: 12px 16px !important;
  font-size: var(--font-size-base, 15px) !important;
}

.select2-results__option--highlighted {
  background: var(--cod-primary-light, rgba(10, 219, 98, 0.08)) !important;
  color: var(--cod-text, #052f1b) !important;
}

.select2-results__option--selected {
  background: var(--cod-primary, #0adb62) !important;
  color: white !important;
}

/* Search input */
.select2-search--dropdown .select2-search__field {
  border: 2px solid var(--cod-border-default, #e5e7eb) !important;
  border-radius: var(--radius-md, 10px) !important;
  padding: 8px 12px !important;
  font-size: var(--font-size-sm, 14px) !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--cod-primary, #0adb62) !important;
  outline: none !important;
}