/* Update grid structure */
.dashboard_grid {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    display: grid;
    height: 100vh;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 30px;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
        background-image: url('../image/sm_bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
   }

/* Grid areas */
.grid_sidebar { 
    grid-area: sidebar;
    border-left: 2px solid #000000;
    border-right: 3px solid #000000;
  }

.grid_header { 
    grid-area: header;
    background-color: #000000;
}

.grid_main { 
    grid-area: main;
    grid-template: 1fr / 1fr;
    overflow-y: auto;
}

/* Video grid layout */
.video_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.video-card {
    display: flex;
    justify-content: center;
    justify-items: center;
    min-width: 250px;
    border-radius: 10px;
}

.video-content {
    padding-top: 2px;
    padding-bottom: 2px;
}

.video-iframe  {
    height: 350px;
}

a.download_video  {
    background-color: #a100ff;
    color: #FFFFFF;
    text-decoration: none;
}

/* Create video card */
.create_video_card {
    transition: background-color 0.3s ease;
    min-height: 320px;
}

.create_video_card:hover {
    background-color: #35353575;
    border: 2px #353535 dashed;
}

.submit_bt {
    background-color: #a100ff;
    color: #FFFFFF;
    border: 1px #4e005d solid;
}

.submit_bt:hover {
    background-color: #4e005d;
    border: 1px #4e005d solid;
}

.submit_back_bt {
    background-color: #252525;
    color: #FFFFFF;
    border: 1px #353535 solid;
}


.submit_back_bt:hover {
    background-color: #151515;
    border: 1px #252525 solid;
}

.sign_up_bt {
    background-color: #009d00;
    color: #FFFFFF;
    border: 1px #353535 solid;
}

.sign_up_bt:hover {
    background-color: #00bd00;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
    .dashboard_grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main";
    }

    .grid_sidebar {
        display: none;
    }

    .video_grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;
        padding: 10px;
    }
}

.grid_footer { 
    grid-area: footer;
    background-color: #000000;
    border-top: 1px solid #252525;
    padding-left: 25px;
    padding-right: 25px;
}

/* Mobile footer adjustments */
@media only screen and (max-width: 768px) {
    .dashboard_grid {
        grid-template-rows: 60px 1fr 45px;
        grid-template-areas: 
            "header"
            "main"
            "footer";
    }
}

/* Navigation styles */
.nav_link {
    display: flex;
    align-items: center;
    padding: 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #656565;
}

#nav_links { border-top: 1px solid #656565; }

.nav_link:hover {
    background-color: #454545;
}

.header_bar {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    background-color: #000000;
    box-shadow: 0px 4px 8px #151515;
}

.header_brand {
    flex: 1;
    height: 100%;
    display: flex;
    width: 25%;
    align-items: start;
    justify-content: center;
    padding-left: 45px;
}

.header_credits {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 35px;
    border-left: 1px solid #656565;
}

.header_actions {
    width: 10%;
    height: 100%;
    display: flex;
    border-left: 1px solid #656565;
    align-items: center;
    justify-content: center;
    background-color: #000000;
}

.header_actions button {
    border: none;
    background-color: #000000;
    height: 100%;
}

.footer_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: #000000;
    border-top: 1px solid #151515;
    padding: 7px 5px 0 5px;
}

.footer_left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer_right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer_brand {
    display: flex;
    align-items: center;
}

.footer_brand .brand_name {
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 5px;
}

.footer_brand .brand_tagline {
    color: #00FF00;
    font-size: 9px;
}

.background_layer,
.content_layer {
    grid-area: 1 / 1; /* Makes both layers occupy the same grid cell */
}

.background_layer {
    z-index: 1;
}

.content_layer {
    z-index: 4;
    position: relative;
}

#tutorial_div {
    border: 1px #252525 solid;
    border-radius: 10px 10px 0px 0px;
    bottom: 29px;
    }

.btn-template  {
    color: #FFFFFF;
    border: none;
}

.modal {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    background: #151515;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    margin: 50px auto;
    overflow: scroll;
}

/* Loading indicator styles */

.loading-indicator {
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 10px;
    margin-top: 15px;
}

/* Reuse existing loading circle animation but make it smaller for forms */
.loading-indicator .loading-circle {
    width: 30px;
    height: 30px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Make the label smaller for forms */
.loading-indicator .generation-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}


/* Pricing Modal Styles */
#pricingModal {
    width: 85% !important;
    max-width: none !important;
}

.featured-plan {
    margin-bottom: 30px;
}

.advanced-plan {
    flex: 1;
    min-width: 200px;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {

    .dfr_ct {
        flex-direction: column;
    }

    .advanced-plan {
        margin: 0 0 15px 0;
        width: 100%;
    }

}

.font_mons400 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

/* Add this to your vs_support.css file */

/* Template button styles */
.btn-template {
    transition: all 0.3s ease;
}

.btn-template:hover {
    background-color: #454545;
}

.btn-template.template-saved {
    background-color: #008800;
    cursor: default;
}

/* Action modal transitions */
#actionModal {
    transition: opacity 0.3s ease;
}

#actionSuccess, #actionLoading {
    transition: all 0.3s ease;
}

/* Add a subtle fade-in animation to the success message */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#actionSuccess {
    animation: fadeInDown 0.5s ease forwards;
}