/**
 * 24. Mitt konto - Styling för Bokade klasser (UPPDATERAD)
 * 
 * Funktionalitet:
 * - Styling för klassvisning
 * - Markering av passerade klasser
 * - Bundle-information
 * - Status-badges
 * - Responsiv design
 */

/* Ta bort WooCommerce standard info-box */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
    background: transparent !important;
    border: none !important;
    color: var(--contrast, #A89F91) !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
}

.woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-MyAccount-content .woocommerce-message::before {
    display: none !important;
}

/* Container för knappar när inga klasser bokats */
.no-orders-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Styling för order-tabellen */
.woocommerce-MyAccount-orders .woocommerce-orders-table {
    width: 100%;
    border: none;
}

.woocommerce-MyAccount-orders .woocommerce-orders-table thead {
    display: none; /* Dölj table headers */
}

.woocommerce-MyAccount-orders .woocommerce-orders-table tbody tr {
    display: flex;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--contrast-3, #F3EFE8);
    transition: background-color 0.3s ease;
}

.woocommerce-MyAccount-orders .woocommerce-orders-table tbody tr:last-child {
    border-bottom: none;
}

.woocommerce-MyAccount-orders .woocommerce-orders-table tbody tr:hover {
    background-color: var(--base-2, #f7f8f9);
}

/* Omstrukturera table cells till flex layout */
.woocommerce-MyAccount-orders .woocommerce-orders-table tbody td {
    border: none;
    padding: 0;
    width: 100%;
}

/* Order item container */
.order-item-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
    position: relative;
}

/* Produktbild */
.order-item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    position: relative;
}

.order-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--br-small, 1rem);
}

/* Produktinfo */
.order-item-info {
    flex-grow: 1;
}

