/**
 * PagPlast Form Styles
 * Inputs, Selects, Checkboxes, etc.
 */

/* ==========================================================================
   Input Base
   ========================================================================== */

.input-pg {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--pg-font-size-sm);
  font-family: var(--pg-font-sans);
  color: var(--pg-gray-900);
  background: var(--pg-white);
  border: 1px solid var(--pg-gray-300);
  border-radius: var(--pg-radius-md);
  transition: var(--pg-transition-base);
  outline: none;
}

.input-pg::placeholder {
  color: var(--pg-gray-400);
}

.input-pg:hover {
  border-color: var(--pg-gray-400);
}

.input-pg:focus {
  border-color: var(--pg-primary);
  box-shadow: 0 0 0 3px var(--pg-primary-100);
}

.input-pg:disabled {
  background: var(--pg-gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Input with Icon */
.input-pg-wrapper {
  position: relative;
}

.input-pg-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pg-gray-400);
  pointer-events: none;
  transition: var(--pg-transition-base);
}

.input-pg-wrapper .input-pg {
  padding-left: 48px;
}

.input-pg-wrapper:focus-within .input-pg-icon {
  color: var(--pg-primary);
}

/* Input with right icon (toggle password) */
.input-pg-icon-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pg-gray-400);
  cursor: pointer;
  transition: var(--pg-transition-base);
}

.input-pg-icon-right:hover {
  color: var(--pg-gray-600);
}

.input-pg-wrapper.has-icon-right .input-pg {
  padding-right: 48px;
}

/* ==========================================================================
   Floating Label
   ========================================================================== */

.input-pg-floating {
  position: relative;
}

.input-pg-floating .input-pg {
  padding-top: 24px;
  padding-bottom: 8px;
}

.input-pg-floating label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--pg-font-size-sm);
  color: var(--pg-gray-500);
  pointer-events: none;
  transition: var(--pg-transition-base);
  background: transparent;
}

.input-pg-floating .input-pg:focus ~ label,
.input-pg-floating .input-pg:not(:placeholder-shown) ~ label {
  top: 12px;
  transform: translateY(0);
  font-size: var(--pg-font-size-xs);
  color: var(--pg-primary);
}

.input-pg-floating.has-icon label {
  left: 48px;
}

/* ==========================================================================
   Input Validation States
   ========================================================================== */

.input-pg-success {
  border-color: var(--pg-success) !important;
}

.input-pg-success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

.input-pg-error {
  border-color: var(--pg-danger) !important;
}

.input-pg-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Validation Messages */
.input-pg-message {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: var(--pg-font-size-xs);
}

.input-pg-message-success {
  color: var(--pg-success);
}

.input-pg-message-error {
  color: var(--pg-danger);
}

/* ==========================================================================
   Checkbox & Radio
   ========================================================================== */

.checkbox-pg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.checkbox-pg input {
  display: none;
}

.checkbox-pg-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--pg-gray-300);
  border-radius: var(--pg-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--pg-transition-base);
  flex-shrink: 0;
}

.checkbox-pg-box svg {
  width: 12px;
  height: 12px;
  stroke: var(--pg-white);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--pg-transition-fast);
}

.checkbox-pg input:checked + .checkbox-pg-box {
  background: var(--pg-primary);
  border-color: var(--pg-primary);
}

.checkbox-pg input:checked + .checkbox-pg-box svg {
  opacity: 1;
  transform: scale(1);
}

.checkbox-pg:hover .checkbox-pg-box {
  border-color: var(--pg-primary-light);
}

.checkbox-pg-label {
  font-size: var(--pg-font-size-sm);
  color: var(--pg-gray-700);
}

/* Radio Button */
.radio-pg-box {
  border-radius: 50%;
}

.radio-pg-box::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pg-white);
  opacity: 0;
  transform: scale(0);
  transition: var(--pg-transition-fast);
}

.checkbox-pg input:checked + .radio-pg-box::after {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   Select
   ========================================================================== */

.select-pg {
  width: 100%;
  padding: 14px 44px 14px 16px;
  font-size: var(--pg-font-size-sm);
  font-family: var(--pg-font-sans);
  color: var(--pg-gray-900);
  background: var(--pg-white);
  border: 1px solid var(--pg-gray-300);
  border-radius: var(--pg-radius-md);
  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='%236B7280' stroke-width='2' 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 16px center;
  transition: var(--pg-transition-base);
}

.select-pg:hover {
  border-color: var(--pg-gray-400);
}

.select-pg:focus {
  outline: none;
  border-color: var(--pg-primary);
  box-shadow: 0 0 0 3px var(--pg-primary-100);
}

/* ==========================================================================
   Form Group
   ========================================================================== */

.form-group-pg {
  margin-bottom: var(--pg-space-5);
}

.form-group-pg label {
  display: block;
  margin-bottom: var(--pg-space-2);
  font-size: var(--pg-font-size-sm);
  font-weight: var(--pg-font-weight-medium);
  color: var(--pg-gray-700);
}

.form-group-pg label.required::after {
  content: " *";
  color: var(--pg-danger);
}

/* ==========================================================================
   Login Form Specific
   ========================================================================== */

.login-form-container {
  max-width: 100%;
}

.login-input-group {
  margin-bottom: var(--pg-space-5);
}

.login-input-group:last-child {
  margin-bottom: 0;
}

.login-input {
  width: 100%;
  padding: 16px 20px 16px 52px;
  font-size: var(--pg-font-size-base);
  color: var(--pg-gray-900);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid transparent;
  border-radius: var(--pg-radius-lg);
  transition: var(--pg-transition-base);
  outline: none;
}

.login-input::placeholder {
  color: var(--pg-gray-400);
}

.login-input:focus {
  border-color: var(--pg-primary);
  background: var(--pg-white);
  box-shadow: 0 0 0 4px var(--pg-primary-100);
}

.login-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--pg-gray-400);
  transition: var(--pg-transition-base);
}

.login-input-group:focus-within .login-input-icon {
  color: var(--pg-primary);
}

/* Remember me checkbox for login */
.login-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--pg-space-4);
}

.login-forgot {
  font-size: var(--pg-font-size-sm);
  color: var(--pg-secondary);
  text-decoration: none;
  font-weight: var(--pg-font-weight-medium);
  transition: var(--pg-transition-base);
}

.login-forgot:hover {
  color: var(--pg-secondary-dark);
  text-decoration: underline;
}

/* Login Button */
.login-btn {
  width: 100%;
  padding: 16px 32px;
  margin-top: var(--pg-space-6);
  font-size: var(--pg-font-size-base);
  font-weight: var(--pg-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Select2 Custom Theme
   ========================================================================== */

.select2-container--default .select2-selection--single {
  height: 50px;
  padding: 10px 16px;
  border: 1px solid var(--pg-gray-300);
  border-radius: var(--pg-radius-md);
  background: var(--pg-white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  color: var(--pg-gray-900);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px;
  right: 10px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--pg-primary);
  box-shadow: 0 0 0 3px var(--pg-primary-100);
}

.select2-dropdown {
  border: 1px solid var(--pg-gray-200);
  border-radius: var(--pg-radius-md);
  box-shadow: var(--pg-shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--pg-primary);
}