/* Playland Quiz Styles */
:root {
    --bs-primary: var(--theme-palette-color-1);
    --bs-secondary: var(--theme-palette-color-2);
    --bs-success: var(--theme-palette-color-2);
    --bs-info: var(--theme-palette-color-3);
    --bs-warning: var(--theme-palette-color-1);
    --bs-danger: var(--theme-palette-color-4);
    --bs-light: var(--theme-palette-color-7);
    --bs-dark: var(--theme-palette-color-5);
    --bs-body-color: var(--theme-text-color);
    --bs-body-font-family: var(--theme-font-family);
    --bs-link-color: var(--theme-link-initial-color);
    --bs-link-hover-color: var(--theme-link-hover-color);
}

.rounded-6 {
    --bs-border-radius-xxxl: 2.75rem;
    border-radius: var(--bs-border-radius-xxxl) !important;
}

.vw-100 {
    width: 100vw !important;
}
.vh-100 {
    height: 100vh !important;
}
body.admin-bar .vh-100 {
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)) !important;
}
@supports (height: 100svh) {
    .vh-100 {
        height: 100svh !important;
    }
    body.admin-bar .vh-100 {
        height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)) !important;
    }
}
@supports (height: 100dvh) {
    .vh-100 {
        height: 100dvh !important;
    }
    body.admin-bar .vh-100 {
        height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)) !important;
    }
}

/** Global Styles **/
.btn-primary {
    --bs-btn-bg: var(--theme-palette-color-1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    border-radius: var(--theme-button-border-radius, 3px);
    transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --has-link-decoration: var(--false);
}

.btn.btn-sm {
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.25rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    min-height: fit-content;
}

.btn[type="submit"] {
    background-color: var(--bs-btn-bg);
}

.btn-check:checked+.btn-outline-primary {
    background-color: var(--theme-palette-color-1);
    border-color: var(--theme-palette-color-1);
    color: var(--theme-button-text-initial-color);
}

.btn-check+.btn-outline-primary {
    border-color: var(--theme-form-field-border-initial-color);
    color: var(--theme-text-color);
}

.btn-check+.btn-outline-primary:hover {
    background-color: var(--theme-palette-color-1);
    border-color: var(--theme-palette-color-1);
    color: var(--theme-button-text-initial-color);
}

.btn.btn-mc-option {
    border: solid 1px var(--theme-palette-color-1);
    border-radius: var(--bs-btn-border-radius, 3px);
}

/** Login/Register Content **/
.playland-quiz-auth-page {
    background-color: #eaeaea;
    background-image: url("../assets/header-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.playland-quiz-auth-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(0deg, #00000080 0%, #00000040 100%);
}

.playland-quiz-auth-page .site-logo, .playland-quiz-auth-form {
    z-index: 1;
}
.playland-quiz-auth-form #loginform {
    max-width: 400px;
}
.playland-quiz-auth-form .login-username input, .playland-quiz-auth-form .login-password input, .playland-quiz-register input:not([type="submit"]) {
    border: var(--bs-alert-border);
    border-radius: var(--theme-button-border-radius, 3px);
    background-color: white;
    padding: 15px 25px;
    line-height: 1.5em;
    min-height: 3.5em;
}
.playland-quiz-auth-form .login-submit {
    margin-bottom: 0;
}
.playland-quiz-auth-form .login-username input.is-invalid, .playland-quiz-auth-form .login-password input.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
    background-color: #f8d7da;
}

/** Quiz Content **/
.quiz-content h1, .quiz-content h2, .quiz-content h3, .quiz-content h4, .quiz-content h5, .quiz-content h6 {
    line-height: 1.25em;
}

.choice-options .btn.btn-mc-option p, .choice-options .alert, .choice-options .alert p {
    margin-bottom: 0;
    margin-block-end: 0;
}

.btn-action.btn-primary {
    background-color: var(--theme-palette-color-1);
    border-color: var(--theme-palette-color-1);
    color: var(--theme-button-text-initial-color);
    display: inline-flex;
    
    align-items: center;
    justify-content: center;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    border-radius: var(--theme-button-border-radius, 3px);
    transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --has-link-decoration: var(--false);
}

.btn-action.btn-primary:hover {
    color: var(--theme-button-text-hover-color);
    border-color: var(--theme-button-border-hover-color);
    background-color: var(--theme-button-background-hover-color);
}

