/* ============================================================
   VENERA DESIGN SYSTEM
   Modern hotel booking interface
   ============================================================ */

/* --- Design Tokens --- */
:root {
  /* Border Radius Scale */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Shadow Scale */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 20px 30px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.14), 0 12px 24px rgba(0, 0, 0, 0.06);

  /* Transition */
  --transition: all 0.2s ease;
  --transition-slow: all 0.35s ease;

  /* Neutral Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Semantic Colors */
  --color-gold: #f59e0b;
  --color-gold-light: #fef3c7;
  --color-green: #10b981;
  --color-green-light: #d1fae5;
  --color-green-bg: #ecfdf5;
  --color-red: #ef4444;
  --color-red-light: #fee2e2;
  --color-red-bg: #fef2f2;
  --color-blue: #3b82f6;
  --color-blue-light: #dbeafe;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */

body {
  background: var(--gray-50) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 13px;
  line-height: 1.6;
}


/* ============================================================
   BUTTONS — Remove All Gradients, Use Flat Solid Design
   ============================================================ */

.gradient-button,
button:not(.buttonChoose button):not(.profileContentBtn):not(.view-btn):not(.apply-btn):not(.search-destination-clear):not(
    .lSPrev
  ):not(.lSNext):not(.lg-close):not(.lg-prev):not(.lg-next):not(
    [class*='flatpickr']
  ):not([class*='daterangepicker']),
input[type='button'],
input[type='reset'],
input[type='submit'],
.btn-submit {
  border-radius: var(--radius) !important;
  filter: none !important;
/*   color: var(--primary-contrast) !important;
 */  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  text-shadow: none !important;
  height: 40px;
  line-height: 40px;
  padding: 0 20px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.gradient-button:hover,
.gradient-button:focus, 
button:not(.view-btn):not(.apply-btn):not(.lSPrev):not(.lSNext):hover,
button:not(.view-btn):not(.apply-btn):not(.lSPrev):not(.lSNext):focus,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover,
.btn-submit:hover {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-md) !important;
  -webkit-box-shadow: var(--shadow-md) !important;
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Promo section override */
.promo .gradient-button,
.promo .gradient-button:hover,
.promo .gradient-button:focus {
  background: var(--primary) !important;
  background-image: none !important;
  filter: none !important;
}

/* Booknow CTA */
.booknow {
  border-radius: var(--radius) !important;
  background: var(--primary) !important;
  background-image: none !important;
  color: var(--primary-contrast) !important;
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 600;
  transition: var(--transition);
}

.booknow:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

.booknow.active {
  background: var(--gray-800) !important;
}

/* Group hotel booking link */
.groupBook > a {
  border-radius: var(--radius) !important;
  background: var(--primary) !important;
  transition: var(--transition);
}

.groupBook > a:hover {
  opacity: 0.88;
}

/* Apply filter button */
.apply-btn {
  border-radius: var(--radius) !important;
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  border: none;
  transition: var(--transition);
}

.apply-btn:hover {
  opacity: 0.88;
}

/* Register Now */
.registerNow {
  border-radius: var(--radius) !important;
  font-weight: 600;
  background: var(--button) !important;
  color: #fff !important;
}

/* Moreinfo/details button override */
.moreDesc {
  border-radius: var(--radius-sm) !important;
}

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

header.headerArea.new {
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
    z-index: 1000001;
}

.topUst {
  background: var(--primary) !important;
  min-height: 54px;
}

.topUst .wrap {
  min-height: 54px;
  display: flex;
  align-items: center;
}

/* Logo / Hotel Name */
.hotelName {
  text-decoration: none !important;
}

.hotelName span {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--primary-contrast) !important;
  line-height: 1;
}

.hotelName .groupHotelLogo {
  max-height: 36px;
  width: auto;
}

.hotelCon {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Contact items in header */
.phones a,
.email a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  color: var(--primary-contrast) !important;
  fill: var(--primary-contrast) !important;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.9;
  text-decoration: none !important;
  transition: var(--transition);
}

.phones a:hover,
.email a:hover {
  opacity: 1;
}

.phones .icon,
.email .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.topRight {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Language bar */
.langBar {
  position: relative;
  cursor: pointer;
}

.langBar span {
  font-size: 12px !important;
  font-weight: 500;
  cursor: pointer;
  color: var(--primary-contrast) !important;
}

.langItems {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden;
  min-width: 120px;
  background: #fff;
  top: 25px !important;
}

.langItems li {
  padding: 8px 14px !important;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: var(--transition);
}

.langItems li:hover {
  background: var(--gray-50);
  color: var(--primary);
}

/* User/menu icons */
.loginUser i,
.menuIcon i {
  border-radius: var(--radius-pill) !important;
  padding: 6px 8px !important;
  font-size: 18px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--primary-contrast) !important;
  transition: var(--transition);
}

.loginUser i:hover,
.menuIcon i:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* Header action bar icons */
.headerActionbar.newBar .loginUser i {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Back button */
.menuBackButton {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: var(--transition);
  color: var(--primary-contrast);
}

.menuBackButton:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Currency dropdown */
#currencyDropdown {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-contrast);
  font-size: 12px;
  font-weight: 500;
}

.currency-list {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden;
  min-width: 130px;
}

/* Login actions dropdown */
.loginActions {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden;
  background: #fff;
  min-width: 180px;
}

ul.loginActions li {
  border-bottom: 1px solid var(--gray-100) !important;
  padding: 9px 14px !important;
  cursor: pointer;
  transition: var(--transition);
}

ul.loginActions li:last-child {
  border-bottom: none !important;
}

.loginActions li:hover {
  background: var(--gray-50) !important;
  border-radius: 0 !important;
}

ul.loginActions li a {
  color: var(--gray-800) !important;
  font-weight: 400 !important;
  font-size: 13px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main.newMain {
  min-height: calc(100vh - 200px);
  padding-bottom: 120px;
}

/* ============================================================
   CARDS & WIDGETS
   ============================================================ */

aside .widget,
.hotel-details,
.tour-details,
.details,
.sectionWidget {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  -webkit-box-shadow: var(--shadow) !important;
  -moz-box-shadow: var(--shadow) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff;
}

/* Hotel item cards */
.hotelItemIn {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  -webkit-box-shadow: var(--shadow) !important;
  overflow: hidden;
  transition: var(--transition-slow);
  border: 1px solid var(--gray-200);
  background: #fff;
}

.hotelItemIn:hover {
  box-shadow: var(--shadow-md) !important;
  -webkit-box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px);
}

/* Image areas in hotel cards */
.imgArea {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  overflow: hidden;
}

.imgArea img {
  width: 100%;
  object-fit: cover;
  height: 220px;
  transition: transform 0.4s ease;
  display: block;
}

.hotelItemIn:hover .imgArea img {
  transform: scale(1.04);
}

/* Hotel text area */
.hotelText {
  padding: 14px 16px 16px;
}

