/* Budi Courses Current Date Widget Styles */

.budi-courses-current-date__wrapper {
    margin: 0;
}

.budi-courses-current-date__buttons{
    margin-bottom: 47px;
    gap: 20px;
}

.budi-courses-current-date__buttons button.budi-courses-current-date__btn{
    padding: 9px 20px;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    font-size: 18px;
    font-weight: 400;
}

.budi-courses-current-date__buttons button.budi-courses-current-date__btn:hover,
.budi-courses-current-date__buttons button.budi-courses-current-date__btn:focus,
.budi-courses-current-date__buttons button.budi-courses-current-date__btn.active{
    background-color: #ffffff !important;
    color: var(--color-main) !important;
}

.budi-courses-current-date__buttons button.budi-courses-current-date__btn--filter{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.budi-courses-current-date__buttons button.budi-courses-current-date__btn--filter:hover svg path{
    fill: var(--color-main) !important;
}

/* Filter Container */
.budi-courses-current-date__filter-container {
    position: relative;
    display: inline-block;
}

/* Filter Button Active State */
.budi-courses-current-date__btn--filter.active {
    background-color: #ffffff !important;
    color: var(--color-main) !important;
}

.budi-courses-current-date__btn--filter.active svg path {
    fill: var(--color-main) !important;
}

/* Filter Dropdown */
.budi-courses-current-date__filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0px 4px 20px 0px #00000026;
    z-index: 1000;
    min-width: 250px;
    margin-top: 16px;
}

.budi-courses-current-date__filter-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 10%;
    width: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 10px solid #ffffff;
}

/* Filter Header */
.budi-courses-current-date__filter-header {
    padding: 23px 23px 12px 23px;
}

.budi-courses-current-date__filter-header .budi-courses-current-date__filter-header-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
}

/* Filter Body */
.budi-courses-current-date__filter-body {
    padding: 0 23px 10px;
    max-height: 200px;
    overflow-y: auto;
}

.budi-courses-current-date__filter-body::-webkit-scrollbar {
    width: 5px;
}

.budi-courses-current-date__filter-body::-webkit-scrollbar-track {
    box-shadow: none;
}

.budi-courses-current-date__filter-body::-webkit-scrollbar-thumb {
    background-color: var(--color-main);
    outline: 0;
}

/* Filter Options */
.budi-courses-current-date__filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Custom Checkbox Styling */
.budi-courses-current-date__checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #000000;
    margin: 0;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.budi-courses-current-date__checkbox input[type="checkbox"] {
    display: none;
}

.budi-courses-current-date__checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid #181818;
    border-radius: 2px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.budi-courses-current-date__checkbox input[type="checkbox"]:checked + .budi-courses-current-date__checkmark {
    border-color: var(--color-main, #6366f1);
}

.budi-courses-current-date__checkbox input[type="checkbox"]:checked + .budi-courses-current-date__checkmark::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6558 0.434478C13.5444 0.299622 13.4106 0.191785 13.2624 0.117326C13.1142 0.0428672 12.9545 0.00329386 12.7927 0.000939761C12.6309 -0.00597198 12.4696 0.0253003 12.3188 0.0928288C12.1679 0.160357 12.0306 0.262711 11.9155 0.393578L4.71235 8.34451C4.66528 8.39731 4.60834 8.43704 4.54588 8.46067C4.48342 8.48429 4.41709 8.49119 4.35196 8.48084C4.28704 8.47175 4.22468 8.44625 4.16934 8.40618C4.11401 8.36611 4.06706 8.31246 4.03187 8.24908L2.28681 5.05071C2.20191 4.8899 2.09003 4.75012 1.95769 4.63953C1.82535 4.52894 1.67519 4.44975 1.51597 4.40656C1.35675 4.36337 1.19164 4.35705 1.03028 4.38797C0.868912 4.41889 0.71451 4.48643 0.576068 4.58666C0.437627 4.68689 0.317914 4.8178 0.223906 4.97177C0.129897 5.12573 0.0634719 5.29967 0.0285007 5.48345C-0.00647044 5.66723 -0.00928839 5.85718 0.020211 6.04222C0.0497104 6.22727 0.110937 6.40371 0.200324 6.56128L1.96198 9.78418C2.18847 10.2016 2.4935 10.5552 2.85461 10.819C3.21571 11.0827 3.62369 11.25 4.04847 11.3084C4.16646 11.3254 4.28521 11.3345 4.40412 11.3357C5.14703 11.3357 5.86099 11.0044 6.39576 10.4113L13.6202 2.43857C13.7372 2.30982 13.831 2.15579 13.8961 1.98529C13.9612 1.8148 13.9964 1.6312 13.9997 1.44501C14.003 1.25883 13.9744 1.07373 13.9153 0.900324C13.8563 0.726915 13.7681 0.568608 13.6558 0.434478Z' fill='%238A408D'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.budi-courses-current-date__checkbox:hover .budi-courses-current-date__checkmark {
    border-color: var(--color-main, #6366f1);
}

/* Responsive Design for Filter */
@media (max-width: 768px) {

    .budi-courses-current-date__buttons{
        margin-bottom: 40px;
    }

    .budi-courses-current-date__filter-dropdown {
        left: auto;
        right: 0;
        transform: none;
        margin: 8px 10px 0 10px;
    }
    
    .budi-courses-current-date__filter-dropdown::before {
        left: auto;
        right: 10%;
    }
}

.budi-courses-current-date__grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Course Item Card Layout */
.budi-courses-current-date__item {
    margin-bottom: 0;
}

.budi-courses-current-date__card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    grid-template-areas: "date content type status button";
    align-items: center;
    gap: 2rem;
    min-height: 80px;
    border: none;
    padding: 25px 38px;
}

