/* ================================================================
   Rakuten Travel Vacancy Widget v1.1
   ================================================================ */

.rt-widget {
  border: 2px solid #c00;
  border-radius: 10px;
  padding: 20px;
  margin: 24px 0;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

/* ホテル名 */
.rt-widget-name {
  font-weight: bold;
  font-size: 1.0em;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
}

/* SWELLテーマのflex上書き防止 */
.rt-widget,
.rt-widget-form {
  display: block !important;
}

/* ---- 共通フォーム行 ---- */
.rt-form-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}
.rt-form-row:last-child { margin-bottom: 0; }

/* 日付行 */
.rt-form-row--dates {
  align-items: center;
}
.rt-date-sep {
  color: #666;
  font-size: 1.1em;
  padding-top: 20px;
}

/* ---- フィールド ---- */
.rt-widget-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rt-widget-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.rt-widget-field--inline label {
  white-space: nowrap;
  min-width: 7em;
}

.rt-widget-field label {
  font-size: 0.78em;
  font-weight: bold;
  color: #555;
}

/* 日付 input */
.rt-widget-field input[type="date"] {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 0.95em;
  color: #333;
  background: #fafafa;
  outline: none;
  transition: border-color .2s;
}
.rt-widget-field input[type="date"]:focus {
  border-color: #c00;
  background: #fff;
}

/* 数値 input */
.rt-widget-field input[type="number"] {
  width: 58px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 8px;
  font-size: 0.95em;
  text-align: center;
  background: #fafafa;
  outline: none;
  transition: border-color .2s;
}
.rt-widget-field input[type="number"]:focus {
  border-color: #c00;
  background: #fff;
}

.rt-unit {
  color: #555;
  font-size: 0.9em;
}

