/* Colours */
:root {
    --accent-primary: #4a90e2; 
    --accent-secondary: #80bafc;

    --grey-dark: #1a1a1a;
    --grey-mid: #ccc;
    --grey-lightish: #ddd;
    --grey-light: #f8f8f8;
    --grey-white: #fff;

    --button-text-color: #1a1a1a;

    --status-green:#28a745;
    --status-amber:#dcc635;   
    --status-red:#dc3545;

    --status-green-light:#67a575;
    --status-amber-light:#cfc68d;
    --status-red-light:#d37e87;

    --banner-bar-height: max(12dvh, 50px);
    --footer-bar-height: max(10dvh, 50px);

    --ios-env-top: env(safe-area-inset-top);
    --ios-env-bottom: env(safe-area-inset-bottom);

    --available-height: calc(100dvh - (var(--footer-bar-height) + var(--banner-bar-height) + var(--ios-env-top) + var(--ios-env-bottom)));

    --font-large: max(2.5vw,2.5vh,1.5rem);
    --font-medium: max(2vw,2vh,1.1rem);
    --font-small: max(1.5vw,1.5vh,1rem);
    --font-very-small: max(0.5vw,0.5vh,0.8rem);

    --font-special-title-bar: 7vh;
    --font-special-switch-icon: max(8vh,2.5rem);
}

/* Reset some default browser styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Apply safe area padding */
html {
    height: 100vh;
    overscroll-behavior: none;
}

body {
    height: 100vh;
    font-family: 'Open Sans', sans-serif;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background-color: #bebebe;
    color: var(--status-amber);
}

.ios-padding {
    background-color: var(--status-red);
}

#ios-padding-top {
    /*
    height: var(--ios-env-top);
    min-height: var(--ios-env-top);
    */
}

#ios-padding-bottom {
    /*
    height: var(--ios-env-bottom);
    min-height: var(--ios-env-bottom);
    */
}

/* Outer container should take up at least full viewport height */
#container-outer {
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--grey-light);
}

/* Pinned Header */
#container-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--banner-bar-height);
    background-color: var(--accent-primary);
    color: var(--grey-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 4vh;
    //padding-top: env(safe-area-inset-top); /* Respect iPhone notch */
    z-index: 1000;
    border-bottom: 4px solid var(--grey-light);
}

/* Square Logo - Full Height of Header */
#header-logo {
    height: var(--banner-bar-height);
    width: var(--banner-bar-height);
    background-color: var(--grey-white) /* Placeholder styling */
}

/* Title container */
#header-title {
    display: flex;
    align-items: center;
    flex-grow: 1;
    position: relative;
    text-align: center;
    margin-left: 10px; /* Small gap between logo and title */
}

/* H1 Title - Only visible on wider screens */
h1 {
    margin: 0;
    font-size: var(--font-special-title-bar);
    line-height: var(--font-special-title-bar);
    white-space: nowrap; /* Prevents wrapping */
}

h3 {
    margin: 0;
    font-size: var(--font-medium);
    white-space: nowrap; /* Prevents wrapping */
}

/* Hide the title on small screens (portrait mobile) */
@media screen and (max-width: 768px) and (orientation: portrait) {
    h1 {
        /*display: none;*/
    }
}

/* Switch (sides) Icon visible and styled on the flashcard page - defined by data in the body */
body[data-switchicon="true"] #switch-icon {
    font-size: var(--font-special-switch-icon);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12vh; /* Slightly wider than height for a rectangular shape */
    min-width: 60px; /* Ensures visibility on smaller screens */
    height: 8vh; /* Adjust height to make it a rectangle */
    min-height: 40px; /* Ensures a minimum size */
    border-radius: 1rem; /* Rounded corners (adjust as needed) */
    background: var(--grey-white);
    color: var(--accent-primary);
    border: min(max(1vh,4px),8px) solid var(--accent-primary);
    position: absolute;
    left: calc(50% - max(6vh,30px)); /* Center horizontally */
    top: calc(max(10vh, 50px) - max(4vh, 20px)); /* Center vertically */
}

/* Hide the switch icon on all other pages */
body:not([data-switchicon="true"]) #switch-icon {
    display: none;
  }
  
/* Hid icon in portait mode, even on the targeted page */
@media screen and (orientation: portrait) {
    #switch-icon {
        display: none !important;
    }
}