/* Date Section (Left Side) */
.budi-courses-current-date__date-section {
    grid-area: date;
    background: none;
    color: var(--color-custom);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 120px;
    text-align: left;
    position: relative;
}

.budi-courses-current-date__date-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.budi-courses-current-date__date-full {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--color-custom);
    white-space: nowrap;
}

.budi-courses-current-date__date-full::before{
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_183_684)'%3E%3Cpath d='M15.8333 1.66667H15V0.833333C15 0.61232 14.9122 0.400358 14.7559 0.244078C14.5996 0.0877974 14.3877 0 14.1667 0C13.9457 0 13.7337 0.0877974 13.5774 0.244078C13.4211 0.400358 13.3333 0.61232 13.3333 0.833333V1.66667H6.66667V0.833333C6.66667 0.61232 6.57887 0.400358 6.42259 0.244078C6.26631 0.0877974 6.05435 0 5.83333 0C5.61232 0 5.40036 0.0877974 5.24408 0.244078C5.0878 0.400358 5 0.61232 5 0.833333V1.66667H4.16667C3.062 1.66799 2.00296 2.1074 1.22185 2.88852C0.440735 3.66963 0.00132321 4.72867 0 5.83333L0 15.8333C0.00132321 16.938 0.440735 17.997 1.22185 18.7782C2.00296 19.5593 3.062 19.9987 4.16667 20H15.8333C16.938 19.9987 17.997 19.5593 18.7782 18.7782C19.5593 17.997 19.9987 16.938 20 15.8333V5.83333C19.9987 4.72867 19.5593 3.66963 18.7782 2.88852C17.997 2.1074 16.938 1.66799 15.8333 1.66667ZM1.66667 5.83333C1.66667 5.17029 1.93006 4.53441 2.3989 4.06557C2.86774 3.59673 3.50363 3.33333 4.16667 3.33333H15.8333C16.4964 3.33333 17.1323 3.59673 17.6011 4.06557C18.0699 4.53441 18.3333 5.17029 18.3333 5.83333V6.66667H1.66667V5.83333ZM15.8333 18.3333H4.16667C3.50363 18.3333 2.86774 18.0699 2.3989 17.6011C1.93006 17.1323 1.66667 16.4964 1.66667 15.8333V8.33333H18.3333V15.8333C18.3333 16.4964 18.0699 17.1323 17.6011 17.6011C17.1323 18.0699 16.4964 18.3333 15.8333 18.3333Z' fill='%23181818'/%3E%3Cpath d='M10 13.75C10.6904 13.75 11.25 13.1904 11.25 12.5C11.25 11.8096 10.6904 11.25 10 11.25C9.30964 11.25 8.75 11.8096 8.75 12.5C8.75 13.1904 9.30964 13.75 10 13.75Z' fill='%23181818'/%3E%3Cpath d='M5.83301 13.75C6.52336 13.75 7.08301 13.1904 7.08301 12.5C7.08301 11.8096 6.52336 11.25 5.83301 11.25C5.14265 11.25 4.58301 11.8096 4.58301 12.5C4.58301 13.1904 5.14265 13.75 5.83301 13.75Z' fill='%23181818'/%3E%3Cpath d='M14.167 13.75C14.8573 13.75 15.417 13.1904 15.417 12.5C15.417 11.8096 14.8573 11.25 14.167 11.25C13.4766 11.25 12.917 11.8096 12.917 12.5C12.917 13.1904 13.4766 13.75 14.167 13.75Z' fill='%23181818'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_183_684'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: contain;
    background-position: left center;
}

