/*
|--------------------------------------------------------------------------
| Profile Settings
|--------------------------------------------------------------------------
*/

.settings-page{

    width:100%;

}


/*
|--------------------------------------------------------------------------
| Settings Header
|--------------------------------------------------------------------------
*/

.settings-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    width:100%;

    margin-bottom:25px;

}

.settings-header > div:first-child{

    flex:1 1 auto;

    min-width:0;

}

.settings-header h2{

    margin:0;

}

.settings-back-button{

    flex:0 0 auto;

    width:auto !important;

    min-width:140px;

    white-space:nowrap;

}


.settings-card{

    margin-bottom:20px;

}

.settings-section-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}

.settings-section-header h3{

    margin:0 0 4px 0;

    font-size:20px;

}

.settings-account-info{

    display:grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:12px;

    margin-bottom:20px;

}

.settings-account-info > div{

    padding:14px 16px;

    background:#121826;

    border:1px solid var(--border);

    border-radius:12px;

}

.settings-info-label{

    display:block;

    margin-bottom:3px;

    color:var(--muted);

    font-size:12px;

}

.settings-account-info strong{

    display:block;

    font-size:15px;

}

.settings-form{

    width:100%;

}

.settings-submit{

    width:auto;

    min-width:180px;

}

.settings-coming-soon{

    opacity:.92;

}

.settings-notice{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px;

    background:#121826;

    border:1px solid var(--border);

    border-left:4px solid var(--primary);

    border-radius:12px;

}

.settings-notice > span{

    flex:0 0 auto;

    font-size:24px;

    line-height:1.2;

}

.settings-notice strong{

    display:block;

    margin-bottom:3px;

}

.settings-notice p{

    color:var(--muted);

    margin:0;

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| Header Settings Gear
|--------------------------------------------------------------------------
*/

.header-settings{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    border:1px solid var(--border);

    border-radius:12px;

    background:#121826;

    color:var(--text);

    font-size:20px;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);

}

.header-settings:hover{

    background:var(--card-hover);

    border-color:var(--primary);

    transform:rotate(12deg);

}

.header-settings:focus-visible{

    outline:2px solid var(--primary-hover);

    outline-offset:2px;

}

.topbar{

    gap:15px;

}

.title-area{

    min-width:0;

}

.header-settings-wrap{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

}


/*
|--------------------------------------------------------------------------
| Account Data Deletion
|--------------------------------------------------------------------------
*/

.settings-danger-card{

    border-color:#4b3540;

    overflow:hidden;

}


/*
|--------------------------------------------------------------------------
| Delete Accordion Toggle
|--------------------------------------------------------------------------
*/

.settings-danger-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:4px 0;

    background:transparent;

    border:0;

    color:var(--text);

    text-align:left;

    cursor:pointer;

}

.settings-danger-toggle:hover{

    background:transparent;

}

.settings-danger-toggle:focus-visible{

    outline:2px solid var(--primary-hover);

    outline-offset:5px;

    border-radius:10px;

}

.settings-danger-toggle-main{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

}

.settings-danger-toggle-icon{

    flex:0 0 auto;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#121826;

    border:1px solid var(--border);

    font-size:21px;

}

.settings-danger-toggle-main strong{

    display:block;

    margin-bottom:3px;

    font-size:18px;

}

.settings-danger-toggle-main small{

    display:block;

    color:var(--muted);

    font-size:13px;

    line-height:1.5;

}

.settings-danger-toggle-arrow{

    flex:0 0 auto;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#121826;

    border:1px solid var(--border);

    color:var(--muted);

    font-size:22px;

    line-height:1;

    transition:
        transform var(--transition),
        color var(--transition),
        border-color var(--transition);

}

.settings-danger-toggle:hover .settings-danger-toggle-arrow{

    color:var(--text);

    border-color:#EB8B6E;

}

.settings-danger-toggle[aria-expanded="true"] .settings-danger-toggle-arrow{

    color:#EB8B6E;

    border-color:#EB8B6E;

}

.settings-danger-panel{

    margin-top:22px;

    padding-top:22px;

    border-top:1px solid var(--border);

}

.settings-danger-panel[hidden]{

    display:none;

}


/*
|--------------------------------------------------------------------------
| Standard Settings Accordion Toggle
|--------------------------------------------------------------------------
*/

.settings-collapse-toggle{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:4px 0;

    background:transparent;

    border:0;

    color:var(--text);

    text-align:left;

    cursor:pointer;

}

.settings-collapse-toggle:hover{

    background:transparent;

}

.settings-collapse-toggle:focus-visible{

    outline:2px solid var(--primary-hover);

    outline-offset:5px;

    border-radius:10px;

}

.settings-collapse-toggle-main{

    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;

}