/* ---- 子供トグルボタン ---- */
.rt-children-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #c00;
  color: #c00;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85em;
  font-weight: bold;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.rt-children-toggle:hover {
  background: #c00;
  color: #fff;
}
.rt-toggle-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* ---- 子供パネル ---- */
.rt-children-panel {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.rt-children-note {
  font-size: 0.78em;
  color: #888;
  margin: 0 0 10px;
}
.rt-children-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

/* ---- 検索ボタン ---- */
.rt-form-row--btn {
  margin-top: 4px;
}
.rt-search-btn {
  background: #c00;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 11px 28px;
  font-size: 0.95em;
  font-weight: bold;
  cursor: pointer;
  transition: background .2s;
}
.rt-search-btn:hover  { background: #a00; }
.rt-search-btn:active { background: #800; }
.rt-search-btn:disabled { background: #aaa; cursor: not-allowed; }

/* ---- 結果エリア ---- */
.rt-widget-result { margin-top: 18px; }

.rt-result-header {
  font-size: 0.82em;
  color: #777;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #ddd;
}

.rt-room-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.rt-room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.rt-room-item:last-child { border-bottom: none; }

.rt-room-name {
  flex: 1;
  font-size: 0.88em;
  color: #333;
  min-width: 140px;
}
.rt-room-price {
  font-weight: bold;
  color: #c00;
  font-size: 1.1em;
  white-space: nowrap;
}
.rt-room-price small {
  font-size: 0.72em;
  font-weight: normal;
  color: #888;
  margin-left: 1px;
}
.rt-room-btn {
  display: inline-block;
  background: #f76956;
  color: #fff !important;
  text-decoration: none !important;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 0.82em;
  font-weight: bold;
  white-space: nowrap;
  transition: background .2s;
}
.rt-room-btn:hover { background: #e05544; }

.rt-book-btn {
  display: block;
  background: #c00;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  padding: 13px;
  border-radius: 7px;
  font-weight: bold;
  font-size: 0.9em;
  transition: background .2s;
}
.rt-book-btn:hover { background: #a00; }

.rt-loading  { color: #777; font-size: 0.9em; }
.rt-error    { color: #c00; font-size: 0.88em; }
.rt-no-rooms { color: #555; font-size: 0.88em; }

/* ================================================================
   画像ピッカー [rakuten_image_picker]
   ================================================================ */
.rt-img-picker {
  border: 2px solid #c00;
  border-radius: 10px;
  padding: 20px;
  margin: 24px 0;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.rt-img-picker-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.rt-img-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rt-img-field label {
  font-size: 0.78em;
  font-weight: bold;
  color: #555;
}
.rt-img-field input[type="number"] {
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 0.95em;
  background: #fafafa;
  outline: none;
}
.rt-img-field input[type="number"]:focus { border-color: #c00; background: #fff; }

.rt-img-field select {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 0.95em;
  background: #fafafa;
  outline: none;
  min-width: 180px;
}
.rt-img-field select:focus { border-color: #c00; background: #fff; }

.rt-img-fetch-btn {
  background: #c00;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 22px;
  font-size: 0.95em;
  font-weight: bold;
  cursor: pointer;
  transition: background .2s;
  align-self: flex-end;
}
.rt-img-fetch-btn:hover { background: #a00; }
.rt-img-fetch-btn:disabled { background: #aaa; cursor: not-allowed; }

.rt-img-result { margin-top: 18px; }

.rt-img-hotel-name {
  font-weight: bold;
  color: #333;
  margin: 0 0 10px;
}
.rt-img-preview {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.rt-img-url-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.rt-img-url-row a {
  font-size: 0.78em;
  color: #555;
  word-break: break-all;
  flex: 1;
}
.rt-img-copy-btn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.8em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.rt-img-copy-btn:hover { background: #e0e0e0; }

/* ================================================================
   楽天市場画像ピッカー [rakuten_ichiba_picker]
   ================================================================ */
.rt-ichiba-picker {
  border: 2px solid #c00;
  border-radius: 10px;
  padding: 20px;
  margin: 24px 0;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.rt-ichiba-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.rt-ichiba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.rt-ichiba-item {
  border: 2px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.rt-ichiba-item:hover { border-color: #c00; }
.rt-ichiba-item--selected {
  border-color: #c00;
  box-shadow: 0 0 0 2px rgba(204,0,0,.25);
}

.rt-ichiba-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.rt-ichiba-name {
  font-size: 0.72em;
  color: #333;
  margin: 5px 6px 2px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rt-ichiba-price {
  font-size: 0.8em;
  font-weight: bold;
  color: #c00;
  margin: 0 6px 6px;
}

.rt-ichiba-selected {
  margin-top: 16px;
  padding: 14px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
}

.rt-ichiba-selected-label {
  font-weight: bold;
  font-size: 0.82em;
  color: #555;
  margin: 0 0 8px;
}

.rt-ichiba-selected-img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 5px;
  border: 1px solid #eee;
  display: block;
  margin-bottom: 8px;
  object-fit: contain;
}

.rt-ichiba-selected-url {
  font-size: 0.72em;
  color: #666;
  word-break: break-all;
  margin: 0 0 10px;
}

.rt-ichiba-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}

.rt-ichiba-thumb-msg {
  font-size: 0.8em;
  color: #060;
  margin: 0;
}

/* ================================================================
   モバイル
   ================================================================ */
@media (max-width: 600px) {
  /* ウィジェット全体 */
  .rt-widget {
    padding: 14px;
    overflow-x: hidden;
  }

  /* フォーム全体の幅制限 */
  .rt-widget-form {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* フォーム行のオーバーフロー防止 */
  .rt-form-row {
    max-width: 100%;
  }

  /* 日付行: 縦積み・左詰め */
  .rt-form-row--dates {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .rt-date-sep { display: none; }

  /* 日付input: 左詰め・適切な幅 */
  .rt-widget-field input[type="date"] {
    width: 170px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* インラインラベル: min-width・nowrap を解除 */
  .rt-widget-field--inline label {
    min-width: 0;
    white-space: normal;
  }

  /* 子供グリッド: 1カラム */
  .rt-children-grid {
    grid-template-columns: 1fr;
  }

  /* 検索ボタン: 全幅 */
  .rt-search-btn {
    width: 100%;
    padding: 13px;
  }

  /* 部屋リスト: 縦積み */
  .rt-room-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .rt-room-name { min-width: 0; }
  .rt-room-btn {
    width: 100%;
    text-align: center;
    padding: 9px;
  }

  /* 楽天市場ピッカー: モバイル */
  .rt-ichiba-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rt-ichiba-form {
    flex-direction: column;
    align-items: flex-start;
  }
}