.quiz-content-header {
    display: flex;
    width: 100% !important;
    height: 160px;
    gap: 0;
    margin-bottom: 2em;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url("../assets/header-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    mask: url(../assets/overlay-mask.svg) bottom / 100% no-repeat border-box, linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
  -webkit-mask: url(../assets/overlay-mask.svg) bottom / 100% no-repeat border-box, linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
}

.quiz-content-header.darker-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(0deg, #00000080 0%, #00000040 100%);
}

.quiz-content-header .header-content {
    z-index: 1;
    padding-bottom: 15px;
}

.quiz-content-footer {
    display: flex;
    width: 100% !important;
    height: 160px;
    gap: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: linear-gradient(60deg, #FCDEAA 0%, #FFACAD 100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    mask: url(../assets/overlay-mask-flip.svg) top / 100% no-repeat border-box, linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
  -webkit-mask: url(../assets/overlay-mask-flip.svg) top / 100% no-repeat border-box, linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
}
.quiz-content-footer .footer-content {
    z-index: 1;
    padding-bottom: 15px;
}

/** Quiz Dashboard **/
.table, .table tr, .table td, .table th {
    border-top-color: #dee2e6;
    border-bottom-color: #dee2e6;
    border-left-color: #dee2e6;
    border-right-color: #dee2e6;
    border-color: #dee2e6;
}

.badge.bg-primary {
    background-color: var(--theme-palette-color-1) !important;
}

.mobile-details {
    /*margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;*/
}

.quiz-dashboard .pagination .page-link {
    color: var(--theme-text-color);
}
.quiz-dashboard .pagination .page-link:hover {
    color: var(--theme-palette-color-1);
}
.quiz-dashboard .pagination .page-link.current {
    color: var(--theme-palette-color-6);
}

.quiz-dashboard-header {
    display: flex;
    width: 100% !important;
    height: 240px;
    gap: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    background-image: url("../assets/header-bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    mask: url(../assets/overlay-mask.svg) bottom / 100% no-repeat border-box, linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
  -webkit-mask: url(../assets/overlay-mask.svg) bottom / 100% no-repeat border-box, linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 9vw, rgba(0,0,0,1) 9vw, rgba(0,0,0,1) 100%);
}

.quiz-dashboard-header.darker-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: linear-gradient(0deg, #00000080 0%, #00000040 100%);
}

.quiz-dashboard-header .header-content {
    z-index: 1;
    padding-bottom: 15px;
}

@media (min-width: 576px) { 
    /** bootstrap sm - Small devices (landscape phones, 576px and up) **/
    .quiz-dashboard-header {
        height: 360px;
    }
    .quiz-dashboard-header .header-content {
        padding-bottom: 30px;
    }

    .quiz-content-header, .quiz-content-footer {
        height: 200px;
    }
    .quiz-content-header .header-content, .quiz-content-footer .footer-content {
        padding-bottom: 60px;
    }
}

@media (min-width: 768px) { 
    /** bootstrap md - Medium devices (tablets, 768px and up) **/
    .quiz-dashboard-header {
        height: 480px;
    }
    .quiz-dashboard-header .header-content {
        padding-bottom: 50px;
    }

    .quiz-content-header, .quiz-content-footer {
        height: 240px;
    }
    .quiz-content-header .header-content, .quiz-content-footer .footer-content {
        padding-bottom: 100px;
    }
}

@media (min-width: 992px) {
    /** bootstrap lg - Large devices (desktops, 992px and up) **/
    .quiz-content-header, .quiz-content-footer {
        height: 280px;
    }
    .quiz-content-header .header-content, .quiz-content-footer .footer-content {
        padding-bottom: 100px;
    }
}

@media (min-width: 1200px) {
    /** bootstrap xl - Extra large devices (large desktops, 1200px and up) **/
    .quiz-content-header, .quiz-content-footer {
        height: 300px;
    }
    .quiz-content-header .header-content, .quiz-content-footer .footer-content {
        padding-bottom: 120px;
    }
}

@media (min-width: 1400px) {
    /** bootstrap xxl - Extra extra large devices (larger desktops, 1400px and up) **/
    .quiz-content-header, .quiz-content-footer {
        height: 300px;
    }
    .quiz-content-header .header-content, .quiz-content-footer .footer-content {
        padding-bottom: 150px;
    }
}