@charset "UTF-8";

/* ===================================
   Estimate Section
=================================== */

.estimate-core-section{
  position:relative;
  padding:80px 0;
  background:
  linear-gradient(
    180deg,
    #050505,
    #111827
  );
  overflow:hidden;
}

.estimate-core-section::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(216,181,109,.12),
    transparent 40%
  );

  pointer-events:none;
}

#estimate-core-container{
  width:100%;
  max-width:1280px;
  margin:auto;
  position:relative;
  z-index:2;
}

/* ===================================
   Quote Estimator
=================================== */

.quote-estimator{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  margin-top:20px;
}

.quote-estimator input,
.quote-estimator select{
  width:100%;

  padding:14px 16px;

  border-radius:14px;

  border:
  1px solid rgba(216,181,109,.25);

  background:#0f172a;

  color:#fff;

  outline:none;

  transition:
  border-color .3s ease,
  box-shadow .3s ease;
}

.quote-estimator input:focus,
.quote-estimator select:focus{

  border-color:
  rgba(255,240,184,.8);

  box-shadow:
  0 0 20px rgba(216,181,109,.25);
}

/* ===================================
   Quote Result
=================================== */

#quoteResult{
  margin-top:18px;

  padding:18px;

  border-radius:18px;

  border:
  1px solid rgba(216,181,109,.18);

  background:
  rgba(216,181,109,.08);

  color:#fff0b8;

  font-weight:900;

  line-height:1.8;

  box-shadow:
  0 10px 30px rgba(0,0,0,.25);
}

/* ===================================
   Estimate Card
=================================== */

.estimate-card{
  padding:28px;

  border-radius:28px;

  border:
  1px solid rgba(216,181,109,.20);

  background:
  rgba(255,255,255,.04);

  backdrop-filter:
  blur(16px);

  box-shadow:
  0 20px 60px rgba(0,0,0,.35);
}

.estimate-card h2,
.estimate-card h3{
  color:#fff3c2;
}

.estimate-card p{
  color:#cfc3a8;
}

/* ===================================
   Google Maps Address Inputs
=================================== */

.pickupAddress,
.dropoffAddress,
.vehicleType{
  width:100%;
}

.quote-estimator button,
.quote-btn{

  border:none;

  border-radius:14px;

  padding:14px 22px;

  font-weight:900;

  cursor:pointer;

  color:#111;

  background:
  linear-gradient(
    135deg,
    #fff0b8,
    #d8b56d
  );

  transition:
  transform .3s ease,
  box-shadow .3s ease;
}

.quote-estimator button:hover,
.quote-btn:hover{

  transform:
  translateY(-3px);

  box-shadow:
  0 0 25px rgba(216,181,109,.4);
}

/* ===================================
   Loading State
=================================== */

.quote-loading{

  opacity:.75;

  pointer-events:none;
}

.quote-loading::after{

  content:"計算中...";

  display:block;

  margin-top:8px;

  color:#fff0b8;
}

/* ===================================
   Price Highlight
=================================== */

.quote-price{
  display:block;

  margin-top:8px;

  font-size:32px;

  font-weight:950;

  color:#fff3c2;
}

.quote-distance,
.quote-duration{
  color:#d9c9a5;
}

/* ===================================
   Mobile
=================================== */

@media(max-width:768px){

  .quote-estimator{
    grid-template-columns:1fr;
  }

  .estimate-core-section{
    padding:60px 0;
  }

  .estimate-card{
    padding:20px;
  }

  .quote-price{
    font-size:26px;
  }

}