/* css/solution-form.css */

.solution-section {
   background-color: #f8f9fa;
   padding: 80px 20px;
}

.solution-header {
   font-family: var(--font-heading, 'Montserrat', sans-serif);
   font-size: 2.4rem;
   font-weight: 900;
   color: var(--color-maroon);
   line-height: 1.3;
   letter-spacing: 0.5px;
   margin-bottom: 35px;
}

.solution-header span {
   color: var(--color-meteorite, #2c2929);
}

/* Card Wrapper Pembungkus Form */
.solution-form-box {
   max-width: 960px;
   margin: 0 auto;
   background: #ffffff;
   padding: 45px 40px;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.form-group label {
   display: inline-block;
   font-weight: 600;
   font-size: 0.88rem;
   color: #333333;
   margin-bottom: 8px;
   letter-spacing: 0.2px;
}

/* Input & Textarea Modern */
.form-control-custom {
   width: 100%;
   border: 1.5px solid #e2e5e9;
   background-color: #fbfbfc;
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 0.92rem;
   color: #2b2b2b;
   outline: none;
   transition: all 0.25s ease;
   box-sizing: border-box;
}

.form-control-custom::placeholder {
   color: #a0a6b1;
   font-size: 0.88rem;
}

.form-control-custom:focus {
   background-color: #ffffff;
   border-color: var(--color-maroon, #9c0004);
   box-shadow: 0 0 0 4px rgba(156, 0, 4, 0.08);
}

textarea.form-control-custom {
   resize: vertical;
   min-height: 110px;
}

/* Checkbox Chip Grid */
.checkbox-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

/* Label Checkbox sebagai Tombol/Chip */
.custom-checkbox {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding: 9px 12px;
   background: #f8f9fa;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   font-weight: 500 !important;
   font-size: 0.82rem !important;
   color: #4b5563;
   cursor: pointer;
   margin-bottom: 0 !important;
   user-select: none;
   transition: all 0.2s ease;
}

.custom-checkbox input {
   margin-right: 8px;
   accent-color: var(--color-maroon, #9c0004);
   width: 15px;
   height: 15px;
   cursor: pointer;
}

.custom-checkbox:hover {
   background: #f1f3f5;
   border-color: #d1d5db;
}

/* Efek saat dicentang */
.custom-checkbox:has(input:checked) {
   background-color: rgba(156, 0, 4, 0.05);
   border-color: var(--color-maroon, #9c0004);
   color: var(--color-maroon, #9c0004);
   font-weight: 600 !important;
}

/* Tombol Submit */
.btn-submit-maroon {
   background-color: var(--color-maroon, #9c0004);
   color: #ffffff;
   border: none;
   padding: 13px 48px;
   font-size: 0.95rem;
   font-weight: 700;
   border-radius: 50px;
   cursor: pointer;
   transition: all 0.25s ease;
   box-shadow: 0 4px 14px rgba(156, 0, 4, 0.25);
}

.btn-submit-maroon:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(156, 0, 4, 0.35);
   filter: brightness(1.05);
}

.btn-submit-maroon:active {
   transform: translateY(0);
}

.btn-submit-maroon:disabled {
   opacity: 0.65;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

/* Responsiveness */
@media (max-width: 768px) {
   .solution-form-box {
      padding: 30px 20px;
   }

   .solution-header {
      font-size: 1.8rem;
   }

   .checkbox-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .btn-submit-maroon {
      width: 100%;
   }
}

@media (max-width: 480px) {
   .checkbox-grid {
      grid-template-columns: 1fr;
   }
}