/* Root vars (with defaults) */
.hotel.block{
  --hotel-max: 100%;
  --hotel-card-min: 300px;
  --hotel-grid-gap: 0px;
  --hotel-content-gap: 0px;

  /* Global text colors */
  --title-color:#1f2937;
  --text-color:#4b5563;
  --section-title:#000000;
  --price:#111827;
  --amenity-bg:#E8F3FF;
  --amenity-text:#1f2937;
  --cta-bg:#009DFF;
  --cta-text:#ffffff;
  --star:#f5c518;

  /* Typography (mirrors previous JS defaults) */
  --title-size:18px;
  --title-weight:700;
  --title-font:inherit;

  --address-size:13px;
  --address-weight:400;
  --address-font:inherit;

  --desc-size:16px;
  --desc-weight:400;
  --desc-font:inherit;

  --cta-size:18px;
  --cta-weight:700;
  --cta-font:inherit;
  --cta-radius:20px;

  --section-title-size:14px;
  --section-title-weight:700;
  --section-title-font:inherit;

  --highlight-size:12px;
  --highlight-weight:400;
  --highlight-font:inherit;
  --highlight-gap:5px;
  --highlight-icon-size:14px;

  --amenity-size:12px;
  --amenity-weight:400;
  --amenity-font:inherit;
  --amenity-gap:6px;
  --amenity-radius:15px;
  --amenity-chip-pad-x:0px;
  --amenity-chip-pad-y:1px;
  --amenity-icon-size:14px;
  --amenity-icon-gap:4px;
  --amenity-chip-min-h:auto; /* set from JS, fallback auto */

  --price-size:18px;
  --price-weight:700;
  --price-font:inherit;

  --price-suffix-size:17px;
  --price-suffix-weight:400;
  --price-suffix-font:inherit;
  --price-suffix-color:#4b5563;

  --star-gap:0px;
  --star-to-rating-gap:5px;
  --rating-size:16px;
  --rating-font:inherit;
  --rating-num-weight:700; /* number only */
  --rating-rest-weight:400;

  /* Address icon */
  --address-icon-size:12px;
  --address-icon-gap:4px;

  /* Badges (overlay chips) */
  --badge-bg:#F6F6F6;
  --badge-pad-x:7px;
  --badge-pad-y:5px;
  --badge-radius:10px;
  --badges-gap:10px;
  --badge-size:0.8em;
  --badge-weight:400;
  --badge-font:inherit;
  --badge-color:#000000;
  --badge-text-gap:6px;
  --badge-icon-size:19px;
}

