/**
 * assets/banner.css
 *
 * SMS確認バナーのスタイル
 *
 * パターン①②：警告バナー（黄色系）
 * パターン③　：制限中バナー（赤系）
 */

/* -------------------------------------------------------
   共通ベース
------------------------------------------------------- */

.sms-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 20px;
    border-radius: 6px;
    border-left: 5px solid;
    font-size: 14px;
    line-height: 1.7;
    box-sizing: border-box;
    width: 100%;
}

.sms-banner__icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.sms-banner__body {
    flex: 1;
}

.sms-banner__title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 0;
}

.sms-banner__text {
    margin: 0 0 0 0;
    padding: 0;
    color: inherit;
}

.sms-banner__note {
    margin: 16px 0 0;
    padding: 0;
    font-size: 12px;
    opacity: 0.8;
}

.sms-banner__timer {
    margin: 12px 0 0;
    padding: 0;
    font-size: 13px;
}

.sms-banner__timer strong {
    font-size: 15px;
}

/* -------------------------------------------------------
   パターン①②：警告（黄色系）
------------------------------------------------------- */

.sms-banner--warning {
    background-color: #fffbea;
    border-color: #f0b429;
    color: #5c4a00;
}

.sms-banner--warning .sms-banner__title {
    color: #8a6200;
}

/* -------------------------------------------------------
   パターン③：制限中（赤系）
------------------------------------------------------- */

.sms-banner--restricted {
    background-color: #fff5f5;
    border-color: #e53e3e;
    color: #5c1a1a;
}

.sms-banner--restricted .sms-banner__title {
    color: #c53030;
}

/* -------------------------------------------------------
   Cocoonテーマのスタイルリセット（バナー内に限定）
------------------------------------------------------- */

.sms-banner a,
.sms-banner button {
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

.sms-banner a::before,
.sms-banner a::after,
.sms-banner button::before,
.sms-banner button::after {
    display: none !important;
}

/* -------------------------------------------------------
   ボタン共通
------------------------------------------------------- */

.sms-banner__btn {
    display: inline-block;
    padding: 10px 20px !important;
    margin: 0 !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border: none !important;
    line-height: 1.4 !important;
    box-sizing: border-box;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    /* Cocoonテーマのボタンスタイルをリセット */
    letter-spacing: normal;
    text-align: center;
    vertical-align: middle;
}

/* SMS送信ボタン */
.sms-banner__btn--send {
    background-color: #3182ce;
    color: #ffffff;
}

/* Androidボタン（緑系で区別） */
.sms-banner__btn--android {
    background-color: #38a169;
    color: #ffffff;
}

.sms-banner__btn--android:hover {
    background-color: #2f855a;
    color: #ffffff;
    text-decoration: none;
}

/* ボタングループ（iOS・Androidを縦並び） */
.sms-banner__btn-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    line-height: 1 !important;
}

.sms-banner .sms-banner__btn-group {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.sms-banner__btn-group .sms-banner__btn {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.sms-banner__btn--send:hover {
    background-color: #2b6cb0;
    color: #ffffff;
    text-decoration: none;
}

/* SMS送信完了ボタン（非活性） */
.sms-banner__btn--complete {
    background-color: #a0aec0;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

/* SMS送信完了ボタン（活性化後） */
.sms-banner__btn--complete.sms-banner__btn--active {
    background-color: #38a169;
    color: #ffffff;
    cursor: pointer;
    opacity: 1;
}

.sms-banner__btn--complete.sms-banner__btn--active:hover {
    background-color: #2f855a;
}

/* ボタンが disabled のまま hover されても変化しない */
.sms-banner__btn--complete:disabled:hover {
    background-color: #a0aec0;
    cursor: not-allowed;
}

/* -------------------------------------------------------
   2ステップ方式（パターン③）
------------------------------------------------------- */

.sms-banner__steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.sms-banner__step {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sms-banner__step-num {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.4;
}

.sms-banner__step-label {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0 !important;
}

/* 間もなく制限：赤文字 */
.sms-banner__timer--alert {
    color: #e53e3e;
    font-size: 14px;
}

/* -------------------------------------------------------
   レスポンシブ（スマートフォン）
------------------------------------------------------- */

@media screen and (max-width: 600px) {
    .sms-banner {
        flex-direction: column;
        gap: 8px;
        padding: 16px;
    }

    .sms-banner__icon {
        margin-top: 0;
    }

    .sms-banner__title {
        font-size: 15px;
    }

    .sms-banner__btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 20px !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
    }
}