/*
Theme Name: Hotel Okura Custom Theme
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: ホテルオークラ用カスタムテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-okura
*/

/* ========================================
   リセットCSS
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@media screen and (min-width: 767px) {
body {
    font-family: 'Crimson Text', serif;
	font-size:1.1rem;
	font-weight: 700;
   line-height: 1.6 !important; 
    color: #3c3c3c;
	background-image: url('assets/images/background.png');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    background-color:#eae8e7;
    overflow-x: hidden;
}
}
@media screen and (max-width: 767px) {
body {
    font-family: 'Crimson Text', serif;
	font-size:1.1rem;
	font-weight: 700;
   line-height: 1.6 !important; 
    color: #3c3c3c;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    background-color:#eae8e7;
    overflow-x: hidden;
}
}
img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/BodoniModa-VariableFont_opsz,wght.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/BodoniModa-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations');
}

/* Regular */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
}

/* Regular Italic */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CrimsonText-Italic.ttf') format('truetype');
}

/* SemiBold */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/CrimsonText-SemiBold.woff2') format('truetype');
}

/* SemiBold Italic */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/CrimsonText-SemiBoldItalic.woff2') format('truetype');
}

/* Bold */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/CrimsonText-Bold.woff2') format('truetype');
}

/* Bold Italic */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/CrimsonText-BoldItalic.ttf') format('truetype');
}

/* Regular */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2-variations');
}

/* Italic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2-variations');
}


/* マージンユーティリティクラス */
.margin-top-small { margin-top: 2rem!important; }
.margin-top-medium { margin-top: 4rem!important; }
.margin-top-large { margin-top: 6rem!important; }
.margin-top-xlarge { margin-top: 8rem!important; }

.margin-bottom-small { margin-bottom: 2rem!important; }
.margin-bottom-medium { margin-bottom: 4rem!important; }
.margin-bottom-large { margin-bottom: 6rem!important; }
.margin-bottom-xlarge { margin-bottom: 8rem!important; }

.margin-up-down-small { margin: 2rem auto!important;}
.margin-up-down-medium { margin: 4rem auto!important;}
.margin-up-down-large { margin: 6rem auto!important;}
.margin-up-down-xlarge { margin: 8rem auto!important; }

.smb-btn--full{line-height:250%; font-size:1.5rem; font-family: 'Crimson Text', serif;}
.box-left-line{border-left:5px solid #666!important; padding-left:2%;}
@media screen and (max-width: 768px) {
	.sp-map-btn{display: flex;
        justify-content: center;}
}
.entry-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5vw, 4.8rem) !important;
    font-weight: 700;
    line-height: 0.8 !important;
    color: #3c3c3c;
    margin: 60px auto !important;
}

/* smallタグ（サブタイトル部分）*/
.entry-title small {
    font-family: 'Bodoni Moda', serif;
    font-size: 2.1rem;
    font-weight: 400;
    display: block;
    margin-bottom: 0.5rem;
    color: #3c3c3c;
}
.spec td{font-size:1rem;}



/* ========================================
   固定ページスタイル
   ======================================== */

/* メインコンテンツエリアの最小高さを設定 */
#content,
.site-content {
    min-height: calc(100vh - 80px);
}

.site-main {
    padding: 2rem 1rem;
    min-height: 60vh;
}

article {
    max-width: 1200px;
    margin: 0 auto;
}

.page-thumbnail {
    margin-bottom: 2rem;
}

.page-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.entry-header {
    margin-bottom: 2rem;
    text-align: center;
}

.entry-content {
    line-height: 1.8;
    color: #3c3c3c;
}

.entry-content > * {
    margin-bottom: 1.5rem;
}

/* Snow Monkey Blocks対応 */
.smb-btn,
.entry-content .smb-btn-wrapper,
.entry-content .wp-block-snow-monkey-blocks-btn-box,
.entry-content .wp-block-snow-monkey-blocks-btn {
    max-width: 100%;
    overflow: hidden;
}

.entry-content .smb-btn,
.entry-content .wp-block-snow-monkey-blocks-btn__lavel {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
}

/* すべてのブロック要素が画面幅を超えないように */
.entry-content > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