/* CSS-Generated Hamburger Menu */
#header-nav {
    display: flex;
    align-items: center;
}

/* Hamburger Icon */
#hamburger-icon {
    height: calc( var(--banner-bar-height)/ 3);
    width: calc( var(--banner-bar-height)/ 2);
    border-top: calc( var(--banner-bar-height)/14) solid var(--grey-white); /* Top bar */
    border-bottom: calc( var(--banner-bar-height)/14)  solid var(--grey-white); /* Bottom bar */
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Middle bar */
#hamburger-icon::before {
    content: "";
    width: 100%;
    height: calc( var(--banner-bar-height)/14);
    background: var(--grey-white);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px; /* Rounded ends */
}


/* Fix Footer Placement: Ensure it's always at the bottom */


#container-footer {
    height: var(--footer-bar-height);
    background-color: var(--grey-dark);
    color: var(--grey-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    //padding-bottom: env(safe-area-inset-bottom); /* Avoids Safari UI bar */
    //margin-top: auto; /* Pushes it to the bottom when content is short */
    z-index: 999;
}

#container-footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-bar-height);
    background-color: var(--grey-dark);
    color: var(--grey-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 999;
}


/* Center the header on large screens */
@media (min-width: 1370px) {
    #container-header {
        left: 50%;
        transform: translateX(-50%);
        width: 1370px;
    }
}

.container-content, .container-content-start, .container-content-manage {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--grey-light);
    max-width: 1370px;
    margin: 0 0;
    /*height: calc(100vh - max(10vh, 50px));*/
    height: var(--available-height);
    max-height: var(--available-height);
    overflow: auto;
}
.container-content, .container-content-manage {
    padding-bottom: 2vh;
    padding-top: 1vh;
}

.container-content-manage{
    padding-bottom: 10vh; /* Leaves room for the footer */
    overflow-y: auto;
}

.container-content.height-is-viewport{
    height: calc(100vh - max(10vh, 50px));
    overflow: auto;
}
.container-content.under-title, .container-content-start.under-title, .container-content-manage.under-title{
    margin-top: var(--banner-bar-height); /* Use at least 50px, but ideally 12vh */
    flex: 1;

}

.container-content.container-content.under-title{
    color: var(--status-green-light);
}

.container-content.post-session{
    max-height: none;
    height: auto;
}

/* Portrait mode: Ensure content-two is fully visible */
@media (orientation: portrait) {
    .content-one {
        flex: 1;
        display: flex;
        /*max-height: 37.5vh; /* Ensures content-two stays visible */
        height: calc(var(--available-height) * 0.5);
        max-height: calc(var(--available-height) * 0.5);
        overflow: hidden; /* Prevents scrolling */
        overflow-x: hidden;      }

    .content-two {
        margin-top: 1vh;
        display: flex;
        max-height: calc(var(--available-height) * 0.5);
        flex: 0 0 calc((var(--available-height) * 0.5) - 1vh);
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        overflow: hidden; /* Prevents scrolling */
        overflow-x: hidden;
    }


    /* Ensure buttons fill the available height */
    .button {
        flex-grow: 1;  /* Makes buttons equally distribute space */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        color: var(--button-text-color);
    }
}

/* Landscape mode: content-one and content-two side-by-side */
@media (min-width: 600px) and (orientation: landscape) {
    .container-content {
        display: flex;
        flex-direction: row;
        gap: 50px;
        position: relative; /* Needed for relative movement */
        /*overflow: auto; /* Prevents elements from moving off-screen */
        //min-height: calc(100vh - max(10vh, 50px)) !important;
    }

    .content-one, .content-two {
        display: flex;
        flex: 1; /* Ensures equal width */
        padding: 0 0 0 0; /* top, right, bottom, left */
        /*max-height: 75vh; /* Prevents content from overflowing */
        max-height: var(--available-height);
        overflow: auto;
        position: relative; /* Required for transform animations */
        transition: transform 0.4s ease-in-out; /* Smooth sliding transition */
    }



    .content-two {
        display: flex;
        flex-direction: column;
    }

    /* When flip-layout class is applied, swap order with smooth animation */
    .flip-layout .content-one {
        transform: translateX(calc(100% + 50px)); /* Moves left by content-one's width */
    }

    .flip-layout .content-two {
        transform: translateX(calc(-100% - 50px)); /* Moves left by content-one's width */
    }

    /* Reset smoothly when flipping back */
    .flip-layout-reverse .content-one,
    .flip-layout-reverse .content-two {
       /* transform: translateX(0); */
    }
}