.hotelText .hotelName {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--gray-800) !important;
  margin-bottom: 6px;
  display: block;
}

/* Catalog item (list view) */
.catalogItem {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden;
  transition: var(--transition-slow);
}

.catalogItem:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

/* ============================================================
   FILTER PANEL
   ============================================================ */

.filter-container {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  -webkit-box-shadow: var(--shadow) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff;
}

.filter-title {
  color: var(--gray-800) !important;
  font-size: 15px !important;
}

.filter-subtitle {
  color: var(--gray-400) !important;
}

.filter-section h4 {
  color: var(--gray-600) !important;
  font-size: 11px !important;
  letter-spacing: 0.8px;
}

/* ============================================================
   TOOLBAR (Sort / View Switch)
   ============================================================ */

.sort-box {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  height: 48px !important;
  box-shadow: var(--shadow-xs) !important;
}

.sort-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  border-right: 1px solid var(--gray-200) !important;
  color: var(--gray-700) !important;
  padding: 0 14px !important;
}

.sort-select {
  font-size: 14px !important;
  padding: 0 14px !important;
  color: var(--gray-700) !important;
}

.view-switch {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  height: 48px !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
}

.view-btn {
  width: 56px !important;
  font-size: 20px !important;
  border-right: 1px solid var(--gray-200) !important;
  color: var(--gray-500) !important;
  background: #fff !important;
  border-radius: 0 !important;
  height: 48px !important;
  line-height: 48px !important;
  transition: var(--transition);
}

.view-btn:last-child {
  border-right: none !important;
}

.view-btn.active {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
  box-shadow: none !important;
  transform: none !important;
}

.view-btn:hover:not(.active) {
  background: var(--gray-50) !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ============================================================
   SEARCH DESTINATION INPUT
   ============================================================ */

#searchDestination {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--gray-200) !important;
  height: 48px;
  margin: 8px 0;
  font-size: 14px;
  color: var(--gray-800);
  transition: var(--transition);
}

#searchDestination:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important;
}

.search-destination-dropdown {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden;
}

.search-destination-item:hover {
  background: var(--gray-50) !important;
}

/* ============================================================
   FORM ELEMENTS — Material Design Outlined
   ============================================================ */

.form-control,
input[type='text']:not([class*='flatpickr']):not([class*='noborder']):not([class*='daterangepicker']):not(.inputReset):not(.flatpickr-calendar *),
input[type='email']:not(.flatpickr-calendar *),
input[type='number']:not(.flatpickr-calendar *),
input[type='password']:not(.flatpickr-calendar *),
input[type='tel']:not(.flatpickr-calendar *)
input[type='search']:not(.flatpickr-calendar *) {
  border-radius: 8px !important;
  height: 42px !important;
  font-size: 14px !important;
  color: var(--gray-800) !important;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  width: 100%;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box;
}

.form-control:hover,
input[type='text']:not(.inputReset):not(.flatpickr-calendar *):hover,
input[type='email']:not(.flatpickr-calendar *):hover,
input[type='number']:not(.flatpickr-calendar *):hover,
input[type='password']:not(.flatpickr-calendar *):hover,
input[type='tel']:not(.flatpickr-calendar *):hover,
input[type='search']:not(.flatpickr-calendar *):hover,
textarea:hover {
  border-color: var(--gray-500) !important;
}

.form-control:focus,
input[type='text']:not(.inputReset):not(.flatpickr-calendar *):focus,
input[type='email']:not(.flatpickr-calendar *):focus,
input[type='number']:not(.flatpickr-calendar *):focus,
input[type='password']:not(.flatpickr-calendar *):focus,
input[type='tel']:not(.flatpickr-calendar *):focus,
input[type='search']:not(.flatpickr-calendar *):focus,
textarea:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

/* ============================================================
   CHECKBOX & RADIO — controlled size, accent color
   ============================================================ */

input[type='checkbox'],
input[type='radio'] {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

/* KVKK / agreement checkbox row */
.kvkkAgrement {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}


.kvkkAgrement span {
  font-size: 13px !important;
  color: var(--gray-600) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
}

.kvkkAgrement span:hover {
  text-decoration: underline !important;
  color: var(--primary) !important;
}

/* Note / bill toggle checkboxes */
.showBillArea div,
.showNotArea div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.showBillArea div label,
.showNotArea div label {
  font-size: 13px !important;
  color: var(--gray-700) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Global select — Material Design with SVG chevron */
select:not([class*='select2']):not([class*='daterangepicker']):not(.inputReset):not(.flatpickr-calendar *) {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: 8px !important;
  height: 46px !important;
  padding: 0 36px 0 14px !important;
  font-size: 14px !important;
  color: var(--gray-800) !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 7px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
}

select:not([class*='select2']):not([class*='daterangepicker']):not(.inputReset):not(.flatpickr-calendar *):hover {
  border-color: var(--gray-500) !important;
}

select:not([class*='select2']):not([class*='daterangepicker']):not(.inputReset):not(.flatpickr-calendar *):focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

/* intl-tel-input global — block display prevents inline descender gap */
.iti {
  display: block !important;
}

.iti__selected-flag {
  height: 100% !important;
}

/* CRM right panel form controls */
.crmRight .form-control {
  height: 50px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
}

.crmRight .iti__selected-flag {
  border-radius: var(--radius) 0 0 var(--radius) !important;
}

/* Input group floating label */
.input-group input {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
}

.input-group input:focus {
  border-color: var(--primary) !important;
}

/* EWCon search fields */
.ewCon .ewInput {
  border-radius: var(--radius) !important;
  border-color: var(--gray-200) !important;
  height: 50px;
  font-size: 13px;
}

.ewCon .ewLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gray-400);
  text-transform: uppercase;
  background: #fff;
}

/* Radio group */
.radio-group {
  border-radius: var(--radius) !important;
  border-color: var(--gray-200) !important;
}

/* ============================================================
   INNER NAVIGATION (Hotel Detail Tabs)
   ============================================================ */

.inner-nav li {
  border-radius: var(--radius-md) !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: var(--primary) !important;
  opacity: 0.72;
  transition: var(--transition);
}

.inner-nav li:hover {
  opacity: 0.88 !important;
}

.inner-nav li.active,
.inner-nav li.active:hover {
  opacity: 1 !important;
  width: 110%;
  box-shadow: var(--shadow-sm) !important;
  -webkit-box-shadow: var(--shadow-sm) !important;
}

.inner-nav li a {
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
}

/* ============================================================
   GALLERY
   ============================================================ */

.Gallery {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
}

.frontImg {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  width: 100%;
  object-fit: cover;
  max-height: 460px;
  display: block;
}