/* Container (single) */
.hotel.block{
  display:grid;
  gap:var(--hotel-grid-gap);
  grid-template-columns:1fr;
  width:100%;
  max-width:var(--hotel-max);
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Card */
.hotel__card{
  background:#fff;
  border-radius:22px;
  border:1px solid #e9ecef;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(16,24,40,.08);
  display:flex; flex-direction:column;
  margin:0;
}

/* Image + overlay */
.hotel__image{ position:relative; width:100%; aspect-ratio:3/2; background:#f3f4f6; overflow:hidden; }
.hotel__image > img{ width:100%; height:100%; object-fit:cover; display:block; }

.hotel__highlights{ position:absolute; left:10px; top:10px; display:flex; flex-wrap:wrap; gap:var(--badges-gap); z-index:3; list-style:none; margin:0; padding:0; padding-left:0 !important; margin-left:0 !important; }

.highlight{
  background:var(--badge-bg); color:var(--badge-color);
  border-radius:var(--badge-radius);
  padding:var(--badge-pad-y) var(--badge-pad-x);
  line-height:1; display:inline-flex; align-items:center;
  gap:var(--badge-text-gap);
  font-size:var(--badge-size); font-weight:var(--badge-weight); font-family:var(--badge-font);
}

.highlight .icon{ display:block; width:var(--badge-icon-size); height:var(--badge-icon-size); }

/* Body */
.hotel__body{ padding:0; display:flex; flex-direction:column; gap:var(--hotel-content-gap); }

/* Reset margins inside this block (prevents theme gaps) */
.has-hotel-card .wp-block-hotel-card.hotel.block figure,
.has-hotel-card .wp-block-hotel-card.hotel.block h1,
.has-hotel-card .wp-block-hotel-card.hotel.block h2,
.has-hotel-card .wp-block-hotel-card.hotel.block h3,
.has-hotel-card .wp-block-hotel-card.hotel.block h4,
.has-hotel-card .wp-block-hotel-card.hotel.block h5,
.has-hotel-card .wp-block-hotel-card.hotel.block h6,
.has-hotel-card .wp-block-hotel-card.hotel.block p,
.has-hotel-card .wp-block-hotel-card.hotel.block ul,
.has-hotel-card .wp-block-hotel-card.hotel.block ol{ margin:0 !important; }

/* Title */
.hotel__name{
  color:var(--title-color);
  font-size:var(--title-size);
  font-weight:var(--title-weight);
  font-family:var(--title-font);
  line-height:1.25;
  padding:12px 0 0 8px;
}

/* Ensure the title link inherits typography styles and removes default underline. */
.hotel__name a{
  color:inherit;
  text-decoration:none;
}
.hotel__name a:hover{
  text-decoration:underline;
}

/* Address */
.hotel__address{
  color:var(--text-color);
  font-size:var(--address-size);
  font-weight:var(--address-weight);
  font-family:var(--address-font);
  font-style: normal;
  line-height:1; display:flex; align-items:center;
  padding:8px 0 0 8px;
  white-space:nowrap;
}

.hotel__address .addr-ico{ display:block; width:var(--address-icon-size); height:var(--address-icon-size); }
.hotel__address > span{ margin-left:var(--address-icon-gap); }

/* Features (highlights row) */
.hotel__features{
  list-style:none; margin:0; padding:12px 8px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; justify-items:center;
}
.hotel__features > li{
  display:inline-flex; align-items:center; gap:var(--highlight-gap);
  color:var(--text-color);
  font-size:var(--highlight-size); font-weight:var(--highlight-weight); font-family:var(--highlight-font);
  line-height:1; white-space:nowrap;
}
.hotel__features .ico{ display:block; width:var(--highlight-icon-size); height:var(--highlight-icon-size); }

/* CTA */
.hotel__available__rooms{
  display:block; text-align:center; text-decoration:none;
  background:var(--cta-bg); color:var(--cta-text);
  border-radius:var(--cta-radius); margin:0 20px 8px; padding:8px 0;
  font-size:var(--cta-size); font-weight:var(--cta-weight); font-family:var(--cta-font);
  line-height:1;
}

/* Remove hover underline/changes on CTA text */
.hotel__available__rooms:hover,
.hotel__available__rooms:focus{
  text-decoration:none;
  color:var(--cta-text);
  background:var(--cta-bg);
}

/* Amenities */
.hotel__amenities{
  color:var(--section-title); font-size:var(--section-title-size);
  font-weight:var(--section-title-weight); font-family:var(--section-title-font);
  line-height:1; padding:8px 0 8px 8px;
}
.amenities{
  list-style:none; margin:0; padding:2px 8px 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--amenity-gap);
}
.amenities > li{
  background:var(--amenity-bg); color:var(--amenity-text);
  border:1px solid rgba(22,102,214,.10);
  border-radius:var(--amenity-radius);
  padding:var(--amenity-chip-pad-y) var(--amenity-chip-pad-x);
  min-height:var(--amenity-chip-min-h);
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:var(--amenity-size); font-weight:var(--amenity-weight); font-family:var(--amenity-font);
  line-height:1; width:100%;
  gap:var(--amenity-icon-gap);
}
.amenities .amen-ico{ display:block; width:var(--amenity-icon-size); height:var(--amenity-icon-size); }

/* Meta (price + rating) */
.hotel__meta{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:12px 12px 6px; white-space:nowrap; }
.hotel__price{
  color:var(--price); font-weight:var(--price-weight); font-family:var(--price-font);
  line-height:1; display:inline-flex; align-items:baseline; gap:4px;
  font-size:var(--price-size);
}
.hotel__price .per{ color:var(--price-suffix-color); font-weight:var(--price-suffix-weight); font-family:var(--price-suffix-font); font-size:var(--price-suffix-size); }

/* Stars */
.stars_rating{ display:inline-flex; align-items:center; gap:var(--star-gap); font-size:0; }
.stars_rating .star{
  width:16px; height:16px; display:inline-block;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.207 1.193-5.938 5.787 1.403 8.172L12 18.896l-7.34 3.874 1.403-8.172L.125 9.211l8.207-1.193z"/></svg>') no-repeat center/contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.207 1.193-5.938 5.787 1.403 8.172L12 18.896l-7.34 3.874 1.403-8.172L.125 9.211l8.207-1.193z"/></svg>') no-repeat center/contain;
  background:var(--star);
}
.stars_rating .rating_text{
  color:var(--text-color); font-size:var(--rating-size); font-family:var(--rating-font);
  margin-left:var(--star-to-rating-gap);
}
.stars_rating .rating_text .num{ font-weight:var(--rating-num-weight); }
.stars_rating .rating_text .rest{ font-weight:var(--rating-rest-weight); }

/* Description */
.hotel__desc{
  color:var(--text-color); font-size:var(--desc-size); font-weight:var(--desc-weight); font-family:var(--desc-font);
  line-height:1.45; padding:0 12px 16px;
}

/* Visually hidden elements for accessibility */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Neutralize WP block gap */
.hotel.block{ --wp--style--block-gap: 0px; }

/* Kill UA + theme margins inside the block (keeps paddings/spacings you set) */
.has-hotel-card .wp-block-hotel-card.hotel.block figure,
.has-hotel-card .wp-block-hotel-card.hotel.block h1,
.has-hotel-card .wp-block-hotel-card.hotel.block h2,
.has-hotel-card .wp-block-hotel-card.hotel.block h3,
.has-hotel-card .wp-block-hotel-card.hotel.block h4,
.has-hotel-card .wp-block-hotel-card.hotel.block h5,
.has-hotel-card .wp-block-hotel-card.hotel.block h6,
.has-hotel-card .wp-block-hotel-card.hotel.block p,
.has-hotel-card .wp-block-hotel-card.hotel.block ul,
.has-hotel-card .wp-block-hotel-card.hotel.block ol {
  margin: 0 !important;
}

/* Belt-and-suspenders: figure and body children */
.wp-block-hotel-card.hotel.block .hotel__image { margin:0 !important; padding:0 !important; }
.wp-block-hotel-card.hotel.block .hotel__body > * { margin-top:0 !important; margin-bottom:0 !important; }

/* Also ensure the wrapper itself isn't given extra margins by the theme */
.has-hotel-card .entry-content > .wp-block-hotel-card.hotel.block {
  margin: 0 !important;
  padding: 0 !important;
}

/* =================== CSV GRID CONTAINER =================== */
.hotel-grid{
  display:grid;
  gap: var(--hotel-grid-gap, 16px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width:100%;
  max-width: var(--hotel-max, 100%);
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Tablet: 2 columns */
@media (max-width: 1024px){
  .hotel-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: 1 column */
@media (max-width: 640px){
  .hotel-grid{ grid-template-columns: 1fr; }
}

/* Neutralize WP gaps/margins around container */
.has-hotel-card .wp-block-hotel-card-csv.hotel-grid{
  margin:0 !important;
  padding:0 !important;
}

/* Ensure child cards stretch nicely inside the grid */
.hotel-grid > .wp-block-hotel-card.hotel.block{
  width:100%;
}