/* ClawHas H5 theme v20260520
   Original visual system inspired by efficient travel search patterns:
   clear search, calm cards, large touch targets, and simple decisions. */
:root{
  --claw-ink:#111827;
  --claw-muted:#667085;
  --claw-soft:#f6f7fb;
  --claw-line:#e8edf5;
  --claw-card:#ffffff;
  --claw-brand:#3157ff;
  --claw-brand-2:#00a6ff;
  --claw-coral:#ff385c;
  --claw-mint:#12b981;
  --claw-yellow:#f6c453;
  --claw-shadow:0 14px 38px rgba(15,23,42,.08);
  --claw-shadow-soft:0 8px 22px rgba(15,23,42,.06);
}
html{background:var(--claw-soft)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif!important;
  color:var(--claw-ink)!important;
  background:
    radial-gradient(circle at 20% -10%, rgba(49,87,255,.14), transparent 30%),
    radial-gradient(circle at 105% 12%, rgba(255,56,92,.10), transparent 28%),
    var(--claw-soft)!important;
  letter-spacing:0!important;
}
a{color:inherit}
img[src*="logo"]{object-fit:contain!important}
.h5-shell,.h5-wrap{max-width:1120px;margin:0 auto}
.header,.topbar{
  max-width:1120px;
  margin:0 auto;
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(232,237,245,.8);
  box-shadow:none!important;
}
.logo-text,.brand,.profile-name{letter-spacing:0!important}
.logo-text{
  color:var(--claw-ink)!important;
  font-weight:900!important;
}
.header .logo-row img,.brand img{
  background:#fff;
  border:1px solid var(--claw-line);
  box-shadow:var(--claw-shadow-soft);
}
.auth-pill,.book-btn,.book-now,.btn,.pay-btn,.submit-btn,.fav-btn{
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--claw-brand),var(--claw-brand-2))!important;
  box-shadow:0 12px 26px rgba(49,87,255,.20)!important;
}
.search-bar,.search-box,.field input,.chat-input input{
  background:#fff!important;
  border:1px solid var(--claw-line)!important;
  border-radius:999px!important;
  box-shadow:0 12px 30px rgba(15,23,42,.07)!important;
}
.search-bar input,.search-box input,.field input{font-size:16px!important}
.hero{
  background:
    linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.72)),
    linear-gradient(135deg,rgba(49,87,255,.18),rgba(0,166,255,.12),rgba(255,56,92,.08))!important;
  color:var(--claw-ink)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:var(--claw-shadow)!important;
}
.hero::after{opacity:.08!important}
.hero-tag{
  color:#163fbf!important;
  background:rgba(49,87,255,.10)!important;
  border:1px solid rgba(49,87,255,.16);
}
.hero h1,.hero h2{color:var(--claw-ink)!important;letter-spacing:0!important}
.hero p{color:var(--claw-muted)!important;opacity:1!important}
.cat,.hotel-card,.order-card,.section,.float-card,.card,.profile-stats,.profile-menu,.promo{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(232,237,245,.95)!important;
  box-shadow:var(--claw-shadow-soft)!important;
  border-radius:22px!important;
}
.cat{
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cat:active,.hotel-card:active,.room-card:active{transform:scale(.985)!important}
.cat-icon,.svc-icon,.amenity-icon,.pm-icon,.ti{
  background:linear-gradient(135deg,rgba(49,87,255,.10),rgba(0,166,255,.10))!important;
  color:var(--claw-brand)!important;
  border:1px solid rgba(49,87,255,.12);
}
.cat-name,.hotel-name,.room-name,.order-hotel,.section-title,.sec h3{
  color:var(--claw-ink)!important;
  font-weight:900!important;
}
.cat-desc,.hotel-loc,.hotel-meta,.room-meta,.order-date,.pm-text,.svc-name{
  color:var(--claw-muted)!important;
}
.promo{
  background:linear-gradient(135deg,#eaf7ff,#fff5f7)!important;
  color:var(--claw-ink)!important;
}
.promo-text,.promo-sub{color:var(--claw-ink)!important}
.promo-btn{
  background:var(--claw-ink)!important;
  color:#fff!important;
  border-radius:999px!important;
}
.tabs{
  max-width:1120px;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(18px);
  border-top:1px solid var(--claw-line)!important;
  box-shadow:0 -10px 30px rgba(15,23,42,.08)!important;
}
.tab{color:#8792a2!important}
.tab.on{color:var(--claw-brand)!important}
.tab.on .ti{
  background:linear-gradient(135deg,var(--claw-brand),var(--claw-brand-2))!important;
  color:#fff!important;
}
.price-now,.our-price,.room-price,.price-display .num,.ps-num{
  color:var(--claw-brand)!important;
}
.savings,.price-save,.room-savings,.price-display .save{
  color:#047857!important;
  background:#e7f8ef!important;
  border-radius:999px!important;
  padding:3px 9px!important;
  display:inline-block;
}
.icp-footer,.clawhas-icp-footer{
  background:transparent!important;
  border-top:0!important;
  color:#6b7280!important;
}
@media(min-width:768px){
  .cats{grid-template-columns:repeat(4,1fr)!important}
  .hotel-card{display:grid;grid-template-columns:270px 1fr}
  .hotel-img{height:auto!important;min-height:210px}
  .bottom-bar{max-width:1120px}
}

/* v1.21.4 - H5 Agoda-reference booking surface.
   Reference direction only: clean travel search, generous whitespace, blue primary action. */
body{
  background:#f6f8fc!important;
  letter-spacing:0!important;
}
.desktop-nav{display:none}
.h5-home-shell{
  width:100%;
  margin:0 auto;
}
.search-meta-row,.search-submit{display:none}

@media(max-width:767px){
  .h5-home-shell{
    max-width:480px;
  }
  #pg-home .header{
    background:transparent!important;
    border-bottom:0!important;
    padding-top:18px!important;
  }
  #pg-home .logo-text{
    color:#3157ff!important;
  }
  #pg-home .hero{
    background:linear-gradient(135deg,#3157ff 0%,#4f7dff 62%,#ff7a59 155%)!important;
    color:#fff!important;
    border:0!important;
    box-shadow:0 18px 36px rgba(49,87,255,.18)!important;
  }
  #pg-home .hero-tag{
    color:#fff!important;
    background:rgba(255,255,255,.20)!important;
    border-color:rgba(255,255,255,.20)!important;
  }
  #pg-home .hero h2,#pg-home .hero p{
    color:#fff!important;
  }
}