.thumbArea {
  display: flex;
  gap: 3px;
  background: var(--gray-50);
  padding: 4px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.thumbArea img,
.slide-bg {
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: var(--transition);
  object-fit: cover;
  opacity: 0.85;
}

.thumbArea img:hover,
.slide-bg:hover {
  opacity: 1;
  transform: scale(1.03);
}

/* ============================================================
   HOTEL INFO CARD (Detail Page)
   ============================================================ */

.hotel-info {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow) !important;
  -webkit-box-shadow: var(--shadow) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff;
  overflow: hidden;
}

.hotel-info img,
.roomItem img {
  border-radius: var(--radius-md) !important;
}

/* Stars */
.stars i,
.detail-stars i {
  color: var(--color-gold) !important;
  font-size: 13px !important;
}

/* ============================================================
   ROOM ITEMS
   ============================================================ */

.row.roomItem {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff !important;
  box-shadow: var(--shadow-sm) !important;
  -webkit-box-shadow: var(--shadow-sm) !important;
  margin: 10px 0 !important;
  transition: var(--transition);
}

.row.roomItem:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--gray-300) !important;
}

.infoBarType {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
}

.infoBarType .infoLabel {
  color: var(--gray-700) !important;
  font-size: 13px !important;
}

/* Tab links for room types */
.tabLinksArea {
  border-bottom: 2px solid var(--gray-200);
}

/* ============================================================
   AVAILABILITY CALENDAR
   ============================================================ */

/* Available cell */
td[class*='availability-available'],
.avail-green,
td.available {
  background: var(--color-green-bg) !important;
  color: #065f46 !important;
  border-radius: var(--radius-xs) !important;
}

/* Unavailable / full cell */
td[class*='availability-unavailable'],
.avail-red,
td.unavailable {
  background: var(--color-red-bg) !important;
  color: #991b1b !important;
  border-radius: var(--radius-xs) !important;
}

/* Closed cell */
td.closed,
td.avail-gray {
  background: var(--gray-100) !important;
  color: var(--gray-400) !important;
  border-radius: var(--radius-xs) !important;
}

/* ============================================================
   TAX / PRICE AREAS
   ============================================================ */

.taxArea {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
}

.dailyprice {
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-green-light) !important;
  box-shadow: var(--shadow-sm) !important;
  -webkit-box-shadow: var(--shadow-sm) !important;
}

.dailyprice .dailydate {
  background: var(--color-green-bg) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-size: 11px;
  font-weight: 600;
  color: #065f46;
  padding: 5px 14px !important;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */

.s-title.hotels,
.s-title {
  margin-bottom: 8px;
}

.s-title h1,
.s-title.hotels h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-800);
  padding: 0;
}

/* Small eyebrow label above section title */
.section-label,
.section-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 4px;
}

/* ============================================================
   TABLES
   ============================================================ */

table th {
  background: var(--gray-50) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-500) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

table td {
  border-color: var(--gray-200) !important;
  color: var(--gray-800) !important;
  font-size: 13px;
}

table tr:hover {
  background: var(--gray-50) !important;
}

/* ============================================================
   MODAL / LIGHTBOX
   ============================================================ */

.lightbox .lb-wrap {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  -webkit-box-shadow: var(--shadow-xl) !important;
}



.crmRight .close {
  right: 16px !important;
  top: 10px !important;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  border-radius: var(--radius) !important;
  font-size: 13px;
}

.errorMessage {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff1f2 !important;
  border: none !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 0 8px 8px 0 !important;
  color: #b91c1c !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  margin: 15px 0 !important;
  width: 100% !important; 
  text-align: left !important;
  line-height: 1.45 !important;
  animation: ds-errorfade 0.18s ease !important;
}

.errorMessage::before {
  content: '\26A0' !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  opacity: 0.75 !important;
}

.errorMessage:empty {
  display: none !important;
}

@keyframes ds-errorfade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TAGS / BADGES
   ============================================================ */

.tags li {
  border-radius: var(--radius-pill) !important;
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  font-size: 11px;
  border: none;
  box-shadow: none !important;
}

.tags li:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast) !important;
}

/* License / luxury badge */
.license-badge {
  border-radius: var(--radius) !important;
  background: rgba(30, 41, 59, 0.85) !important;
}

/* ============================================================
   HOMEPAGE / BONUS INFO
   ============================================================ */

.homePage {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--gray-200) !important;
  background: var(--gray-50) !important;
  box-shadow: none !important;
}

.bonusIInfoItem {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--gray-200) !important;
  background: #fff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

footer.footer {
  background: #fff !important;
  border-top: 1px solid var(--gray-200);
  padding: 20px 0;
  color: var(--gray-500) !important;
}

footer.footer .copy,
footer.footer .copyRight,
footer.footer p,
footer.footer span:not(.fa):not(.fab) {
  color: var(--gray-500) !important;
  font-size: 12px;
}

footer.footer a {
  color: var(--gray-500) !important;
  font-size: 12px;
  font-weight: 400 !important;
  text-decoration: none;
}

footer.footer a:hover {
  color: var(--primary) !important;
}

/* ============================================================
   TYPOGRAPHY — Inter font hierarchy
   ============================================================ */

body {
  font-family: var(--font-family, 'Inter', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply font only to text elements — explicitly exclude icon font classes */
body p,
body span:not([class*='fa']):not([class*='icon']),
body div,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body input,
body select,
body textarea,
body button,
body label,
body a,
body li,
body td,
body th {
  font-family: var(--font-family, 'Inter', sans-serif);
}

/* Icon fonts are NOT touched — their own stylesheets manage font-family */

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.3px;
}
h4,
h5,
h6 {
  font-weight: 600;
}

/* ============================================================
   SEARCH WIDGET — Reservation/Extra Services tabs + rezinfo bar
   ============================================================ */

.changeRezMod.card {
  display: flex !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
  gap: 4px !important;
}

.changeRezMod.card button {
  flex: 1;
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
  border: none !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  height: 40px !important;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.2s ease;
  letter-spacing: 0.3px;
}

.changeRezMod.card button.active {
  opacity: 1 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

.changeRezMod.card button:hover:not(.active) {
  opacity: 0.85 !important;
}

/* rezinfo main bar — pill shape */
#rezInfoSearchArea {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 !important;
  border: 1.5px solid var(--gray-200) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  background: #fff !important;
  overflow: visible;
  margin-top: 0;
  font-size: 14px;
}

/* When reservation/extra-service tabs sit above the bar, square the top-left corner */

/* ══════════════════════════════════════════════════════
   SEARCH WIDGET — rezInfoSearchArea
   Every rezinfoItem = flex-column, top-aligned (13px padding-top)
   Label fixed at top, value below → labels always at same height
   ══════════════════════════════════════════════════════ */

/* Item container — flex column, top-aligned */
#rezInfoSearchArea .rezinfoItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
  padding: 13px 18px 11px;
  min-height: 64px;
  height: auto;
  width: auto;
  flex: 1 1 0;
  border-width: 0;
  border-right: 1px solid var(--gray-200);
  box-sizing: border-box;
}

