/* ===== Layout (mobile-first) ===== */
.contact-wrap {
   width: min(1100px, 92%);
   margin: 0 auto;
   padding: 2rem 0 4rem;

   display: grid;
   grid-template-columns: 1fr;
   gap: 1.25rem;
}

/* ===== Visual Area ===== */
.contact-visual {
   border-radius: 20px;
   overflow: hidden;
   position: relative;

   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);

   min-height: 260px;
}

.visual-placeholder {
   width: 100%;
   height: 100%;
   min-height: 260px;
   display: grid;
   place-items: center;
   text-align: center;
   padding: 1rem;
   color: rgba(255, 255, 255, 0.85);
}

.visual-placeholder p {
   margin: 0;
   font-weight: 700;
}

.visual-placeholder small {
   font-weight: 500;
   opacity: 0.8;
}

.visual-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* ===== Form Card ===== */
.contact-card {
   border-radius: 20px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   font-family: 'rubik', sans-serif;
}

.contact-form {
   padding: 1.25rem;
   display: grid;
   gap: 0.9rem;
}

.msg {
   margin: 0 0 0.25rem;
   letter-spacing: 0.06em;
   color: rgba(255, 255, 255, 0.95);
   font-size: 1.25rem;
}

/* ===== Fields ===== */
.field {
   display: grid;
   gap: 0.4rem;
}

label {
   color: rgba(255, 255, 255, 0.9);
   font-weight: 600;
   font-size: 0.95rem;
   font-family: 'rubik', sans-serif;
}

input,
select,
textarea {
   width: 100%;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.14);
   background: rgba(0, 0, 0, 0.18);
   color: rgba(255, 255, 255, 0.95);
   padding: 0.85rem 0.9rem;
   outline: none;
   transition:
      box-shadow 180ms ease,
      border-color 180ms ease,
      transform 180ms ease;
}

textarea {
   min-height: 120px;
   resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
   border-color: rgba(92, 250, 255, 0.45);
   box-shadow: 0 0 0 4px rgba(92, 250, 255, 0.12);
   transform: translateY(-1px);
}

input.invalid,
select.invalid,
textarea.invalid {
   border-color: rgba(255, 92, 92, 0.65);
   box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.12);
}

option {
    background-color: rgba(0, 0, 0, 0.795);
}
.error {
   min-height: 1.05em;
   font-size: 0.85rem;
   color: rgba(255, 140, 140, 0.95);
}

/* Honeypot hidden */
.hp {
   display: none;
}

/* ===== Submit button (disabled until valid) ===== */
.submit-btn {
   margin-top: 0.4rem;
   border: none;
   border-radius: 16px;
   padding: 0.95rem 1rem;
   cursor: pointer;
   font-weight: 800;
   letter-spacing: 0.02em;
   font-family: 'rubik', sans-serif;
   display: inline-flex;
   align-items: center;
   justify-content: center;

   transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      filter 180ms ease,
      background-color 180ms ease;
}

/* Disabled state */
.submit-btn:disabled {
   background: rgba(255, 255, 255, 0.14);
   color: rgba(255, 255, 255, 0.55);
   cursor: not-allowed;
   box-shadow: none;
   transform: none;
}

/* Enabled (cyan) state */
.submit-btn.is-ready {
   background: var(--peachy);
   color: #ffffff;
   font-size: 0.95rem;
   font-weight: 700;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

/* Hover when enabled */
.submit-btn.is-ready:hover {
   transform: translateY(-4px);
   filter: brightness(0.98);
}

.submit-btn.is-ready:active {
   transform: translateY(-2px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
   * {
      transition: none !important;
   }
   .submit-btn.is-ready:hover {
      transform: none;
   }
}

/* === RESPONSIVE DESIGN === */
@media (min-width: 600px) {
   .contact-form {
      padding: 1.6rem;
   }
}
@media (min-width: 900px) {
   .contact-wrap {
      grid-template-columns: 1fr 1.1fr;
      align-items: stretch;
      gap: 2rem;
   }
}