@media(min-width:1024px){
  html{
    background:#f6f8fc!important;
  }
  body{
    padding-bottom:0!important;
    background:#f6f8fc!important;
  }
  #pg-home{
    min-height:100vh;
  }
  #pg-home .h5-home-shell{
    max-width:1440px;
    padding:0 clamp(32px,6vw,96px) 86px;
  }
  #pg-home .header{
    max-width:none!important;
    height:74px;
    margin:0!important;
    padding:14px 0!important;
    background:#fff!important;
    border-bottom:1px solid #e7ecf4!important;
    box-shadow:none!important;
    gap:26px;
  }
  #pg-home .logo-row{
    min-width:190px;
  }
  #pg-home .logo-row img{
    width:42px!important;
    height:42px!important;
    border-radius:10px!important;
    box-shadow:0 8px 18px rgba(49,87,255,.12)!important;
  }
  #pg-home .logo-text{
    font-size:22px!important;
    color:#1f2a44!important;
  }
  #pg-home .desktop-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
  }
  #pg-home .desktop-nav-item{
    height:40px;
    padding:0 16px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#202938;
    font:800 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    cursor:pointer;
    white-space:nowrap;
  }
  #pg-home .desktop-nav-item:hover,#pg-home .desktop-nav-item.active{
    background:#eef4ff;
    color:#2463eb;
  }
  #pg-home .header-right{
    min-width:210px;
    justify-content:flex-end;
  }
  #pg-home .auth-pill{
    height:42px!important;
    padding:0 22px!important;
    background:#fff!important;
    color:#2463eb!important;
    border:1px solid #d6e2f3!important;
    box-shadow:none!important;
  }
  #pg-home .auth-pill:hover{
    background:#f4f8ff!important;
  }
  #pg-home .auth-link{
    width:42px!important;
    height:42px!important;
    background:#eef4ff!important;
    border:1px solid #dce7f7!important;
  }
  #pg-home .hero{
    min-height:286px;
    margin:0!important;
    border-radius:0 0 18px 18px!important;
    background:
      linear-gradient(180deg,rgba(115,132,169,.82),rgba(115,132,169,.82)),
      linear-gradient(135deg,#dbe6ff,#eef5ff 56%,#fff5e8)!important;
    border:0!important;
    box-shadow:none!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    padding:54px 24px 116px!important;
    overflow:hidden;
  }
  #pg-home .hero::before{
    content:"";
    position:absolute;
    inset:auto 5% 0 5%;
    height:76px;
    border:1px solid rgba(255,255,255,.34);
    border-bottom:0;
    border-radius:28px 28px 0 0;
    opacity:.45;
  }
  #pg-home .hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:96px;
    opacity:.72!important;
    background:
      linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.40) 8% 9%,transparent 9% 18%,rgba(255,255,255,.32) 18% 19%,transparent 19% 100%);
  }
  #pg-home .hero-tag{
    position:relative;
    z-index:1;
    margin-bottom:12px!important;
    background:rgba(255,255,255,.22)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.28)!important;
    font-size:13px!important;
  }
  #pg-home .hero h2{
    position:relative;
    z-index:1;
    max-width:760px;
    color:#fff!important;
    font-size:34px!important;
    line-height:1.18!important;
    font-weight:900!important;
  }
  #pg-home .hero p{
    position:relative;
    z-index:1;
    max-width:620px;
    margin-top:10px;
    color:rgba(255,255,255,.92)!important;
    font-size:18px!important;
    line-height:1.55!important;
  }
  #pg-home .h5-main-search{
    position:relative;
    z-index:2;
    max-width:1040px;
    margin:-72px auto 34px!important;
    padding:34px 42px 30px!important;
    background:#fff!important;
    border:1px solid #e3e8f1!important;
    border-radius:18px!important;
    box-shadow:0 22px 50px rgba(15,23,42,.14)!important;
  }
  #pg-home .h5-main-search::before{
    content:"酒店  |  民宿和公寓  |  长住优惠  |  机场附近";
    display:block;
    margin:-58px auto 22px;
    width:max-content;
    max-width:100%;
    padding:13px 26px;
    border-radius:12px;
    background:#fff;
    color:#202938;
    font-size:15px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(15,23,42,.16);
    border:1px solid #e6edf7;
  }
  #pg-home .search-bar{
    min-height:70px!important;
    padding:0 22px!important;
    border-radius:12px!important;
    border:1px solid #dbe3ee!important;
    box-shadow:none!important;
  }
  #pg-home .search-bar:focus-within{
    border-color:#2463eb!important;
    box-shadow:0 0 0 4px rgba(36,99,235,.10)!important;
  }
  #pg-home .search-icon{
    font-size:24px!important;
    color:#111827!important;
  }
  #pg-home .search-bar input{
    font-size:18px!important;
    color:#202938!important;
  }
  #pg-home .voice-btn{
    width:44px!important;
    height:44px!important;
    background:#2463eb!important;
    box-shadow:0 12px 24px rgba(36,99,235,.22)!important;
  }
  #pg-home .search-meta-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:14px;
  }
  #pg-home .search-meta-row button{
    min-height:52px;
    border:1px solid #dbe3ee;
    border-radius:12px;
    background:#fff;
    color:#1f2937;
    font:800 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    cursor:pointer;
  }
  #pg-home .search-meta-row button:hover{
    border-color:#2463eb;
    background:#f4f8ff;
    color:#2463eb;
  }
  #pg-home .search-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    width:360px;
    height:54px;
    margin:24px auto -58px;
    border:0;
    border-radius:999px;
    background:#2463eb;
    color:#fff;
    font:900 18px/1 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    box-shadow:0 18px 34px rgba(36,99,235,.26);
    cursor:pointer;
  }
  #pg-home .search-submit:hover{
    background:#1d4ed8;
  }
  #pg-home .cats{
    max-width:1040px;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    margin:24px auto 0!important;
    padding:0!important;
  }
  #pg-home #categoryGrid{
    margin-top:52px!important;
  }
  #pg-home .cat{
    min-height:132px!important;
    border-radius:18px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  }
  #pg-home .cat1{background:#eef2ff!important}
  #pg-home .cat2{background:#edf7ff!important}
  #pg-home .cat3{background:#edfdf4!important}
  #pg-home .cat4{background:#fff6eb!important}
  #pg-home .cat5{background:#fff1f2!important}
  #pg-home .cat6{background:#f3f0ff!important}
  #pg-home .services{
    max-width:1040px;
    margin:26px auto 0!important;
    padding:12px 18px!important;
    justify-content:space-between;
    background:#fff!important;
    border:1px solid #e3e8f1!important;
    border-radius:18px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  }
  #pg-home .svc{
    min-width:92px!important;
  }
  #pg-home .svc-icon{
    width:42px!important;
    height:42px!important;
    border-radius:14px!important;
  }
  #pg-home .promo,#pg-home .sec,#pg-home .hotels{
    max-width:1040px;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #pg-home .promo{
    margin-top:26px!important;
    padding:22px 26px!important;
    border-radius:18px!important;
    background:linear-gradient(135deg,#eaf2ff,#fff8ea)!important;
  }
  #pg-home .sec{
    padding-top:34px!important;
  }
  #pg-home .sec h3{
    font-size:24px!important;
  }
  #pg-home .hotels{
    gap:18px!important;
  }
  #pg-home .hotel-card{
    border-radius:18px!important;
    overflow:hidden;
    box-shadow:0 12px 28px rgba(15,23,42,.07)!important;
  }
  .tabs{
    display:none!important;
  }
  .icp-footer{
    max-width:1040px!important;
    margin:0 auto!important;
  }
}