@media screen and (max-width: 768px) {
    /* ヘッダー */
    .custom-header-container {
        padding: 0 15px;
        justify-content: space-between;
    }
    
    /* ロゴを非表示 */
    .custom-header-logo {
        display: none;
    }
    
    .custom-header-nav {
        margin-right: 0;
        margin-left: 0;
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }

    /* ハンバーガーメニューの線を白に */
    .custom-hamburger span {
        background-color: #fff;
    }
    
    /* BOOK NOWボタンを非表示 */
    .custom-book-btn {
        display: none;
    }
    
    /* ハンバーガーメニューを左側に */
    .custom-hamburger {
        order: -1;
        width: 40px;
        height: 40px;
    }
    
    /* 言語ボタンのサイズとスタイル調整 */
    .custom-lang-selector {
        order: 1;
    }
    
    .custom-lang-btn {
        width: auto;
        height: 40px;
        padding: 0 15px;
        border: 2px solid #fff;
        background-color: transparent;
    }
    
    /* 地球儀アイコンを非表示 */
    .custom-lang-btn .custom-lang-icon {
        display: none;
    }
    
    /* 言語表記を表示 */
    .custom-lang-btn::after {
        content: "EN";
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }
    
    .custom-header-logo a {
        height: 50px;
    }
    
    /* フッター */
    .custom-footer-main {
        padding: 30px 5% 30px;
    }

    .custom-footer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .custom-footer-info {
        order: 2;
        align-items: center;
        text-align: center;
    }

    .custom-footer-contact {
        text-align: center;
    }

    .custom-footer-social {
        justify-content: center;
    }

    .custom-footer-links {
        order: 1;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }

    .custom-footer-column a {
        font-size: 13px;
    }

    .custom-footer-column li {
        margin-bottom: 12px;
    }

    /* スマホでは追加メニューを表示 */
    .custom-footer-extra {
        display: block;
    }
    
    /* スマホではPC版追加メニューを非表示 */
    .custom-footer-bottom {
        display: none !important;
    }
    
    /* 固定ページ */
    .entry-title {
        font-size: 1.2rem;
    }
}

/* 769px以上（PC・タブレット）では追加メニューを表示 */
@media screen and (min-width: 769px) {
    .custom-footer-bottom {
        display: block;
    }
}

@media screen and (max-width: 480px) {
    .custom-header {
        height: 70px;
    }
    
    body {
        padding-top: 70px;
    }
    
    .custom-mobile-menu {
        top: 70px;
        height: calc(100vh - 70px);
    }
}
/* privacy_policy,cookiestatementの3ヶ国語 */
.is-sc-font-page .entry-content,
.is-sc-font-page .entry-content td,
.is-sc-font-page .entry-content th,
.is-sc-font-page .entry-content p,
.is-sc-font-page .entry-content li,
.is-sc-font-page .entry-content span {
    font-family: "Noto Sans SC", "Noto Sans TC", "Noto Sans KR", sans-serif;
}

/* style-en.css に追加 */
.entry-content .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.entry-content .wp-block-column {
    flex: 1;
    min-width: 0;
}
.entry-content ul,
.entry-content ol {
    list-style: revert;
    padding-left: 1.5em;
}

/* ブロックエディタコンテンツ内のフォントサイズをリセット */
.entry-content {
    font-size: 1.3rem; /* 62.5%基準で16px相当 */
    line-height: 1.8;
}

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th {
    font-size: 1.6rem;
}

.entry-content h1 { font-size: 3.2rem; }
.entry-content h2 { font-size: 2.8rem; }
.entry-content h3 { font-size: 2.4rem; }
.entry-content h4 { font-size: 2.0rem; }
.entry-content h5 { font-size: 1.8rem; }
.entry-content h6 { font-size: 1.6rem; }

/* ========================================
   Gutenbergテーブルブロック スタイル復元
   （i18n.cssのリセットで消えた分を戻す）
   ======================================== */

.entry-content .wp-block-table {
    width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: auto; /* スマホで横スクロール可能に */
}

.entry-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.entry-content .wp-block-table td,
.entry-content .wp-block-table th {
    padding: 0.5em 1em;
    border: 1px solid #000;
    word-break: break-word;
    font-size: 1.3rem;
    line-height: 1.6;
    vertical-align: middle;
}

.entry-content .wp-block-table th {
    font-weight: 700;
    text-align: left;
}

/* スタイルなし（デフォルト） */
.entry-content .wp-block-table.is-style-regular td,
.entry-content .wp-block-table.is-style-regular th {
    border: 1px solid #000;
}

/* ストライプ（縞模様） */
.entry-content .wp-block-table.is-style-stripes {
    border-bottom: 1px solid #000;
}