.content-four, .content-five {
    display: flex;
    flex-direction: column;
    max-width: 800px; /* Set the maximum width */
    width: 100%; /* Ensures it scales down on smaller screens */
    margin: 0 auto; /* Centers it horizontally */
    /*height: 75vh; /* Corrects vertical fill */
    height: var(--available-height);

}

.content-five{
    height:auto;
}

form {
    display: flex;
    flex-direction: column;
    height: 100%;
}



.start-label{
    font-size: var(--font-medium);
    color: var(--accent-primary);
    flex-grow: 0; /* Labels should not stretch */
    margin-top: 1vh;;
}


.form-group, .controls-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin:1vh;
    font-size: var(--font-small);
}

.dropdown{
    padding-left: 5vw;
}

input[type="text"], input[type="number"], input[type="password"], select, textarea {
    width: 100%;
    //padding: 10px;
    //margin-bottom: 1vh;
    border-radius: 1px;
    border: 1px solid var(--grey-mid);
    font-size: var(--font-medium);
    box-sizing: border-box;
}

textarea{
    padding: 1vh;
}
input[type="text"], input[type="number"]{
    margin-bottom: 1vh;
    padding: 1vh;
}

textarea{
    height: 20vh;
    max-height: 20vh;
    min-height: 20vh;
    white-space: pre-wrap; /* ✅ allows wrapping & CRs */
    overflow-y: auto; /* ✅ shows scrollbar if needed */
    resize: vertical; /* ✅ allows user resizing */
}

.input-group{
    margin-bottom: 1vh;
}

.radio-group {
    display: flex;
    flex-direction: row; /* Ensure buttons are in a row */
    gap: 10px; /* Adjust this for the horizontal spacing */
}

.actions-group p a {
    font-size: var(--font-medium);
    line-height: calc(var(--font-medium) * 2.5);
    text-decoration: none;
    color: var(--grey-dark);
  
}

/* Ensures elements inside content-one and content-two do not flex */
.content-one > *, .content-two > * {
    display: block;
}

/* Ensure buttons are wrapped in a container that fills available space */
#button-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Take up full height */
    gap: 1.5vh; /* Add spacing between buttons */
    overflow: hidden;
    overflow-x: hidden;
    padding: 0 2% 0 2%; /* Left and right padding */
}


/* Ensure buttons stretch evenly */
.button {
    flex: 1; /* Make buttons fill available space */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 0 0; /*top and bottom margin */
    font-size: var(--font-medium);
    border: none;
    cursor: pointer;
    background-color: var(--accent-primary);
    color: var(--grey-white);
    border-radius: 5px;
    transition: background 1.3s, transform 0.2s;
}


@media (hover: hover) {
    button:hover {
        background-color: var(--accent-secondary);
    }
}

button:disabled {
    background: var(--grey-mid) !important;
    cursor: not-allowed;
    transform: none !important;
}


/* Default aragraph styling for readability */
.container-content p {
    font-size: var(--font-small);
    line-height: 1.1;
    color: var(--grey-dark);
}

/* Responsive text size for larger screens */
@media (min-width: 768px) {
    .container-content p {
        font-size: 1.1rem;
        line-height: 1.2rem;
    }
}

/* Improve readability on very large screens */
@media (min-width: 1370px) {
    .container-content p {
        font-size: 1.2rem;
        line-height: 1.8;
    }
}

#flashcard-container{
    flex: 1;
    width: 100%;
}
/* Problem and Response styling */
#problem-container{
    height: 100%;
    padding: 0 2% 0 2%; /* Left and right padding */
    display: flex;
    flex-direction: column; /* Ensures child elements respect percentage heights */
}

@media (orientation: portrait) {
    #problem-container {
        height: 37.5vh; /* Adjust height for portrait mode */
    }
}

#question-container, #explanation-container {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 20px;
    padding-right: 20px;
    background-color: var(--grey-white);
}
#question-container {
    height: 25%;
}

#question-container p{
    color: var(--accent-primary);
    font-size: var(--font-medium);
}

