/* ===================================================================
   星と占いのアトリエ - デザインシステム（Laravel連携）
   Laravel側 public/css/app.css と同一の色変数を定義
   =================================================================== */

:root {
  /* === 背景色 === */
  --bg-cream: #FAF7F2;
  --bg-beige: #F5F0E8;
  --bg-greige: #EBE6DE;

  /* === メインカラー === */
  --lavender: #9B8BC4;
  --lavender-light: #B4A5D5;
  --lavender-pale: #E8E3F3;
  --rose: #D4A5A5;
  --rose-deep: #C9989B;
  --rose-pale: #F5EBEB;

  /* === アクセントカラー === */
  --coral: #E8B4A8;
  --coral-deep: #D9A093;
  --gold: #D4AF87;
  --gold-light: #E5C9A8;

  /* === テキストカラー === */
  --text-dark: #4A3C31;
  --text-medium: #6B5D52;
  --text-light: #8C7B6D;

  /* === その他 === */
  --white: #FFFFFF;
  --shadow: rgba(74, 60, 49, 0.08);
  --green: #4CAF50;
}

/* ===================================================================
   サイト全体の基本スタイル
   =================================================================== */

/* 背景色をクリーム系に */
body {
  background-color: var(--bg-cream) !important;
}

/* リンクカラー */
a {
  color: var(--lavender);
}
a:hover {
  color: var(--rose-deep);
}

/* ===================================================================
   ヘッダー
   =================================================================== */
#st-header,
header#headbox-bg,
#headbox-bg {
  background: linear-gradient(135deg, var(--bg-cream) 0%, var(--lavender-pale) 50%, var(--rose-pale) 100%) !important;
}

/* ===================================================================
   ボタン・CTA
   =================================================================== */

/* プライマリボタン（ラベンダー系グラデーション） */
.st-btn-default,
.btn-primary,
.st-mybtn {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%) !important;
  border: none !important;
  color: var(--white) !important;
}

/* CTAボタン（コーラル系グラデーション） */
.cta-button,
.st-btn-cta,
.btn-cta {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%) !important;
  border: none !important;
  color: var(--white) !important;
}

.cta-button:hover {
  box-shadow: 0 10px 20px rgba(232, 180, 168, 0.4) !important;
}

/* ===================================================================
   カード・ボックス
   =================================================================== */

/* 記事カード */
.post,
article,
.kanren .clearfix,
.st-card-box {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 16px !important;
}

/* サイドバーウィジェット */
.st-widgets,
aside .widget,
#side .widget {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 12px !important;
}

/* ===================================================================
   見出し
   =================================================================== */

/* h2見出し */
h2,
.post h2,
.entry-content h2 {
  color: var(--text-dark) !important;
  border-bottom: 2px solid var(--lavender) !important;
}

/* h3見出し */
h3,
.post h3,
.entry-content h3 {
  color: var(--text-dark) !important;
  border-left: 4px solid var(--lavender) !important;
}

/* ===================================================================
   カテゴリー・タグ
   =================================================================== */

.cat-name,
.cat-link,
.tagcloud a,
.post-categories a {
  background: var(--lavender-pale) !important;
  color: var(--lavender) !important;
  border-radius: 20px !important;
}

.cat-name:hover,
.cat-link:hover,
.tagcloud a:hover,
.post-categories a:hover {
  background: var(--lavender) !important;
  color: var(--white) !important;
}

/* ===================================================================
   星評価（占い師レビュー用）
   =================================================================== */

.stars,
.avg-rating .stars {
  color: var(--gold) !important;
}

/* ===================================================================
   チップ（占い師詳細）
   =================================================================== */

.chip {
  background: var(--bg-beige) !important;
  border: 1px solid var(--bg-greige) !important;
  color: var(--text-medium) !important;
}

.chip:hover {
  background: var(--lavender-pale) !important;
  border-color: var(--lavender-light) !important;
}

/* ===================================================================
   占い師カード
   =================================================================== */

.ft-card {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.ft-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 30px var(--shadow) !important;
  border-color: var(--lavender-light) !important;
}

.ft-card .name {
  color: var(--text-dark) !important;
}

/* ===================================================================
   占い師詳細ページ
   =================================================================== */

.ft-profile-section {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px var(--shadow) !important;
}

/* レビューカード */
.review-card {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 12px !important;
}

.review-card:hover {
  border-color: var(--lavender-light) !important;
}

/* ===================================================================
   フッター
   =================================================================== */

footer,
#footer,
.footer-inner {
  background: linear-gradient(135deg, var(--bg-beige) 0%, var(--lavender-pale) 100%) !important;
  color: var(--text-medium) !important;
}

footer a,
#footer a {
  color: var(--text-medium) !important;
}

footer a:hover,
#footer a:hover {
  color: var(--lavender) !important;
}

/* ===================================================================
   共通ボタンスタイル更新
   =================================================================== */

.btn {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%) !important;
  color: var(--white) !important;
  border-radius: 25px !important;
  border: none !important;
}

.btn:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 4px 15px rgba(155, 139, 196, 0.4) !important;
}

/* ===================================================================
   ページネーション
   =================================================================== */

.pagination a,
.page-numbers {
  border: 1px solid var(--bg-greige) !important;
  color: var(--text-medium) !important;
  border-radius: 8px !important;
}

.pagination a:hover,
.page-numbers:hover {
  background: var(--lavender-pale) !important;
  border-color: var(--lavender-light) !important;
}

.pagination .current,
.page-numbers.current {
  background: var(--lavender) !important;
  color: var(--white) !important;
  border-color: var(--lavender) !important;
}

/* ===================================================================
   テキストカラー統一
   =================================================================== */

body,
p,
.post-content,
.entry-content {
  color: var(--text-dark) !important;
}

.meta,
.post-meta,
time,
.date {
  color: var(--text-light) !important;
}

/* ===================================================================
   フォーム要素
   =================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  background: var(--white) !important;
  border: 1px solid var(--bg-greige) !important;
  border-radius: 8px !important;
  color: var(--text-dark) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--lavender) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--lavender-pale) !important;
}

input[type="submit"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 25px !important;
  cursor: pointer !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  filter: brightness(1.05) !important;
}

/* ===================================================================
   固定フッターCTA調整
   =================================================================== */

.fixed-footer {
  background: linear-gradient(135deg, rgba(74, 60, 49, 0.9) 0%, rgba(74, 60, 49, 0.95) 100%) !important;
  backdrop-filter: blur(10px) !important;
}

.fixed-footer .cta-button {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%) !important;
}