#rezInfoSearchArea .rezinfoItem:last-child {
  border-right: none;
}

/* Label row — always first child, consistent height */
#rezInfoSearchArea .rezLabel,
#rezpicker .rezLabel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: var(--gray-500) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 5px !important;
  padding: 0 !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  height: 14px !important;
  line-height: 14px !important;
  flex-shrink: 0 !important;
}

#rezInfoSearchArea .rezLabel i,
#rezpicker .rezLabel i {
  font-size: 10px !important;
  color: var(--primary) !important;
  margin-right: 0 !important;
  width: 12px !important;
  text-align: center !important;
}

/* Value row — appears below label (inputs and spans only, NOT select) */
#rezInfoSearchArea .rezinfoItem > span,
#rezInfoSearchArea .rezinfoItem input.inputReset,
#rezInfoSearchArea .rezinfoItem input {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  line-height: 1.3 !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Material Design selects — appearance:none + custom chevron
   Specificity: 1,2,1 beats inputReset (1,2,0) so chevron SVG is NOT overridden */
#rezInfoSearchArea .rezinfoItem select {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 8px 5px !important;
  height: auto !important;
  padding: 0 18px 0 0 !important;
  width: auto !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  cursor: pointer !important;
  min-width: 50px !important;
  line-height: 1.3 !important;
}

/* Text inputs — clean, borderless */
#rezInfoSearchArea input[type='text'],
#rezInfoSearchArea input[type='date'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  line-height: 1.3 !important;
}

#rezInfoSearchArea input::placeholder {
  color: var(--gray-400) !important;
  font-weight: 400 !important;
}

/* ── Date picker (#rezpicker) — same top-aligned column layout ── */
#rezpicker {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  cursor: pointer !important;
  padding: 13px 18px 11px !important;
  border-right: 1px solid var(--gray-200) !important;
  flex: 2 1 0 !important;
  min-width: 220px !important;
  min-height: 64px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Hide the old absolute-positioned icon from rezmain */
#rezpicker > i {
  display: none !important;
}

/* pickerArea: checkin → checkout side by side, left-aligned */
#rezpicker .pickerArea {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Each date span — no rezmain 46px min-height, no 100% width */
#rezpicker .pickerArea span,
#rezpickercheckin,
#rezpickercheckout {
  min-height: 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  gap: 10px;
}

/* Only the date number, hide day-of-week */
#rezpicker .rezpickerdate {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: inline !important;
}



/* Arrow separator between checkin → checkout */
#rezpickercheckout::before {
  content: '→';
  color: var(--gray-400) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  margin: 0 8px !important;
}

/* Guest area value text */
#guestAreaInfo {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#guestAreaInfo .flex {
  padding: 0 !important;
  gap: 4px !important;
}

#guestAreaInfo .InfoRoomcount,
#guestAreaInfo .InfoAdultcount,
#guestAreaInfo .InfoChildcount {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
}

/* ── Inline date picker popup ── */

#rezpicker-container .date-picker-wrapper table .caption .prev,
#rezpicker-container .date-picker-wrapper table .caption .next {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#rezpicker-container .date-picker-wrapper table .caption .prev:hover,
#rezpicker-container .date-picker-wrapper table .caption .next:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
}

/* Day cells */

/* Top bar (min LOS notice) */
#rezpicker-container .date-picker-wrapper .drp_top-bar {
  font-size: 11px !important;
  color: var(--gray-500) !important;
  background: var(--gray-50) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 8px !important;
  margin-bottom: 6px !important;
  border: none !important;
}

#rezpicker .date-picker-wrapper {
    background: #fff;
}

#rezpicker .date-picker-wrapper .month-wrapper {
    border: none;
}

/* Night item - compact */
#rezInfoSearchArea .rezinfoItem.maxWidth {
  flex: 0 0 auto;
  min-width: 80px;
}

/* Guest area */
#rezInfoSearchArea .guestArea.rezinfoItem {
  flex: 1 1 0;
  min-width: 160px;
}

/* First visible item gets extra left padding for pill curve */
#rezpicker {
    padding-left: 0 !important;
    margin-left: 15px;
}

/* Search button — centered vertically (no label) */
#rezInfoSearchArea .rezinfoItem.rezsearchButton {
  flex: 0 0 auto;
  border-right: none;
  padding: 8px 6px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rezInfoSearchArea .rezinfoItem.rezsearchButton button {
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  border: none;
  font-weight: 700;
  font-size: 13px;
  height: 40px;
  padding: 0 28px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  letter-spacing: 0.3px;
  margin-right: 4px;
}

#rezInfoSearchArea .rezinfoItem.rezsearchButton button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}

/* Availability calendar button — vertically centered like search */
.availibiltyCalendarSearchArea {
  flex: 0 0 auto;
  padding: 8px 8px 8px 4px;
  border-right: none;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px;
}

.availibiltyCalendarSearchArea button.button {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 50px;
  font-weight: 600;
  font-size: 13px;
  height: 44px;
  padding: 0 18px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.availibiltyCalendarSearchArea button.button:hover {
  background: var(--primary);
  color: var(--primary-contrast, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* Guest dropdown area */
.guestAreaInner {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-200) !important;
}

/* Guest popover footer — Add Room / Approve */
.barArea {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--gray-200) !important;
}

.barArea > * {
  width: auto !important;
  margin: 0 !important;
}

.addRoom {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.addRoom:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

.addRoom i {
  font-size: 11px !important;
}

#applyChild {
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  height: auto !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.2px !important;
}

#applyChild:hover:not(:disabled) {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2) !important;
}

#applyChild:disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

@media (max-width: 920px) {

  ul.loginActions {
    box-shadow: none !important;
    border: none !important;
}

  .barArea {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    background: #fff !important;
    padding: 12px 16px !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--gray-200) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ============================================================
   HOTEL INFO DEF FACILITY — pill tags
   ============================================================ */

.hotel-info-def-facility {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
  margin-bottom: 4px !important;
}

.hotel-info-def-facility .item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0369a1 !important;
  height: auto !important;
  white-space: nowrap;
}

.hotel-info-def-facility .item > i {
  font-size: 11px !important;
  margin-right: 0 !important;
  color: #0284c7 !important;
}

/* ============================================================
   GUEST INFORMATION FORM — VENERA card style
   ============================================================ */

/* Outer card per room basket item — wraps roomNameInfo + all personalitem rows */
.personalinfo .infoGroup {
background: #fff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    margin: 0 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Room name — dark header bar at top of the card */
.roomNameInfo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
    background: #bbbfc7 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  padding: 11px 18px !important;
  border-left: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

.basketPInfo .roomName {
    visibility: hidden;
}

.roomNameInfo::before {
  content: '\f236'; /* fa-bed icon */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
  font-weight: 900;
  font-size: 12px;
  opacity: 0.7;
}

/* Guest item — flat row inside the infoGroup card (no nested card) */
.personalitem {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--gray-100) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.personalitem:last-child {
  border-bottom: none !important;
}

/* Guest type subheader (1. Yetişkin / 2. Çocuk) */
.personalitem .guest {
  background: var(--gray-50) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  border-top: none !important;
  padding: 8px 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: auto !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--gray-500) !important;
}

