@charset "UTF-8";

/* =========================================================
   contact.css - お問い合わせページ専用スタイル
   contact.php / thanks.php で共用。

   クラス設計は ropeman-inc に準拠：
     .contact-direct__*        お急ぎの方はこちら（電話カード）
     .contact-form-section__*  メールでのお問い合わせ（見出し・リード）
     .form-group / .form-label / .form-input …  フォーム部品
     .privacy-policy-accordion__*  プライバシーポリシー開閉
     .form-success-popup__*    送信完了ポップアップ（thanks.php）

   配色は Sato のテーマ（水色ベース＋オレンジCTA）に置換。
   ご高齢の方が多いターゲットのため、文字・タップ領域は大きめに取る。
   ========================================================= */

/* =========================================================
   見出し画像（tel-head.png / mail-head.png）
   ①お急ぎの方・②メールとも faq.php と同じ
   .section-title--copy.section-title--heading-img 構造を使う。
   ※ サブページの .section 下ではトップ用の中央寄せ指定（index.css）が
     効かないので、ここで中央寄せ・下余白を明示する。 */
.contact-direct .section-title,
.contact-form-section .section-title {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 576px) {

    .contact-direct .section-title,
    .contact-form-section .section-title {
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 768px) {

    .contact-direct .section-title,
    .contact-form-section .section-title {
        margin-bottom: 3rem;
    }
}

.contact-direct .section-title__heading-img,
.contact-form-section .section-title__heading-img {
    margin-inline: auto;
}

/* =========================================================
   ①お急ぎの方はこちら
   ※ 背景は body の共通背景に任せる（旧：--color-bg-light の地色は指定しない）。
   ========================================================= */

.contact-direct__inner {
    max-width: var(--section-width-narrow);
}

.contact-direct__header {
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.contact-direct__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .contact-direct__title {
        font-size: 1.8rem;
    }
}

.contact-direct__lead {
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

/* カードを囲む緑背景wrapper（青緑地＋ゴールド枠線）。
   ※ 中の電話カード（.contact-direct__card）は白背景に戻す（下方）。
   最大幅：ベース 576px（--section-width-sm）
         → 576px以上 640px（--section-width-sm-plus）
         → 1024px以上 880px（--section-width-narrow：横並びになる幅で広げる）。 */
.contact-direct__box {
    position: relative;
    max-width: var(--section-width-sm);
    margin-inline: auto;
    padding: 1.5rem;
    background-color: var(--color-teal-deep);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
}

@media (min-width: 576px) {
    .contact-direct__box {
        max-width: var(--section-width-sm-plus);
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .contact-direct__box {
        max-width: var(--section-width-narrow);
    }
}

/* カード置き場。カードが1枚のうちは中央寄せ、
   後日LINE等が増えたら 768px以上で自動的に横並びになる。
   ※ ベース（〜399px）は幅を絞って中央配置する。 */
.contact-direct__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 256px;
    margin-inline: auto;
}

@media (min-width: 400px) {
    .contact-direct__grid {
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .contact-direct__grid {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
    }
}

/* 電話カード。背景・枠線・装飾パターン・ホバーを
   共通お問い合わせのCTAカード（.contact-cta__*-block）と揃える。
   ※ ベース（〜474px）：アイコンは __head の中でラベルの左に並ぶ。
     475px以上：__head を解体し、アイコンをカード左・本文を右の横並びにする。
   ※ 装飾パターン（bg-deco.png）は ::before に分離して地の上に敷く。
     position:relative は ::before の基準。 */
.contact-direct__card {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 450px;
    padding: 1.5rem;
    background-color: var(--color-cream-white);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* カードの装飾パターン（bg-deco.png）。クリーム白の地の上、中身の下に敷く。
   ※ タイルの大きさは --cta-deco-size、濃さは --cta-deco-opacity（共通CTAと同値）。
   ※ 親の角丸（--radius-lg）を継承させる（inherit）。
   ※ クリックを吸わない（pointer-events:none）。 */
.contact-direct__card::before {
    content: "";
    --cta-deco-size: 72px;
    --cta-deco-opacity: 0.175;

    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-deco.png');
    background-repeat: repeat;
    background-size: var(--cta-deco-size);
    opacity: var(--cta-deco-opacity);
    border-radius: inherit;
    pointer-events: none;
}

/* 中身（アイコン・本文）はパターンより前面に出す。 */
.contact-direct__card>* {
    position: relative;
    z-index: 1;
}

/* ラベル行（アイコン＋「固定電話」「携帯電話」）。
   ベース（〜474px）：アイコンをラベルの左に横並びで置く。 */
.contact-direct__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
}

/* 400px以上：アイコン左・本文右の横並び（大アイコン表示）。 */
@media (min-width: 400px) {
    .contact-direct__card {
        align-items: center;
        gap: 1rem;
    }

    .contact-direct__head {
        margin-bottom: 0;
    }

    .contact-direct__card .contact-direct__icon--lg {
        display: grid;
    }

    .contact-direct__card .contact-direct__icon--sm {
        display: none;
    }
}

@media (min-width: 576px) {
    .contact-direct__card {
        padding: 1.75rem 2rem;
    }
}

@media (min-width: 1024px) {
    .contact-direct__card {
        flex: 1 1 0;
    }
}

/* hoverの浮き上がりは「カード全体がリンク」のものだけ（＝固定電話カード）。
   携帯カードは div なので反応させない（押せると誤認させないため）。 */
a.contact-direct__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* アイコン（丸背景）。共通の見た目。 */
.contact-direct__icon {
    flex-shrink: 0;
    place-items: center;
    color: var(--color-white);
    background-color: var(--color-teal-deep);
    border-radius: 50%;
    transition: background-color var(--transition);
}

/* 大（カード左）。ベースでは隠し、400px以上で表示。 */
.contact-direct__icon--lg {
    display: none;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.3rem;
}

/* 小（ラベル行内）。ベースで表示し、400px以上で隠す。 */
.contact-direct__icon--sm {
    display: grid;
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}

a.contact-direct__card:hover .contact-direct__icon {
    background-color: var(--color-teal-deep-hover);
}

.contact-direct__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.contact-direct__label {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-teal-deep);
}

/* 電話番号は Poppins より判別性の高い丸ゴシックで大きめに */
.contact-direct__main {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--color-teal-deep);
}

@media (min-width: 576px) {
    .contact-direct__main {
        font-size: 1.65rem;
    }
}

.contact-direct__sub {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-teal-deep);
}

