/* ============================================================
   GIKF UMKM Form – Stylesheet
   Letakkan file ini di folder plugin: /wp-content/plugins/gikf-umkm-form/gikf-form.css
   ============================================================ */

/* ─── Wrap ──────────────────────────────────────────────── */
.gikf-form-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 2rem;
  color: #1a1a1a;
  line-height: 1.6;
}

/* ─── Header ─────────────────────────────────────────────── */
.gikf-header {
	background: url('https://gikfestival.id/wp-content/uploads/2026/05/gikf-bg-new.png');
	border-radius: 16px;
	padding: 2rem 1.75rem 1.5rem;
	color: #fff;
	margin-bottom: 1.75rem;
	background-size: cover;
	background-repeat: no-repeat;
}

@media (max-width: 768px) {
	.gikf-header {
		background-image: url('https://gikfestival.id/wp-content/uploads/2026/05/gikfboothbanner-mobilev2.png');
		background-size: cover;
		background-repeat: no-repeat;
		height:350px;
	}
	
	.gikf-subtitle, .gikf-chips, .gikf-badge {display:none !important;}
	.gikf-header h2 {display:none;}
}

.gikf-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #f4813f;
}
.gikf-subtitle { font-size: 14px; opacity: .85; margin: 0 0 14px; color:#f4813f }
.gikf-badge {
  display: inline-block;
  background-color: #401773;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  font-size: 11px;
  padding: 3px 12px;
  margin-bottom: 10px;
  letter-spacing: .04em;
}
.gikf-chips { display: flex; gap: 8px; flex-wrap: wrap; max-width:50%; }
.gikf-chip {
  background-color:#401773;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: #ffff;
}

/* ─── Section title ──────────────────────────────────────── */
.gikf-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
  margin: 1.5rem 0 .75rem;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8e8e8;
}

/* ─── Fields ─────────────────────────────────────────────── */
.gikf-field { margin-bottom: 1rem; }
.gikf-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #222;
  margin-bottom: 5px;
}
.gikf-field label .req { color: #E85D04; margin-left: 2px; }
.gikf-optional { font-weight: 400; color: #888; }

.gikf-field input[type="text"],
.gikf-field input[type="tel"],
.gikf-field input[type="url"],
.gikf-field input[type="email"],
.gikf-field textarea,
#gikf-lainnya-input input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 14px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.gikf-field input:focus,
.gikf-field textarea:focus,
#gikf-lainnya-input input:focus {
  border-color: #E85D04;
  box-shadow: 0 0 0 3px rgba(232,93,4,.12);
}
.gikf-field input.gikf-invalid,
.gikf-field textarea.gikf-invalid {
  border-color: #E85D04;
  background: #FFF4EC;
}
.gikf-field textarea { resize: vertical; min-height: 80px; }

/* ─── 2-column grid ──────────────────────────────────────── */
.gikf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) { .gikf-grid-2 { grid-template-columns: 1fr; } }

/* ─── Radio cards ────────────────────────────────────────── */
.gikf-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 520px) { .gikf-radio-group { grid-template-columns: 1fr; } }

.gikf-radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff;
}
.gikf-radio-card:hover  { border-color: #E85D04; background: #FFF4EC; }
.gikf-radio-card.selected { border-color: #E85D04; background: #FFF4EC; }
.gikf-radio-card input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: #E85D04;
  flex-shrink: 0; margin: 0;
}
.gikf-radio-card span { font-size: 13px; color: #222; }

/* ─── Checkbox ───────────────────────────────────────────── */
.gikf-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f7f7f5;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  margin-bottom: 1rem;
}
.gikf-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 1px; flex-shrink: 0;
  accent-color: #E85D04;
}
.gikf-checkbox-row span {
  font-size: 13px; color: #444; line-height: 1.5;
}

/* ─── Alert ──────────────────────────────────────────────── */
.gikf-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 1rem;
}
.gikf-alert-error { background: #FFF4EC; border: 1px solid #f4b07e; color: #8B3A00; }

/* ─── Loading ────────────────────────────────────────────── */
.gikf-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
  margin-bottom: 1rem;
}
.gikf-spinner {
  width: 18px; height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #E85D04;
  border-radius: 50%;
  display: inline-block;
  animation: gikf-spin .7s linear infinite;
}
@keyframes gikf-spin { to { transform: rotate(360deg); } }

/* ─── Submit button ──────────────────────────────────────── */
.gikf-submit-btn {
  width: 100% !important;
  padding: 14px;
  background: linear-gradient(90deg, #E85D04, #F4A200);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: .02em;
  transition: opacity .15s, transform .1s;
}
.gikf-submit-btn:hover   { opacity: .9; }
.gikf-submit-btn:active  { transform: scale(.99); }
.gikf-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Success ────────────────────────────────────────────── */
.gikf-success {
  text-align: center;
  background: #EAF7F0;
  border: 1px solid #7bcfa4;
  border-radius: 16px;
  padding: 2.5rem 2rem;
}
.gikf-success-icon { font-size: 48px; margin-bottom: .5rem; }
.gikf-success h3   { font-size: 20px; color: #0e5c35; margin: 0 0 8px; }
.gikf-success p    { font-size: 14px; color: #1a6644; margin: 0 0 8px; }
.gikf-success .gikf-cp { font-size: 12px; color: #888; margin-top: 12px; }

/* ─── GMaps row ───────────────────────────────────────────── */
.gikf-gmaps-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.gikf-gmaps-row input {
  flex: 1;
}
.gikf-maps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1A6FB5;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.gikf-maps-btn:hover {
  background: #EEF5FC;
  border-color: #1A6FB5;
}
.gikf-maps-btn svg {
  flex-shrink: 0;
}

/* ─── Checkbox card accent ───────────────────────────────── */
.gikf-radio-card input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #E85D04;
  flex-shrink: 0; margin: 0;
}

/* ─── Footer ─────────────────────────────────────────────── */
.gikf-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(232,93,4,.06) 0%, rgba(26,111,181,.07) 100%);
  border: 1px solid rgba(232,93,4,.15);
  border-radius: 12px;
  font-size: 13px;
  color: #555;
}
.gikf-footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #C4300A;
  text-decoration: none;
  transition: color .15s;
}
.gikf-footer-ig:hover { color: #E85D04; }
.gikf-footer-sep { color: #ccc; font-size: 16px; }
.gikf-footer-cp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #555;
}
.gikf-footer-cp a {
  color: #1A6FB5;
  font-weight: 600;
  text-decoration: none;
}
.gikf-footer-cp a:hover { text-decoration: underline; }

/* Radio inline (Sertifikasi Halal) */
.gikf-radio-inline { display: flex; gap: 24px; margin-top: 6px; }
.gikf-radio-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.gikf-radio-opt input[type="radio"] { width: 16px; height: 16px; accent-color: #E85D04; cursor: pointer; }