/* Package tour detail (activityPage) - placeholder while legacy booking partial is migrated */
.ontravel-package-placeholder{
  border: 1px solid #d9534f;
  background: #111;
  color: #fff;
  padding: 12px 14px;
  margin: 12px 0;
  border-radius: 4px;
}

/* Product detail (packagetour) - gallery + red/black tone */
#productPage{
  --ontravel-accent: #e10600;
  --ontravel-text: #111;
}

#productPage .buttonbooking,
#productPage .atbtn--primary,
#productPage .btn-buynow{
  background: var(--ontravel-accent) !important;
  border-color: var(--ontravel-accent) !important;
  color: #fff !important;
}

#productPage .buttonbooking:hover,
#productPage .atbtn--primary:hover,
#productPage .btn-buynow:hover{
  background: #111 !important;
  border-color: var(--ontravel-accent) !important;
  color: #fff !important;
}

#productPage .productTitle h1{
  color: var(--ontravel-text);
}

#productPage .ontravel-gallery{
  margin-top: 12px;
}

#productPage .ontravel-gallery-main img{
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

#productPage .ontravel-gallery-thumbs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#productPage .ontravel-thumb{
  width: 86px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.12);
}

#productPage .ontravel-product-meta{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 4px solid var(--ontravel-accent);
  border-radius: 6px;
  padding: 14px 14px 8px;
}

#productPage .ontravel-meta-item{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}

#productPage .ontravel-meta-item strong{
  color: #111;
  font-weight: 700;
}

#productPage .ontravel-meta-item span{
  color: #111;
  text-align: right;
  font-weight: 600;
}

#productPage .ontravel-meta-item:last-child{
  border-bottom: 0;
}

/* Package tour / activity detail - force red/black tone (override template greens) */
#activitypage .awe-btn,
#activitypage .awe-btn:visited{
  background-color: #d9534f !important;
  border-color: #d9534f !important;
  color: #fff !important;
}

#activitypage .awe-btn:hover,
#activitypage .awe-btn:focus{
  background-color: #111 !important;
  border-color: #d9534f !important;
  color: #fff !important;
}

#activitypage .price-book span{
  color: #d9534f !important;
}

#activitypage .head-detail .star i,
#activitypage .start-address .star i{
  color: #d9534f !important;
}

#activitypage .breakcrumb-sc .breadcrumb a:hover{
  color: #d9534f !important;
}
/* ontravel.co overrides
   Loaded last in `Views/default.cshtml` to ensure it wins over legacy/v2 styles. */

.breadcrumb {
    font-family:prompt;
    font-style:normal;
}
/* Homepage hero cover + floating search box */
#homePage .homeHero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

#homePage .homeHero::before {
  content: "";
  position: absolute;
  inset: 0;
/*  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0.35) 100%
  );*/
  z-index: 0;
}

#homePage .homeHeroSearchWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7vh; /* lower-ish, floating over the cover */
  z-index: 2;
}

#homePage .homeHero .searchBox {
  /* more transparent so the cover shows through */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
  padding: 18px 18px 10px;
  backdrop-filter: blur(2px);
}

/* Remove bg in SHARED_SearchForm when used inside the hero */
#homePage .homeHero .banner {
  background: transparent;
  padding: 0;
  margin: 0;
}

#homePage .homeHero .banner .bg-parallax {
  display: none !important;
}

#homePage .homeHero .banner-cn {
  background: transparent !important;
}

#homePage .homeHero .banner .container {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767.98px) {
  #homePage .homeHero {
    height: 75vh;
    min-height: 420px;
  }

  #homePage .homeHeroSearchWrap {
    bottom: 3.5vh;
  }

  #homePage .homeHero .searchBox {
    padding: 14px 14px 6px;
  }
}


#homePage header {
    position:absolute;
}

#homePage .searchBox {
    max-width:100%;
}

#homePage #logo {
    display:none;
}

#homePage #bigLogo {
    width:300px;
}

.tabs-cat .cate-item {
    padding-bottom:20px;
    height:auto;
}

#homePage .banner-cn .cate-item i {
    color:#333;
}

.tabs-cat .cate-item:after {
    bottom: 20px;
    border-left: 1px solid #ffffff6b;
}



.home .searchFormBox {
    width: 100%;
    margin: auto;
    /*background: rgba(255, 255, 255, 0.18);*/
    border-radius: 0px;
    /*box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);*/
    /*padding: 18px 18px 10px;*/
    /*backdrop-filter: blur(2px);*/
}

