/**
 * Smart Input Sizing System
 *
 * Content-aware input widths for professional, premium design
 * Each size is optimized for specific content types
 *
 * @since 3.0.0
 */

/* ============================================
   INPUT SIZE VARIANTS
   Content-appropriate widths for better UX
   ============================================ */

/* Extra Small - Numbers, percentages, years, counts */
.prorank-input-xs {
  width: 100px !important;
  max-width: 100px !important;
}

/* Small - Phone, date, time, language codes, short codes */
.prorank-input-sm {
  width: 180px !important;
  max-width: 180px !important;
}

/* Medium - Names, emails, cities, usernames */
.prorank-input-md {
  width: 300px !important;
  max-width: 300px !important;
}

/* Large - URLs, addresses, file paths */
.prorank-input-lg {
  width: 450px !important;
  max-width: 450px !important;
}

/* Extra Large - API keys, tokens, lightning addresses */
.prorank-input-xl {
  width: 600px !important;
  max-width: 600px !important;
}

/* Full width - Descriptions, textareas, long text */
.prorank-input-full {
  width: 100% !important;
  max-width: 800px !important;
}

/* ============================================
   INPUT WITH UNIT INDICATOR
   For numeric inputs with units (minutes, %, etc)
   ============================================ */

.prorank-input-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.prorank-input-unit {
  font-size: 14px;
  color: var(--prorank-text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

/* Make unit inputs more compact */
.prorank-input-with-unit .prorank-input-xs {
  width: 80px !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* On mobile, allow inputs to be more flexible */
  .prorank-input-xs,
  .prorank-input-sm {
    min-width: 80px;
    width: auto !important;
    max-width: 100% !important;
  }

  .prorank-input-md,
  .prorank-input-lg,
  .prorank-input-xl {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================
   WORDPRESS OVERRIDES
   Ensure our sizing takes precedence
   ============================================ */

.components-text-control__input.prorank-input-xs,
.components-text-control__input.prorank-input-sm,
.components-text-control__input.prorank-input-md,
.components-text-control__input.prorank-input-lg,
.components-text-control__input.prorank-input-xl,
.components-text-control__input.prorank-input-full {
  /* Override WordPress default widths */
  min-width: unset !important;
}

/* ============================================
   VISUAL ENHANCEMENTS
   Premium input styling
   ============================================ */

/* Add subtle animation to focus */
.prorank-input-xs:focus,
.prorank-input-sm:focus,
.prorank-input-md:focus,
.prorank-input-lg:focus,
.prorank-input-xl:focus,
.prorank-input-full:focus {
  border-color: var(--prorank-primary);
  box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.1);
  transform: translateY(-1px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state for better interactivity */
.prorank-input-xs:hover:not(:focus):not(:disabled),
.prorank-input-sm:hover:not(:focus):not(:disabled),
.prorank-input-md:hover:not(:focus):not(:disabled),
.prorank-input-lg:hover:not(:focus):not(:disabled),
.prorank-input-xl:hover:not(:focus):not(:disabled),
.prorank-input-full:hover:not(:focus):not(:disabled) {
  border-color: var(--prorank-border-dark);
}

/* ============================================
   AUTOMATIC CONTENT-BASED SIZING
   Apply appropriate widths based on input type
   ============================================ */

/* Number inputs - compact width */
input[type="number"]:not([class*="prorank-input-"]) {
  width: 100px !important;
  max-width: 100px !important;
}

/* Email inputs - medium width */
input[type="email"]:not([class*="prorank-input-"]) {
  width: 300px !important;
  max-width: 300px !important;
}

/* URL inputs - large width */
input[type="url"]:not([class*="prorank-input-"]) {
  width: 450px !important;
  max-width: 450px !important;
}

/* API key and token inputs - extra large */
input[name*="api"]:not([class*="prorank-input-"]),
input[name*="key"]:not([class*="prorank-input-"]),
input[name*="token"]:not([class*="prorank-input-"]),
input[placeholder*="API"]:not([class*="prorank-input-"]),
input[placeholder*="key"]:not([class*="prorank-input-"]) {
  width: 600px !important;
  max-width: 600px !important;
}

/* Time/Duration inputs - extra small */
input[name*="duration"]:not([class*="prorank-input-"]),
input[name*="timeout"]:not([class*="prorank-input-"]),
input[name*="lifetime"]:not([class*="prorank-input-"]),
input[name*="delay"]:not([class*="prorank-input-"]) {
  width: 100px !important;
  max-width: 100px !important;
}

/* Percentage inputs - extra small */
input[name*="percent"]:not([class*="prorank-input-"]),
input[name*="ratio"]:not([class*="prorank-input-"]),
input[placeholder*="%"]:not([class*="prorank-input-"]) {
  width: 80px !important;
  max-width: 80px !important;
}

/* Settings pages specific overrides */
.prorank-settings-content input[type="text"]:not([class*="prorank-input-"]),
.prorank-robots-indexing-settings input[type="text"]:not([class*="prorank-input-"]) {
  width: auto !important;
  min-width: 200px !important;
  max-width: 450px !important;
}