.settings-collapse-toggle-icon{

    flex:0 0 auto;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#121826;

    border:1px solid var(--border);

    font-size:21px;

}

.settings-collapse-toggle-main strong{

    display:block;

    margin-bottom:3px;

    font-size:18px;

}

.settings-collapse-toggle-main small{

    display:block;

    color:var(--muted);

    font-size:13px;

    line-height:1.5;

}

.settings-collapse-toggle-arrow{

    flex:0 0 auto;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#121826;

    border:1px solid var(--border);

    color:var(--muted);

    font-size:22px;

    line-height:1;

}

.settings-collapse-toggle:hover .settings-collapse-toggle-arrow,
.settings-collapse-toggle[aria-expanded="true"] .settings-collapse-toggle-arrow{

    color:var(--text);

    border-color:var(--primary);

}

.settings-collapse-panel{

    margin-top:22px;

    padding-top:22px;

    border-top:1px solid var(--border);

}

.settings-collapse-panel[hidden]{

    display:none;

}

/*
|--------------------------------------------------------------------------
| Warning
|--------------------------------------------------------------------------
*/

.settings-warning{

    margin-bottom:20px;

    padding:14px 16px;

    background:#3a2518;

    border:1px solid #7c4a2c;

    border-left:4px solid #EB8B6E;

    border-radius:12px;

}

.settings-warning strong{

    display:block;

    margin-bottom:4px;

}

.settings-warning p{

    margin:0;

    color:var(--muted);

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| Delete Choices
|--------------------------------------------------------------------------
*/

.delete-choice-grid{

    display:grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:14px;

    margin-bottom:22px;

}

.delete-choice{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:16px;

    background:#121826;

    border:1px solid var(--border);

    border-radius:12px;

    cursor:pointer;

    transition:
        border-color var(--transition),
        background var(--transition);

}

.delete-choice:hover{

    background:var(--card-hover);

    border-color:var(--primary);

}

.delete-choice input{

    flex:0 0 auto;

    margin-top:3px;

    accent-color:var(--primary);

}

.delete-choice-body{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.delete-choice-body strong{

    font-size:15px;

}

.delete-choice-body small{

    color:var(--muted);

    font-size:12px;

    line-height:1.5;

}

.delete-choice-danger:hover{

    border-color:#dc2626;

}

.settings-delete-submit{

    width:100%;

    background:#8a4b24;

    border:1px solid #b86632;

}

.settings-delete-submit:hover{

    background:#a85b2d;

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .settings-header{

        flex-direction:column;

        align-items:stretch;

        text-align:center;

    }

    .settings-back-button{

        width:100% !important;

        min-width:0;

        text-align:center;

    }

    .settings-account-info{

        grid-template-columns:1fr;

    }

    .settings-submit{

        width:100%;

    }

    .delete-choice-grid{

        grid-template-columns:1fr;

    }

    .settings-danger-toggle-main{

        align-items:flex-start;

    }

    .settings-danger-toggle-main small{

        font-size:12px;

    }

    .settings-danger-toggle-arrow{

        width:36px;

        height:36px;

    }

    .settings-collapse-toggle-main{

        align-items:flex-start;

    }

    .settings-collapse-toggle-main small{

        font-size:12px;

    }

    .settings-collapse-toggle-arrow{

        width:36px;

        height:36px;

    }

}

/*
|--------------------------------------------------------------------------
| Prayer Tracker Automation Setting
|--------------------------------------------------------------------------
*/

.settings-checkbox-row {

    display:flex;

    align-items:flex-start;

    gap:12px;

    width:100%;

    padding:15px;

    background:#121826;

    border:1px solid var(--border);

    border-radius:12px;

    cursor:pointer;

}

.settings-checkbox-control {

    flex:0 0 auto;

    padding-top:2px;

}

.settings-checkbox-control input {

    width:18px;

    height:18px;

    margin:0;

    accent-color:var(--primary);

    cursor:pointer;

}

.settings-checkbox-text {

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;

    flex:1;

}

.settings-checkbox-text strong {

    color:var(--text);

}

.settings-checkbox-description {

    color:var(--muted);

    font-size:12px;

    line-height:1.45;

}

.settings-help-icon {

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    width:20px;

    height:20px;

    border:1px solid var(--border);

    border-radius:50%;

    color:var(--muted);

    font-size:12px;

    font-weight:700;

    cursor:help;

}

.settings-checkbox-row + .settings-submit {

    margin-top:16px;

}



/*
|--------------------------------------------------------------------------
| Prayer Location Setting
|--------------------------------------------------------------------------
*/

.settings-prayer-location-status {

    margin:0 0 18px;

    padding:14px 16px;

    background:#121826;

    border:1px solid var(--border);

    border-radius:12px;

}

.settings-prayer-location-status strong {

    display:block;

    margin-top:3px;

    font-size:15px;

}