/* Content Section (Center-Left) */
.budi-courses-current-date__content-section {
    grid-area: content;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 370px;
}

/* Header with Title */
.budi-courses-current-date__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
}

.budi-courses-current-date__title {
    font-weight: 500;
    color: var(--color-custom);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    margin-right: 0;
}

/* Type Section (Center) */
.budi-courses-current-date__type-section {
    grid-area: type;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 120px;
}

.budi-courses-current-date__type {
    display: flex;
    align-items: center;
    color: var(--color-custom);
    text-align: center;
    font-weight: 500;
}

/* Status Indicators (Center Right) */
.budi-courses-current-date__status {
    grid-area: status;
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: 120px;
    justify-content: center;
    color: #000;
}

.budi-courses-current-date__status .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
}

.status-available .status-indicator {
    background-color: #2ABA02;
}

.status-sold-out .status-indicator {
    background-color: #F20000;
}

/* Footer with Button (Right Side) */
.budi-courses-current-date__footer {
    grid-area: button;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/* No Courses Message */
.budi-courses-current-date__no-courses {
    text-align: center;
    padding: 3rem 1rem;
    color: #000;
    font-size: 25px;
    background: #F9FAFB;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .budi-courses-current-date__type-section {
        margin-right: 1rem;
        min-width: 100px;
    }

    .budi-courses-current-date__status {
        margin-right: 1rem;
        min-width: 100px;
    }

    .budi-courses-current-date__button .btn {
        min-width: 120px;
        padding: 0.65rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .budi-courses-current-date__card {
        grid-template-columns: 35% calc(65% - 12px);
        grid-template-areas: 
            "date content";
        min-height: auto;
        padding: 20px;
        background: #ffffff;
        border-radius: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
        gap: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .budi-courses-current-date__card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Elements that will be toggled - ensure they can be animated */
    .budi-courses-current-date__type-section,
    .budi-courses-current-date__status,
    .budi-courses-current-date__footer {
        overflow: hidden;
    }

    /* Expanded state - show hidden elements */
    .budi-courses-current-date__card.expanded {
        grid-template-areas: 
            "date content"
            "type status"
            "button button";
    }

    .budi-courses-current-date__card.expanded .budi-courses-current-date__type-section {
        grid-area: type;
    }

    .budi-courses-current-date__card.expanded .budi-courses-current-date__status {
        grid-area: status;
    }

    .budi-courses-current-date__card.expanded .budi-courses-current-date__footer {
        grid-area: button;
    }

    /* Date section - top left with calendar icon */
    .budi-courses-current-date__date-section {
        min-width: auto;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .budi-courses-current-date__date-display {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .budi-courses-current-date__date-full::before{
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_198_204)'%3E%3Cpath d='M8.89992 0.150391C7.13969 0.150391 5.41899 0.67236 3.95541 1.65029C2.49183 2.62822 1.35111 4.0182 0.677498 5.64444C0.00388527 7.27068 -0.172361 9.06015 0.171043 10.7866C0.514446 12.513 1.36208 14.0988 2.60675 15.3434C3.85142 16.5881 5.43723 17.4357 7.16364 17.7792C8.89005 18.1226 10.6795 17.9463 12.3058 17.2727C13.932 16.5991 15.322 15.4584 16.2999 13.9948C17.2778 12.5312 17.7998 10.8105 17.7998 9.05028C17.7973 6.69066 16.8588 4.42842 15.1903 2.75993C13.5218 1.09143 11.2595 0.152943 8.89992 0.150391ZM9.94862 11.5823C9.67046 11.8604 9.29324 12.0166 8.89992 12.0166C8.5066 12.0166 8.12938 11.8604 7.85122 11.5823L4.38545 8.11653L5.43415 7.06783L8.89992 10.5336L12.3946 7.03964L13.4433 8.08612L9.94862 11.5823Z' fill='%238A408D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_198_204'%3E%3Crect width='17.7998' height='17.7998' fill='white' transform='matrix(0 1 -1 0 17.7998 0.150391)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        transition: all 0.3s ease;
        transform: rotate(0deg);
    }

    .budi-courses-current-date__card.expanded .budi-courses-current-date__date-full::before{
        transform: rotate(180deg);
    }

    /* Content section - course title */
    .budi-courses-current-date__content-section {
        max-width: none;
    }

    .budi-courses-current-date__header {
        margin-bottom: 0;
    }

    .budi-courses-current-date__title {
        font-weight: 600;
        color: #333333;
        font-size: 18px;
        line-height: 1.4;
    }

    /* Type section - with location icon */
    .budi-courses-current-date__type-section {
        align-items: flex-start;
        min-width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .budi-courses-current-date__type {
        text-align: left;
        color: #666666;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        padding-left: 24px;
    }

    .budi-courses-current-date__type::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00012 0.0351562C6.79507 0.0375822 4.68101 0.914552 3.12173 2.47368C1.56245 4.03281 0.685264 6.14678 0.682617 8.35182C0.682617 10.4935 2.34095 13.8452 5.61178 18.3135C6.00117 18.8469 6.511 19.2809 7.09979 19.5801C7.68857 19.8793 8.33968 20.0352 9.00012 20.0352C9.66055 20.0352 10.3117 19.8793 10.9004 19.5801C11.4892 19.2809 11.9991 18.8469 12.3885 18.3135C15.6593 13.8452 17.3176 10.4935 17.3176 8.35182C17.315 6.14678 16.4378 4.03281 14.8785 2.47368C13.3192 0.914552 11.2052 0.0375822 9.00012 0.0351562ZM9.00012 11.6668C8.34085 11.6668 7.69638 11.4713 7.14822 11.1051C6.60005 10.7388 6.17281 10.2182 5.92052 9.6091C5.66823 9.00002 5.60222 8.32979 5.73083 7.68319C5.85945 7.03659 6.17692 6.44264 6.64309 5.97647C7.10927 5.51029 7.70321 5.19282 8.34982 5.06421C8.99642 4.93559 9.66664 5.0016 10.2757 5.25389C10.8848 5.50618 11.4054 5.93343 11.7717 6.48159C12.138 7.02975 12.3335 7.67422 12.3335 8.33349C12.3335 9.21755 11.9823 10.0654 11.3571 10.6905C10.732 11.3156 9.88417 11.6668 9.00012 11.6668Z' fill='%238A408D'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
    }

    /* Status section - with colored dot */
    .budi-courses-current-date__status {
        align-self: flex-start;
        justify-content: flex-start;
        min-width: auto;
        font-size: 14px;
        font-weight: 500;
    }

    .budi-courses-current-date__status .status-indicator {
        width: 10px;
        height: 10px;
        margin-right: 8px;
    }

    /* Footer with button */
    .budi-courses-current-date__footer {
        margin-top: 15px;
        justify-content: flex-start;
    }

    .budi-courses-current-date__button .btn {
        width: 100%;
        padding: 15px 20px;
        background-color: #663399 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 25px;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    .budi-courses-current-date__button .btn:hover {
        background-color: #552288 !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 51, 153, 0.3);
    }
}

@media (max-width: 480px) {
    .budi-courses-current-date__wrapper {
        margin: 1rem 0;
    }

    .budi-courses-current-date__card {
        padding: 15px;
        margin-bottom: 12px;
    }

    .budi-courses-current-date__card {
        gap: 12px;
    }

    .budi-courses-current-date__date-full {
        font-size: 14px;
    }

    .budi-courses-current-date__title {
        font-size: 16px;
    }

    .budi-courses-current-date__type {
        font-size: 13px;
        padding-left: 22px;
    }

    .budi-courses-current-date__type::before {
        width: 14px;
        height: 14px;
        background-size: 14px;
    }

    .budi-courses-current-date__status {
        font-size: 13px;
    }

    .budi-courses-current-date__button .btn {
        padding: 12px 16px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        min-width: auto;
        font-weight: 600;
    }
}

/* Print Styles */
@media print {
    .budi-courses-current-date__card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
        background: #f8f9fa !important;
        color: #000 !important;
    }

    .budi-courses-current-date__button {
        display: none;
    }
}

/* Load More Button Styles */
.budi-courses-current-date__load-more-container {
    display: flex;
    justify-content: center;
    margin: 50px 0 0;
}
.budi-courses-current-date__load-more-btn {
    background: var(--color-main, #8A408D);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.budi-courses-current-date__load-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.budi-courses-current-date__load-more-btn:hover:not(:disabled) {
    background: #552288;
}
.budi-courses-current-date__load-more-spinner {
    display: none;
    margin-left: 8px;
    vertical-align: middle;
}