/* ================================================================
   Hotelipp – フロントエンドカードスタイル
   全セレクターに .hotelipp-card を付与して詳細度を確保
   ================================================================ */

/* ── カード内リンク: テーマCSSに絶対に負けない ─────────────────── */
.hotelipp-card a,
.hotelipp-card a:link,
.hotelipp-card a:visited,
.hotelipp-card a:hover,
.hotelipp-card a:focus,
.hotelipp-card a:active {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
  outline: none;
}

/* ── カード本体 ──────────────────────────────────────────────────── */
.hotelipp-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin: 1.8em 0;
  overflow: hidden;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  word-wrap: break-word;
  box-sizing: border-box;
}

/* ── 画像エリア（outer=余白担当 / inner=表示担当） ──────────────── */
/* outer: padding で確実に余白を作る（margin不要・テーマに負けない） */
.hotelipp-card .hotelipp-image-outer {
  flex: 0 0 150px;
  min-width: 0;
  padding: 16px 0 12px 12px;
  align-self: center;          /* 上下中央 */
  flex-shrink: 0;
  box-sizing: border-box;
}
/* inner: 画像本体を囲む */
.hotelipp-card .hotelipp-image {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotelipp-card .hotelipp-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  object-fit: cover;
}

/* ── セールバッジ ────────────────────────────────────────────────── */
.hotelipp-card .hotelipp-sale-badge {
  position: absolute;
  top: 6px; left: 0;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px 2px 5px;
  border-radius: 0 4px 4px 0;
}