.personalitem .guest span {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* Input row — padding inside each guest form */
.personalitem > .row {
  padding: 14px 10px 6px !important;
  margin: 0 !important;
}

/* Individual input field wrapper */
.rezinput {
  padding: 0 8px 10px !important;
  position: relative !important;
}

.rezinput  label.error {
color:white !important;
       text-transform: inherit !important;

}

/* intl-tel-input wrapper — block display removes inline-box descender gap */
.rezinput .iti {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
}

.rezinput .iti .iti__selected-flag {
  height: 100% !important;
}

.rezinput input,
.rezinput select,
.rezinput textarea {
  border: 1.5px solid var(--gray-300) !important;
  border-radius: 8px !important;
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: var(--gray-800) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
}

.rezinput input:hover,
.rezinput select:hover {
  border-color: var(--gray-500) !important;
}

input:focus,.rezinput input:focus,
.rezinput select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.check-out-note-time, .check-in-note-time {
    width: fit-content;
}

.rezinput textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 12px !important;
  resize: vertical !important;
}

/* Contact info section header */
.sectionWidget .sectionInfo {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 10px 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--gray-500) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Reduce inner section padding — less nesting feel */
.rezinfo {
  padding: 14px 16px !important;
  margin-top: 0 !important;
}

/* Section widget — less heavy shadow */
.sectionWidget {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  border: 1px solid var(--gray-200) !important;
  margin-bottom: 12px !important;
}