.tabs-cat .cat-item {
    backdrop-filter: blur(2px);
}

.searchBox span {
    color:#333;
}

/* Search form: vertical variant (sidebar / product left column) */
.searchFormVertical .banner {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.searchFormVertical .banner .bg-parallax {
    display: none !important;
}

.searchFormVertical .banner-cn {
    background: transparent !important;
}

/* Hide the big category tabs when the form is used vertically */
.searchFormVertical .tabs-cat {
    display: none !important;
}

/* Stack fields vertically (override legacy column floats) */
.searchFormVertical .searchFormBox .inputBox,
.searchFormVertical .searchFormBox .submitBox {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.searchFormVertical .searchFormBox .inputBox {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.searchFormVertical .searchFormBox .searchBtn {
    width: 100% !important;
}

/* Make SHARED_SearchForm (home) look like the hotel-list template when rendered vertically */
.searchFormVertical .searchFormBox {
    background: #fff;
    padding: 20px 15px;
    border-top: 5px solid #e10600;
}

.searchFormVertical .searchFormBox .inputBox span {
    display: block;
    color: #e10600;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.searchFormVertical .searchFormBox input[type="text"],
.searchFormVertical .searchFormBox select {
    width: 100%;
    border: 0;
    outline: none;
    color: #111;
    background: transparent;
    font-weight: 600;
    border-bottom: 1px dashed rgba(225, 6, 0, 0.55);
    padding: 6px 0;
}

.searchFormVertical .searchFormBox .submitBox {
    margin-top: 10px;
}

/* =========================
   SearchResult sidebar look
   ========================= */
#searchResultPage {
    --ontravel-accent: #e10600; /* red */
    --ontravel-text: #111;
}

#searchResultPage .search-sidebar,
#searchResultPage .widget-sidebar {
    color: var(--ontravel-text);
}

/* Sidebar search form (template markup) */
/*#searchResultPage .search-sidebar .form-search .form-field label span,
#searchResultPage .search-sidebar .form-search .select > span {
    color: var(--ontravel-accent) !important;
    font-weight: 700;
}*/

#searchResultPage .search-sidebar .form-search .field-input,
#searchResultPage .search-sidebar .form-search select {
    color: var(--ontravel-text) !important;
    border: 0 !important;
    /*border-bottom: 1px dashed rgba(225, 6, 0, 0.55) !important;*/
    background: transparent !important;
    font-weight: 600;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#searchResultPage .search-sidebar .form-search .field-input::placeholder {
    color: rgba(17, 17, 17, 0.55);
}

/* Full-width red search button */
#searchResultPage .search-sidebar .ontravel-search-btn {
    width: 100% !important;
    display: block;
    background: var(--ontravel-accent) !important;
    border-color: var(--ontravel-accent) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 6px;
}

#searchResultPage .search-sidebar .ontravel-search-btn:hover {
    background: #b80500 !important;
    border-color: #b80500 !important;
}

/* Sidebar filters: links + stars in red/black */
#searchResultPage .widget-sidebar .title-sidebar {
    color: var(--ontravel-text);
}

#searchResultPage .widget-sidebar .group-star i {
    color: var(--ontravel-accent) !important;
    /* ===== Star Rating Checkbox Red Theme ===== */
    #searchResultPage .widget-rate input[type="checkbox"] {
        /* Hide the default checkbox */
        opacity: 0;
        position: absolute;
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
    }

    #searchResultPage .widget-rate label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        display: inline-block;
        min-height: 22px;
        line-height: 22px;
    }

    /* Custom checkbox box */
    #searchResultPage .widget-rate input[type="checkbox"] + label:before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 18px;
        height: 18px;
        border: 2px solid #e10600;
        border-radius: 4px;
        background: #fff;
        transition: border-color 0.2s, background 0.2s;
    }

    /* Checked state */
    #searchResultPage .widget-rate input[type="checkbox"]:checked + label:before {
        background: #e10600;
        border-color: #e10600;
    }

    /* Optional: checkmark */
    #searchResultPage .widget-rate input[type="checkbox"]:checked + label:after {
        content: "";
        position: absolute;
        left: 6px;
        top: 7px;
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* Make sure stars are aligned */
    #searchResultPage .widget-rate .group-star {
        margin-left: 4px;
        color: #e10600 !important;
        font-size: 18px;
        vertical-align: middle;
    }
}