/* ── ボディ ──────────────────────────────────────────────────────── */
.hotelipp-card .hotelipp-body {
  flex: 1;
  padding: 16px 16px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

/* ── ホテル名（黒・大きめ・リンクっぽくない） ──────────── */
.hotelipp-card .hotelipp-name {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.45;
}
.hotelipp-card .hotelipp-name-link,
.hotelipp-card .hotelipp-name-link:link,
.hotelipp-card .hotelipp-name-link:visited,
.hotelipp-card .hotelipp-name-link:hover,
.hotelipp-card .hotelipp-name-link:active {
  color: #111;
  text-decoration: none;
  border-bottom: none;
}

/* ── サブテキスト（ブランド名風・小・グレー） ─────────── */
.hotelipp-card .hotelipp-description {
  font-size: 12px;
  color: #888;
  margin: 0;
  line-height: 1.4;
}

/* ── 住所 ────────────────────────────────────────────────────────── */
.hotelipp-card .hotelipp-address {
  font-size: 12px;
  color: #777;
  display: block;
  line-height: 1.6;
  margin: 0;
}
.hotelipp-card .hotelipp-address-icon {
  font-size: 12px;
  color: #e53e3e;
}
.hotelipp-card .hotelipp-address-text {
  color: #777;
}
.hotelipp-card .hotelipp-map-link,
.hotelipp-card .hotelipp-map-link:link,
.hotelipp-card .hotelipp-map-link:visited,
.hotelipp-card .hotelipp-map-link:hover,
.hotelipp-card .hotelipp-map-link:active {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #aaa;
  padding: 1px 8px;
  border-radius: 3px;
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
  margin-left: 4px;
  transition: background .12s;
}
.hotelipp-card .hotelipp-map-link:hover {
  background: #666;
  color: #fff;
}

/* ── 評価 ────────────────────────────────────────────────────────── */
.hotelipp-card .hotelipp-review {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.hotelipp-card .hotelipp-review-link,
.hotelipp-card .hotelipp-review-link:link,
.hotelipp-card .hotelipp-review-link:visited,
.hotelipp-card .hotelipp-review-link:hover,
.hotelipp-card .hotelipp-review-link:active {
  text-decoration: none;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hotelipp-card .hotelipp-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.hotelipp-card .hotelipp-star            { color: #ddd; font-size: 15px; line-height: 1; }
.hotelipp-card .hotelipp-star--full      { color: #f5a623; }
.hotelipp-card .hotelipp-star--half      { color: #f5a623; opacity: .6; }
.hotelipp-card .hotelipp-review-score    { font-weight: 700; color: #f5a623; font-size: 14px; }
.hotelipp-card .hotelipp-review-count    { color: #999; font-size: 12px; }

/* ── 最安値（価格は目立たせる） ────────────────────────── */
.hotelipp-card .hotelipp-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.hotelipp-card .hotelipp-price-label { font-size: 11px; color: #999; }
.hotelipp-card .hotelipp-price-value { font-size: 19px; font-weight: 700; color: #d0021b; }

/* ── ボタン群（3列均等幅） ───────────────────────────────────────── */
.hotelipp-card .hotelipp-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;            /* セールバナーがあるとき、ボタン下端を揃える */
  gap: 8px;
  margin-top: 8px;
}

/* ── ボタン本体 ────────────────────── */
.hotelipp-card .hotelipp-btn,
.hotelipp-card .hotelipp-btn:link,
.hotelipp-card .hotelipp-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;                  /* grid列幅に従う */
  min-width: 0;
  padding: 10px 8px;
  border-radius: 50px;      /* pill形状 */
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  border-bottom: none;
  color: #fff;              /* 白文字 */
  background-color: var(--btn-color, #555); /* べた塗り */
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
  line-height: 1.3;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  letter-spacing: .02em;
}
.hotelipp-card .hotelipp-btn:hover,
.hotelipp-card .hotelipp-btn:focus {
  color: #fff;
  background-color: var(--btn-color, #555);
  text-decoration: none;
  border-bottom: none;
  filter: brightness(.88);
  transform: translateY(1px);
}

/* ── フッター ────────────────────────────────────────────────────── */
.hotelipp-card .hotelipp-footer {
  margin-top: auto;
  padding-top: 4px;
  text-align: right;
}
.hotelipp-card .hotelipp-credit,
.hotelipp-card .hotelipp-credit:link,
.hotelipp-card .hotelipp-credit:visited,
.hotelipp-card .hotelipp-credit:hover {
  font-size: 10px;
  color: #ccc;
  text-decoration: none;
  border-bottom: none;
}

/* ── SP（実画面600px以下） ───────────────────────────────────────── */
@media screen and (max-width: 600px) {
  .hotelipp-card { flex-direction: column; }
  .hotelipp-card .hotelipp-image-outer {
    flex: none;
    width: 100%;
    padding: 12px 12px 0;
    align-self: stretch;
  }
  .hotelipp-card .hotelipp-image {
    width: 100%;
    height: auto;   /* 高さは画像に合わせる */
  }
  .hotelipp-card .hotelipp-image img {
    width: 100%;
    height: auto;
    object-fit: contain;  /* 見切れなし・全体表示 */
    max-height: 200px;
  }
  .hotelipp-card .hotelipp-body { padding: 12px 16px 16px; }
  .hotelipp-card .hotelipp-buttons {
    grid-template-columns: 1fr; /* SP: 1列 */
  }
}

/* ── セールバナー ──────────────────────────────────────────── */
.hotelipp-btn-wrap {
  display: contents; /* グリッドアイテムとして透過 */
}
.hotelipp-btn-wrap.-on-sale {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* ボタンを下端に寄せて横並びを揃える */
  gap: 2px;
}
/* セール文言：背景・枠なしのシンプルテキスト */
.hotelipp-sale-info {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #d73a49;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0 4px 3px;
  line-height: 1.4;
}
/* 点滅エフェクト: is-flash クラスがある場合のみ */
.hotelipp-sale-info.is-flash {
  animation: hotelipp-sale-flash 1.4s ease-in-out infinite;
}
@keyframes hotelipp-sale-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
/* セール中ボタンはpill形状を維持 */
.hotelipp-btn-wrap.-on-sale .hotelipp-btn {
  border-radius: 50px;
}
/* Expediaボタン：明るい黄色のため文字色を濃くする */
.hotelipp-card .hotelipp-btn--expedia,
.hotelipp-card .hotelipp-btn--expedia:link,
.hotelipp-card .hotelipp-btn--expedia:visited,
.hotelipp-card .hotelipp-btn--expedia:hover,
.hotelipp-card .hotelipp-btn--expedia:focus {
  color: #333;
}

/* ── セール設定UI（管理画面）────────────────── */
.hip-sale-row {
  padding: 14px 0 10px;
}
.hip-sale-row + .hip-sale-row {
  border-top: 1px solid #dcdcdc;
  margin-top: 4px;
}
.hip-sale-row__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.hip-sale-row__label {
  font-weight: 700;
  font-size: 13px;
}
.hip-sale-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-height: 0;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  background-color: #eee;
  border-radius: 40px;
  border: 1px solid #ddd;
  box-shadow: none;
  cursor: pointer;
}
.hip-sale-remover:hover {
  background-color: #ddd;
}
.hip-sale-row__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}
.hip-sale-row__field + .hip-sale-row__field {
  margin-top: 8px;
}
.hip-sale-row__field.-time {
  flex-wrap: nowrap;
}
.hip-sale-row__key {
  min-width: 2.75em;
  font-size: 13px;
  flex-shrink: 0;
}
.hip-nami {
  display: inline-block;
  padding: 4px 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.hip-sale-row__field.-time input[type="datetime-local"] {
  flex: 1;
  min-width: 0;
}
.hotelipp-campaign-wrap {
  padding: 12px 8px 4px;
  border-top: 1px solid #eee;
  margin-top: 8px;
}

/* =========================================================
   Theme compatibility (scoped)
   インラインstyleが詳細度でテーマに勝つため、ここは補助的な保険。
   !important は「テーマがリンクを強制上書きする」既知ケースのみ最小限で使用。
   ========================================================= */
.hotelipp-card,
.hotelipp-card *,
.hotelipp-card *::before,
.hotelipp-card *::after { box-sizing: border-box; }
.hotelipp-card a { text-decoration: none; }
.hotelipp-card img { max-width: 100%; height: auto; border: 0; }
.hotelipp-card .hotelipp-btn,
.hotelipp-card .hotelipp-name-link { text-decoration: none !important; }