/* Make reservation button */
#makereservation,
.makeReservationform-control {
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  height: 50px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

#makereservation:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* ============================================================
   PRICE DISPLAY — prominent, clear hierarchy
   ============================================================ */

/* Main price number */
.roomprice {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.5px !important;
}

/* .roompricenodiscount styles moved below with .priceLeft/.priceMin overrides */

/* Discount badge */
.discountRate {
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* .comission rule moved below with updated flex-end alignment */

/* Group hotel list price */
.listLastPrice {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  letter-spacing: -0.5px !important;
}

.listDisPrice {
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  display: block !important;
  line-height: 1.3 !important;
}

.discount-number {
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  margin-top: 2px !important;
  display: inline-block !important;
}

.listLastPriceArea {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Promotion area */
.promoionFrontArea .discountRate {
  background: #f59e0b !important;
}

/* ============================================================
   PRICE TOP BAR — individual rate option row
   ============================================================ */

.priceTopBar {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 14px 16px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.priceTopBar:hover {
  border-color: var(--primary, #10b981) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
}

/* Best price badge */
.bestPriceIn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.2px !important;
}

.bestPriceIn i {
  font-size: 10px !important;
  color: #16a34a !important;
}

/* Last room warning */
.lastRoomWarning {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #c2410c !important;
}

/* Main price row — radio button style */
.pricebar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}


/* When a row is hovered, show pre-selected radio */
.priceTopBar:hover .pricebar::before {
  border-color: var(--primary) !important;
}

/* Left: rate type info */
.pricebar > .rateType {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.top-rateType {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.rateTypeLabel {
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  color: #15803d !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}

.bottom-rateType {
  margin-top: 6px !important;
}

.period-in-days {
  font-size: 12px !important;
  color: var(--gray-500) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Info/details button */
.detailsRate {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: 1px solid var(--primary) !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.detailsRate:hover {
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
}

.detailsRate svg {
  width: 11px !important;
  height: 11px !important;
  flex-shrink: 0 !important;
}

/* Right: price + action area */
.priceBar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

.roomType {
  font-size: 12px !important;
  color: var(--gray-500) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* ════════════════════════════════════════
   PRICE BLOCK  (.roomPriceContent)
   Layout:
     [discount badge]
     [~~original price~~]  ← gray, small, strikethrough
     [final price]         ← large, bold
     [per-night note]
   ════════════════════════════════════════ */

.roomPriceContent {
  text-align: right !important;
}

/* Vertical stack: badge → original → final */
.roomprice {
  display: flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  line-height: 1 !important;
}

/* Final price wrapper */
.priceCon {
  display: flex !important;
  align-items: baseline !important;
}

.roomPriceCon {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1px !important;
}

/* Large final price integer */
.priceLeft {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--gray-900) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

/* Fractional part + currency symbol */
.priceRight {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-top: 2px !important;
}

.priceMin {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  line-height: 1.2 !important;
}

.cur.fontPrice {
 font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    line-height: 1.2 !important;
    margin-right: 4px;
}

/* Strikethrough original price — smaller, gray */
.roompricenodiscount {
  font-size: 12px !important;
  color: var(--gray-400) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  margin-bottom: 1px !important;
}

.roompricenodiscount .priceCon {
  text-decoration: line-through !important;
  opacity: 0.75 !important;
}

.roompricenodiscount .priceLeft {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--gray-400) !important;
  letter-spacing: 0 !important;
}

.roompricenodiscount .priceMin {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--gray-400) !important;
}

.roompricenodiscount .cur.fontPrice {
  font-size: 9px !important;
  color: var(--gray-400) !important;
}

/* Discount/commission badge row */
.comission {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-bottom: 3px !important;
  flex-wrap: wrap !important;
}

/* Simpler price (non-showmode) — ONLY in room price context, not calendar */
.roomprice .priceShower,
.roomPriceContent .priceShower,
.themeMod .priceShower {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gray-900) !important;
  letter-spacing: -0.5px !important;
}

.roomprice .priceShower .fontPrice,
.roomPriceContent .priceShower .fontPrice,
.themeMod .priceShower .fontPrice {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gray-700) !important;
}

/* Calendar price - small text */
.forecastprice .priceShower {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  letter-spacing: 0 !important;
}

.forecastprice .priceShower .fontPrice {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #16a34a !important;
}

.nightPrice {
  font-size: 11px !important;
  color: var(--gray-400) !important;
  font-weight: 400 !important;
  margin-top: 3px !important;
  text-align: right !important;
}

/* Original price (strikethrough) */
.nodiscountPrice {
  font-size: 12px !important;
  color: var(--gray-400) !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
}

/* Commission price */
.comissionPrice {
  font-size: 11px !important;
  color: #15803d !important;
  font-weight: 600 !important;
}

/* Discount details list */
.discountItem {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 10px 0 !important;
}
.discountName {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.discountPercent {
  font-size: 11px !important;
}

/* ============================================================
   AVAILABILITY CALENDAR — clean modern style
   ============================================================ */

.showCalendar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  background: #fff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
  width: fit-content !important;
}

.showCalendar:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}


/* Availability calendar badge on room image — modern square icon button */
.calendarAvailibiltyIn {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  gap: 0 !important;
  transition: all 0.15s ease !important;
}

.calendarAvailibiltyIn:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: scale(1.07) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

/* themeMod variant — no border-radius asymmetry */
.themeMod .calendarAvailibiltyIn {
  border-radius: 10px !important;
  top: 10px !important;
}

/* ============================================================
   AVAILABILITY CALENDAR — VENERA modern style
   ============================================================ */

.foreCastArea {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--gray-200) !important;
}

/* Navigation row: [◀ | clear | ▶] */
.forecastInfoButtons {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--gray-100) !important;
  margin: 0 !important;
}

.ForecastButton {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: var(--color-red, #ef4444) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
}

.ForecastButton:hover {
  background: #dc2626 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

.clearSelection {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  cursor: pointer !important;
  padding: 6px 14px !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 20px !important;
  transition: all 0.2s ease !important;
}

.clearSelection:hover {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Table container */
.table-container {
  overflow: auto !important;
}

.table-container table {
  border-collapse: separate !important;
  border-spacing: 3px !important;
  width: max-content !important;
  min-width: 100% !important;
  background: var(--gray-50) !important;
}

/* Month gapper row — clean centered title (higher specificity to beat rezmain) */
.foreCastArea .mounthGapper,
thead .mounthGapper,
th.mounthGapper {
  background: var(--gray-50, #f8fafc) !important;
  color: var(--gray-700, #334155) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  padding: 8px !important;
  border-bottom: 1px solid var(--gray-200, #e2e8f0) !important;
}

/* Sticky header cells */
thead th {
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

/* Day header column */
.activity-date-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 6px !important;
  gap: 2px !important;
}

.day-str {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--gray-400) !important;
}


/* Sticky left columns */
.sticky-col {
  position: sticky !important;
  left: 0 !important;
  background: #fff !important;
  z-index: 15 !important;
  white-space: nowrap !important;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04) !important;
}

tbody .sticky-col {
  border-bottom: 1px solid var(--gray-100) !important;
}



/* Available cell */
.table-container .available {
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  background: #f0fdf4 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

.table-container .available:hover {
  background: #dcfce7 !important;
  transform: scale(1.04) !important;
  z-index: 50 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

/* Unavailable cell */
.table-container .unavailable {
  background: #fef2f2 !important;
  border-radius: 8px !important;
  color: var(--gray-300) !important;
  text-align: center !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  border: none !important;
}

/* Price item wrapper */
.pricedItem {
  min-width: 76px !important;
  min-height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 6px !important;
  padding: 4px 6px !important;
  gap: 1px !important;
}

/* Price text */
.forecastprice {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  line-height: 1.2 !important;
}

.forecastprice .fontPrice {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #16a34a !important;
}

/* Per night label */
.nightText {
  font-size: 9px !important;
  color: var(--gray-400) !important;
  font-weight: 400 !important;
}

/* Room count badge */
.forecastroomcount {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: #34c759 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Selected state */
.table-container .available.selected {
  background: var(--primary) !important;
  border-color: transparent !important;
}

.table-container .available.selected .forecastprice {
  color: var(--primary-contrast, #fff) !important;
}

.table-container .available.selected .forecastprice .fontPrice {
  color: rgba(255, 255, 255, 0.8) !important;
}

.table-container .available.selected .forecastroomcount {
  background: #fff !important;
  color: var(--primary) !important;
}

/* Range selected */
.table-container .range-selected,
.table-container .range-hover {
  background: rgba(var(--primary), 0.08) !important;
}

/* Legend bar */
.forecastInfoBar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  padding: 12px 18px !important;
  background: #fff !important;
  border-top: 1px solid var(--gray-100) !important;
  flex-wrap: wrap !important;
}

.forecastInfoBar > div {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gray-600) !important;
}

.forecastInfoBar i {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   ROOM LIST CONTAINER — breathing room around cards
   ============================================================ */


/* Offer count badge — cleaner style */
.offerCount {
  background: #fff8e1 !important;
  border: 1px solid #ffe082 !important;
  color: #7a5600 !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
  margin: 10px 14px 4px !important;
  display: inline-block !important;
  width: auto !important;
}

/* ============================================================
   ROOM ITEM CARD — clean layout
   ============================================================ */

.row.roomItem {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.2s ease !important;
}

.row.roomItem:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
}

/* Image column — no padding, full-bleed */
.row.roomItem > [class*='col-']:first-child {
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Image slider container — fixed consistent height */
.row.roomItem .roomTypeDetailSliderArea {
  height: 100% !important;
  min-height: 220px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Room image — standard height, cover fill */
.row.roomItem .rezimg {
  width: 100% !important;
    height: 300px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
}



.roomname {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  letter-spacing: -0.2px !important;
  margin-bottom: 4px !important;
}

/* Room amenity pills in themeMod */
.themeModBarAmenitys {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 8px 0 !important;
}

.themeModAmenityItem {
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--gray-100) !important;
  border-radius: 20px !important;
  padding: 3px 9px !important;
  color: var(--gray-600) !important;
}

.reservationArea .row {
    padding-left: 0;
    padding-right: 0;
    padding: 10px !important;
}

.showNotArea,.showBillArea {
    margin: 10px;
}


/* Add to basket / Rezervasyon Yap button */

.BestRoomItemSec .addbasket {
    display: none !important;
}

.addbasket {
  background: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  padding: 11px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  min-width: 150px !important;
  border: none !important;
}

.addbasket:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

.addbasket.notSale {
  background: var(--gray-100, #f1f5f9) !important;
  color: var(--gray-400, #94a3b8) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  border: 1px solid var(--gray-200, #e2e8f0) !important;
}

.addbasket.notSale:hover {
  transform: none !important;
  opacity: 1 !important;
}

/* Show board options link */
.showOtherBoard {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 6px !important;
  transition: opacity 0.2s ease !important;
}

.showOtherBoard:hover {
  opacity: 0.78 !important;
}

/* ============================================================
   WIDGET / formItem in widgetDetail
   ============================================================ */



.dateField {
  padding: 10px 14px !important;
  min-height: 52px !important;
  gap: 8px !important;
  align-items: center !important;
}

.selectedPersons {
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.bottomLeftContainer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bottomLeftTopContent {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hotelSSLimg {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hotelSSLimg .visa i,
.hotelSSLimg .mastercard i,
.hotelSSLimg .amex i {
  font-size: 22px;
  color: var(--gray-400);
}

.agencyLoginButton,
.rentalLoginButton {
  font-size: 12px;
  color: var(--gray-500) !important;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 400 !important;
}

.agencyLoginButton:hover,
.rentalLoginButton:hover {
  color: var(--primary) !important;
}

/* ============================================================
   GUEST REVIEWS SECTION — Misafir Yorumları
   (Higher specificity to override JS-injected review-style)
   ============================================================ */

.reviews-section {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1px solid var(--gray-200) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  width: 100%;
}

.reviews-heading {
  padding: 16px 20px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  border-bottom: 1px solid var(--gray-100) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
      cursor: pointer;
}

.reviews-heading i {
  color: var(--primary) !important;
  font-size: 16px !important;
}

.reviews-list {
  padding: 8px 0 !important;
}

/* Individual review card */
.reviews-section .review-card,
.guestCommentsArea .review-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--gray-100) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.reviews-section .review-card:last-of-type,
.guestCommentsArea .review-card:last-of-type {
  border-bottom: none !important;
}

/* Top row: avatar | meta | right */
.reviews-section .review-top,
.guestCommentsArea .review-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 0 !important;
}

/* Avatar circle */
.reviews-section .review-avatar,
.guestCommentsArea .review-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Meta: name + score + text */
.reviews-section .review-meta,
.guestCommentsArea .review-meta {
  flex: 1 !important;
  min-width: 0 !important;
}

.reviews-section .review-name-row,
.guestCommentsArea .review-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}

.reviews-section .review-name,
.guestCommentsArea .review-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  display: inline !important;
}

/* Stars and score */
.reviews-section .review-score,
.guestCommentsArea .review-score {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.reviews-section .review-score-stars,
.guestCommentsArea .review-score-stars {
  color: #f59e0b !important;
  font-size: 13px !important;
  margin-right: 0 !important;
}

.reviews-section .review-score-number,
.guestCommentsArea .review-score-number {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gray-500) !important;
  margin-right: 0 !important;
}

/* Review text */
.reviews-section .review-text,
.guestCommentsArea .review-text {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--gray-600) !important;
  margin-bottom: 0 !important;
}

/* Right column: date + source */
.reviews-section .review-right,
.guestCommentsArea .review-right {
  text-align: right !important;
  flex-shrink: 0 !important;
  min-width: 110px !important;
}

.reviews-section .review-date,
.guestCommentsArea .review-date {
  font-size: 12px !important;
  color: var(--gray-400) !important;
  font-weight: 400 !important;
  margin-bottom: 4px !important;
}

.reviews-section .review-source,
.guestCommentsArea .review-source {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--gray-500) !important;
  font-size: 12px !important;
  margin-top: 0 !important;
}

.reviews-section .review-source-name,
.guestCommentsArea .review-source-name {
  font-weight: 600 !important;
  color: var(--primary) !important;
}

.reviews-section .sourceImg,
.guestCommentsArea .sourceImg {
  width: 80px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Show more button */
.guestCommentsArea .show-more-btn {
  margin: 8px 20px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) var(--gray-50);
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: var(--gray-50);
}

::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-400);
}

/* ============================================================
   LOADING
   ============================================================ */


/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */

.mobileWhatsapp {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   MISCELLANEOUS
   ============================================================ */

/* Overflow horizontal containers */
#rezTable {
  border-radius: var(--radius) !important;
  overflow: hidden;
}

/* Reservation info items */
.rezinfoItem {
  display: flex;
  align-items: center;
}

/* Sort area toolbar */
.sortArea {
  padding: 8px 0;
}

.toolbar {
  gap: 12px !important;
}

/* Section accommodation content */
section.three-fourth.section-accommodation-content section {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  -webkit-box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--gray-200);
}

/* ============================================================
   ROOM COUNT DROPDOWN — Material-style select replacement
   Native <select name="roomCount"> stays in the DOM (hidden) as the
   source of truth; .rc-dropdown/.rc-trigger/.rc-panel are injected
   by JS (reservation.js) to give it a modern popover UI that shows
   "N Oda" labels instead of bare numbers.
   ============================================================ */

.rc-dropdown .inputReset {
  display: none !important;
}

/* Overlay variant — the wrapper itself sits invisibly over the
   split-button's chevron corner (desktop .pricebar / mobile .addToBasketCon).
   Selectors mirror rezmain.css's ancestor-scoped rules so specificity wins
   regardless of stylesheet load order. */
.pricebar .rezinfoItemRoom.rc-dropdown-overlay,
.addToBasketCon .rezinfoItemRoom.rc-dropdown-overlay {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 6 !important;
}

/* Visible trigger variant — used where the select was shown inline (e.g. roomcount-basket) */
.rc-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gray-800) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: var(--transition) !important;
}

.rc-trigger:hover {
  border-color: var(--primary, var(--gray-300)) !important;
  box-shadow: var(--shadow-xs) !important;
}

.rc-trigger .rc-chevron {
  font-size: 10px !important;
  color: var(--gray-400) !important;
  transition: transform 0.2s ease !important;
}

.rc-dropdown.open .rc-trigger .rc-chevron {
  transform: rotate(180deg) !important;
}

/* Floating panel — shared, single instance appended to <body> */
.rc-panel {
  position: fixed !important;
  min-width: 140px !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--gray-100) !important;
  padding: 6px !important;
  z-index: 10000 !important;
  opacity: 0 !important;
  transform: translateY(-6px) scale(0.98) !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.rc-panel.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.rc-panel .rc-option {
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gray-700) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.rc-panel .rc-option:hover {
  background: var(--gray-50) !important;
}

.rc-panel .rc-option.selected {
  background: var(--primary, var(--color-blue)) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Tab content articles */
.tab-content article {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  -webkit-box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--gray-200);
}

/* Features area */
.featuresArea {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .hotelName span {
    font-size: 14px !important;
    letter-spacing: 1.5px;
  }
}

@media (max-width: 768px) {
  .main.newMain {
    padding-bottom: 20px;
  }

  .imgArea img {
    height: 200px;
  }

  .topUst .wrap {
    padding: 0 12px;
  }

  .frontImg {
    max-height: 300px !important;
  }
}

@media (max-width: 480px) {
  .gradient-button,
  input[type='submit'],
  .btn-submit {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
  }

  .sort-box,
  .view-switch {
    height: 44px !important;
  }

  .view-btn {
    height: 44px !important;
    width: 50px !important;
  }
}

/* ============================================================
   THEME MOD ROOM CARD — price + basket area
   ============================================================ */

/* Right column: price + button */

@media (min-width: 769px) {
.themeMod .themeModRezArea {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 4px 0 !important;
}

.themeMod .themeModRezArea .roomprice {
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  padding: 0 !important;
}
}

/* Mobile — right-aligned block looks pinned/lopsided on a full-width card, center it instead */
@media (max-width: 768px) {
  .themeMod .themeModRezArea {
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .themeMod .themeModRezArea .roomprice {
    align-items: center !important;
  }

  .themeMod .roompricenodiscount {
    text-align: center !important;
  }

  .themeMod .roomBasketArea,
  .themeMod .roomcount-basket {
    align-items: center !important;
  }

  .themeMod .roomcount-basket .rezinfoItem {
    align-items: center !important;
  }
}

/* Discounted original price in themeMod */
.themeMod .roompricenodiscount {
  text-align: right !important;
}

.themeMod .roompricenodiscount .priceLeft {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--gray-400) !important;
  text-decoration: line-through !important;
}

.themeMod .roompricenodiscount .priceMin {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--gray-400) !important;
  text-decoration: line-through !important;
}

/* Board type label — replace Bootstrap alert-warning yellow with clean pill */
.themeMod .boardType,
.boardType.alert,
.boardType.alert-warning {
  background: var(--gray-100) !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 20px !important;
  color: var(--gray-700) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  width: 100% !important;
  display: block !important;
}

/* Oda Sayısı label (rezinfoItem inside themeMod) */
.themeMod .rezinfoItem {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  min-height: 0 !important;
}

.themeMod .rezLabel {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--gray-500) !important;
  margin-bottom: 4px !important;
}

/* Room name area — content column padding */
.row.roomItem .col-md-8 {
  padding: 0 12px 0 0 !important;
}

/* Room name */
.roomname {
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--gray-900) !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

/* Basket button in themeMod card */
.themeMod .roomBasketArea {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
}

.themeMod .roomcount-basket {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
}

.themeMod .roomcount-basket .addbasket {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

/* Discount badge */
.discount-badge {
  top: 8px !important;
  right: 0 !important;
  border-radius: 6px 0 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
}

/* ============================================================
   PAYMENT OPTIONS SECTION
   ============================================================ */

/* Outer wrapper — add breathing room around payment items */
.reservationOptions {
  display: block !important;
  padding: 12px 16px 16px !important;
}

/* Payment method row — reset Bootstrap negative margins */
#paymentMethodArea {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
      padding: 0px !important;
}

/* Payment item — override rezmain margin/padding for tighter look */
.payItem {
  margin: 4px 0 !important;
  padding: 0 0 0 48px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--gray-200) !important;
  transition: all 0.18s ease !important;
}