/* =========================
   SearchResult product cards
   ========================= */
/* Prevent legacy v2 rule from clipping the partner/destination text */
#searchResultPage .sales-item .home-sales-text .home-sales-name-places .home-sales-places {
    height: auto !important;
    overflow: visible !important;
    border:none !important;
}

/* Make partner + destination align nicely and wrap (no cut-off) */
#searchResultPage .ontravel-card-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

#searchResultPage .ontravel-card-meta .ontravel-card-partner,
#searchResultPage .ontravel-card-meta .ontravel-card-destination {
    min-width: 0;
}

#searchResultPage .ontravel-card-meta a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
}

#searchResultPage .widget-sidebar .filter-link {
    color: var(--ontravel-text);
    text-decoration: none;
    display: inline-block;
    padding: 2px 0;
}

#searchResultPage .widget-sidebar .filter-link.active,
#searchResultPage .widget-sidebar .filter-link:hover {
    color: var(--ontravel-accent);
    text-decoration: underline;
}

/* Make left sidebar more compact */
#searchResultPage .sidebar-cn .search-result {
    margin-bottom: 10px;
}

#searchResultPage .search-sidebar .form-search .form-field {
    margin-bottom: 10px;
}

#searchResultPage .search-sidebar .form-search label {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
}

#searchResultPage .search-sidebar .form-search .field-input,
#searchResultPage .search-sidebar .form-search select {
    padding: 4px 0 !important;
    font-size: 14px;
}

#searchResultPage .search-sidebar .ontravel-search-btn {
    padding: 10px 12px;
}

#searchResultPage .widget-sidebar {
    margin-top: 16px;
}

#searchResultPage .widget-sidebar .title-sidebar {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

#searchResultPage .widget-sidebar .widget-ul li {
    line-height: 1.25;
}

/* Add breathing room for the right column content */
#searchResultPage .main-cn .col-md-9.col-md-push-3 {
    padding-left: 28px;
}

@media (max-width: 991.98px) {
    #searchResultPage .main-cn .col-md-9.col-md-push-3 {
        padding-left: 15px;
    }
}


.widget-rate li .group-star {
    width:auto;
}

.searchBox select {
    color:#000 !important;
}


.search-sidebar span {
    color: #333 !important;
    font-weight: normal;
    font-size: 11px;
}

.form-search .form-field.field-select .select span {
    border-bottom:none !important;
}

#searchResultPage .search-sidebar .form-search .field-input, #searchResultPage .search-sidebar .form-search select {
    border-radius: 0;
    border: none;
    border-bottom: solid 2px #ff0000 !important;
    background: none;
    padding: 0 5px;
    height: auto;
    font-family:prompt;
}



.hotel-page:before, .package-page:before, .cruise-page:before, .car-page:before, .tour-page:before, .flight-page:before, .hotel-maps:before {
    background:none;
}


#searchResultPage .leftColumn {
    width:24%;
    float:left;
    margin-right:1%;
}

#searchResultPage .rightColumn {
    width: 70%;
    float: left;
}


.sales-item .home-sales-text .price-box .price, .confidence ul li p {
    font-weight:normal;
    font-size:10px;
}

#searchResultPage .checkbox {
    display:none;
}

.text-black{
    color:#000 !important;
}

.home-sales-img img {
    width:100%;
    height:100%;
    object-fit:cover;
}

figure.home-sales-img a {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.sales-item:hover .home-sales-img img {
    opacity: 1;
    -webkit-transform: scale(1.02);
}

.photoGallery .mainPhoto {
    width:100%;
    aspect-ratio:4/3;
}

.photoGallery .thumb {
    width:48%;
    float:left;
    aspect-ratio:4/3;
    margin:0 1% 2% 1%;
}
.photoGallery .thumb img.thumbnail {
    width:100%;
    height:100%;
    object-fit:cover;
}



.detail-sidebar .scroll-heading a {
    font-size: 16px;
    color: #000;
    padding-bottom: 10px;
    /*border-bottom: solid 1px #ff0000;*/
}
.detail-sidebar .scroll-heading a.active {
    color: #ff0000;
    font-weight: 700;
    font-size:2.5rem;
    padding-bottom:20px;
}

.form-control {
    font-size: 16px;
    font-family: prompt !important
}

input::placeholder {
    font-family: 'Prompt', sans-serif;
    color: #999;
}

input::-webkit-input-placeholder {
    font-family: 'Prompt', sans-serif;
}

input:-ms-input-placeholder {
    font-family: 'Prompt', sans-serif;
}

input::-ms-input-placeholder {
    font-family: 'Prompt', sans-serif;
}

/* Activity page: render "::" via CSS so we can hide it for active item */
#activitypage .detail-sidebar .scroll-heading a::before {
    content: ":: ";
}
#activitypage .detail-sidebar .scroll-heading a.active::before {
    content: "";
}