/* Explanation container */
#explanation-container {
    height: 75%;
    margin-top: 2vh;
}

#explanation-container p {
    font-size: var(--font-medium);
    line-height: calc(var(--font-medium) * 1.5);
    color: var(--grey-dark);
}

#post-session-container{
    background-color: var(--grey-light);
}

.post-session-group{
    padding:  2vh 2vh 2vh 2vh; /*top right bottom left*/
    margin-bottom: 2vh;
    background-color: var(--grey-white);  
}

#post-session-summary p{
    font-size: var(--font-small);
    line-height: calc(var(--font-small) * 1.2);
    margin-bottom:  calc(var(--font-small) * 1.2);
}

#results-container{
    min-height: calc(100vh - var(--banner-bar-height));
}

#results-container h2{
    font-size: var(--font-medium);
    color: var(--accent-primary);
    margin-top: 4vh;
    margin-bottom: 2vh;
}

.hidden-qanda {
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px); /* Starts 20px to the right */
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s, transform 0.2s ease-out 0.2s;
}

/* Fade in and slide in when shown */
.hidden-qanda-show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.delete-unlock{
    display: flex;
    text-align: left;
    align-items: center; /* Aligns items vertically */
    width: 100%;
    font-size: var(--font-medium);
}

.delete-unlock-text{
    margin-right: 1vh;
    align-items: left;
}

.delete-unlock-text h3{
    color: var(--status-red);
}
.delete-unlock-text p{
    font-size: var(--font-very-small);
}


/* Counters */
#counters-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center; /* Aligns items vertically */
    width: 100%;
    font-size: var(--font-medium);
}


.counters {
    width: 100px; /* Adjust size as needed */
    height: 100px;
}

.definitely{
    color:var(--status-green);
}

.definitely.response-cell::before {
    content: "✔ "; /* Positive */
}

.maybe {
    color:var(--status-amber);
}

.maybe.response-cell::before {
    content: "● "; /* Neutral/Warning */
}

.oops {
    color:var(--status-red);
}

.oops.response-cell::before {
    content: "✗ "; /* Negative */
}

.remaining.hide-on-wide.icon::after{
    content: "⧉ ";
}
.definitely.hide-on-wide.icon::after{
    content: "✔ ";
}  
.maybe.hide-on-wide.icon::after{
    content: "● ";
}
.oops.hide-on-wide.icon::after{
    content: "✗ ";
}

@media (max-width: 1025px) {
    /* Hide some words on small screens */
    .hide-on-narrow {
        display: none;
    }
}


@media (max-width: 768px) {
    /* Hide the heading on small screens */

    .counters-table {
        font-size: 0.5rem;
    }
    .counters-table th, .counters-table td {
        padding: 2px;
    }
    .heading-to-hide {
        display: none;
    }

    .hide-on-narrow {
        display: none;
    }

    .response-heading::before {
        content: "🎯"; 
    }

    .score-heading::before {
        content: "📊"; 
    }

    .index-heading::before {
        content: "➊"; 
    }

    .word-heading::before {
        content: "📜"; 
    }
}

/* Radio button lozenge styles for flashcard page */
.flashcard-lozenge, .post-session-action, .start-lozenge .auth-lozenge{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.0vh;
    padding-bottom: 0.0vh;
    border-radius: 5px;
    color: var(--button-text-color);
    cursor: pointer;
    background-color: #4a90e2; /* Default blue */
    border: 3px solid var(--grey-dark); /* High contrast border */
    transition: background-color 0.1s ease, transform 0.2s ease, border 0.3s ease;
    border: 3px solid transparent; /* Default no border */
    position: relative;
}

.start-lozenge, .auth-lozenge{
    padding-top:2vh;
    padding-bottom:2vh;
}

.auth-lozenge {
    min-height: calc(2 * var(--font-large));
    margin-bottom: 3vh;
}

