/* Card components (hotel, room, pricing blocks) */

/* Inline card bubbles inside chat messages */
.hotel-card-message .message-bubble,
.room-card-message .message-bubble,
.payment-card-message .message-bubble {
  max-width: none;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.hotel-card-bubble,
.room-card-bubble { background: #f8f9fa; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; margin-bottom: 8px; }

.hotel-choose-list-card { padding: 12px; }
/* Switch to flex two-column layout; price column uses shared CSS var width */
.choose-list-item { display: flex; align-items: stretch; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; min-height: 72px; }
.choose-list-item:last-child { border-bottom: none; }
.choose-list-left { flex: 1 1 auto; min-width: 0; }
.choose-list-price { flex: 0 0 auto; width: auto; max-width: 45%; text-align: right; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
.choose-list-price .price-line-1 { justify-content: flex-end; width: 100%; }
.choose-list-price .price-line-2, .choose-list-price .price-line-3 { text-align: right; }
.choose-list-hotel-name { font-weight: bold; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; }
.choose-list-viewmore { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.choose-list-viewmore { font-size: 13px; font-weight: bold; color: #0073e6; cursor: pointer; margin-top: 3px; display: flex; align-items: center; gap: 4px; transition: color 0.2s ease; }
.choose-list-viewmore::before {content: "👁\FE0E"; font-size: 14px; color: inherit; }
.choose-list-viewmore:hover { color: #005bb5; }
/* updated hotel card */
.hotel-splitter { border: 0; border-top: 1px solid #eee; margin: 10px 0; }
.hotel-price-block { display:block; margin-left:auto; text-align:right; padding-top:8px; }
.hotel-price-block .price-line-1 { width:100%; justify-content:flex-end; }

.price-line-1 {display:flex;align-items:baseline;font-family: Montserrat, sans-serif !important;}
.price-card-from {font-size:.9rem;line-height:.4rem;font-weight:800;margin-right:4px;}
.price-card-currency {font-size:1.2rem;font-weight:800;line-height:.4rem;}
.price-card-amount {font-size:1.2rem;font-weight:800;line-height:.4rem;}
.price-line-2 { font-size: .8rem; line-height:1.05rem; color: #333; font-weight: 600; margin-top: 7px; }
.price-line-3 { font-size: .8rem; font-weight: 400; color: #777; }

/* Common card container */
.ta-card {
  --ta-card-width: 320px;
  --ta-card-bg: #ffffff;
  --ta-card-border: #e1e8ed;
  --ta-card-radius: 12px;
  --ta-card-shadow: 0 2px 8px rgba(0,0,0,0.10);
  background: var(--ta-card-bg);
  border: 1px solid var(--ta-card-border);
  border-radius: var(--ta-card-radius);
  padding: 16px;
  box-shadow: var(--ta-card-shadow);
  width: var(--ta-card-width);
  max-width: var(--ta-card-width);
  margin: 0 0 12px 0;
  overflow: hidden; /* Never allow content overflow */
}
.ta-card__body { padding: 0; overflow: hidden; }
.ta-card__body:empty { display:none; }
.ta-card__header { display:block; margin: -16px -16px 0 -16px; padding:0; width:auto; border-top-left-radius:12px; border-top-right-radius:12px; border-bottom-left-radius:0; border-bottom-right-radius:0; overflow:hidden; }
.card-header img { width: 100%; display: block; }

/* Enable positioned children; overflow visible to avoid clipping price blocks */
.hotel-card { position: relative; overflow: visible; }

/* Media header area (shared) */
.ta-card__media, .hotel-image { position: relative; left: -16px; top: -16px; width: calc(100% + 32px); height: 180px; padding-bottom: 12px; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; background: transparent; }
.ta-card__media img, .hotel-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ta-card__section { display:block; }
.ta-card__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; text-align:center; }
.ta-card__subtitle { font-size: 14px; color: #555; margin-bottom: 8px; text-align:center; }
.hotel-card-header { position: relative; }
.property-details-indicator { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }

/* Small location icon preceding address */
.location-icon { display: inline-flex; width: 12px; height: 12px; flex: 0 0 12px; line-height: 0; }
.location-icon svg { width: 12px; height: 12px; display: block; }

.hotel-amenities, .amenities, .ta-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content:flex-start; min-width: 0; }
.ta-amenities.horizontal { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
/* Allow long amenity names to wrap instead of being clipped */
.amenity, .amenity-tag { 
  background-color: var(--amenity-bg, #e6f2fd); 
  color: var(--amenity-fg, #0077cc); 
  padding: 6px 12px; 
  border-radius: 20px; 
  font-size: 12px; 
  white-space: normal; 
  word-break: break-word; 
  line-height: 1.25; 
  display: inline-block; 
  max-width: 100%; 
}
.amenities-horizontal { flex-direction: row; align-items: center; }
.amenities-vertical { flex-direction: column; align-items: flex-start; gap: 6px; }
.amenities-price-row { display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; }

.divider { border: none; border-top: 1px solid #eee; margin: 12px 0; }
.pricing { display: flex; justify-content: flex-end; margin-bottom: 12px; text-align: right; }
.pricing-right { display: flex; flex-direction: column; align-items: flex-end; }
.price-label { font-size: 14px; font-weight: 700; }
.price-amount { font-size: 24px; font-weight: 700; margin-left: 4px; }
.price-subtext { font-size: 13px; color: #333; margin-top: 4px; }
.price-total { font-size: 12px; color: #666; font-style: italic; margin-top: 2px; }
/* Two-column bottom row anchored to the bottom of card content */
.ta-row { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; }
.ta-row--end { align-items:end; }
.amenities-col { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.amenities-col .amenity-tag { margin: 0; }
.price-col, .ta-price { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.price-col .pricing-right { padding: 0; margin: 0; }
.price-col .price-label { margin: 0; }
.price-col .price-amount { margin: 0; }
.price-col .price-total { margin-top: 2px; }
.card-footer { background: var(--amenity-bg, #e6f2fd) !important; color: #333; text-align: center; font-size: 13px; }
.edge-footer { display: block; margin: 0 -16px -16px; padding: 10px 16px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* Room/Property details */
.rooms-container { display: flex; flex-direction: column; gap: 0; }
.rooms-section { margin-top: 16px; }
.rooms-title { font-size: 14px; font-weight: 600; color: #2c3e50; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.room-card:hover, .inline-room-card:hover, .simple-room-card:hover { border-color: #e1e8ed; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: none; }
.room-item { background: #ffffff; border: 1px solid #e1e8ed; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.room-image-container { background: #f8f9fa; border-radius: 8px; overflow: hidden; width: 100%; }
.room-main-image { width: 100%; height: auto; object-fit: contain; display: block; background: #f8f9fa; border-radius: 8px; }
.room-content-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.room-info-left { flex: 1 1 auto; }
.room-price-right { display: flex; flex-direction: column; align-items: flex-end; min-width: 120px; }
.from-text { font-size: 12px; color: #555; margin-right: 4px; }
.price-sub-info { font-size: 12px; color: #666; margin-top: 4px; }
.room-rate-row { display: flex; align-items: center; justify-content: space-between; }
/* Compact room card spacing (no size changes) */
.room-card .hotel-card-content { row-gap: 4px; }
.room-card .divider { margin: 4px 0; }
.room-card .room-rate-row { padding: 4px 0; }
.room-card .hotel-amenities { margin-bottom: 6px; }
/* Room Price Spacing and Styling */
.room-rate-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 0; }
.rate-label { flex: 1; font-size: 14px; line-height: 1.4; margin-right: 12px; word-break: break-word; }
.room-price-block { font-size: 16px; font-weight: bold; text-align: right; white-space: nowrap; }
.rate-divider { border-top: 1px solid #eee; margin: 6px 0; }

/* No-rooms inline message */
.no-rooms-message { text-align: center; color: #8e9aaf; padding: 40px 20px; font-size: 14px; background: #f8f9fa; border-radius: 8px; border: 1px dashed #e1e8ed; }
.no-rooms-message h4 { margin: 0 0 8px 0; color: #2c3e50; }
.no-rooms-message p { margin: 0; }

/* Payment card styles */
.payment-link-card { background: #ffffff; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.payment-link-icon { font-size: 20px; }
.payment-link-content { flex: 1; }
.payment-link-title { font-size: 15px; font-weight: 600; color: #2c3e50; margin: 0 0 4px 0; }
.payment-link-sub { font-size: 12px; color: #8e9aaf; margin: 0; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.payment-link-button { background: var(--ta-brand); color: #fff; border: none; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.payment-link-button:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-1px); }
.payment-secondary-btn { background: #eef3f6; color: #0b63a4; border: 1px solid #d6ebff; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.payment-verify-btn { background: #f2f2ff; color: #3b3bdb; border: 1px solid #dcdcfe; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.payment-status { margin-left: auto; font-size: 12px; color: #666; }
.payment-status-badge { padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.status-pending { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.status-confirmed { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-failed { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.ta-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; padding: 8px 12px; border-radius: 6px; opacity: 0; transition: opacity .2s; z-index: 2000; }
.ta-toast.show { opacity: 1; }

/* Trip summary bar */
.trip-summary-bar { position: fixed; bottom: 0; left: 0; right: 0; display: none; align-items: center; justify-content: space-between; gap: 16px; background: #ffffff; border-top: 1px solid #e1e8ed; padding: 8px 12px; z-index: 1500; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
.trip-summary-left { display: flex; flex-wrap: wrap; gap: 12px; }
.trip-item { display: flex; gap: 6px; font-size: 12px; }
.trip-label { color: #666; }
.trip-value { color: #2c3e50; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-step { font-size: 12px; color: #0b63a4; font-weight: 600; }

/* Booking cards */
.booking-card { background: #ffffff; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.booking-success-card .booking-icon { font-size: 20px; }
.booking-error-card .booking-icon { font-size: 20px; }
.booking-content { flex: 1; }
.booking-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.booking-detail { font-size: 13px; color: #2c3e50; margin-bottom: 4px; }
.booking-actions { display: flex; gap: 8px; margin-top: 8px; }
.booking-btn { background: #eef3f6; color: #0b63a4; border: 1px solid #d6ebff; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }

/* Skeletons */
.skeleton-card { background: #fff; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; width: auto; max-width: 320px; margin: 0 0 12px 0; }
.skeleton-line { height: 12px; background: linear-gradient(90deg, #eee 25%, #f6f6f6 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin-bottom: 8px; border-radius: 6px; }
.skeleton-image { height: 140px; background: #eee; border-radius: 8px; margin-bottom: 12px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Payment card and actions */
.payment-link-card { background: #ffffff; border: 1px solid #e1e8ed; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.payment-link-icon { font-size: 20px; }
.payment-link-content { flex: 1; }
.payment-link-title { font-size: 15px; font-weight: 600; color: #2c3e50; margin: 0 0 4px 0; }
.payment-link-sub { font-size: 12px; color: #8e9aaf; margin: 0 0 8px; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.payment-status { font-size: 12px; color: #8e9aaf; }
.payment-status.pending { color: #8e9aaf; }
.payment-status.confirmed { color: #2e7d32; font-weight: 600; }
.payment-status.failed { color: #c62828; font-weight: 600; }
.payment-qr { margin-top: 8px; }
.payment-qr-fallback { font-size: 12px; color: #555; word-break: break-all; padding: 8px; border: 1px dashed #ccd; border-radius: 6px; }

/* Unified button system */
.btn { --btn-bg:#eaf5ff; --btn-bd:#d6ebff; --btn-fg:#0b63a4; background:var(--btn-bg); border:1px solid var(--btn-bd); color:var(--btn-fg); padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.btn:hover { background:#dff0ff; }
.btn.primary { --btn-bg:#27ae60; --btn-bd:#27ae60; --btn-fg:#fff; }
.btn.primary:hover { background:#229954; }
.btn.secondary { --btn-bg:#f5f7fa; --btn-bd:#e1e8ed; --btn-fg:#2c3e50; }
.btn.secondary:hover { background:#eef2f6; }
.btn.outline { --btn-bg:#fff; --btn-bd:#cfd8e3; --btn-fg:#2c3e50; }
.btn.link { background:transparent; border:none; color:#0b63a4; padding:4px 8px; }

/* New unified status pill and headers */
.status-pill { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-pill.ok { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.status-pill.err { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.status-pill.pending { background:#fff3cd; color:#856404; border:1px solid #ffeaa7; }

/* Payment/Booking cards rely on base .ta-card width */
.payment-card { display:block; }
.payment-header { display:flex; align-items:center; justify-content:center; padding:0; background:transparent; aspect-ratio:1/1; }
.payment-header img { display:block; width:100%; height:100%; object-fit:contain; }
.payment-emoji { font-size:56px; line-height:1; }
.payment-status-text { margin-left:10px; font-weight:800; font-size:16px; text-align:center; color:inherit; }
.ta-card__header.status { display:flex; justify-content:center; align-items:center; gap:10px; color:inherit; }
.ta-card__header.status.success { background: rgba(39,174,96,0.18); color:#27ae60; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ta-card__header.status.failed { background: rgba(231,76,60,0.18); color:#e74c3c; border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ta-card__header.status .payment-emoji { color: inherit; }
.payment-qr-small { width:80px; height:80px; object-fit:contain; }
.payment-body { padding:12px 0; }
.payment-body:empty { display:none; }
.payment-summary { text-align:center; font-size:14px; color:#2c3e50; }
.payment-footer { display:flex; align-items:center; gap:8px; background:#eaf5ff; color:#2c3e50; cursor:pointer; }
.payment-footer .label { flex:1 1 auto; text-align:center; padding:12px; font-weight:800; font-size:15px; text-transform: uppercase; letter-spacing: .02em; color:inherit; }
.payment-footer .divider-v { width:1px; align-self:stretch; background:#cfd8e3; }
.payment-footer .icon-only { background:transparent; border:none; color:#2c3e50; }
.payment-footer .icon-only:hover { filter:brightness(1.1); }
.icon-only { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* Booking card uses base width */
.booking-card { display:block; }
.booking-header { padding:0; display:flex; align-items:center; justify-content:center; }
.booking-header.overview { padding-top:12px; padding-bottom:8px; }
.spinner { display:inline-flex; align-items:center; gap:6px; }