#activitypage .mainContent h3 {
    font-size: 20px;
}

.detail-sidebar .scroll-heading {
    width: 100%;
}

.check-rates-form .form-search {
    margin-top:10px;
}

    .check-rates-form .form-search .field-date {
        width:100%;
    }

    .check-rates-form .form-search {
        border:none;
    }

.border-1 {
    border: dashed 1px;
}

#checkArrivalContentPage {
    padding:3px;
}

.googmeMap {
    width:20px;
}

.btn-large {
    padding: 12px 20px;
    min-height:40px;
    min-width:40px;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a, .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today.ui-datepicker-current-day a {
    background-color:#e10600;
}

body .ui-datepicker .ui-state-disabled .ui-state-default {
    height:45px;
}

.isPackage select {
    height: 35px;
    font-size:13px;
}

.font-xl {
    font-size:20px;
}

.packageImage {
    width:100%;
    aspect-ratio: 4/3
}

.packageImage img{
    width:100%;
    height:100%;
    object-fit:cover
}

.price-book {font-family:prompt;}


.select-wrapper {
    position: relative;
}

.isPackage select::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

    /* ซ่อน arrow เดิมของ browser */
.isPackage select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
}

.detail-sidebar .scroll-heading a {
    margin-top:15px;
}

#registerForm .field-input {
    position:relative;
}

/* Register: email validation icon (spinner / check / error) inside textbox */
#registerForm .emailValidation .input-with-icon {
    position: relative;
}
#registerForm .emailValidation .input-with-icon input.form-control {
    padding-right: 2.25rem; /* leave space for the icon */
}
#registerForm .emailValidation .email-status-icon {
    position: absolute;
    right: -4%;
    top: 0;
    transform: translateY(-50%);
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}
/*#registerForm .form-control {
    position: relative;
    text-indent: 40px;
}

#registerForm label {
    font-weight: normal;
    position:absolute;
    left:5px;
    top:5px;
    z-index:1;
}*/

    #registerForm label em {
        font-size: 35px;
        line-height: 14px;
        color: #ff0000;
        font-style: normal;
        vertical-align: bottom;
    }

/*#registerForm .form-control {
    padding-top: 50px;
    border:none;
    border-bottom:solid 1px #e10600;
    border-radius:0;
}*/

#registerForm .emailnotExists, #registerForm .emailExists {
    display:none;
}

.emailValidation .fa {
    right:2%;
}

#loginPage, #registerPage {
    margin-top: 0;
    position: relative;
}

.user-profile .check-box label {
    margin-top:0;
}

#navigation li.logInSuccess i {
    font-size:25px;
    padding-top:3px;
}

#navigation .cart i {
    font-size: 22px;
    line-height: 34px;
}

.currencySwitcher span {
    font-size:18px;
}

.flag.th-TH {
    background-position: 0 -48px;
}
.flag {
    background: url(/img/sprite-v1.0.1.png) 0 0 no-repeat;
    width: 30px;
    height: 20px;
    display: inline-block;
    background-size: 583%;
}

#navigation li.language {
    top:8px;
}


.payment-step li.step-select:after, .payment-step li.step-select:before,
.payment-step li.step-part:after {
    background-color: #e80000;
}

.payment-step li:after, .payment-step li:before{
    top:18px;
}

.payment-step li.step-select span {
    background-color: #e80000;
    text-indent: 0;
    color: #fff;
}

    .payment-step li.step-select span:after {
        background:none;
    }

.payment-step li span {
    display: block;
    position: relative;
    z-index: 1;
    margin: auto;
    width: 45px;
    height: 45px;
    background-color: #fff;
    border: 2px solid #efefef;
    color: #111111;
    font-weight: 300;
    line-height: 43px;
    font-size: 26px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.payment-room .payment-info ul li {
    padding-left:0;
    font-family:prompt;
}

.package-summary li{
    display:flex;
    width:100%;
}