/* Variables */
$primary-color: #007bff;
$text-color: #555E72;
$title-color: #0B2640;
$bg-color: #f8f9fa;
$white: #ffffff;
$heading-font-family: 'Plus Jakarta Sans', sans-serif;
$body-font-family: 'Work Sans', sans-serif;
$font-size: 16px;
$font-weight: 400;
$line-height: 1.3;

h1, h2, h3, h4, h5, h6{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}


/* Dashboard Wrapper */
.wrap.frontis-dashboard-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    .frontis-dashboard-container {
        margin: 80px 0;
        max-width: 80rem;
        width: 100%;

        hr{
            margin: 40px 0;
        }

        .frontis-dashboard-inner{
            display: flex;
            gap: 80px;

            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);


            /* Left Content */
            .frontis-dashboard-content {
                flex: 1;

                .frontis-admin-name {
                    font-family: $body-font-family;
                    font-size: $font-size;
                    font-weight: 500;
                    line-height: $line-height;
                    color: $text-color;
                }

                .frontis-dashboard-title {
                    font-family: $heading-font-family;
                    font-size: 32px;
                    font-weight: 800;
                    line-height: 1.3;
                    color: $title-color;
                    padding: 16px 0;
                }
                p {
                    font-family: $body-font-family;
                    font-size: $font-size;
                    font-weight: 400;
                    line-height: $line-height;
                    color: $text-color;
                }

                /* Buttons */
                .frontis-dashboard-buttons {
                    padding: 32px 0;

                    a {
                        font-family: $body-font-family;
                        font-size: $font-size;
                        font-weight: 400;
                        line-height: $line-height;
                        display: inline-block;
                        padding: 16px 32px;
                        margin-right: 10px;
                        text-decoration: none;
                        border-radius: 50px;

                        &.btn-primary {
                            background-color: $primary-color;
                            color: $white;
                        }

                        &.btn-secondary {
                            color: $primary-color;
                        }
                        &:focus {
                            outline: none;
                            box-shadow: none;
                        }
                    }
                }
            }
            /* Video Section */
            .frontis-dashboard-video {
                flex: 1;

                iframe {
                    width: 100%;
                    height: 275px;
                    border-radius: 10px;
                }
            }
        }
        .frontis-dashboard-cards-wrapper {
            display: flex;
            gap: 20px;
        
            .quick-settings, .extend-website {
                background: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
        
            .quick-settings {

                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
        
                    h3 {
                        font-size: 18px;
                        font-weight: 600;
                    }
        
                    .support-link {
                        font-size: 14px;
                        color: #0073aa;
                        text-decoration: none;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }

                flex: 2;
                .settings-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 20px;
                    margin-top: 30px;

                    .setting-item {
                        background: #f8f9fa;
                        padding: 15px;
                        border-radius: 5px;
                        text-align: center;
                        h4{
                            font-size: 18px;
                            font-weight: 600;
                            margin-bottom: 10px;
                            color: $title-color;
                        }
                        p{
                            font-size: 16px;
                            font-weight: 400;
                            line-height: 1.3;
                            color: $text-color;
                        }

                    }
                }
            }
        
            .extend-website {
                flex: 1;
        
                h3 {
                    font-size: 18px;
                    font-weight: 600;
                    margin-bottom: 10px;
                }
        
                .plugin-list {
                    list-style: none;
                    padding: 0;
        
                    li {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        padding: 10px 0;
                        border-bottom: 1px solid #eee;
                        &:last-child{
                            border-bottom: none;
                        }
        
                        img {
                            width: 24px;
                            height: 24px;
                        }
        
                        div {
                            flex-grow: 1;
                            h4 {
                                font-size: 14px;
                                margin: 0;
                            }
                            p {
                                font-size: 12px;
                                color: #666;
                                margin: 0;
                            }
                        }
        
                        .install-btn, .activate-btn {
                            font-size: 12px;
                            padding: 5px 8px;
                            border-radius: 4px;
                            text-decoration: none;
                        }
        
                        .install-btn {
                            background: #0073aa;
                            color: white;
                        }
        
                        .activate-btn {
                            background: #4CAF50;
                            color: white;
                        }
                    }
                }
            }
        }
        p {
            margin: 0;
        }
        
    }
}
