/* Additional missing utilities for plan cards to match React version */
.pointer-events-none {
  pointer-events: none;
}

.w-6 {
  width: 24px;
}

.h-6 {
  height: 24px;
}

.h-3 {
  height: 12px;
}

.w-3 {
  width: 12px;
}

.gap-0\.5 {
  gap: 2px;
}

/* Specific gap fixes for review links */
.gap-0\.5.flex {
  gap: 2px;
}

a.gap-0\.5 {
  gap: 2px;
}

.hover\:bg-primary\/5:hover {
  background-color: rgba(0, 160, 208, 0.05);
}

.bg-destructive {
  background-color: var(--destructive);
}

.text-destructive-foreground {
  color: var(--destructive-foreground);
}

/* Fix aspect ratio classes */
.aspect-\[1618\/1000\] {
  aspect-ratio: 1618/1000;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

/* Fix missing w- and h- classes */
.w-\[50px\] {
  width: 50px !important;
}

.h-\[50px\] {
  height: 50px !important;
}

.w-\[21px\] {
  width: 21px;
}

.px-\[21px\] {
  padding-left: 21px;
  padding-right: 21px;
}

.w-\[560px\] {
  width: 560px;
}

.min-w-\[560px\] {
  min-width: 560px;
}

.min-w-\[56px\] {
  min-width: 56px;
}

.min-w-\[unset\] {
  min-width: unset;
}

.w-80 {
  width: 320px;
}

.w-10 {
  width: 40px;
}

.h-10 {
  height: 40px;
}

/* Additional responsive classes for md screens */
@media (min-width: 768px) {
  .md\:mb-6 {
    margin-bottom: 24px;
  }
  
  .md\:p-3 {
    padding: 12px;
  }
  
  .md\:block {
    display: block;
  }
  
  .md\:aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  
  .md\:min-w-\[unset\] {
    min-width: unset;
  }
  
  .md\:px-\[21px\] {
    padding-left: 21px;
    padding-right: 21px;
  }
  
  .md\:rounded-t-lg {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
  
  .md\:-m-6 {
    margin: -24px;
  }
  
  .md\:border {
    border: 1px solid var(--border);
  }
  
  .md\:rounded-lg {
    border-radius: var(--radius);
  }
  
  .md\:p-6 {
    padding: 24px;
  }
  
  .md\:px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  
  .md\:mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  
  .md\:overflow-visible {
    overflow: visible;
  }
  
  .md\:w-8 {
    width: 32px;
  }
  
  .md\:h-8 {
    height: 32px;
  }
}

/* Large screen responsive classes */
@media (min-width: 1024px) {
  .lg\:w-80 {
    width: 320px;
  }
  
  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }
  
  .lg\:flex-row {
    flex-direction: row;
  }
}

/* SP版でのみ表示される要素 */
@media (max-width: 767px) {
  /* SP版の詳細情報gap調整 */
  .gap-y-1\.5 {
    row-gap: 6px;
  }
  
  /* SP版の価格エリアを左寄せに */
  .plan-card .block.md\\:hidden .plan-price-container {
    text-align: left;
    align-items: flex-start;
  }
  
  .plan-card .block.md\\:hidden .plan-price-details {
    justify-content: flex-start;
  }
}

/* 基本的なレスポンシブクラス */
.gap-y-1\.5 {
  row-gap: 6px;
}

.gap-y-4 {
  row-gap: 16px;
}

.gap-x-4 {
  column-gap: 16px;
}

.gap-x-6 {
  column-gap: 24px;
}

/* 基本的な幅・高さクラス */
.w-32 {
  width: 128px;
}

.w-4 {
  width: 16px;
}

.w-5 {
  width: 20px;
}

.h-4 {
  height: 16px;
}

.h-5 {
  height: 20px;
}

/* 追加のユーティリティクラス */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* カレンダーエリアの共通スタイル */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Price area alignment fixes */
.plan-price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}

.plan-price-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.plan-price-details {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* カレンダーボタンのhover背景色を削除 */
div.absolute.inset-0.rounded-lg.bg-primary\/10.opacity-0.hover\:opacity-100.transition-opacity.duration-200.pointer-events-none {
  background-color: transparent;
}

button div.absolute.inset-0.rounded-lg.opacity-0.hover\:opacity-100.transition-opacity.duration-200.pointer-events-none {
  background-color: transparent;
}

/* Image container within content */
.plan-image-container {
  /* SP版：自然なwidth */
  width: auto;
}

/* PC版でlg:w-80が適用されるように */
@media (min-width: 1024px) {
  .plan-image-container.lg\:w-80 {
    width: 320px;
  }
}

.plan-image-container img {
}

/* Desktop responsive adjustments */
@media (min-width: 768px) {
  /* Add desktop styling to plan card */
  .plan-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  
  /* Desktop header with rounded top corners */
  .plan-card-header {
    padding: 16px 24px;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
  }
  
  /* Desktop content padding */
  .plan-card-content {
    padding: 24px;
  }
  
  /* Desktop image container - clean layout */
  .plan-image-container {
    margin-bottom: 24px;
  }
  
  /* Desktop calendar adjustments */
  .plan-card-content .overflow-x-auto.-mx-4 {
    margin-left: 0;
    margin-right: 0;
  }
  
  .plan-card-content .overflow-x-auto.px-4 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Plans list container to ensure proper separation */
#plans-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  /* Override Tailwind space-y classes */
  --tw-space-y-reverse: 0 !important;
}


@media (min-width: 768px) {
  #plans-list {
    gap: 32px !important;
  }
}

/* 事業者名とプラン名のunderline削除 */
a.hover\:underline.cursor-pointer.text-primary {
  text-decoration: none;
}

a.block.mb-4.text-primary.hover\:underline.transition-colors {
  text-decoration: none;
}