/* --- 携帯電話カード（番号が2つ） ---
   カード自体はリンクではなく、番号ごとに tel: リンクを張る。
   ご高齢の方でも押しやすいよう、番号自体に余白を持たせてタップ領域を広く取る。 */
.contact-direct__nums {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-block: 0.25rem;
}

.contact-direct__main--link {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    margin-left: -0.6rem;
    color: var(--color-teal-deep);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition);
}

.contact-direct__main--link:hover {
    color: var(--color-teal-deep-hover);
}

/* =========================================================
   ②メールでのお問い合わせ（見出し・リード）
   ========================================================= */
/* 最大幅は .contact-direct__box と揃える：
   ベース 576px（--section-width-sm）
   → 576px以上 640px（--section-width-sm-plus）
   → 1024px以上 880px（--section-width-narrow）。 */
.contact-form-section__inner {
    max-width: var(--section-width-sm);
}

@media (min-width: 576px) {
    .contact-form-section__inner {
        max-width: var(--section-width-sm-plus);
    }
}

@media (min-width: 1024px) {
    .contact-form-section__inner {
        max-width: var(--section-width-narrow);
    }
}

.contact-form-section__header {
    text-align: center;
    margin-bottom: var(--spacing-xs);
}

.contact-form-section__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-title);
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .contact-form-section__title {
        font-size: 1.8rem;
    }
}

.contact-form-section__lead {
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

/* =========================================================
   フォーム部品
   ========================================================= */
/* フォーム全体を囲うボックス：青緑地＋ゴールド枠線。
   ※ 地が濃いので、中のラベル・ラジオ文字は白系に上書きする（下方）。
     入力欄自体は白地のままなので値は読みやすい。
   ※ 装飾パターン（bg-deco.png）は ::before に分離して地の上に敷く
     （共通お問い合わせの .contact-cta__*-block と同じ手法）。 */
.contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: 1.75rem 1.25rem;
    background-color: var(--color-teal-deep);
    border: 3px solid var(--color-gold-deep);
    border-radius: var(--radius-lg);
}

@media (min-width: 576px) {
    .contact-form {
        padding: 2.5rem 2rem;
    }
}

/* フォームの装飾パターン（bg-deco.png）。青緑地の上、中身の下に敷く。
   ※ タイルの大きさは --cta-deco-size、濃さは --cta-deco-opacity で調整する
     （共通お問い合わせのカードと同じ変数名・同じ値）。
   ※ 親の角丸（--radius-lg）を継承させる（inherit）。
   ※ クリックを吸わない（pointer-events:none）。 */
.contact-form::before {
    content: "";
    --cta-deco-size: 72px;
    --cta-deco-opacity: 0.175;

    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/bg-deco.png');
    background-repeat: repeat;
    background-size: var(--cta-deco-size);
    opacity: var(--cta-deco-opacity);
    border-radius: inherit;
    pointer-events: none;
}

