/* ============================================
   TAX INVOICE REQUEST PAGE
   ============================================ */

.tax-form-card {
  max-width: 780px;
  margin: -40px auto var(--spacing-3xl);
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-2xl);
  position: relative;
  z-index: 1;
}

/* Section Title */
.tax-form-section { margin-bottom: var(--spacing-xl); }

.tax-form-section-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tax-form-section-title .section-number {
  width: 28px; height: 28px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); font-weight: 700; flex-shrink: 0;
}

/* Channel Selector */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
}

.channel-card { position: relative; cursor: pointer; }
.channel-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.channel-card-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-sm); padding: var(--spacing-lg) var(--spacing-md);
  border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg);
  transition: all var(--transition-base); text-align: center;
  background: var(--color-white);
}

.channel-card-inner:hover {
  border-color: var(--color-gray-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.channel-card input:checked + .channel-card-inner {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgba(255,185,50,0.15);
}

.channel-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: var(--color-white);
}

.channel-icon.retina { background: linear-gradient(135deg, #1a1a2e, #0f3460); }
.channel-icon.shopee { background: linear-gradient(135deg, #ee4d2d, #ff6633); }
.channel-icon.tiktok { background: linear-gradient(135deg, #010101, #333); }
.channel-icon.lazada { background: linear-gradient(135deg, #0f146d, #1a237e); }

.channel-name { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-gray-700); }

/* Person Type Toggle */
.person-type-toggle {
  display: flex; background: var(--color-gray-100);
  border-radius: var(--radius-full); padding: 4px; gap: 4px; max-width: 400px;
}

.person-type-btn { flex: 1; position: relative; cursor: pointer; }
.person-type-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.person-type-label {
  display: block; text-align: center; padding: 10px 20px;
  font-size: var(--font-size-sm); font-weight: 600; color: var(--color-gray-500);
  border-radius: var(--radius-full); transition: all var(--transition-base); cursor: pointer;
}

.person-type-btn input:checked + .person-type-label {
  background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm);
}

.person-type-label:hover { color: var(--color-gray-800); }

/* Person Fields */
.person-fields { overflow: hidden; transition: max-height 0.35s ease, opacity 0.3s ease; }
.person-fields.hidden { max-height: 0 !important; opacity: 0; pointer-events: none; margin: 0; }
.person-fields.visible { max-height: 200px; opacity: 1; margin-top: var(--spacing-md); }

/* Address Grid */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.address-grid .full-width { grid-column: 1 / -1; }

/* Duplicate Warning */
.duplicate-warning {
  display: none; align-items: flex-start; gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: var(--radius-md); margin-top: var(--spacing-sm);
  animation: fadeInUp 0.3s ease;
}
.duplicate-warning.show { display: flex; }
.duplicate-warning-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.duplicate-warning p { font-size: var(--font-size-sm); color: #991b1b; line-height: 1.6; }
.duplicate-warning a { color: #dc2626; font-weight: 700; text-decoration: underline; }

/* Info Note */
.info-note {
  display: flex; align-items: flex-start; gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: var(--radius-md); margin-bottom: var(--spacing-xl);
}
.info-note-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.info-note p { font-size: var(--font-size-sm); color: #1e40af; line-height: 1.6; }

/* Submit Button */
.tax-submit-btn {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--color-primary), #0f3460);
  color: var(--color-white); border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-base); font-weight: 700; cursor: pointer;
  transition: all var(--transition-base);
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm);
}
.tax-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(26,26,46,0.3); }
.tax-submit-btn:active { transform: translateY(0); }

/* Success Overlay */
.success-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(4px); display: flex; align-items: center;
  backdrop-filter: blur(4px); display: flex; align-items: center;
  justify-content: center; z-index: 3000;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.success-overlay.active { opacity: 1; pointer-events: all; }

.success-card {
  background: var(--color-white); border-radius: var(--radius-xl);
  padding: var(--spacing-2xl); text-align: center;
  max-width: 440px; width: 90%; box-shadow: var(--shadow-xl);
  transform: scale(0.9); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.success-overlay.active .success-card { transform: scale(1); }

.success-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin: 0 auto var(--spacing-lg);
  animation: successPulse 0.6s ease;
}

@keyframes successPulse {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.success-card h3 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--spacing-sm); }
.success-card p { font-size: var(--font-size-sm); color: var(--color-gray-500); line-height: 1.7; margin-bottom: var(--spacing-lg); }

.success-close-btn {
  padding: 12px 40px; background: var(--color-primary);
  color: var(--color-white); border: none; border-radius: var(--radius-md);
  font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
  transition: all var(--transition-fast);
}
.success-close-btn:hover { background: #0f3460; transform: translateY(-1px); }

/* Validation */
.form-control.error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.form-error-text { font-size: var(--font-size-xs); color: var(--color-danger); margin-top: 4px; display: none; }
.form-group.has-error .form-error-text { display: block; }

/* Divider */
.form-divider { border: none; border-top: 1px solid var(--color-gray-200); margin: var(--spacing-xl) 0; }

/* Responsive */
@media (max-width: 768px) {
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .tax-form-card { margin: -30px var(--spacing-md) var(--spacing-2xl); padding: var(--spacing-xl) var(--spacing-lg); }
  .address-grid { grid-template-columns: 1fr; }
  .person-type-toggle { max-width: 100%; }
}

@media (max-width: 480px) {
  .channel-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
  .channel-card-inner { padding: var(--spacing-md) var(--spacing-sm); }
  .channel-icon { width: 40px; height: 40px; font-size: 18px; }
  .tax-form-card { margin: -20px var(--spacing-sm) var(--spacing-xl); padding: var(--spacing-lg) var(--spacing-md); }
}