/* =====================================================
   LEAF Trip · Trips
   iOS 26/27 Liquid Glass V1
===================================================== */

#trip{
  position:relative;

  padding:
    28px 28px 120px !important;

  background:
    radial-gradient(
      circle at 92% -5%,
      rgba(116,166,255,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at -5% 34%,
      rgba(193,214,255,.17),
      transparent 34%
    ),
    transparent !important;
}


/* =====================================================
   HEADER
===================================================== */

#trip .topbar{
  padding:0 !important;
  margin:0 0 24px !important;

  background:transparent !important;
}

#trip .eyebrow{
  margin-bottom:7px !important;

  color:
    rgba(40,52,67,.42) !important;

  font-size:
    12px !important;
}

#trip .title{
  color:#101820 !important;

  font-size:
    35px !important;

  line-height:
    1.06 !important;

  font-weight:
    790 !important;

  letter-spacing:
    -1.6px !important;
}


/* =====================================================
   ＋ 新建行程
===================================================== */

#trip .ios27-trip-create,
#trip .manual-trip-entry{

  position:relative;

  width:100% !important;
  height:62px !important;

  margin:
    0 0 22px !important;

  border:
    1px solid
    rgba(255,255,255,.88) !important;

  border-radius:
    23px !important;

  color:
    #087BF5 !important;

  font-size:
    16px !important;

  font-weight:
    690 !important;

  letter-spacing:
    -.3px !important;


  background:

    radial-gradient(
      ellipse at 28% -10%,
      rgba(255,255,255,.98),
      transparent 54%
    ),

    radial-gradient(
      ellipse at 100% 100%,
      rgba(154,204,255,.20),
      transparent 50%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.67),
      rgba(215,235,255,.37)
    )

    !important;


  backdrop-filter:
    blur(32px)
    saturate(215%) !important;

  -webkit-backdrop-filter:
    blur(32px)
    saturate(215%) !important;


  box-shadow:

    0 15px 36px
    rgba(45,87,150,.12),

    inset 0 1.5px 0
    rgba(255,255,255,1),

    inset 0 -1px 0
    rgba(76,149,230,.13)

    !important;


  overflow:hidden;
}


#trip .ios27-trip-create::before,
#trip .manual-trip-entry::before{

  content:"";

  position:absolute;

  left:12%;
  right:12%;

  top:1px;

  height:20px;

  border-radius:50%;

  background:

    radial-gradient(
      ellipse,
      rgba(255,255,255,.92),
      transparent 72%
    );

  pointer-events:none;
}


#trip .ios27-trip-create:active,
#trip .manual-trip-entry:active{

  transform:
    scale(.975);
}


/* =====================================================
   SEGMENTED CONTROL
===================================================== */

#trip .ios27-trip-filter-wrap{

  display:grid !important;

  grid-template-columns:
    repeat(3,1fr) !important;

  gap:5px !important;

  padding:
    5px !important;

  margin:
    0 0 26px !important;

  border-radius:
    22px !important;


  background:

    radial-gradient(
      ellipse at 24% 0%,
      rgba(255,255,255,.80),
      transparent 50%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(228,239,253,.30)
    )

    !important;


  border:
    1px solid
    rgba(255,255,255,.78) !important;


  backdrop-filter:
    blur(28px)
    saturate(200%) !important;

  -webkit-backdrop-filter:
    blur(28px)
    saturate(200%) !important;


  box-shadow:

    0 12px 30px
    rgba(61,83,123,.075),

    inset 0 1px 0
    rgba(255,255,255,.96)

    !important;
}


#trip .ios27-trip-filter{

  width:100% !important;
  min-height:45px !important;

  margin:0 !important;
  padding:0 8px !important;

  border:
    1px solid transparent !important;

  border-radius:
    17px !important;

  background:
    transparent !important;

  color:
    rgba(43,56,69,.48) !important;

  font-size:
    13px !important;

  font-weight:
    540 !important;
}


/* 旧绿色 active 全部覆盖 */
#trip .ios27-trip-filter.active{

  color:
    #087BF5 !important;

  font-weight:
    680 !important;


  background:

    radial-gradient(
      ellipse at 32% 0%,
      rgba(255,255,255,.98),
      transparent 60%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.78),
      rgba(205,230,255,.44)
    )

    !important;


  border:
    1px solid
    rgba(255,255,255,.88) !important;


  box-shadow:

    0 7px 18px
    rgba(10,132,255,.12),

    inset 0 1px 0
    rgba(255,255,255,1)

    !important;
}


/* =====================================================
   EMPTY STATE
===================================================== */

