/* ===================================================
   ファイル名: dialog.css
   作成者: 北川 淳也
   概要: MamoruNで使用するダイアログのデザインを定義する
=================================================== */



/* ===========================
   基本
=========================== */

* {

    box-sizing: border-box;

}


/* ===========================
   オーバーレイ
=========================== */


.dialog-overlay {


    position: fixed;


    inset: 0;


    display: none;


    justify-content: center;

    align-items: center;


    padding: 20px;


    background:

        rgba(45, 62, 107, .35);


    backdrop-filter:

        blur(8px);


    z-index: 9999;


}



.dialog-overlay.show {


    display: flex;


}



/* ===========================
   ダイアログ本体
=========================== */


.dialog {


    width: 100%;


    max-width: 440px;


    max-height: 90vh;


    background: white;


    border-radius: 30px;


    overflow: hidden;


    box-shadow:


        0 25px 60px rgba(0, 0, 0, .18);



    animation:

        dialogOpen .28s ease;



}



/* ===========================
   ヘッダー
=========================== */


.dialog-header {


    display: flex;


    flex-direction: column;


    align-items: center;


    justify-content: center;


    padding: 28px 20px 22px;



    background:


        linear-gradient(135deg,

            #6ecbff,

            #4b8df8);


    color: white;



}



.dialog-header h2 {


    margin: 0;


    font-size: 24px;


    font-weight: 800;


    letter-spacing: 1px;



}

/* ===========================
   アイコン
=========================== */


.dialog-icon {


    width: 70px;

    height: 70px;


    display: flex;

    align-items: center;

    justify-content: center;


    margin-bottom: 12px;


    border-radius: 50%;


    background:

        rgba(255, 255, 255, .25);


    font-size: 36px;


}



/* ===========================
   メッセージ
=========================== */


.dialog-body {


    padding: 28px 30px;



}



.dialog-body p {


    margin: 0;


    text-align: center;


    font-size: 16px;


    line-height: 1.9;


    color: #4b5563;


    white-space: pre-wrap;


    word-break: break-word;



}



/* ===========================
   フッター
=========================== */


.dialog-footer {


    display: flex;


    justify-content: center;


    align-items: center;


    gap: 14px;


    flex-wrap: wrap;


    padding: 0 25px 28px;



}



/* ===========================
   ボタン
=========================== */


.dialog-button {


    min-width: 150px;


    height: 52px;


    padding: 0 26px;


    border: none;


    border-radius: 999px;


    background:


        linear-gradient(135deg,

            #67c8ff,

            #4b8df8);


    color: white;


    font-size: 16px;


    font-weight: 800;


    cursor: pointer;



    box-shadow:


        0 6px 16px rgba(75, 141, 248, .25);



    transition: .25s;



}



.dialog-button:hover {


    transform: translateY(-2px);


    box-shadow:


        0 10px 24px rgba(75, 141, 248, .35);



}



.dialog-button:active {


    transform: scale(.97);


}



/* ===========================
   成功
=========================== */


.dialog-header.success {


    background:


        linear-gradient(135deg,

            #67c8ff,

            #4b8df8);


}



.success-button {


    background:


        linear-gradient(135deg,

            #59b7ff,

            #70d2ff);


    box-shadow:


        0 8px 20px rgba(89, 183, 255, .30);


}



/* ===========================
   エラー
=========================== */


.dialog-header.error {


    background:


        linear-gradient(135deg,

            #ffaaa5,

            #ff6b6b);


}



.error-button {


    background:


        linear-gradient(135deg,

            #ffaaa5,

            #ff6b6b);

}



/* ===========================
   キャンセル
=========================== */


.cancel-button {


    background: #e5e7eb;


    color: #374151;


    box-shadow: none;



}



.cancel-button:hover {


    background: #d1d5db;


}



/* ===========================
   ローディング
=========================== */


.loading-dialog {


    text-align: center;


    padding: 35px;



}



.loading-spinner {


    width: 60px;


    height: 60px;


    margin: 0 auto 22px;


    border-radius: 50%;


    border:

        6px solid #eaf5ff;



    border-top-color: #4b8df8;



    animation:

        spin 1s linear infinite;



}



#loadingMessage {


    font-size: 16px;


    font-weight: 700;


    color: #64748b;


}

/* ===========================
   アニメーション
=========================== */


@keyframes dialogOpen {


    from {


        opacity: 0;


        transform:


            translateY(-20px) scale(.92);



    }


    to {


        opacity: 1;


        transform:


            translateY(0) scale(1);



    }


}



@keyframes spin {


    from {


        transform: rotate(0deg);


    }


    to {


        transform: rotate(360deg);


    }


}




/* ===========================
   タブレット
=========================== */


@media(max-width:768px) {



    .dialog {


        max-width: 380px;


        border-radius: 26px;



    }



    .dialog-header {


        padding: 24px 18px 20px;



    }



    .dialog-header h2 {


        font-size: 22px;



    }



    .dialog-body {


        padding: 24px 22px;



    }



    .dialog-body p {


        font-size: 15px;



    }



    .dialog-footer {


        padding:

            0 20px 24px;



    }



    .dialog-button {


        min-width: 130px;


        height: 48px;


        font-size: 15px;



    }


}



/* ===========================
   スマホ
=========================== */


@media(max-width:480px) {



    .dialog-overlay {


        padding: 15px;



    }



    .dialog {


        width: 100%;


        border-radius: 22px;



    }



    .dialog-header {


        padding: 22px 15px;



    }



    .dialog-header h2 {


        font-size: 20px;



    }



    .dialog-icon {


        width: 60px;


        height: 60px;


        font-size: 30px;



    }



    .dialog-body {


        padding: 22px 18px;



    }



    .dialog-body p {


        font-size: 14px;


        line-height: 1.8;



    }



    .dialog-footer {


        flex-direction: column;


        gap: 10px;



    }



    .dialog-button {


        width: 100%;


        max-width: 280px;


        height: 50px;



    }



}