/*
 * ╔══════════════════════════════════════════════════╗
 * ║  villaGo — Inputs Component                     ║
 * ╚══════════════════════════════════════════════════╝
 */

/* ── Form Group ──────────────────────────────────── */
.form-group {
  margin-block-end: var(--y-space-m);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--y-space-m);
}

/* ── Label ───────────────────────────────────────── */
.form-label,
label {
  display: flex;
  align-items: center;
  gap: var(--y-space-s);
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-semibold);
  margin-block-end: 6px;
  color: var(--y-color-text);
}

/* ── Base Input / Textarea / Select ─────────────── */
.form-input,
.form-textarea {
  width: 100%;
  background: var(--y-color-secondary);
  padding: 10px var(--y-space-m);
  border-radius: var(--y-radius-s);
  font-size: var(--y-font-s);
  color: var(--y-color-text);
  border: 1px solid transparent;
  transition: border-color var(--y-transition-fast), box-shadow var(--y-transition-fast);
  min-height: 44px;
}


.form-textarea {
  resize: none;
  border-radius: var(--y-radius-m);
  font-size: var(--y-font-m);
  padding: 12px var(--y-space-m);
  min-height: 44px;
}

/* ── Focus ───────────────────────────────────────── */
.form-input:focus,
.form-textarea:focus {
  border-color: var(--y-color-primary);
  box-shadow: 0 0 0 2px var(--y-color-primary-subtle);
  outline: none;
}

/* ── Disabled / Read-only ────────────────────────── */
.form-input:disabled,
.form-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-input:read-only {
  background: var(--y-color-secondary-subtle);
  cursor: default;
}

/* ── Invalid state ───────────────────────────────── */
.form-input:invalid:not(:placeholder-shown),
.form-input.error {
  border-color: var(--y-color-danger);
  background: var(--y-color-danger-subtle);
}

/* ── Error message ───────────────────────────────── */
.form-error {
  color: var(--y-color-danger);
  font-size: 0.75rem;
  margin-block-start: 4px;
}

/* ── Success state ───────────────────────────────── */
.form-success {
  color: var(--y-color-success);
  font-size: 0.75rem;
  margin-block-start: 4px;
}

/* ── Input with icon ─────────────────────────────── */
.form-input-icon {
  position: relative;
}

.form-input-icon svg {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--y-color-text-muted);
  pointer-events: none;
}

.form-input-icon input {
  padding-inline-end: 40px;
}

.form-input-icon .left-icon {
  inset-inline-end: auto;
  inset-inline-start: 12px;
}

.form-input-icon input.with-left-icon {
  padding-inline-start: 40px;
}

/* ── Password Toggle ─────────────────────────────── */
.password-toggle-btn {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--y-color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--y-transition-fast);
  z-index: 10;
}

.password-toggle-btn i {
  font-size: 18px;
}

.password-toggle-btn:hover {
  color: var(--y-color-primary);
}

.password-toggle-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--y-color-text);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.password-toggle-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ── Custom Select ───────────────────────────────── */
select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8378' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-start: 36px;
}

/* ── Quantity Selector ───────────────────────────── */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 20px;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--y-color-border);
  border-radius: var(--y-radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--y-transition-fast);
  min-height: 44px;
  min-width: 44px;
}

.quantity-btn:hover {
  background: var(--y-color-secondary);
}

.quantity-value {
  width: 48px;
  text-align: center;
  font-size: var(--y-font-l);
  font-weight: var(--y-weight-semibold);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Large Desktop (lg) ──────────────────────────── */
@media (max-width: 1200px) {
  .form-row { gap: var(--y-space-s); }
}

/* ── Tablet (md) ─────────────────────────────────── */
@media (max-width: 992px) {
  .form-input, .form-textarea { font-size: var(--y-font-m); }
}

/* ── Mobile Landscape / Large Phone (sm) ─────────── */
@media (max-width: 768px) {
  .form-row { grid-template-columns: 1fr; }
  .form-input, .form-textarea { padding: 10px 14px; min-height: 48px; }
}

/* ── Small Phone (xs) ────────────────────────────── */
@media (max-width: 480px) {
  .form-group { margin-block-end: var(--y-space-s); }
  .form-input { font-size: var(--y-font-s); }
}