.payItem:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.payItem:has(input[type='radio']:checked) {
  border: 1.5px solid var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 6%, #fff) !important;
}

.payItem label {
  height: 46px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--gray-800) !important;
}

.payItem:has(input[type='radio']:checked) label {
  font-weight: 600 !important;
}

/* Radio dot — use primary color */
.payItem:has(input[type='radio']:checked)::before {
  border-color: var(--primary) !important;
  background: radial-gradient(var(--primary) 40%, transparent 41%) !important;
}

/* Board options panel (expands below card) */
.themeModBoardsArea {
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--gray-100) !important;
  margin-top: 12px !important;
}

/* Show board options toggle */
.themeModBoardsArea .tab-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 !important;
  list-style: none !important;
  margin-bottom: 10px !important;
  border: none !important;
}

.themeModBoardsArea .tab-menu li a,
.themeModBoardsArea .tab-menu li {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  color: var(--gray-600) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.themeModBoardsArea .tab-menu li.current a,
.themeModBoardsArea .tab-menu li.current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast, #fff) !important;
}

/* ============================================================
   ROOM COUNT SELECTOR IN PRICE BAR
   ============================================================ */

.rezinfoItemRoom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.rezinfoItemRoom .rezLabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rezinfoItemRoom .rezLabel i {
  font-size: 10px;
  color: var(--primary);
}

