/* style.css */
:root{
	--brand-yellow: #FFD317;
	--brand-cyan: #0dcaf0;
	--brand-dark: #222;
	--muted: #666;
}

/* Header */
.site-header{
	background: linear-gradient(135deg,#fff7cc,#ffe8a3,#ffd7d7);
}
.brand{
	color: var(--brand-dark);
}
.logo{
	border-radius: 8px;
	background: var(--brand-yellow);
	padding:4px;
	object-fit: cover;
}
.site-title{
  color: var(--dark);
}

/* Main */
.site-main{
  background: linear-gradient(90deg, rgba(255,211,23,0.06), rgba(255,211,23,0.02));
}
.sub{
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px;
}

.stylish-input {
	padding: 10px 12px;
	border-radius: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.stylish-input:focus {
	border-color: #4f46e5;
	box-shadow: 0 0 0 0.2rem rgba(79,70,229,0.15);
}

/* dialog */
.ui-dialog { z-index: 10000 !important ;}

/* ラジオボタン全体 */
.radio-option {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border-radius: 10px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	border: 2px solid transparent;
}

/* ラジオボタン */
.radio-option input[type="radio"] {
	margin-right: 12px;
	transform: scale(1.2);
	cursor: pointer;
}

/* ラベル */
.radio-option label {
	cursor: pointer;
	font-weight: 600;
	width: 100%;
}

.radio-option label span {
	font-weight: normal;
	color: #555;
	margin-left: 8px;
}

/* 選択時 */
.radio-option input[type="radio"]:checked + label {
	color: #111;
}

.radio-option:has(input[type="radio"]:checked) {
	border-color: #4f46e5;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* プラン別カラー */
.plan-lite {
	background: #eef6ff !important;
}

.plan-basic {
	background: #f0fdf4 !important;
}

.plan-plus {
	background: #fff7ed !important;
}

.plan-business {
	background: #fdf2f8 !important;
}

.plan-note {
	font-size: 0.9rem;
	color: #666;
}

/* メニュー */
@media (min-width: 992px) {
  #sideMenu {
    width: 280px;
  }
}

@media (max-width: 767px) {

    /* モーダル全体 */
    .modal-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    /* モーダル内容 */
    .modal-content {
        height: 100%;
        border-radius: 0;   /* 画面いっぱいなので角は消す */
    }

    /* ヘッダーとフッター分を除いてスクロール */
    .modal-body {
        overflow-y: auto;
    }
    
    .modal-body .btn {
        padding: 16px;
        font-size: 16px;
    }
}

.modal-body .btn {
    border-radius: 12px;   /* 好みで 6px / 8px / 16px など調整可 */
}

/* ===== 保存済み設定条件モーダル ===== */

#cdt_modal .modal-content {
  border-radius: 16px;
  border: none;
  background: linear-gradient(135deg, #f8faff, #f1f5ff);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ヘッダー */
#cdt_modal .modal-header {
  background: linear-gradient(135deg, #FFD317, #e5e7ef);
  color: #000;
  border-radius: 16px 16px 0 0;
  padding: 1rem 1.25rem;
}

#cdt_modal .modal-title {
  font-weight: 600;
  letter-spacing: 0.05em;
}

#cdt_modal .btn-close {
  filter: brightness(0) invert(1);
}

.btn-close-black {
  filter: none !important;
  opacity: 0.8;
}
/* ボディ */
#cdt_modal .modal-body {
  padding: 1.25rem;
}

/* 保存スロットカード */
.cdt-save-card {
  width: 100%;
  background: #fff;
  border: 2px dashed #c7d2fe;
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  transition: all .2s;
}

.cdt-save-card:hover {
  background: #f5f7ff;
  border-color: #6f8cff;
  transform: translateY(-3px);
}

.cdt-save-title {
  font-weight: 600;
  color: #4a5fdc;
  margin-bottom: .5rem;
}

.cdt-save-title i {
  margin-right: .25rem;
  font-size: 1.2rem;
}

/* 横に大きい保存スロット */
.cdt-save-card-lg {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
}