:root{
  --grk-brand: #ffcc00;
  --grk-brand2:#ffd84d;
  --grk-ink: #0f172a;
  --grk-text: #111827;
  --grk-muted: #6b7280;
  --grk-line: rgba(15,23,42,.10);
  --grk-soft: rgba(15,23,42,.05);
  --grk-bg: #f6f7fb;
  --grk-card: #ffffff;
  --grk-shadow: 0 18px 60px rgba(15,23,42,.12);
  --grk-radius: 18px;
  --grk-radius2: 14px;
}

/* Container fits both desktop and mobile nicely */
.grk-wrap{
  background: radial-gradient(1200px 700px at 10% 0%, rgba(255,204,0,.18), transparent 55%),
              radial-gradient(900px 600px at 100% 10%, rgba(255,216,77,.16), transparent 55%),
              linear-gradient(180deg, var(--grk-bg), #ffffff);
  border-radius: 24px;
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--grk-shadow);
  border: 1px solid var(--grk-line);
  overflow: hidden;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  color: var(--grk-text);
}

.grk-header{
  padding: clamp(12px, 1.8vw, 18px);
  border: 1px solid var(--grk-line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-radius: var(--grk-radius);
  margin-bottom: 16px;
}

.grk-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,204,0,.22);
  border: 1px solid rgba(255,204,0,.35);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--grk-ink);
}

.grk-title{
  margin: 12px 0 8px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  color: var(--grk-ink);
}

.grk-section-title{
  margin: 14px 0 8px;
  font-size: 18px;
  color: var(--grk-ink);
}

.grk-header p{
  margin: 8px 0;
  color: var(--grk-muted);
}

.grk-callout{
  margin: 12px 0 10px;
  padding: 12px 14px;
  border-radius: var(--grk-radius2);
  background: rgba(255,204,0,.18);
  border: 1px solid rgba(255,204,0,.30);
  color: var(--grk-ink);
}

.grk-list{
  margin: 6px 0 0 18px;
  color: var(--grk-muted);
}
.grk-list li{ margin: 6px 0; }

.grk-card{
  border-radius: var(--grk-radius);
  border: 1px solid var(--grk-line);
  background: var(--grk-card);
  box-shadow: 0 12px 40px rgba(15,23,42,.08);
  margin-top: 14px;
  overflow:hidden;
}

.grk-card-head{
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--grk-line);
}
.grk-card-head h3{ margin:0; font-size: 18px; color: var(--grk-ink); }
.grk-card-head p{ margin:6px 0 0; color: var(--grk-muted); }

.grk-form{ padding: 14px 16px 18px; }

.grk-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}



.grk-field{ margin-top: 12px; }
.grk-grid .grk-field{ margin-top: 0; }

.grk-field label{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--grk-ink);
}
.grk-small{ font-size: 12px; color: var(--grk-muted); font-weight: 800; }
.grk-req{ color: #d97706; }

.grk-field input[type="text"],
.grk-field input[type="email"],
.grk-field input[type="tel"],
.grk-field input[type="file"],
.grk-field textarea{
  width:100%;
  box-sizing:border-box;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: #ffffff;
  color: var(--grk-text);
  padding: 12px 12px;
  outline:none;
}
.grk-field textarea{ resize: vertical; min-height: 110px; }
.grk-field input:focus,
.grk-field textarea:focus{
  border-color: rgba(255,204,0,.70);
  box-shadow: 0 0 0 4px rgba(255,204,0,.18);
}

.grk-hint{ margin-top: 6px; color: var(--grk-muted); font-size: 12.5px; }

.grk-radios{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.grk-radio{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  cursor:pointer;
  user-select:none;
  color: var(--grk-ink);
  font-weight: 700;
}
.grk-radio input{ transform: translateY(1px); }

.grk-subcard{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
}
.grk-subhead{
  font-weight: 1000;
  margin-bottom: 8px;
  color: var(--grk-ink);
}

.grk-inline{
  display:flex;
  gap: 12px;
  align-items:flex-end;
  flex-wrap: wrap;
}
.grk-grow{ flex: 1 1 280px; }

.grk-topline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.grk-check-inline{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  cursor:pointer;
  user-select:none;
  color: var(--grk-ink);
  font-weight: 700;
}
.grk-check-inline input{ transform: translateY(1px); }

.grk-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.grk-btn{
  border: 0;
  background: linear-gradient(180deg, var(--grk-brand2), var(--grk-brand));
  color: var(--grk-ink);
  font-weight: 1000;
  padding: 12px 18px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 16px 35px rgba(255,204,0,.22);
}
.grk-btn:hover{ filter: brightness(1.02); }
.grk-btn:active{ transform: translateY(1px); }

.grk-status{
  color: var(--grk-muted);
  font-size: 13px;
}

/* Success */
.grk-success{
  margin-top: 16px;
  border-radius: 22px;
  border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(34,197,94,.10));
  padding: 18px;
}
.grk-success-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
.grk-success-icon{
  width:48px;height:48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.30);
  font-size: 22px;
}
.grk-success-title{
  font-size: 20px;
  font-weight: 1000;
  color: #065f46;
}
.grk-success-text{
  color: rgba(6,95,70,.92);
  margin-top: 2px;
  font-weight: 700;
}

/* Admin metabox look */
.grk-admin{ margin-top: 10px; }
.grk-admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .grk-admin-grid{ grid-template-columns: 1fr; }
}
.grk-admin-card{
  padding: 14px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
}
.grk-admin-card h3{ margin: 0 0 10px; }
.grk-admin-text{ color: #1f2937; }
.grk-admin-attachments{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .grk-admin-attachments{ grid-template-columns: 1fr; }
}
.grk-gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 782px){
  .grk-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grk-file{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.grk-file a{ text-decoration:none; }
.grk-file-meta{
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}
.grk-file-name{
  font-size: 12px;
  color: #374151;
  word-break: break-word;
}
.grk-file-fallback{
  height: 150px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
  color:#111827;
  font-weight: 900;
}


/* Sequential layout (one under another) */
.grk-form{
  max-width: 720px;
  margin: 0 auto;
}
.grk-field{ margin-top: 14px; }
.grk-field:first-child{ margin-top: 0; }

/* Conditional extra fields hidden by default */
[data-chem-details],
[data-salt-details],
[data-imp-details]{ display:none; }

/* Make radio groups look like steps */
.grk-radios{
  margin-top: 6px;
}

/* Selected files text */
.grk-filelist{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(15,23,42,.22);
  background: rgba(15,23,42,.02);
  color: var(--grk-muted);
  font-size: 12.5px;
}

.grk-conditional{ display:none; }

.grk-btn-disabled{opacity:.75;cursor:not-allowed;}