.rezinfoItemRoom select.inputReset {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  background: #fff;
  cursor: pointer;
  min-width: 60px;
}

/* Mobile rate row (.rezSec) — matches priceTopBar style */
.rezSec {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
}

/* ============================================================
   TAX LABEL IN PRICE
   ============================================================ */

.taxadd {
  font-size: 10px !important;
  color: var(--gray-400) !important;
  font-weight: 400 !important;
  margin-left: 3px !important;
}

/* ============================================================
   WIDGET RESPONSIVE — pill collapses gracefully
   ============================================================ */

@media (max-width: 900px) {
  #rezInfoSearchArea {
    border-radius: 16px !important;
    flex-wrap: wrap !important;
  }

  .changeRezMod.card + #rezInfoSearchArea {
    border-radius: 0 16px 16px 16px !important;
  }

  #rezInfoSearchArea .rezinfoItem {
    flex: 1 1 45%;
    border-bottom: 1px solid var(--gray-200);
    border-right: none !important;
  }

  #rezInfoSearchArea .rezinfoItem.rezsearchButton {
    flex: 1 1 100%;
    padding: 10px 12px;
    border-bottom: none;
  }

  #rezInfoSearchArea .rezinfoItem.rezsearchButton button {
    width: 100%;
    justify-content: center;
    margin-right: 0;
    border-radius: 10px !important;
  }

  #rezpicker {
    border-right: none !important;
    border-bottom: 1px solid var(--gray-200);
    flex: 1 1 100% !important;
  }

  /* Night selector — share a row with Guest instead of each taking a full
     width row; Night is compact (fixed share), Guest grows to fill the rest. */
  #rezInfoSearchArea .rezinfoItem.maxWidth {
    flex: 0 0 38% !important;
    min-width: 0 !important;
    max-width: 38% !important;
    border-right: 1px solid var(--gray-200) !important;
  }

  #rezInfoSearchArea .guestArea.rezinfoItem {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* Guest value text ("1 Oda 2 Yetişkin 1 Çocuk") no longer has the full
     card width now that it shares a row with Night — let it wrap instead
     of overflowing past the card edge (rezmain forces white-space:nowrap). */
  #guestAreaInfo .flex {
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 2px !important;
  }
}

@media (max-width: 600px) {
  #rezInfoSearchArea .rezinfoItem {
    flex: 1 1 100%;
    border-right: none !important;
  }

  /* Room option price bar stacks on mobile */
  .pricebar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .priceBar {
    width: 100% !important;
    justify-content: space-between !important;
  }
}


.widgetButtons {
    display: flex;
    gap: 10px;
    padding: 0px 10px;
}

.widgetButtons .rezinfoItem {
    padding: 0px !important;
}

.noborder {
  border: none !important;
}

.checkinNoteItem {
    margin: 10px;
}

#creditCardandBasketArea > #creditCard {
      background: #fff !important;
    border-radius: 14px !important;
    border: 1px solid var(--gray-200) !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    padding: 10px;
}

.upRoomItem-infoBtn {

    width: 26px !important;
    height: 26px !important;

}

.UpRoom {
    padding: 10px 15px !important;
}

.discounts {
    margin: 10px;
    flex-wrap: wrap;
}

#finallyButton {
    margin: 0px;
    padding: 0px !important;
}

#finallyButton .card {
  width: 100%;
}


.basketActions i.fa.fa-chevron-down {
    color: var(--gray-500);
}

.bItem.generalTotal .priceShower {
    font-size: 24px;
}

.creditCardPayHotel .cardholder input ,.creditCardPayHotel .cardnumber   input {
  max-width: 320px;
}

.creditCardArea label {
    color: var(--gray-500) !important;
}

.personalinfo .personalitem .rezinput select.flatpickr-monthDropdown-months {
border: none !important;
}