/* =========================================================
   Pickup + Consultation Forms
   Shared by:
   - pickup.html
   - schedule-consultation.html
   - contact.html modal-mounted forms
   ========================================================= */

/* Page shell */
.pickup-page{
  margin-top: 32px;
  margin-bottom: 40px;
}

.pickup-shell{
  border-radius: 18px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #101419, #0f151d) padding-box,
    linear-gradient(
      135deg,
      var(--blue),
      #e7f1ff,
      var(--green),
      #f2ffe6,
      var(--blue)
    ) border-box;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  max-width: 630px;
  margin: 0 auto 32px;
  padding: 24px 24px 28px;
}

.pickup-intro h1{
  margin: 0 0 18px;
  font-size: 26px;
}

.pickup-intro p{
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

/* Form layout */
.pickup-form{
  margin-top: 8px;
}

.pickup-sections{
  display: grid;
  gap: 16px;
}

.pickup-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.field{
  display: flex;
  flex-direction: column;
  position: relative;
}

.field-full{
  grid-column: 1 / -1;
}

/* Card wrappers used by pickup + modal forms */
.pickup-card,
.pickup-inline-block{
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  padding: 16px;
}

.pickup-inline-block__head{
  margin-bottom: 12px;
}

.pickup-inline-block__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: inherit;
}

.pickup-inline-block__sub{
  margin: 10px 0 16px 0;
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.7;
  color: var(--muted);
}

/* Inputs / selects / textarea */
.pickup-form input:not([type="checkbox"]):not([type="file"]),
.pickup-form select,
.pickup-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0);
  color: #EAF1FF;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

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

.pickup-form input::placeholder,
.pickup-form textarea::placeholder{
  color: rgba(234,241,255,0.55);
  opacity: 1;
}

/* Select arrow */
.pickup-form select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 15px;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa4b2 50%),
    linear-gradient(135deg, #9aa4b2 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Dropdown option readability */
.pickup-form select option{
  color: #0B1220;
  background: #FFFFFF;
  font-size: 16px;
}

/* Focus state */
.pickup-form input:not([type="checkbox"]):not([type="file"]):focus,
.pickup-form select:focus,
.pickup-form textarea:focus{
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: #233249;
}

/* Date picker icon on dark input */
.pickup-form input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(75%) brightness(1.5);
  cursor: pointer;
}

/* Helper / hint text */
.field-hint{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.82;
}

/* Required asterisk */
.field.required-field::after{
  content: "*";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 15px;
  color: var(--muted);
  pointer-events: none;
}

/* File input */
.pickup-form input[type="file"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.file-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid #233249;
  background: #131922;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.file-trigger:hover{
  background: #182131;
  border-color: #2c3a4f;
  transform: translateY(-0.5px);
}

.file-trigger:active{
  transform: translateY(0);
}

.file-count{
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* Service request checkboxes */
.service-request__box{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

.service-option{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 6px 0;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  user-select: none;
}

.service-option input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  width: 16px !important;
  height: 16px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  display: inline-grid !important;
  place-content: center;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(234,241,255,0.28) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
  outline: none !important;
}

.service-option input[type="checkbox"]::before{
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid rgba(255,255,255,0.95);
  border-bottom: 2px solid rgba(255,255,255,0.95);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.service-option input[type="checkbox"]:checked{
  background: #00B0F0 !important;
  border-color: #00B0F0 !important;
}

.service-option input[type="checkbox"]:checked::before{
  transform: rotate(-45deg) scale(1);
}

.service-option:focus,
.service-option:focus-within,
.service-option input[type="checkbox"]:focus,
.service-option input[type="checkbox"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.service-option > span{
  display: block;
  line-height: 1.2;
  min-width: 0;
}

/* Submit */
.pickup-submit-row{
  margin-top: 20px;
}

.pickup-submit{
  width: 100%;
  justify-content: center;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 550;
  background: linear-gradient(135deg, #0D74F5, #59E00B);
  color: #0b0d10;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}

.pickup-submit:hover{
  transform: translateY(-0.5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

.pickup-submit:active{
  transform: translateY(0.5px) scale(0.99);
  filter: brightness(0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55) inset;
}

/* Contact modal form fix: prevent file input focus scroll jump */
.contact-page-v2 .cas-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}

.contact-page-v2 .cas-modal input[type="file"]#equip-photos{
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-page-v2 .cas-modal input[type="file"]#equip-photos:focus{
  outline: none !important;
}

/* Responsive */
@media (max-width: 760px){
  .pickup-shell{
    padding: 20px 16px 24px;
  }

  .pickup-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px){
  .service-request__box{
    grid-template-columns: 1fr;
  }
}