#trip .ios27-trip-empty,
#trip .real-empty-state{

  position:relative;

  width:100% !important;

  box-sizing:
    border-box;

  min-height:
    190px !important;

  margin:
    0 !important;

  padding:
    30px 24px !important;


  display:grid !important;

  grid-template-columns:
    62px 1fr !important;

  grid-template-rows:
    auto auto !important;

  column-gap:
    17px !important;

  align-items:
    center !important;

  text-align:
    left !important;


  border-radius:
    29px !important;


  background:

    radial-gradient(
      ellipse at 22% -6%,
      rgba(255,255,255,.94),
      transparent 47%
    ),

    radial-gradient(
      ellipse at 100% 100%,
      rgba(167,204,255,.20),
      transparent 48%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.63),
      rgba(224,238,255,.34)
    )

    !important;


  border:
    1px solid
    rgba(255,255,255,.84) !important;


  backdrop-filter:
    blur(32px)
    saturate(205%) !important;

  -webkit-backdrop-filter:
    blur(32px)
    saturate(205%) !important;


  box-shadow:

    0 18px 45px
    rgba(52,77,120,.09),

    inset 0 1.5px 0
    rgba(255,255,255,1),

    inset 0 -1px 0
    rgba(110,164,226,.09)

    !important;
}


#trip .real-empty-icon{

  grid-row:
    1 / span 2;

  width:
    62px !important;

  height:
    62px !important;

  margin:
    0 !important;


  border-radius:
    21px !important;


  display:grid !important;

  place-items:
    center !important;


  color:
    #0A84FF !important;

  font-size:
    23px !important;


  background:

    radial-gradient(
      circle at 28% 8%,
      rgba(255,255,255,.98),
      transparent 43%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.82),
      rgba(206,229,255,.48)
    )

    !important;


  border:
    1px solid
    rgba(255,255,255,.88);


  box-shadow:

    0 9px 24px
    rgba(10,132,255,.12),

    inset 0 1px 0
    rgba(255,255,255,1)

    !important;
}


#trip .real-empty-state b{

  align-self:
    end;

  margin:
    0 0 4px !important;

  color:
    #121A22 !important;

  font-size:
    16px !important;

  font-weight:
    710 !important;

  letter-spacing:
    -.25px;
}


#trip .real-empty-state span{

  align-self:
    start;

  margin:
    0 !important;

  color:
    rgba(42,55,69,.43) !important;

  font-size:
    11.5px !important;
}


/* =====================================================
   REAL TRIP CARDS
===================================================== */

#trip .ios27-trip-card,
#trip .real-trip-card,
#trip .trip-card,
#trip .flight-card,
#trip .train-card,
#trip .car-card{

  position:relative;

  overflow:hidden;

  border-radius:
    27px !important;

  border:
    1px solid
    rgba(255,255,255,.84) !important;


  background:

    radial-gradient(
      ellipse at 24% -4%,
      rgba(255,255,255,.92),
      transparent 45%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.65),
      rgba(224,238,255,.34)
    )

    !important;


  backdrop-filter:
    blur(30px)
    saturate(200%) !important;

  -webkit-backdrop-filter:
    blur(30px)
    saturate(200%) !important;


  box-shadow:

    0 16px 38px
    rgba(50,75,115,.09),

    inset 0 1.5px 0
    rgba(255,255,255,.98)

    !important;


  transition:
    transform .18s ease;
}


#trip .ios27-trip-card:active,
#trip .real-trip-card:active{

  transform:
    scale(.977);
}


/* 航班号以后必须突出 */
#trip [class*="flight-no"]{

  color:#111A23 !important;

  font-size:
    20px !important;

  font-weight:
    770 !important;

  letter-spacing:
    -.4px;
}


/* =====================================================
   TRANSFER / 联程
===================================================== */

.transfer-bridge{

  position:relative;

  height:74px;

  display:flex;

  align-items:center;
  justify-content:center;
}


.transfer-bridge::before{

  content:"";

  position:absolute;

  top:-12px;
  bottom:-12px;

  left:50%;

  width:1.5px;

  transform:
    translateX(-50%);


  background:

    linear-gradient(
      to bottom,
      rgba(10,132,255,.06),
      rgba(10,132,255,.55),
      rgba(10,132,255,.06)
    );
}


.transfer-pill{

  position:relative;

  z-index:2;


  padding:
    8px 15px;


  border-radius:
    999px;


  color:
    #1768BB;


  font-size:
    11px;

  font-weight:
    680;


  background:

    radial-gradient(
      ellipse at 28% 0%,
      rgba(255,255,255,.98),
      transparent 56%
    ),

    linear-gradient(
      145deg,
      rgba(255,255,255,.77),
      rgba(208,232,255,.42)
    );


  border:
    1px solid
    rgba(255,255,255,.88);


  backdrop-filter:
    blur(20px)
    saturate(205%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(205%);


  box-shadow:

    0 8px 22px
    rgba(10,132,255,.12),

    inset 0 1px 0
    rgba(255,255,255,1);
}


.transfer-pill::before{

  content:"";

  display:inline-block;

  width:5px;
  height:5px;

  margin-right:7px;


  border-radius:
    50%;


  background:
    #0A84FF;


  box-shadow:

    0 0 0 4px
    rgba(10,132,255,.10);
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:520px){

  #trip{

    padding:
      25px 22px 118px !important;
  }


  #trip .title{

    font-size:
      34px !important;
  }


  #trip .ios27-trip-empty,
  #trip .real-empty-state{

    padding:
      25px 20px !important;

    min-height:
      170px !important;
  }

}