/* ============================================================
   ATTA CENTRE — Contact Form 7 & Lead Forms Stylesheet
   ============================================================
   Standalone, fully responsive stylesheet for Contact Form 7.
   Supports both:
   1) Dark Hero Glassmorphism: .hero-form (landing page hero)
   2) Clean Light Style: .wpcf7, .page-content .wpcf7, .cf7-light
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO GLASS FORM (Dark / Transparent Navy)
   ------------------------------------------------------------ */
.hero-form{
  display:flex; flex-direction:column; width:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(9,26,48,.68);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:clamp(22px,2.4vw,34px);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
          backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 24px 60px rgba(0,0,0,.42);
  color:var(--on-navy,#F4F2EC);
}

.hero-form .wpcf7{ width:100%; }
.hero-form .wpcf7 form,
.hero-form form.wpcf7-form{
  display:flex; flex-direction:column; width:100%;
  background:none !important; border:0 !important; padding:0 !important; margin:0 !important;
  box-shadow:none !important;
}

.hero-form .hero-form__title{
  color:var(--on-navy,#F4F2EC); font-size:clamp(19px,2vw,25px);
  line-height:1.2; margin:0 0 6px; font-weight:700;
}

.hero-form__sub{
  color:var(--on-navy-60,rgba(244,242,236,.64)); font-size:13.5px;
  line-height:1.45; margin:0 0 18px;
}

/* Row Grid System (2 columns on desktop, 1 column on mobile) */
.hero-form__row,
.wpcf7 .hero-form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

.hero-form .field,
.wpcf7 .field{
  margin-bottom:12px;
}

.hero-form p,
.wpcf7 p{
  margin:0 0 12px;
}

.hero-form label,
.wpcf7 label{
  display:block; font-size:12.5px;
  color:var(--on-navy-60,rgba(244,242,236,.64));
  margin-bottom:5px; letter-spacing:.01em; font-weight:500;
}

.hero-form .field__opt,
.wpcf7 .field__opt{
  opacity:.7; font-weight:400;
}

/* ------------------------------------------------------------
   2. INPUT FIELDS & TEXTAREAS (Dark / Hero Form)
   ------------------------------------------------------------ */
.hero-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.hero-form select,
.hero-form textarea{
  width:100%; padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:var(--on-navy,#F4F2EC); font:inherit; font-size:14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-form input::placeholder,
.hero-form textarea::placeholder{
  color:rgba(244,242,236,.42);
}

.hero-form input:not([type="submit"]):focus,
.hero-form select:focus,
.hero-form textarea:focus{
  outline:none; border-color:var(--coral-bright,#FF6459);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(240,73,62,.22);
}

/* Select element with custom arrow */
.hero-form select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(244,242,236,0.8)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:13px;
  padding-right:38px;
}

.hero-form select option{
  color:#0C2340; background:#FFFFFF; font-size:14px;
}

.hero-form textarea{
  resize:vertical; min-height:76px; line-height:1.45;
}

/* Date input on iOS */
.hero-form input[type="date"]{
  min-height:43px;
}

/* ------------------------------------------------------------
   3. CHECKBOXES & ACCEPTANCE (GDPR / Terms)
   ------------------------------------------------------------ */
.hero-form .wpcf7-acceptance label,
.hero-form .field--checkbox label,
.wpcf7 .wpcf7-acceptance label{
  display:flex; align-items:flex-start; gap:10px;
  font-size:12.5px; line-height:1.45; cursor:pointer;
  margin-bottom:0; color:var(--on-navy-60,rgba(244,242,236,.64));
}

.hero-form input[type="checkbox"],
.wpcf7 input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px;
  border-radius:4px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25); cursor:pointer;
  flex-shrink:0; margin-top:2px; position:relative;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-form input[type="checkbox"]:checked,
.wpcf7 input[type="checkbox"]:checked{
  background:var(--coral,#F0493E); border-color:var(--coral,#F0493E);
}

.hero-form input[type="checkbox"]:checked::after,
.wpcf7 input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:2px;
  width:5px; height:9px; border:solid white;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}

.hero-form input[type="checkbox"]:focus-visible,
.wpcf7 input[type="checkbox"]:focus-visible{
  outline:2px solid var(--coral-bright,#FF6459); outline-offset:2px;
}

/* Radio buttons */
.hero-form input[type="radio"],
.wpcf7 input[type="radio"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px;
  border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25); cursor:pointer;
  flex-shrink:0; margin-top:2px; position:relative;
  transition:all .2s ease;
}

.hero-form input[type="radio"]:checked,
.wpcf7 input[type="radio"]:checked{
  border-color:var(--coral,#F0493E);
  background:radial-gradient(circle, var(--coral,#F0493E) 45%, transparent 50%);
}

/* ------------------------------------------------------------
   4. SUBMIT BUTTON
   ------------------------------------------------------------ */
.hero-form__submit,
.hero-form input[type="submit"],
.hero-form .wpcf7-submit,
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit{
  width:100%; margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border:0; border-radius:14px;
  background:var(--coral,#F0493E); color:#FFFFFF;
  font-family:inherit; font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 4px 14px rgba(240,73,62,.35);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.hero-form input[type="submit"],
.hero-form .wpcf7-submit,
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit{
  margin-top:12px;
}

.hero-form__submit:hover,
.hero-form input[type="submit"]:hover,
.hero-form .wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover{
  background:var(--coral-bright,#FF6459); transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(240,73,62,.50);
}

.hero-form__submit:active,
.hero-form input[type="submit"]:active,
.hero-form .wpcf7-submit:active{
  transform:translateY(0); box-shadow:0 2px 8px rgba(240,73,62,.3);
}

.hero-form__fineprint{
  font-size:11.5px; color:var(--on-navy-60,rgba(244,242,236,.64));
  margin-top:12px; line-height:1.45; text-align:center;
}

/* Loading / Sending State on Button */
.hero-form .is-loading,
.hero-form input[type="submit"].is-loading,
.hero-form .wpcf7-submit.is-loading,
.hero-form form.submitting input[type="submit"]{
  background:var(--coral-deep,#C6362C) !important;
  opacity:0.92;
  cursor:wait !important;
  pointer-events:none !important;
}

.hero-form__btn-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:8px;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#FFFFFF;
  border-radius:50%;
  animation:heroSpin 0.75s infinite linear;
  vertical-align:middle;
}
@keyframes heroSpin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* ------------------------------------------------------------
   SUCCESS CARD (Paldies! Pieteikums nosūtīts)
   ------------------------------------------------------------ */
.hero-form__success{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:400px;
  padding:36px 16px;
  color:#FFFFFF !important;
  animation:successFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successFadeIn{
  from{ opacity:0; transform:scale(0.96) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

.hero-form__success-icon{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(240,73,62,0.22), rgba(240,73,62,0.08));
  border:2px solid #F0493E;
  color:#FF6459;
  box-shadow:0 0 28px rgba(240,73,62,0.35);
  animation:iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconPop{
  0%{ transform:scale(0.4); opacity:0; }
  70%{ transform:scale(1.12); }
  100%{ transform:scale(1); opacity:1; }
}

.hero-form__success-title{
  color:#FFFFFF !important;
  font-family:var(--font-display, inherit);
  font-size:clamp(21px, 2.4vw, 26px);
  font-weight:700;
  line-height:1.25;
  margin:0 0 10px;
  letter-spacing:-0.01em;
}

.hero-form__success-desc{
  color:rgba(244, 242, 236, 0.85) !important;
  font-size:14.5px;
  line-height:1.55;
  max-width:36ch;
  margin:0 0 22px;
}

.hero-form__success-contact{
  background:rgba(255, 255, 255, 0.07);
  border:1px solid rgba(255, 255, 255, 0.14);
  border-radius:12px;
  padding:12px 18px;
  font-size:13px;
  color:rgba(244, 242, 236, 0.75);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.hero-form__success-tel{
  color:#FF6459 !important;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:color 0.2s ease;
}
.hero-form__success-tel:hover{
  color:#FFFFFF !important;
}

/* ------------------------------------------------------------
   5. ROOM SELECTION FLASH ANIMATION
   ------------------------------------------------------------ */
.hero-form input#hf-room.is-justfilled,
.wpcf7 input[name="telpa"].is-justfilled{
  border-color:var(--coral-bright,#FF6459) !important;
  background:rgba(240,73,62,.18) !important;
  animation:roomFlash 1.1s cubic-bezier(.22,.61,.28,1);
}

@keyframes roomFlash{
  0%{ box-shadow:0 0 0 0 rgba(240,73,62,.60); }
  100%{ box-shadow:0 0 0 10px rgba(240,73,62,0); }
}

/* ------------------------------------------------------------
   6. CONTACT FORM 7 VALIDATION & RESPONSE STATES
   ------------------------------------------------------------ */
.hero-form .wpcf7-form-control-wrap,
.wpcf7 .wpcf7-form-control-wrap{
  display:block; position:relative;
}

/* Validation error tooltip */
.hero-form .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-not-valid-tip{
  color:#FFB4AD; font-size:11.5px; margin-top:4px;
  display:block; font-weight:500;
  animation:fadeIn .2s ease;
}

/* Invalid inputs */
.hero-form .wpcf7-not-valid,
.hero-form input:not([type="submit"]):not([type="checkbox"]):user-invalid,
.hero-form select:user-invalid,
.hero-form textarea:user-invalid,
.wpcf7 .wpcf7-not-valid{
  border-color:#FF6459 !important;
  background:rgba(240,73,62,.14) !important;
}

/* Response alert box */
.hero-form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output{
  margin:14px 0 0; padding:12px 16px; border-radius:12px;
  font-size:13px; line-height:1.45; text-align:center;
  border:1px solid rgba(255,255,255,.24);
  color:var(--on-navy,#F4F2EC); background:rgba(255,255,255,.08);
}

/* Sent OK */
.hero-form form.sent .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7-mail-sent-ok{
  border-color:#4ADE80 !important;
  color:#ECFDF5 !important;
  background:rgba(34,197,94,.16) !important;
}

/* Errors */
.hero-form form.failed .wpcf7-response-output,
.hero-form form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7-validation-errors{
  border-color:#FF6459 !important;
  color:#FFF1F0 !important;
  background:rgba(240,73,62,.20) !important;
}

/* AJAX Spinner */
.wpcf7-spinner{
  margin:10px auto 0; display:block;
  background-color:#FFFFFF; opacity:.7;
}

/* ------------------------------------------------------------
   7. LIGHT FORM THEME (For standard pages, blogs, light sections)
   ------------------------------------------------------------ */
.cf7-light,
.page-content .wpcf7{
  background:var(--card-bg,#FFFFFF);
  border:1px solid var(--card-border,#D9D5C9);
  border-radius:18px;
  padding:clamp(20px,3vw,36px);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  color:var(--graphite,#1B2027);
}

.cf7-light label,
.page-content .wpcf7 label{
  color:var(--graphite,#1B2027);
  font-size:13px; font-weight:600;
}

.cf7-light input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cf7-light select,
.cf7-light textarea,
.page-content .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.page-content .wpcf7 select,
.page-content .wpcf7 textarea{
  background:#FAF9F6;
  border:1px solid #D9D5C9;
  color:#1B2027;
  box-shadow:none;
}

.cf7-light input::placeholder,
.cf7-light textarea::placeholder,
.page-content .wpcf7 input::placeholder,
.page-content .wpcf7 textarea::placeholder{
  color:rgba(27,32,39,.45);
}

.cf7-light select,
.page-content .wpcf7 select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231B2027' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.cf7-light input:not([type="submit"]):focus,
.cf7-light select:focus,
.cf7-light textarea:focus,
.page-content .wpcf7 input:not([type="submit"]):focus,
.page-content .wpcf7 select:focus,
.page-content .wpcf7 textarea:focus{
  border-color:var(--coral,#F0493E);
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(240,73,62,.15);
}

.cf7-light .wpcf7-not-valid-tip,
.page-content .wpcf7 .wpcf7-not-valid-tip{
  color:var(--coral-deep,#C6362C);
}

.cf7-light .wpcf7-response-output,
.page-content .wpcf7 .wpcf7-response-output{
  color:#1B2027; background:#FAF9F6; border-color:#D9D5C9;
}

/* ------------------------------------------------------------
   8. MOBILE RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:768px){
  .hero-form__row,
  .wpcf7 .hero-form__row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hero-form{
    padding:20px 18px;
    border-radius:18px;
  }
}

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(-2px); }
  to{ opacity:1; transform:translateY(0); }
}