.order-item-title {
    font-size: var(--fs-h5);
    font-family: var(--gp-font--merriweather);
    font-weight: 300;
    color: var(--contrast, #A89F91);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* Bundle-information */
.class-bundle-info {
    font-size: var(--fs-p-1);
    color: var(--accent, #6A8D73);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* Datum och tid */
.class-date-time {
    margin-bottom: 0.5rem;
}

.class-date {
    font-size: var(--fs-p);
    color: var(--contrast, #A89F91);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.class-time {
    font-size: var(--fs-p-1);
    color: var(--contrast-2, #D6CFC3);
}

/* Instruktör och plats */
.class-instructor,
.class-location {
    font-size: var(--fs-p-1);
    color: var(--contrast-2, #D6CFC3);
    margin-bottom: 0.2rem;
}

/* Status badges */
.class-status {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: var(--br-pill, 50px);
    font-size: var(--fs-p-1);
    font-weight: 600;
    font-family: var(--gp-font--noto-sans);
    text-align: center;
}

.status-badge.upcoming {
    background: var(--accent, #6A8D73);
    color: var(--base-3, #ffffff);
}

.status-badge.past {
    background: var(--contrast-2, #D6CFC3);
    color: var(--contrast, #A89F91);
}

/* Badge på klassbilder */
.order-item-image {
    position: relative;
}

.order-item-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
}

.order-item-badge .type-badge {
    background: var(--accent, #6A8D73);
    color: var(--base-3, #ffffff);
    padding: 0.3rem 0.8rem;
    border-radius: var(--br-pill, 50px);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: var(--gp-font--noto-sans);
    display: inline-block;
    white-space: nowrap;
}

/* Passerade klasser - dimming effect */
.order-item-container.past-class {
    opacity: 0.7;
}

.order-item-container.past-class .order-item-title {
    color: var(--contrast-2, #D6CFC3);
}

/* Overlay för passerade klasser */
.past-class-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--br-small, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.past-label {
    color: white;
    font-size: var(--fs-p-1);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.3rem 0.8rem;
    border-radius: var(--br-pill, 50px);
}

/* Responsiv design */
@media (max-width: 768px) {
    .no-orders-buttons {
        flex-direction: column;
    }
    
    .no-orders-buttons a {
        width: 100% !important;
        text-align: center;
    }
    
    .order-item-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .order-item-image {
        width: 100%;
        height: 200px;
        max-width: 300px;
        align-self: center;
    }
    
    .order-item-info {
        width: 100%;
        text-align: center;
    }
    
    .class-status {
        align-self: center;
        margin-left: 0;
        margin-top: 1rem;
    }
    
    .status-badge {
        width: 100%;
        max-width: 200px;
    }
}

/* Extra styling för tom lista */
.woocommerce-MyAccount-orders .woocommerce-info {
    font-size: var(--fs-p);
    font-family: var(--gp-font--noto-sans);
    text-align: center;
    padding: 2rem 0;
}


/* 
UPPDATERING AV SNIPPET 24: Förbättrad CSS för passerade klasser
*/

/* Kursklasser wrapper */
.course-classes-wrapper {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--base-2, #f7f8f9);
    border-radius: var(--br-large, 2rem);
    border-left: 4px solid var(--accent, #6A8D73);
}

.course-classes-title {
    margin: 0 0 1.5rem 0;
    color: var(--accent, #6A8D73);
    font-size: var(--fs-h5);
    font-family: var(--gp-font--merriweather);
    font-weight: 300;
}

/* Individuella klasser */
.class-item {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    padding: 1.5rem;
    background: var(--base-3, #ffffff);
    border-radius: var(--br-small, 1rem);
    border-left: 4px solid var(--accent, #6A8D73);
    transition: all 0.3s ease;
}

.class-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Passerade klasser - dämpad styling */
.class-item.past-class {
    opacity: 0.75;
    border-left-color: var(--contrast-2, #D6CFC3);
}

.class-item.past-class:hover {
    transform: none;
    box-shadow: none;
}

/* Klassbild */
.class-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-right: 1.5rem;
    position: relative;
    border-radius: var(--br-small, 1rem);
    overflow: hidden;
}

.class-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Passerade klasser overlay */
.past-class-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-small, 1rem);
}

.past-label {
    color: var(--base-3, #ffffff);
    font-size: var(--fs-p-1);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.4rem 0.8rem;
    border-radius: var(--br-pill, 50px);
    font-family: var(--gp-font--noto-sans);
}

/* Klassinformation */
.class-info {
    flex: 1;
    min-width: 0; /* Tillåter text att wrap */
}

.class-title {
    font-size: var(--fs-h6);
    font-family: var(--gp-font--merriweather);
    font-weight: 300;
    color: var(--contrast, #A89F91);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.class-item.past-class .class-title {
    color: var(--contrast-2, #D6CFC3);
}

.class-date-time {
    margin-bottom: 0.5rem;
}

.class-date {
    font-size: var(--fs-p);
    color: var(--accent, #6A8D73);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.class-item.past-class .class-date {
    color: var(--contrast-2, #D6CFC3);
}

.class-time {
    font-size: var(--fs-p-1);
    color: var(--contrast, #A89F91);
}

.class-item.past-class .class-time {
    color: var(--contrast-2, #D6CFC3);
}

.class-instructor,
.class-location {
    font-size: var(--fs-p-1);
    color: var(--contrast, #A89F91);
    margin-bottom: 0.2rem;
}

.class-item.past-class .class-instructor,
.class-item.past-class .class-location {
    color: var(--contrast-2, #D6CFC3);
}

/* Status badges */
.class-status {
    flex-shrink: 0;
    margin-left: 1rem;
}

.status-badge {
    padding: 0.6rem 1.2rem;
    border-radius: var(--br-pill, 50px);
    font-size: var(--fs-p-1);
    font-weight: 600;
    font-family: var(--gp-font--noto-sans);
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.status-badge.upcoming {
    background: var(--accent, #6A8D73);
    color: var(--base-3, #ffffff);
}

.status-badge.past {
    background: var(--contrast-2, #D6CFC3);
    color: var(--contrast, #A89F91);
    border: 1px solid var(--contrast-2, #D6CFC3);
}

/* Hover-effekter för kommande klasser */
.class-item.upcoming-class:hover .status-badge.upcoming {
    background: var(--accent-2, #609687);
    transform: scale(1.05);
}

/* Förbättrad order item styling */
.order-item-container.past-class {
    opacity: 0.8;
}

.order-item-container.past-class .order-item-title {
    color: var(--contrast-2, #D6CFC3);
}

/* Responsiv design */
@media (max-width: 768px) {
    .class-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .class-image {
        width: 150px;
        height: 100px;
        margin: 0 0 1rem 0;
    }
    
    .class-info {
        margin-bottom: 1rem;
    }
    
    .class-status {
        margin-left: 0;
    }
    
    .status-badge {
        width: 100%;
        max-width: 200px;
    }
}

/* Extra visuell indikation för genomförda klasser */
.class-item.past-class::before {
    content: "✓";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    background: var(--contrast-2, #D6CFC3);
    color: var(--base-3, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.class-item {
    position: relative;
}

/* Förbättrad no-orders styling */
.no-orders-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.no-orders-buttons a {
    min-width: 200px;
    text-align: center;
    padding: 0.8rem 2rem;
    border-radius: var(--br-pill, 50px);
    font-weight: 600;
    font-family: var(--gp-font--noto-sans);
    transition: all 0.3s ease;
    text-decoration: none;
}

.no-orders-buttons a:first-child {
    background: var(--accent, #6A8D73);
    color: var(--base-3, #ffffff);
    border: 2px solid var(--accent, #6A8D73);
}

.no-orders-buttons a:first-child:hover {
    background: var(--accent-2, #609687);
    border-color: var(--accent-2, #609687);
}

.no-orders-buttons a:last-child {
    background: transparent;
    color: var(--accent, #6A8D73);
    border: 2px solid var(--accent, #6A8D73);
}

.no-orders-buttons a:last-child:hover {
    background: var(--contrast-3, #F3EFE8);
    color: var(--accent-2, #609687);
}

/* Förbättrad animation för status-ändringar */
@keyframes statusChange {
    0% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.status-badge {
    animation: statusChange 0.5s ease-in-out;
}

/* Sortering - sätt passerade klasser längst ner visuellt */
.course-classes-wrapper {
    display: flex;
    flex-direction: column;
}

.class-item.past-class {
    order: 2;
}

.class-item.upcoming-class {
    order: 1;
}

/* Separator mellan kommande och passerade klasser */
.class-item.upcoming-class:last-of-type {
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--contrast-3, #F3EFE8);
    padding-bottom: 2rem;
}

/* Lägg till en subtil separator-text */
.class-item.past-class:first-of-type::before {
    content: "Genomförda klasser";
    position: absolute;
    top: -2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--contrast-2, #D6CFC3);
    font-size: var(--fs-p-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--base-2, #f7f8f9);
    padding: 0.5rem 0;
}

/* Justera spacing när separator används */
.class-item.past-class:first-of-type {
    margin-top: 3rem;
    position: relative;
}