/* 中身（各 form-group 等）はパターンより前面に出す。 */
.contact-form>* {
    position: relative;
    z-index: 1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ラベル行（必須/任意バッジ＋ラベル＋注記） */
.form-label-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-title);
}

/* 青緑地のフォーム内ではラベル・注記・ラジオ文字を白系にする。 */
.contact-form .form-label {
    color: var(--color-white);
}

.contact-form .form-label__note {
    color: rgba(255, 255, 255, 0.85);
}

.contact-form .form-radio-text {
    color: #4a4a4a;
}

.form-label__note {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.form-label__badge {
    flex-shrink: 0;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-white);
    border-radius: var(--radius-xs);
}

.form-label__badge--required {
    background-color: var(--color-accent);
}

.form-label__badge--optional {
    background-color: var(--color-secondary);
}

/* --- 入力欄 --- */
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #b5b5b5;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-gold-deep);
    box-shadow: 0 0 0 3px rgba(182, 169, 123, 0.3);
}

.form-textarea {
    min-height: 12rem;
    resize: vertical;
}

/* --- ラジオ（お問い合わせ種類） --- */
.form-radio-group {
    display: flex;
    flex-direction: column;
    /* ベース（縦並び）でも各カプセルを中身の長さ分の幅にする。
       ※ align-items の初期値 stretch だとラベルが親幅いっぱいに伸びるため、
         flex-start で中身幅に収める。 */
    align-items: flex-start;
    gap: 0.5rem;
}

@media (min-width: 576px) {
    .form-radio-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

.form-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}

.form-radio-label:hover {
    border-color: var(--color-gold-deep);
}

/* 実体のinputは隠し、.form-radio-custom で見た目を作る */
.form-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-radio-custom {
    flex-shrink: 0;
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    transition: border-color var(--transition);
}

.form-radio-custom::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--color-teal-deep);
    border-radius: 50%;
    transform: scale(0);
    transition: transform var(--transition);
}

.form-radio:checked+.form-radio-custom {
    border-color: var(--color-teal-deep);
}

.form-radio:checked+.form-radio-custom::after {
    transform: scale(1);
}

/* 選択中のラベル全体を強調 */
.form-radio-label:has(.form-radio:checked) {
    border-color: var(--color-gold-deep);
    background-color: var(--color-bg-light);
}

/* キーボード操作時のフォーカス可視化 */
.form-radio:focus-visible+.form-radio-custom {
    box-shadow: 0 0 0 3px rgba(96, 187, 222, 0.35);
}

.form-radio-text {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #4a4a4a;
}

/* --- エラー表示（JSで .is-error を付与し .form-error を差し込む） --- */
/* 色は赤ではなくオレンジ系で統一する。
   ただし --color-accent そのものだと「必須」バッジ・送信ボタンと同色になり
   意味の区別が消えるため、明度・彩度を上げた #FFA23A を使う。
   ※ .form-error は青緑（--color-teal-deep）の地の上に出るため、
     濃いオレンジだと沈む。文字は明るめ、入力欄の枠線は白地の上に出るので
     少し濃い #E08A1E で締める。 */
.form-group.is-error .form-input,
.form-group.is-error .form-textarea {
    border-color: #E08A1E;
    background-color: #FFF6EA;
}

.form-group.is-error .form-radio-label {
    border-color: #E08A1E;
}

.form-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFA23A;
}

/* --- honeypot（人には見せない） --- */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- 送信ボタン --- */
.form-submit {
    text-align: center;
    margin-top: var(--spacing-sm);
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    padding: 1.1rem 2rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: transform var(--transition), background-color var(--transition);
}

.btn-submit:hover {
    transform: translateY(-2px);
    background-color: #D8871C;
}

.btn-submit:active {
    transform: scale(0.98);
}

/* =========================================================
   プライバシーポリシー（アコーディオン）
   ========================================================= */
.privacy-policy-accordion {
    margin-top: 1.5rem;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.privacy-policy-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    text-align: left;
}

.privacy-policy-accordion__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-teal-deep);
}

/* ＋ / − を CSS で描画（開いたら横棒だけになる） */
.privacy-policy-accordion__icon {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--color-white);
    border-radius: 50%;
}

.privacy-policy-accordion__icon::before,
.privacy-policy-accordion__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    background-color: var(--color-teal-deep);
    border-radius: var(--radius-pill);
    transition: transform var(--transition);
}

.privacy-policy-accordion__icon::before {
    width: 0.75rem;
    height: 2px;
}

