/**

 * Accommodation page — hotels near Annai Resort

 */

.acc-page {

  background: linear-gradient(180deg, #fef9e7 0%, #f8fafc 35%, #fff 100%);

  padding-bottom: clamp(2.5rem, 5vh, 4rem);

}



.acc-booking-banner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1.25rem 1.75rem;

  margin: 0 auto 2rem;

  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);

  background: linear-gradient(135deg, #15334d 0%, #1e4a6a 55%, #15334d 100%);

  border-radius: 16px;

  box-shadow: 0 16px 48px rgba(21, 51, 77, 0.22);

  color: #fff;

  position: relative;

  overflow: hidden;

}



.acc-booking-banner::before {

  content: '';

  position: absolute;

  top: -40%;

  right: -5%;

  width: 220px;

  height: 220px;

  background: radial-gradient(circle, rgba(247, 198, 55, 0.15) 0%, transparent 70%);

  pointer-events: none;

}



.acc-booking-banner__icon {

  flex-shrink: 0;

  width: 3.5rem;

  height: 3.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(247, 198, 55, 0.2);

  color: #f7c637;

  border-radius: 14px;

  font-size: 1.35rem;

}



.acc-booking-banner__body {

  flex: 1 1 220px;

  min-width: 0;

}



.acc-booking-banner__label {

  display: block;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.75);

  margin-bottom: 0.35rem;

}



.acc-booking-banner__phone {

  margin: 0 0 0.5rem;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: clamp(1.75rem, 4vw, 2.25rem);

  font-weight: 800;

  line-height: 1.1;

}



.acc-booking-banner__phone a {

  color: #f7c637;

  text-decoration: none;

  transition: opacity 0.2s;

}



.acc-booking-banner__phone a:hover {

  opacity: 0.88;

}



.acc-booking-banner__note {

  margin: 0;

  font-size: 0.875rem;

  line-height: 1.55;

  color: rgba(255, 255, 255, 0.82);

}



.acc-booking-banner__note strong {

  color: #fff;

}



.acc-intro {

  max-width: 820px;

  margin: 0 auto 2rem;

  text-align: center;

  font-size: 0.9375rem;

  line-height: 1.7;

  color: #64748b;

}



.acc-intro strong {

  color: #15334d;

}



.acc-grid {

  display: grid;

  gap: 1.25rem;

  margin-bottom: 2rem;

}



@media (min-width: 768px) {

  .acc-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



.acc-card {

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  box-shadow: 0 8px 28px rgba(21, 51, 77, 0.07);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.25s, box-shadow 0.25s;

}



.acc-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 14px 40px rgba(21, 51, 77, 0.11);

}



