/* HP BETA 03.9 — purposefully scoped visual refinements. */
/* 1. Hosting İlk 10 — exactly ten equal cards on desktop, swipe only on mobile. */
.hpc-app .hpt28-top-ten{width:100%;max-width:100%;min-width:0;overflow:hidden;padding:18px clamp(9px,1.4vw,22px) 17px!important}
.hpc-app .hpt28-top-grid.hpt2620-top-scroll{
 display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;
 grid-auto-columns:auto!important;grid-auto-flow:row!important;grid-template-rows:1fr!important;
 gap:clamp(5px,.55vw,10px)!important;width:100%!important;min-width:0!important;
 overflow-x:visible!important;overflow-y:visible!important;
 padding:4px 0 5px!important;scrollbar-width:none!important;scroll-snap-type:none!important;
}
.hpc-app .hpt28-top-grid.hpt2620-top-scroll>.hpt28-top-item{
 display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
 min-width:0!important;max-width:none!important;min-height:159px!important;height:auto!important;
 padding:10px 6px!important;gap:6px!important;text-align:center!important;
 border-radius:11px!important;box-sizing:border-box!important;
}
.hpc-app .hpt28-top-grid .hpt28-rank{grid-column:auto!important;grid-row:auto!important;flex:none!important;align-self:flex-start!important;width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;line-height:1!important;font-size:11px!important}
.hpc-app .hpt28-top-grid .hpt28-top-logo{
 grid-column:auto!important;grid-row:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;
 height:33px!important;min-height:33px!important;padding:0!important;background:transparent!important;border:0!important;
}
.hpc-app .hpt28-top-grid .hpt28-top-logo img{display:block!important;width:100%!important;max-width:100%!important;height:29px!important;max-height:29px!important;object-fit:contain!important}
.hpc-app .hpt28-top-grid .hpt28-top-name{grid-column:auto!important;grid-row:auto!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-width:0!important;gap:4px!important;text-align:center!important}
.hpc-app .hpt28-top-grid .hpt28-top-name>strong{display:block!important;width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:clamp(9px,.70vw,11px)!important;line-height:1.35!important}
.hpc-app .hpt28-top-grid .hpt28-top-name>small{display:block!important;font-size:9px!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hpc-app .hpt28-top-grid .hpt28-rating{justify-content:center!important;flex-wrap:wrap!important;gap:2px!important;min-width:0!important;max-width:100%!important}
.hpc-app .hpt28-top-grid .hpt28-rating small{font-size:8px!important}
.hpc-app .hpt28-top-grid .hpt28-top-score{grid-column:auto!important;grid-row:auto!important;display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;flex:0 0 auto!important;gap:4px!important;width:100%!important;min-width:0!important;border:0!important;border-top:1px solid #e0ecf9!important;padding:5px 0 0!important;margin-top:auto!important}
.hpc-app .hpt28-top-grid .hpt28-top-score b{font-size:13px!important}
.hpc-app .hpt28-top-grid .hpt28-top-score small{font-size:9px!important}
.hpc-app .hpt283-top-controls{display:none!important}
@media(max-width:1000px){
 .hpc-app .hpt28-top-grid.hpt2620-top-scroll{
  grid-template-columns:none!important;grid-auto-columns:clamp(150px,43vw,200px)!important;
  grid-auto-flow:column!important;grid-template-rows:minmax(145px,1fr)!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;scrollbar-width:none!important;-ms-overflow-style:none!important;
  overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;
  touch-action:pan-x!important;gap:9px!important;padding:3px 1px 7px!important;
 }
 .hpc-app .hpt28-top-grid.hpt2620-top-scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
 .hpc-app .hpt28-top-grid.hpt2620-top-scroll>.hpt28-top-item{scroll-snap-align:start!important;min-height:149px!important}
 .hpc-app .hpt28-top-grid .hpt28-top-name>strong{font-size:11px!important}
}
/* 2. Desktop header — give the logo and stats breathing room, nav true centered at wide sizes. */
@media(min-width:1321px){
 .hpc-app .hpc-header-main>.hpt03-header-stats{margin-left:clamp(12px,1.55vw,30px)!important;margin-right:0!important;flex:0 0 auto!important}
 .hpc-app .hpc-header-main>#hpc-main-nav.hpc-main-nav{margin-left:auto!important;margin-right:auto!important;justify-content:center!important}
}
@media(min-width:1700px){
 .hpc-app .hpc-header-main{position:relative!important}
 .hpc-app .hpc-header-main>#hpc-main-nav.hpc-main-nav:not(.hpt03-nav-scroll){
  position:absolute!important;left:50%!important;transform:translateX(-50%)!important;
  margin:0!important;width:max-content!important;max-width:calc(100vw - 750px)!important;
 }
 .hpc-app .hpc-header-main>.hpc-header-search{margin-left:auto!important}
}
/* 3. Detail feature tiles, icon alignment and independently bordered info chips. */
.hpc-app .hpt239-feature-grid{gap:10px!important}
.hpc-app .hpt239-feature-grid>.hpt239-feature-tile{
 display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
 text-align:center!important;min-width:0!important;gap:5px!important;box-sizing:border-box!important;
}
.hpc-app .hpt239-feature-tile>i{display:block!important;flex:0 0 auto!important;align-self:center!important;margin:0 auto!important;text-align:center!important}
.hpc-app .hpt239-feature-tile :is(small,strong){display:block!important;max-width:100%!important;text-align:center!important;margin-inline:auto!important;line-height:1.35!important}
.hpc-app .hpt239-feature-tile .hpt240-panel-brand{margin-inline:auto!important}
.hpc-app .hpt239-trust-strip,
.hpc-app .hpt239-trust-strip:not(:empty){
 display:flex!important;flex-flow:row nowrap!important;align-items:stretch!important;justify-content:flex-start!important;
 gap:9px!important;min-width:0!important;max-width:100%!important;background:transparent!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 padding:0!important;margin:12px 0 0!important;
}
.hpc-app .hpt239-trust-strip:empty{display:none!important}
.hpc-app .hpt239-trust-strip>span{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:1 1 0!important;min-width:0!important;max-width:100%!important;
 min-height:35px!important;padding:7px 8px!important;border:1px solid #d8e7fb!important;
 border-radius:9px!important;background:#f4f8fe!important;
 color:#184a91!important;box-sizing:border-box!important;
 font-size:10px!important;font-weight:560!important;white-space:nowrap!important;
 text-overflow:ellipsis!important;overflow:hidden!important;gap:6px!important;
}
.hpc-app .hpt239-trust-strip>span>i{display:inline-block!important;flex:0 0 auto!important;font-size:13px!important}
@media(max-width:640px){
 .hpc-app .hpt239-feature-grid{gap:7px!important}
 .hpc-app .hpt239-trust-strip{gap:5px!important}
 .hpc-app .hpt239-trust-strip>span{min-width:0!important;font-size:clamp(7.4px,2.3vw,9px)!important;padding:6px 3px!important;gap:3px!important;min-height:33px!important}
 .hpc-app .hpt239-trust-strip>span>i{font-size:11px!important}
}
/* 4. Price-history table — visual separation between distinct headers. */
.hpc-app .hptv2-history-scroll{max-width:100%!important;overflow-x:auto!important}
.hpc-app .hptv2-history-scroll table{
 width:100%!important;min-width:310px!important;table-layout:fixed!important;
 border-collapse:separate!important;border-spacing:8px 0!important;
}
.hpc-app .hptv2-history-scroll thead th{
 padding:11px 12px!important;border:1px solid #e4edfb!important;border-radius:9px!important;
 background:#f2f7fe!important;text-align:left!important;
}
.hpc-app .hptv2-history-scroll tbody td{
 padding:12px 12px!important;min-width:0!important;border-bottom:1px solid #e8eff9!important;vertical-align:middle!important;
}
/* 5. Review and overview panels — remove abutting boxes and form collisions. */
.hpc-app .hpt239-overview-grid{gap:clamp(12px,1.4vw,20px)!important;align-items:stretch!important;min-width:0!important}
.hpc-app .hpt239-overview-grid>.hpt239-overview-card{margin:0!important;min-width:0!important;box-sizing:border-box!important;overflow-wrap:anywhere!important}
.hpc-app .hpt239-review-panel,.hpc-app .hpt-quick-review{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.hpc-app .hpt239-review-panel .hpt-review-head{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;justify-content:space-between!important}
.hpc-app .hpt239-review-panel .hpt-quick-review{padding:clamp(12px,1.3vw,20px)!important;margin-bottom:14px!important;border:1px solid #e0eafa!important;border-radius:12px!important}
.hpc-app .hpt239-review-panel .hpt-review-guest-fields{gap:12px!important}
.hpc-app .hpt239-review-panel .hpt-review-guest-fields label{min-width:0!important;max-width:100%!important}
.hpc-app .hpt239-review-panel .hpt-review-guest-fields input{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.hpc-app .hpt239-review-panel .hpt-quick-rating-form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;min-width:0!important}
.hpc-app .hpt239-review-panel .hpt-rate-fieldset{min-width:0!important;margin:0!important;padding:10px 12px!important}
.hpc-app .hpt239-review-panel .hpt-star-choices{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.hpc-app .hpt239-review-panel .hpt-review-comment-label{display:block!important;min-width:0!important}
.hpc-app .hpt239-review-panel .hpt-review-comment-label textarea{display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin-top:7px!important}
.hpc-app .hpt239-review-panel .hpt239-review-item{padding:14px 2px!important;margin-top:8px!important}
@media(max-width:700px){
 .hpc-app .hpt239-overview-grid{gap:12px!important}
 .hpc-app .hpt239-review-panel .hpt-review-guest-fields{grid-template-columns:minmax(0,1fr)!important}
 .hpc-app .hpt239-review-panel .hpt-quick-review{padding:12px!important}
}
/* 6. Segmented, rounded hosting filter navigation inspired by reference.
   Only existing real hosting taxonomy categories are rendered — never Domain. */
.hpc-app .hpc-market-grid>.hptv21-category-tabs{
 display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-start!important;
 width:100%!important;max-width:100%!important;min-width:0!important;
 padding:7px 9px!important;margin-block:3px 9px!important;
 border:1px solid #e2eafa!important;border-radius:999px!important;
 background:#fff!important;box-shadow:0 7px 17px #143d7612!important;overflow:hidden!important;
}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap.hptv21-tab-wrap,
.hpc-app .hptv21-category-tabs .hpc-cat-list.hptv21-tab-wrap{
 display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;
 justify-content:flex-start!important;gap:3px!important;flex:1 1 auto!important;
 width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;
 overflow-x:auto!important;overflow-y:hidden!important;
 scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
 padding:2px!important;scroll-snap-type:x proximity!important;
}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap::-webkit-scrollbar{display:none!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice{
 display:inline-flex!important;flex:0 0 auto!important;justify-content:center!important;align-items:center!important;
 gap:9px!important;height:49px!important;min-height:49px!important;max-height:49px!important;
 width:auto!important;min-width:max-content!important;max-width:none!important;
 padding:7px 13px!important;margin:0!important;border:0!important;
 border-radius:999px!important;background:transparent!important;box-shadow:none!important;
 color:#19375e!important;font-size:13px!important;font-weight:620!important;
 white-space:nowrap!important;scroll-snap-align:start!important;
}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice:not(:last-child){margin-right:5px!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice i{color:#1476ee!important;font-size:18px!important;flex:none!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice .hpt039-cat-label{line-height:1!important;white-space:nowrap!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice small{
 flex:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 min-height:25px!important;padding:3px 9px!important;border-radius:999px!important;
 background:#ecf1f8!important;color:#3a5476!important;font-size:12px!important;font-weight:690!important;opacity:1!important;
}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice.is-active,
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice[aria-pressed='true']{background:#e7f2ff!important;color:#0c4eac!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice:is(.is-active,[aria-pressed='true']) small{background:#d3e9ff!important;color:#0d5dcc!important}
.hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice:focus-visible{outline:2px solid #1479ee!important;outline-offset:-2px!important}
@media(max-width:640px){
 .hpc-app .hpc-market-grid>.hptv21-category-tabs{padding:5px!important;border-radius:17px!important}
 .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice{
  height:44px!important;min-height:44px!important;max-height:44px!important;
  padding:6px 11px!important;gap:7px!important;font-size:11px!important;
 }
 .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice i{font-size:16px!important}
 .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice small{font-size:10px!important;min-height:22px!important;padding:2px 7px!important}
}
/* Preserve contrast when dark mode is selected. */
html[data-hpt-theme='dark'] .hpc-app .hpt239-trust-strip>span,
html[data-hpt-theme='dark'] .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice:not(.is-active){background:#1c3553!important;border-color:#365775!important;color:#edf6ff!important}
html[data-hpt-theme='dark'] .hpc-app .hpc-market-grid>.hptv21-category-tabs{background:#152b47!important;border-color:#34516e!important}
html[data-hpt-theme='dark'] .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice.is-active{background:#254e80!important;color:#fff!important}
html[data-hpt-theme='dark'] .hpc-app .hptv21-category-tabs .hptv21-tab-wrap .hpc-cat-choice small{background:#325273!important;color:#eef6ff!important}
html[data-hpt-theme='dark'] .hpc-app .hptv2-history-scroll thead th{background:#254563!important;border-color:#375879!important;color:#ebf6ff!important}
html[data-hpt-theme='dark'] .hpc-app .hpt239-review-panel .hpt-quick-review{border-color:#3d5774!important}

/* HP BETA 03.10 — active desktop search must not collapse the auto spacer.
   When the centered nav is out of normal flow, this spacer pins the entire
   search/account/currency/theme cluster to the right. An earlier focus rule
   resets margin-left: auto to 0 and causes a horizontal jump. */
@media (min-width:1700px) {
  .hpc-app .hpc-header-main > form.hpc-header-search:is(:focus-within,.hpt24-search-open) {
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* HP BETA 03.17 — the site header and V240 homepage use the same 1540px
   centered content boundary. Preserve existing navigation sizing and controls. */
@media (min-width:1321px) {
  .hpc-app .hpc-header-main {
    max-width:1540px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
}