.manage-lozenge{
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.post-session-action{
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    margin-top:2vh;
    margin-bottom: 2vh;
}

.flashcard-lozenge.button-next{
    margin-top:3vh;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .flashcard-lozenge.button-next{
        margin-bottom: 1vh;
    }
}

.flashcard-lozenge.button-definitely{
    background-color: var(--status-green-light);
}

.flashcard-lozenge.button-maybe{
    background-color: var(--status-amber-light);
}

.flashcard-lozenge.button-no{
    background-color: var(--status-red-light);
}

/* Hide the actual radio button */
.flashcard-lozenge input[type="radio"], .start-lozenge input[type="radio"] {
    display: none;
}

/* Selected state - Differentiation beyond color */
.flashcard-lozenge.selected, .start-lozenge.selected {
    border: 3px solid var(--grey-dark); /* High contrast border */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Individual colors for selected states */
.flashcard-lozenge.selected.green, .start-lozenge.selected.green {
    background-color: var(--status-green); /* Green for Yes */
}

.flashcard-lozenge.selected.red {
    background-color: var(--status-red); /* Red for No */
}

.flashcard-lozenge.selected.yellow {
    background-color: var(--status-amber); /* Yellow */
}

.flashcard-lozenge.selected.green::after{
    content: "✔"; /* Positive */
}

.flashcard-lozenge.selected.red::after {
    content: "✗"; /* Negative */
}

.flashcard-lozenge.selected.yellow::after {
    content: "●"; /* Neutral/Warning */
}

/* Adding a checkmark or symbol for selection */
.flashcard-lozenge.selected::after, .start-lozenge.selected::after {
    font-size: var(--font-large);
    font-weight: bold;
    position: absolute;
    right: 50px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-white);
}

@media (hover: hover) {
    .flashcard-lozenge:hover, .start-lozenge.selected::after {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
}

/* ✅ Lightbox Effect */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--available-height);
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* ✅ Show Overlay */
.overlay.active {
    visibility: visible;
    opacity: 1;
}

/* ✅ Centered Content */
.overlay-content {
    text-align: center;
    background: var(--grey-white);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


/* Table Styling */
.table-container {
    width: 100%;
    min-width: 100%;
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: visible;  /* Let it grow with content */
    flex: 0 0 auto;        /* Don't stretch — grow to fit content */
    font-size: var(--font-small);
}


.flashcard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-medium);
}

.flashcard-row {
    width:100%;
    min-width:100%;
}

.flashcard-table th, .flashcard-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
    word-break: break-word;
    padding-top: calc(var(--font-small) * 0.5);
    padding-bottom: calc(var(--font-small) * 0.5);
    font-size: var(--font-small);

}

.centre-text-cell{
    text-align: center !important;
}

.flashcard-table th {
    background-color: var(--accent-primary);
    color: var(--grey-white);
    font-weight: bold;
    text-align: center;
}

.flashcard-table tr:nth-child(even) {
    background-color: var(--grey-light);
}

.flashcard-table tr:hover {
    background-color: var(--grey-lightish);
    transition: background 0.2s;
}

.flashcard-action {
    background-color: var(--status-red);
    color: var(--grey-white);
    border: none;
    padding: 1vh 0.7vw;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s, transform 0.2s;
    font-size: var(--font-small);

}

.flashcard-action:hover {
    background-color: var(--status-red-light);
    transform: scale(1.05);
}

.flashcard-table th.word {
    width: 20%;
}

.flashcard-table th.explanation {
    width: 50%;
}

.flashcard-table th.score {
    width: 10%;
}   

.flashcard-table th.actions {
    width: 20%;
}

.flashcard-table tr.editing {
    background-color: #fff5cc !important; /* Pale yellow when editing */
}

.flashcard-table tr.updating {
    background-color: #ffd700 !important; /* Dark yellow when updating */
}

.flashcard-table tr.updated {
    background-color: #d4edda !important;  /* Pale green if successful */
}

.flashcard-table tr.update-failed {
    background-color: #ffcccc !important; /* Light red if update fails */
}

.dimmed_text {
    color: #cccc !important;
}

.flashcard-actions {
    justify-content: space-between;
    width:100%;
}

.flashcard-action{
    width:100%;
    margin-top: 0.6rem;
}