.acc-card__head {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0.75rem 1rem;

  padding: 1.25rem 1.35rem;

  background: linear-gradient(160deg, #15334d 0%, #1e4a6a 100%);

  color: #fff;

}



.acc-card__title-wrap {

  display: flex;

  align-items: flex-start;

  gap: 0.85rem;

  flex: 1;

  min-width: 0;

}



.acc-card__num {

  flex-shrink: 0;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 0.75rem;

  font-weight: 800;

  color: #15334d;

  background: #f7c637;

  width: 2rem;

  height: 2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

}



.acc-card__title {

  margin: 0 0 0.3rem;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 1.125rem;

  font-weight: 800;

  color: #fff;

  line-height: 1.3;

}



.acc-card__distance {

  margin: 0;

  font-size: 0.8125rem;

  color: rgba(255, 255, 255, 0.78);

  font-weight: 500;

}



.acc-card__distance i {

  color: #f7c637;

  margin-right: 0.25rem;

}



.acc-card__meal {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.75rem;

  font-weight: 700;

  padding: 0.35rem 0.75rem;

  background: rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  color: #fff;

}



.acc-card__meal i {

  color: #f7c637;

}



.acc-card__inventory {

  padding: 1rem 1.35rem;

  background: linear-gradient(180deg, #fef9e7 0%, #fffbeb 100%);

  border-bottom: 1px solid #fde68a;

}



.acc-card__inventory-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  margin-bottom: 0.85rem;

  flex-wrap: wrap;

}



.acc-card__inventory-title {

  margin: 0;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 0.8125rem;

  font-weight: 800;

  color: #15334d;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  display: flex;

  align-items: center;

  gap: 0.4rem;

}



.acc-card__inventory-title i {

  color: #d4a52e;

}



.acc-card__inventory-total {

  display: inline-flex;

  align-items: center;

  padding: 0.3rem 0.75rem;

  background: #15334d;

  color: #f7c637;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 0.75rem;

  font-weight: 800;

  border-radius: 999px;

  letter-spacing: 0.02em;

}



.acc-inventory-grid {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 0.5rem;

  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

}



.acc-inventory-chip {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  padding: 0.55rem 0.75rem;

  background: #fff;

  border: 1px solid #fcd34d;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(21, 51, 77, 0.05);

}



.acc-inventory-chip__count {

  flex-shrink: 0;

  min-width: 1.75rem;

  height: 1.75rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #f7c637;

  color: #15334d;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 0.875rem;

  font-weight: 800;

  border-radius: 6px;

}



.acc-inventory-chip__label {

  font-size: 0.8125rem;

  font-weight: 600;

  color: #334155;

  line-height: 1.35;

}



.acc-card__rates {

  padding: 1.15rem 1.35rem;

  flex: 1;

}



.acc-card__rates-title {

  margin: 0 0 0.85rem;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 0.8125rem;

  font-weight: 700;

  color: #15334d;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.acc-card__rates-title span {

  font-weight: 600;

  text-transform: none;

  letter-spacing: 0;

  color: #64748b;

  display: block;

  margin-top: 0.15rem;

  font-size: 0.75rem;

}



.acc-rate-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.acc-rate-list__row {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 0.75rem;

  padding: 0.65rem 0;

  border-bottom: 1px solid #f1f5f9;

  font-size: 0.875rem;

}



.acc-rate-list__row:last-child {

  border-bottom: none;

}



.acc-rate-list__row--extra {

  background: #fef9e7;

  margin: 0.35rem -0.5rem 0;

  padding: 0.65rem 0.5rem;

  border-radius: 8px;

  border-bottom: none;

}



.acc-rate-list__type {

  flex: 1;

  min-width: 0;

  color: #334155;

  font-weight: 500;

  line-height: 1.4;

}



.acc-rate-list__price {

  flex-shrink: 0;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-weight: 800;

  color: #15334d;

  white-space: nowrap;

}



.acc-footer-note {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  padding: 1.15rem 1.35rem;

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  margin-bottom: 1.75rem;

  box-shadow: 0 4px 16px rgba(21, 51, 77, 0.05);

}



.acc-footer-note i {

  color: #15334d;

  font-size: 1.125rem;

  margin-top: 0.1rem;

  flex-shrink: 0;

}



.acc-footer-note p {

  margin: 0;

  font-size: 0.875rem;

  color: #64748b;

  line-height: 1.65;

}



.acc-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 1rem;

}



.acc-actions__link {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.9375rem;

  font-weight: 600;

  color: #15334d;

  text-decoration: none;

}



.acc-actions__link:hover {

  color: #1e4a6a;

}



.acc-promo-block {

  margin: 0 auto 2.5rem;

  padding: 1.75rem 1.5rem;

  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  box-shadow: 0 8px 28px rgba(21, 51, 77, 0.07);

  max-width: var(--reg-guidelines-block-width, 100%);

}



.acc-promo-block__inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 1.25rem 1.75rem;

}



.acc-promo-block__icon {

  flex-shrink: 0;

  width: 3rem;

  height: 3rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #15334d 0%, #1e4a6a 100%);

  color: #f7c637;

  border-radius: 12px;

  font-size: 1.25rem;

}



.acc-promo-block__body {

  flex: 1 1 240px;

  min-width: 0;

}



.acc-promo-block__eyebrow {

  display: block;

  font-size: 0.6875rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #64748b;

  margin-bottom: 0.25rem;

}



.acc-promo-block__body h2 {

  margin: 0 0 0.35rem;

  font-family: "Plus Jakarta Sans", sans-serif;

  font-size: 1.25rem;

  font-weight: 800;

  color: #15334d;

}



.acc-promo-block__body p {

  margin: 0;

  font-size: 0.875rem;

  color: #64748b;

  line-height: 1.55;

}



.acc-promo-block__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem;

  flex-shrink: 0;

}



.acc-promo-block__btn {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.65rem 1.15rem;

  font-size: 0.875rem;

  font-weight: 700;

  border-radius: 999px;

  text-decoration: none;

  transition: background 0.2s, color 0.2s;

}



.acc-promo-block__btn--primary {

  background: #15334d;

  color: #fff;

}



.acc-promo-block__btn--primary:hover {

  background: #1e4a6a;

  color: #fff;

}


