/* =============================================================
   cf7-reservation-calendar — teonel テーマ側デザイン調整
   （プラグインは機能 CSS のみ提供、案件固有のデザインはここで上書き）
   ============================================================= */

/* --- wrapper 全体 --- */
.cf7rc-date-wrapper {
    display: block;
    margin-top: 20px;
}

/* lower.css の .l-contact-dl div（flex / md 以上で横並び）がカレンダー内部の div にも
   効いてしまうため、カレンダー内部は通常のブロック表示に戻す */
.l-contact-dl .cf7rc-datepicker-inline div {
    display: block;
    gap: 0;
}

/* 選択した日付の表示欄（他のテキスト入力と同じ見た目・入力不可） */
.cf7rc-date-wrapper .cf7rc-datepicker-display {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #CDB473;
    border-radius: 0;
    outline: none;
    font-size: 1.6rem;
    color: #000;
    letter-spacing: 0.07em;
    cursor: default;
}

/* 時間プルダウン（他のテキスト入力と同じ見た目に揃える） */
.l-contact-dl dd select.cf7rc-timepicker {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #CDB473;
    border-radius: 0;
    outline: none;
    font-size: 1.6rem;
    color: #000;
    font-weight: normal;
    letter-spacing: 0.07em;
    cursor: pointer;
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
}
@media screen and (min-width: 768px) {
    /* 案内文・カレンダーを下の入力欄と左端をそろえる
       lower.css の .l-contact-dl-intro（padding-left: vw(130)）を、
       入力欄の開始位置（dt 幅 vw(260)）に合わせて上書きする */
    .l-contact-dl .l-contact-dl-intro {
        padding-left: calc(260 / 1440 * 100vw);
    }
    .cf7rc-date-wrapper {
        margin-top: calc(30 / 1440 * 100vw);
    }
    .cf7rc-date-wrapper .cf7rc-datepicker-display,
    .l-contact-dl dd select.cf7rc-timepicker {
        height: calc(70 / 1440 * 100vw);
        padding: 0 calc(10 / 1440 * 100vw);
        font-size: calc(16 / 1440 * 100vw);
    }
}

/* --- インラインカレンダー本体 --- */
.cf7rc-datepicker-inline {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 0 20px;
}
.cf7rc-datepicker-inline .ui-datepicker.ui-widget-content {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 1px solid #CDB473;
    border-radius: 0;
    background: #fff;
    font-family: "EB Garamond", "Noto Sans JP", serif;
}
.cf7rc-datepicker-inline .ui-widget-header {
    position: relative;
    padding: 0.6em 0;
    background: transparent;
    border: none;
    color: #000;
    font-weight: normal;
}

/* --- ヘッダー：年月 --- */
.cf7rc-datepicker-inline .ui-datepicker-title {
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: 0.07em;
}

/* --- 前月／翌月ボタン --- */
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev-hover,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next-hover {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    cursor: pointer;
}
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev-hover { left: 0.5em; }
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next-hover { right: 0.5em; }
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev .ui-icon,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next .ui-icon { display: none; }
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev::before,
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next::before {
    font-size: 1em;
    line-height: 2.2em;
    color: #CDB473;
}
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-prev::before { content: "◀"; }
.cf7rc-datepicker-inline .ui-datepicker .ui-datepicker-next::before { content: "▶"; }
.cf7rc-datepicker-inline .ui-datepicker .ui-state-disabled::before { opacity: 0.3; }

/* --- 曜日ヘッダー --- */
.cf7rc-datepicker-inline .ui-datepicker th {
    padding: 0.6em 0;
    font-size: 1.4rem;
    font-weight: normal;
    color: #000;
}

/* --- 日付グリッド --- */
.cf7rc-datepicker-inline .ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0.3em;
}
.cf7rc-datepicker-inline .ui-datepicker-calendar td {
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
}
.cf7rc-datepicker-inline .ui-datepicker-calendar td a,
.cf7rc-datepicker-inline .ui-datepicker-calendar td span {
    display: block;
    padding: 0.5em 0;
    border: none;
    background: transparent;
    font-size: 1.6rem;
    text-align: center;
    color: #000;
    text-decoration: none;
    transition: background 0.15s ease;
}

/* 日曜（列 0）= 赤 / 土曜（列 6）= 青。firstDay:0 前提 */
.cf7rc-datepicker-inline .ui-datepicker th:first-child,
.cf7rc-datepicker-inline .ui-datepicker-calendar td:first-child a {
    color: #b52020;
}
.cf7rc-datepicker-inline .ui-datepicker th:last-child,
.cf7rc-datepicker-inline .ui-datepicker-calendar td:last-child a {
    color: #1a4fa0;
}

/* 選択不可日（グレーアウト） */
.cf7rc-datepicker-inline .ui-datepicker-unselectable span,
.cf7rc-datepicker-inline .ui-datepicker-unselectable a {
    color: #c8c8c8 !important;
    background: transparent !important;
    cursor: not-allowed;
}

/* 選択可能日（薄いゴールドの背景で受付日を示す） */
.cf7rc-datepicker-inline .ui-datepicker-calendar td a.ui-state-default {
    background: #f6f0e1;
}

/* ホバー */
.cf7rc-datepicker-inline .ui-datepicker-calendar td a:hover,
.cf7rc-datepicker-inline .ui-datepicker-calendar td a.ui-state-hover {
    background: #eadfbf !important;
    color: inherit;
    border: none !important;
}

/* 今日（下線で示す） */
.cf7rc-datepicker-inline .ui-datepicker-today a,
.cf7rc-datepicker-inline .ui-datepicker-today span {
    text-decoration: underline;
}

/* 選択中（テーマのアクセントカラー、文字は白抜き） */
.cf7rc-datepicker-inline .ui-datepicker-calendar td a.ui-state-active {
    background: #CDB473 !important;
    color: #fff !important;
    border: none !important;
}

@media screen and (min-width: 768px) {
    /* カレンダーも入力欄と同じ幅にする */
    .cf7rc-datepicker-inline {
        max-width: none;
    }
    .cf7rc-datepicker-inline .ui-datepicker-title {
        font-size: calc(22 / 1440 * 100vw);
    }
    .cf7rc-datepicker-inline .ui-datepicker th {
        font-size: calc(14 / 1440 * 100vw);
    }
    .cf7rc-datepicker-inline .ui-datepicker-calendar td a,
    .cf7rc-datepicker-inline .ui-datepicker-calendar td span {
        font-size: calc(16 / 1440 * 100vw);
    }
}