.entry-content .wp-block-table.is-style-stripes td,
.entry-content .wp-block-table.is-style-stripes th {
    border: none;
    border-top: 1px solid #000;
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

/* キャプション */
.entry-content .wp-block-table figcaption {
    font-size: 1.3rem;
    color: #555;
    text-align: center;
    margin-top: 0.5em;
}

/* ========================================
   固定ヘッダー分のオフセット
   ======================================== */

#contents {
    padding-top: 12rem; /* l-headerの高さと合わせる */
}

@media screen and (max-width: 768px) {
    #contents {
        padding-top: 70px; /* スマホヘッダーの高さに合わせる */
    }
}

/* ========================================
   Gutenbergボタンブロック スタイル復元
   ======================================== */

/* ボタンラッパー */
.entry-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: center;
}

/* ボタン単体ラッパー */
.entry-content .wp-block-button {
    display: inline-block;
}

/* ボタン本体 */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
    display: inline-block;
    padding: 0.7em 1.6em;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 2px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover {
    opacity: 0.75;
}

/* アウトラインスタイル */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-element-button {
    background-color: transparent;
    color: #000;
    border-color: #000;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-outline .wp-element-button:hover {
    background-color: #000;
    color: #fff;
}

/* 角丸なしスタイル */
.entry-content .wp-block-button.is-style-squared .wp-block-button__link,
.entry-content .wp-block-button.is-style-squared .wp-element-button {
    border-radius: 0;
}

/* 横幅いっぱい */
.entry-content .wp-block-button.wp-block-button__width-25 { width: 25%; }
.entry-content .wp-block-button.wp-block-button__width-50 { width: 50%; }
.entry-content .wp-block-button.wp-block-button__width-75 { width: 75%; }
.entry-content .wp-block-button.wp-block-button__width-100 { width: 100%; }

.entry-content .wp-block-button.wp-block-button__width-25 .wp-block-button__link,
.entry-content .wp-block-button.wp-block-button__width-50 .wp-block-button__link,
.entry-content .wp-block-button.wp-block-button__width-75 .wp-block-button__link,
.entry-content .wp-block-button.wp-block-button__width-100 .wp-block-button__link {
    width: 100%;
    text-align: center;
}

/* ========================================
   Gutenberg テキスト・ブロック 中央寄せ復元(CSS競合のため)
   ======================================== */

.entry-content .has-text-align-center,
.entry-content .aligncenter {
    text-align: center;
}

.entry-content .has-text-align-left,
.entry-content .alignleft {
    text-align: left;
}

.entry-content .has-text-align-right,
.entry-content .alignright {
    text-align: right;
}

