/* ===== Surprise Button ===== */
.surprise-btn {
   margin-top: 32px;
   background: #234FCC;
   color: #fff;
   border: none;
   border-radius: 4px;
   padding: 14px 36px;
   font-family: "Montserrat", sans-serif;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: background 0.2s;
   border-radius: 12px;
}
.surprise-btn:hover { background: #1a3fa8; }


/* ===== Popup Overlay ===== */
.popup-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(23,18,16,0.34);
   z-index: 100;
}
.popup-overlay.active { display: block; }
@media (min-width: 481px) {
   .popup-overlay.active { background: transparent; }
}

/* ===== Slide Panel ===== */
.popup-panel {
   position: fixed;
   top: 0;
   right: -450px;
   width: 430px;
   height: 100%;
   background: #fff;
   z-index: 101;
   overflow-y: auto;
   transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
   padding: 48px 24px 40px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: rgba(255, 255, 255, 0.80);
}
.popup-panel.active { right: 0; }

.popup-close {
   position: absolute;
   top: 24px;
   left: 24px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #fff;
   border: none;
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}
.popup-close svg { display: block; }

.popup-title {
   font-family: "Montserrat", sans-serif;
   font-size: 24px;
   font-weight: 500;
   color: #0F172A;
   line-height: 1.3;
   margin-bottom: 28px;
   margin-top: 8px;
   padding-right: 50px;
}

/* ===== Form Fields ===== */
.form-group {
   margin-bottom: 16px;
   position: relative;
}
.form-group label {
   position: absolute;
   top: 50%;
   left: 12px;
   transform: translateY(-50%);
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   pointer-events: none;
   transition: top 0.18s, font-size 0.18s, color 0.18s;
   background: #fff;
   padding: 0 4px;
}
.form-group input {
   width: 100%;
   height: 56px;
   background: #fff;
   border: 1px solid #E0E0E0;
   border-radius: 4px;
   padding: 20px 16px 8px;
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 16px;
   color: #141414;
   box-sizing: border-box;
   outline: none;
   transition: border-color 0.2s;
   border-radius: 12px;
   font-weight: 500;
}
.form-group input:focus { border-color: #234FCC; }
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
   top: 10px;
   font-size: 11px;
   color: #234FCC;
   transform: none;
}
.form-group input:not(:focus):not(:placeholder-shown) + label { color: #A4A4A4; }

/* Mobile field with prefix */
.mobile-group {
   margin-bottom: 16px;
   position: relative;
}
.mobile-wrap {
   display: flex;
   align-items: flex-end;
   background: #fff;
   border: 1px solid #E0E0E0;
   border-radius: 4px;
   height: 56px;
   overflow: hidden;
   transition: border-color 0.2s;
   border-radius: 12px;
}
.mobile-wrap:focus-within { border-color: #234FCC; }
.mobile-group label {
   position: absolute;
   left: 8px;
   top: 36%;
   transform: translateY(-50%);
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   pointer-events: none;
   transition: top 0.18s, font-size 0.18s, color 0.18s, transform 0.18s;
   background: #fff;
   padding: 0 4px;
   z-index: 1;
}
.mobile-wrap:focus-within ~ label,
.mobile-group.filled label {
   top: 10px;
   font-size: 11px;
   color: #234FCC;
   transform: none;
}
.mobile-group.filled:not(:focus-within) label { color: #A4A4A4; }
.mobile-prefix {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 28px 12px 8px;
   border-right: 1px solid #E0E0E0;
   height: 100%;
   white-space: nowrap;
   font-family: "Montserrat", sans-serif;
   font-size: 16px;
   font-weight: 500;
   color: #141414;
   flex-shrink: 0;
   box-sizing: border-box;
}
.mobile-prefix .flag { font-size: 18px; }
.mobile-wrap input {
   flex: 1;
   height: 100%;
   border: none !important;
   outline: none;
   background: transparent;
   padding: 18px 12px 8px;
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 16px;
   font-weight: 500;
   color: #141414;
   box-sizing: border-box;
}

/* Pet type selector */
.pet-type-label {
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   margin-bottom: 10px;
   display: block;
   padding-top: 12px;
}
.pet-type-options {
   display: flex;
   gap: 14px;
   margin-bottom: 24px;
}
.pet-option {
   flex: 1;
   height: 64px;
   background: #F6F6F6;
   border: 2px solid transparent;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   font-family: "General Sans", "Montserrat", sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #A6A6A6;
   transition: border-color 0.2s, background 0.2s, color 0.2s;
   user-select: none;
   padding: 10px 16px;
   border-radius: 12px;
}
.pet-option svg path { fill: #A6A6A6; transition: fill 0.2s; }
.pet-option.selected {
   border-color: #234FCC;
   background: #eef2ff;
   color: #234FCC;
}
.pet-option.selected svg path { fill: #234FCC; }
.pet-option .pet-icon { font-size: 22px; }

/* Submit button */
.submit-btn {
   width: 100%;
   height: 54px;
   background: #234FCC;
   color: #fff;
   border: none;
   border-radius: 4px;
   font-family: "Montserrat", sans-serif;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: background 0.2s;
   margin-top: 8px;
   border-radius: 12px;
}
.submit-btn:hover { background: #1a3fa8; }

@media (max-width: 480px) {
   .popup-panel {
      width: 100%;
      right: -100%;
      height: 100dvh;
      padding: 52px 20px 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.80);
   }
   .popup-panel.active {
      right: 0;
      background: rgba(255, 255, 255, 0.80);
   }

   .popup-title {
      font-size: 18px;
      margin-bottom: 12px;
      margin-top: 0px;
   }

   .form-group {
      margin-bottom: 8px;
   }
   .form-group input {
      height: 64px;
      padding: 16px 16px 4px;
   }

   .mobile-group {
      margin-bottom: 8px;
   }
   .mobile-wrap {
      height: 64px;
   }
   .mobile-prefix {
      padding: 22px 12px 4px;
   }
   .mobile-wrap input {
      padding: 14px 12px 4px;
   }

   .pet-type-label {
      padding-top: 4px;
      margin-bottom: 6px;
   }
   .pet-type-options {
      margin-bottom: 10px;
      gap: 10px;
   }
   .pet-option {
      height: 64px;
   }

   #cfTurnstile {
      margin-bottom: 10px !important;
      transform: scale(0.9);
      transform-origin: left center;
   }

   .submit-btn {
      height: 46px;
      margin-top: 0px;
   }
}

/* ===== Inline Form Error ===== */
.form-error {
   display: none;
   align-items: center;
   gap: 10px;
   background: #FEF2F2;
   border: 1px solid #FECACA;
   border-radius: 8px;
   padding: 12px 16px;
   margin-bottom: 14px;
   font-family: "Montserrat", sans-serif;
   font-size: 13px;
   font-weight: 500;
   color: #B91C1C;
}
.form-error.visible { display: flex; }
.form-error svg { flex-shrink: 0; }