.privacy-policy-accordion__icon::after {
    width: 2px;
    height: 0.75rem;
}

.privacy-policy-accordion__header[aria-expanded="true"] .privacy-policy-accordion__icon::after {
    transform: scaleY(0);
}

/* 開閉アニメーション（r-doboku 方式）。
   hidden 属性の display:none を打ち消し、max-height のトランジションで
   スルッと開く。長文は開いたときに内部スクロールさせる。
   ※ JS（contact.js）は hidden 属性を付け外しするだけなので変更不要。
   ※ パディングは __content ではなく __text 側に持たせる
     （__content に余白があると閉状態の高さが 0 にならず漏れるため）。 */
.privacy-policy-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* hidden 属性が付いても display:none にせず、高さ 0 で潰す。 */
.privacy-policy-accordion__content[hidden] {
    display: block;
    max-height: 0;
}

/* 開いたとき：固定の最大高まで開き、長文は内部スクロール。 */
.privacy-policy-accordion__content:not([hidden]) {
    max-height: 280px;
    overflow-y: auto;
}

.privacy-policy-accordion__text {
    padding: 0 1.25rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--color-text);
}

.privacy-policy-accordion__text strong {
    color: var(--color-accent);
}

/* =========================================================
   送信完了ポップアップ（thanks.php）
   ========================================================= */
.form-success-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.form-success-popup.is-active {
    opacity: 1;
    visibility: visible;
}

.form-success-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.form-success-popup__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 2.5rem 1.75rem 2rem;
    text-align: center;
    background-color: var(--color-white);
    /* 他の白ボックス（.works-section__title 等）と揃えて --radius-lg。
       飾り枠は inset 10px の内側にあるので、角丸で切られることはない。 */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(1rem);
    transition: transform var(--transition);
}

/* 送信完了ポップの飾り枠（8パーツ）
   works-card / faq-card と同一の frame.svg 切り出し方式。
   border-image を使わないのは iOS Safari のチラつき回避のため。 */
.form-success-popup__frame {
    --frame-inset: 10px;
    --frame-corner: 35px;
    --frame-line: 1.05px;
    --frame-line-color: #8f9e9d;
    --frame-band: 6px;
    --frame-line-pos: -2px;

    position: absolute;
    inset: var(--frame-inset);
    z-index: 2;
    pointer-events: none;
}

.form-success-popup__frame span {
    position: absolute;
    background-repeat: no-repeat;
}

/* 四集（固定サイズ）― frame.svg を切り出し */
.form-success-popup__frame span.c {
    width: var(--frame-corner);
    height: var(--frame-corner);
    background-image: url("../images/frame.svg");
    background-size:
        calc(180px * (var(--frame-corner) / 35))
        calc(126px * (var(--frame-corner) / 34));
}

.form-success-popup__frame span.tl { top: 0; left: 0; background-position: left top; }
.form-success-popup__frame span.tr { top: 0; right: 0; background-position: right top; }
.form-success-popup__frame span.bl { bottom: 0; left: 0; background-position: left bottom; }
.form-success-popup__frame span.br { bottom: 0; right: 0; background-position: right bottom; }

/* 四襺（伸縮）― linear-gradient で線を描く */
.form-success-popup__frame span.et,
.form-success-popup__frame span.eb {
    left: var(--frame-corner);
    width: calc(100% - var(--frame-corner) * 2);
    height: var(--frame-band);
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.form-success-popup__frame span.et { top: calc(var(--frame-line-pos) + 0.59px); }
.form-success-popup__frame span.eb { bottom: calc(var(--frame-line-pos) + 0.59px); }

.form-success-popup__frame span.el,
.form-success-popup__frame span.er {
    top: var(--frame-corner);
    height: calc(100% - var(--frame-corner) * 2);
    width: var(--frame-band);
    background-image: linear-gradient(
        to right,
        transparent calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% - var(--frame-line) / 2),
        var(--frame-line-color) calc(50% + var(--frame-line) / 2),
        transparent calc(50% + var(--frame-line) / 2)
    );
}

.form-success-popup__frame span.el { left: var(--frame-line-pos); }
.form-success-popup__frame span.er { right: var(--frame-line-pos); }

.form-success-popup.is-active .form-success-popup__content {
    transform: translateY(0);
}

.form-success-popup__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    font-size: 1.6rem;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 50%;
}

.form-success-popup__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-title);
    margin-bottom: 0.75rem;
}

.form-success-popup__message {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 1.75rem;
}

.form-success-popup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;
    padding: 0.9rem 2rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition);
}

.form-success-popup__button:hover {
    background-color: #4FAECF;
}