@media (orientation: portrait) {
    .flashcard-table thead {
      display: none;
    }
  
    .flashcard-table,
    .flashcard-table tbody,
    .flashcard-table tr,
    .flashcard-table td {
      display: block;
      width: 100%;
      min-width: 100%;
    }
  
    .flashcard-table tr {
      margin-bottom: 1rem;
      border: 1px solid var(--grey-light);
      padding: 1rem;
      border-radius: 8px;
      background-color: var(--grey-white);
      box-sizing: border-box;
    }
  
    .flashcard-table td {
      text-align: left;
      padding: 0.5rem 0;
      position: relative;
      border-left: none;
      border-right: none;
    }
  
    .flashcard-table td::before {
      content: attr(data-label);
      font-weight: bold;
      display: block;
      margin-bottom: 0.25rem;
      color: var(--accent-primary);
    }
  
    /* 🔧 New styles for horizontal button layout */
    .flashcard-actions {
      display: flex;
      flex-direction: row; 
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: space-between;
    }
  
    .flashcard-action {
        flex: 1 1 0;             /* Grow/shrink equally */
        text-align: center;
    }
  }
  
  

/* ✅ Spinner Animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--grey-mid);
    border-top: 5px solid var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ✅ Hidden Elements */
.hidden {
    display: none !important;
}

 /* The switch - the box around the slider */
 .switch {
    position: relative;
    display: inline-block;
    height: calc(var(--footer-bar-height)*0.6);
    width: calc(var(--footer-bar-height)*1.2);
    min-height: calc(var(--footer-bar-height)*0.6);
    min-width: calc(var(--footer-bar-height)*1.2);
    margin-left:8vw;
    margin-right:8vw;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--footer-bar-height)*0.6);
    background-color: var(--grey-lightish);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    left: calc(var(--footer-bar-height)*0.05);
    bottom: calc(var(--footer-bar-height)*0.05);
    height: calc(var(--footer-bar-height)*0.5);
    width: calc(var(--footer-bar-height)*0.5);
    background-color: var(--grey-white);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: calc(var(--footer-bar-height)*0.5);
    background-color: var(--accent-primary);
  }
  
  input:checked + .slider {
    background-color: var(--status-red);
    -webkit-animation: blink 800ms infinite;
    animation: blink 800ms infinite;
  }
  @keyframes blink { 50% { background-color: #e9e598; }}



  .hazard-border {
    border: 10px var(--status-red) solid;
    border-image: repeating-linear-gradient(
      -55deg,
      #000,
      #000 20px,
      #ffb101 20px,
      #ffb101 40px
    ) 10;
  }

  .hazard-background {
    background-image: repeating-linear-gradient(
        -55deg,
        #000,
        #000 20px,
        #ffb101 20px,
        #ffb101 40px
    );
    background-size: 100px 100px;
    background-repeat: repeat;
    animation: move-stripes 2s linear infinite;
    color: white; /* Ensures text is visible */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8), 
                 -3px -3px 5px rgba(0, 0, 0, 0.8); /* Strong shadow effect */
}

@keyframes move-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100px 0;
    }
}
  
  input:focus + .slider {
    box-shadow: 0 0 1px #c0392b;
  }
  
  input:checked + .slider:before {
    transform: translateX(5.8vh);
  }
  

/* ✅ Retry Button */
#retryButton {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: var(--status-red);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#retryButton:hover {
    background-color: var(--status-red);
}


/* Navigation */
.nav-container {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    /*align-items: right;*/
    gap: 1vh;
    padding: 4rem;
    box-shadow: 0px 4px 6px rgba(255,255,255, 0.8);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    position: fixed;
    top: var(--banner-bar-height);
    z-index: 999;
}

.nav-container a {
    text-decoration: none;
    border-radius: 5px;
    background-color: var(--accent-primary);
    color: var(--grey-white);
    font-weight: bold;
    transition: background 0.3s;
}

.nav-container a:hover {
    background-color: var(--accent-secondary);
}

/* Show navigation when active */
.nav-container.active {
    transform: translateY(0);
    opacity: 1;
}

/* Secondary Fixed Navigation */
.nav-container-fixed {
    position: fixed;
    top: var(--banner-bar-height); /* Directly below the header */
    width: 100%;
    background-color: var(--accent-primary); /* Accent color */
    color: var(--grey-white);
    display: flex;
    gap: 1vh;
    /*padding: 0.75rem 0;*/
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 998; /* Below header but above content */
    border-bottom-style:solid;
    border-bottom-width: 3px;
    border-bottom-color: var(--grey-white);
}


/* Style links in the secondary navigation */
.nav-container-fixed {
    text-decoration: none;
    color: var(--grey-white);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.nav-container-fixed .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-container a{
    background-color: var(--grey-dark);
    font-size: var(--font-medium);
    padding: 2vh 1rem;
}