/* ブロック自体の中央配置（画像・ボタン等） */
.entry-content figure.aligncenter,
.entry-content .wp-block-image.aligncenter,
.entry-content .wp-block-buttons.aligncenter {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Snow Monkey Blocks ボタン スタイル復元(CSS競合のため)
   （i18n.cssのリセットで消えた背景・余白を戻す）
   ======================================== */

.entry-content .smb-btn-wrapper {
    display: flex;
    justify-content: center;
}

.entry-content .smb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8em 2em;
    background-color: var(--smb-btn--background-color, #000);
    color: var(--smb-btn--color, #fff) !important;
    border: 2px solid var(--smb-btn--border-color, transparent);
    border-radius: var(--smb-btn--border-radius, 4px);
    font-size: var(--smb-btn--font-size, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.3s;
    min-width: 160px;
}

.entry-content .smb-btn:hover {
    opacity: 0.75;
    text-decoration: none;
}

/* 全幅ボタン */
.entry-content .smb-btn--full {
    width: 100%;
    display: flex;
}

/* アイコン付きボタン */
.entry-content .smb-btn .smb-btn__label {
    display: inline-block;
}
/* ========================================
   Snow Monkey Blocks ボタンボックス スタイル復元(CSS競合のため)
   ======================================== */

.entry-content .smb-btn-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2em;
    border: 1px solid var(--smb-btn-box--border-color, #ccc);
    background-color: var(--smb-btn-box--background-color, #fff);
    box-sizing: border-box;
    width: 100%;
}

/* ボックス内テキスト */
.entry-content .smb-btn-box__body {
    margin-bottom: 1.5em;
    font-size: 1.6rem;
    line-height: 2rem!important;
}

/* ボックス内ボタンラッパー */
.entry-content .smb-btn-box__btn-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.smb-btn-box__lede {
    font-size: 1.6rem !important;
    line-height: 1.8 !important;
}

/* ========================================
   Gutenberg 区切り線ブロック スタイル復元(CSS競合のため)
   ======================================== */

.entry-content hr,
.entry-content .wp-block-separator {
    border: none;
    border-top: 1px solid #000;
    margin: 1em auto;
    width: 100px; /* ← 100%を100pxに変更 */
    box-sizing: border-box;
}

/* スタイル：幅広 */
.entry-content .wp-block-separator.is-style-wide {
    width: 100%;
}

/* スタイル：ドット */
.entry-content .wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    line-height: 1;
    height: auto;
}

.entry-content .wp-block-separator.is-style-dots::before {
    content: "···";
    font-size: 2rem;
    letter-spacing: 1em;
    color: #000;
}

/* ========================================
   Gutenberg カラムブロック スマホ縦並び(CSS競合のため)
   ======================================== */

@media screen and (max-width: 768px) {
    .entry-content .wp-block-columns {
        flex-direction: column;
    }

    .entry-content .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    #contents {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}
th{
white-space:nowrap;}

/* ========================================
  ヘッダーフッター(CSS競合のため)
   ======================================== */

.l-footer{font-size:14px; font-weight:500;}
.l-navi__inner{font-size:14px; font-weight:500;}
.lang-switch__item a{justify-content: center; font-size:14px;}

/* ========================================
   クッキー実装用CSS
   ======================================== */

 /* クッキーバナー */
        #cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #2c2c2c;
            color: white;
            padding: 20px;
            box-shadow: 0 -2px 15px rgba(0,0,0,0.3);
            z-index: 10000;
            display: none;
        }

        #cookie-banner.show {
            display: block;
        }

        .banner-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .banner-text {
            flex: 1;
            min-width: 280px;
        }

        .banner-text h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .banner-text p {
            font-size: 14px;
            line-height: 1.5;
            opacity: 0.95;
        }

        .banner-text a {
            color: #90caf9;
            text-decoration: underline;
        }

        .banner-text a:hover {
            color: #64b5f6;
        }

        .banner-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        button {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .btn-accept-all {
            background: #4CAF50;
            color: white;
        }

        .btn-accept-all:hover {
            background: #45a049;
            transform: translateY(-1px);
        }

        .btn-settings {
            background: transparent;
            color: white;
            border: 2px solid white;
        }

        .btn-settings:hover {
            background: rgba(255,255,255,0.15);
        }

        .btn-reject-all {
            background: #666;
            color: white;
        }

        .btn-reject-all:hover {
            background: #555;
        }

        /* モーダル */
        #cookie-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.75);
            z-index: 20000;
            overflow-y: auto;
            padding: 20px;
        }

        #cookie-modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            max-width: 650px;
            width: 100%;
            padding: 35px;
            border-radius: 12px;
            position: relative;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-header {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e0e0e0;
        }

        .modal-header h2 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .modal-header p {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 32px;
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            padding: 0;
            width: 35px;
            height: 35px;
            line-height: 1;
        }

        .close-btn:hover {
            color: #333;
        }

        .cookie-category {
            margin: 20px 0;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #ddd;
        }

        .cookie-category.necessary {
            border-left-color: #2196F3;
            background: #e3f2fd;
        }

        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .category-header h3 {
            font-size: 17px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .category-badge {
            font-size: 11px;
            padding: 3px 8px;
            background: #2196F3;
            color: white;
            border-radius: 12px;
            font-weight: 600;
        }

        .toggle-switch {
            position: relative;
            width: 54px;
            height: 28px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 28px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4CAF50;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        input:disabled + .slider {
            background-color: #2196F3;
            cursor: not-allowed;
        }

        .category-description {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .category-examples {
            font-size: 13px;
            color: #888;
            font-style: italic;
        }

        .modal-footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            /* fixed-menu（4.2rem = 約42px）の上に積み上げる */
            #cookie-banner {
                bottom: 4.2rem;
            }

            .banner-content {
                flex-direction: column;
                align-items: stretch;
            }

            .banner-buttons {
                flex-direction: column;
            }

            /* Cookie警告のボタンのみ横幅100% */
			.cookie-notice button,
			.gdpr-notice button,
			#cookie-notice button,
			.cookie-consent button {
				width: 100%;
			}

            .modal-content {
                padding: 25px;
                margin: 10px;
            }

            .modal-footer {
                flex-direction: column-reverse;
            }

            .modal-footer button {
                width: 100%;
            }
        }