/* Body */
body {
    --contrast: #b30017;	/* Red */
    --dark: #000000;		/* Black */
    --light: #ffffff;		/* White */
    --green: #01ab6a;		/* Green */
    --highlight: #fbd465;	/* Yellow */
}

/* Highlight */
mark { background: var(--highlight); }

/* Custom CSS - Active Theme */

/* Custom CSS - This Plugin */
.ccbody{
    margin: 20px;
    background-color: white;
    padding: 40px;
    border-radius: 20px;
}
.ccbody .button{
    padding: 5px 20px;
    background-color: #beebff;
    color: #2d2d2d;
    border: 0px;
    border-radius: 5px;
}
.ccbody .divider{
    margin: 20px 0;
    border-top: 1px solid #bfd0d7;
}
.ccbody .cc-add-form{
    border: 1px solid #ebebeb;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}
.ccbody .filters-div {
    border: 2px solid #f0f0f1;
    padding: 10px;
    border-radius: 10px;
}

.ccbody .form-table th{
    width: 30px;
}

.ccbody table.cc_table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    font-family: Arial, sans-serif; /* Match the site's font */
    background-color: #f9f9f9; /* Light background */
    color: #333; /* Darker text color for readability */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.ccbody .cc_table th, .ccbody .cc_table td {
    padding: 12px 15px;
    text-align: left;
}

.ccbody .cc_table th {
    background-color: #10172a; /* Theme accent color for header */
    color: white;
    font-weight: bold;
}

.ccbody .cc_table tr:nth-child(even) {
    background-color: #f4fbff; /* Alternate row background for readability */
}
.filters-div input, .filters-div select {
    border: 2px solid #beebff;
    padding: 10px 25px 10px 10px!important;
    margin: 5px 5px 5px 0;
}
.page-template-default .filters-div .button{
    padding: 15px 20px;
    float: right;
}

.wp-admin .filters-div input, .wp-admin .filters-div select {
    border: 2px solid #beebff;
    padding: 2px 25px 3px 10px!important;
}


.ccbody .cc_table tr:hover {
    background-color: #e7f5fe; /* Hover effect */
}
.ccbody:has(.filters-div) {
    padding-bottom: 0;
    margin-bottom: 0;
}


.ccbody table.cc_table_stats {
    width: auto;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    font-family: Arial, sans-serif; /* Match the site's font */
    background-color: #f9f9f9; /* Light background */
    color: #333; /* Darker text color for readability */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
.cc_table_stats .division_th{
    font-weight: 600;
    color: #10172a;

}
.ccbody .cc_table_stats th, .ccbody .cc_table_stats td {
    padding: 12px 15px;
    text-align: center;
}

.ccbody .cc_table_stats th {
    background-color: #10172a; /* Theme accent color for header */
    color: white;
    font-weight: bold;
}

.ccbody .cc_table_stats tr:nth-child(even) {
    background-color: #f4fbff; /* Alternate row background for readability */
}
.ccbody .cc_table_stats tr:hover {
    background-color: #e7f5fe; /* Hover effect */
}


input.edit-mode, select.edit-mode {
    width: 100px;
}
form#bulk-email-form input[type="text"], form#bulk-email-form textarea, #bulk-email-form select {
    width: 400px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
}
#bulk-email-form label {
    color: #10172a;
    font-size: 16px;
    font-weight: 500;
}
.radio-labels{
    display: inline-block!important;
}
.complete-registration .radio-labels{
    display: inline-block!important;
    width: auto;
}
.complete-registration input#pre-match {
    width: auto!important;
}
/* Responsive Styles */
@media only screen and (max-width: 800px) {
    .cc_table th, .cc_table td {
        white-space: pre-wrap;
    }
    .ccbody .cc_table th, .ccbody .cc_table td {
        padding: 5px;
    }
    .filters-div input, .filters-div select {
        width: 45%;
        display: inline-block;
    }
    .page-template-default .filters-div .button {
        padding: 15px 20px;
        float: unset;
        width: 100%;
    }
}

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

}

/* SQUADS CARDS */

.cards-squad,
.cards-squad :not(script):not(style):not(.floating-div *),
::before {
    display: grid;
}

.cards-squad{
    grid-gap: 2em;
    grid-template-columns: repeat(auto-fit, Min(100%, 9rem));
    place-content: center;
    min-height: 100vh;
    font: 900 1.25em/1.25 sans-serif;
    text-align: center;
    text-transform: uppercase;
}

.cards-squad article {
    --m: calc(0.5 * (var(--n) - 1));
    --abs: Max(calc(var(--i) - var(--m)), calc(var(--m) - var(--i)));
    --val: calc(var(--abs) * (1 + 0.5 * var(--i)) / var(--n));
    --dt0: calc(var(--val) *1s);
    --dt1: calc((var(--val) + 1) *1s);
    --dt2: calc((var(--val) + 1.5) *1s);
    --dt3: calc((var(--val) + 2) *1s);
    --dt4: calc((var(--val) + 2.5) *1s);
    --dt5: calc((var(--val) + 3) *1s);
    overflow: hidden;
    padding-bottom: 1rem;
    backface-visibility: hidden;
    transform: perspective(25em);
    background: #fff content-box;
    filter: drop-shadow(0px 0px 5px);
    animation: card 1s ease-out var(--dt0) backwards, cost 1s var(--dt4) backwards;
}
.cards-squad article ::before,
.cards-squad article ::after,
.cards-squad article button {
    --j: 1;
    --sgn-j: calc(2 * var(--j) - 1);
    --not-j: calc(1 - var(--j));
    --mask: linear-gradient(
            calc(var(--sgn-j) * 90deg),
            red 33.333%,
            transparent 66.667%
    )
    calc(var(--not-j) * 100%) / 300%;
}

@keyframes card {
    0% {
        transform: perspective(25em) rotatey(0.5turn);
    }
}
.cards-squad .card-header {
    grid-gap: 1rem;
    padding: 1rem 0.5em 1rem;
    transform-origin: 100% 100%;
    background: linear-gradient(var(--grad));
    color: #fff;
    counter-reset: cost var(--cost);
    animation: head 1s ease-out var(--dt1) backwards;
}
.cards-squad span.squad_availability {
    place-self: center;
    place-content: center;
    border: solid 2px currentcolor;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 14px;
    border-radius: 50%;
    animation: ring 1s ease-out var(--dt3) backwards;
    content: "$" counter(cost);
}
.cards-squad .squad_name {
    font-size: 22px;
    color: #10172a;
    margin-bottom: 0px;
}
.cards-squad span.squad_capacity {
    font-size: 14px;
    font-weight: 500;
}
/* Container for the progress bar with background color */
.progress-bar-container {
    height: 4px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 8px;
}

/* Default progress bar styles */
.progress-bar {
    height: 100%;
    width: var(--capacity-percent);
    border-radius: 4px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* Color classes */
.progress-bar.green {
    background-color: #0fcf7b;
}
.progress-bar.orange {
    background-color: #ffa500;
}
.progress-bar.red {
    background-color: #ff4c4c;
}
/* Floating div styling */
.floating-div {
    display: none; /* Initially hidden */
    grid-column: 1 / -1; /* Spans the entire width of the grid */
    width: 100%; /* Ensures it takes the full width */
    background-color: #fff; /* Background color */
    padding: 20px; /* Padding for content inside */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    z-index: 100; /* Ensure it's above other elements */
    position: relative; /* Prevent overlapping due to stacking context */
    border: 1px solid #ccc; /* Optional border */
    text-transform: none;
}
.floating-div td{
    font-weight: 500;
}
/* Style for the close button */
.floating-div .close-button {
    position: absolute;
    top: 0;
    right: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}


.cards-squad .floating-div .close-button:hover {
    background-color: transparent!important;
    color: red;
}

/* Ensure the articles below adjust when the floating div is shown */
.cards-squad {
    position: relative; /* Ensures articles position correctly with floating div */
}

.complete-registration label{
    width: 100%;
    display: inline-block;
    margin-top: 10px;
}
.complete-registration select, .complete-registration input {
    width: 90%;
}
.complete-registration input[type="submit"]{
    margin-top: 10px;
}
.complete-registration input[type="submit"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.squad-message {
    background: #e7f6ff;
    padding: 20px;
    /* margin: 40px; */
    width: 80%;
    margin: 40px auto;
    text-align: center;
    border-radius: 10px;
}
.squad-message h3 {
    color: #F44336;
}
.squad-message p {
    color: black;
}
.squad-message button {
    background-color: #0f172a;
    color: white;
}
.my-account-center{
    text-align: center;
    font-weight: 600;
    font-size: 20px;
}
.woocommerce-MyAccount-content .my-account-center{
    font-size: 18px;
 }
.checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #7ac142;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}.checkmark{width: 56px;height: 56px;border-radius: 50%;display: block;stroke-width: 2;stroke: #fff;stroke-miterlimit: 10;margin: 10px auto;box-shadow: inset 0px 0px 0px #7ac142;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}.checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}@keyframes stroke{100%{stroke-dashoffset: 0}}@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}
@keyframes head {
    0% {
        transform: translate(-100%) skewx(35deg);
    }
}
@keyframes ring {
    0% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes line {
    0% {
        clip-path: inset(0 50% round 4px);
    }
}
/*.cards-squad h3::before, .cards-squad h3::after {
    place-self: center;
    mask: var(--mask);
    animation: text 1s ease-out var(--dt5) backwards;
}*/

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS devices */
}

.cc_table {
    width: 100%; /* Ensures the table takes full width inside the container */
    border-collapse: collapse;
}

.cc_table th, .cc_table td {
    white-space: nowrap; /* Prevents content from wrapping */
    padding: 8px; /* Adds padding for better readability */
    text-align: left;
}

@media (max-width: 768px) {
    .cc_table {
        font-size: 12px; /* Optional: Reduce font size for smaller screens */
    }
    .ccbody{
        padding: 0;
        margin: 10px;
    }
}

@keyframes move {
    0% {
        transform: translate(50%);
    }
}
.cards-squad section {
    margin-bottom: -1rem;
    border-bottom: solid 1rem #e8f6ff;
    background-color: inherit;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), 50% 100%, 0 calc(100% - 1rem));
}

.cards-squad button {
    place-content: center;
    line-height: 3;
    mask: var(--mask);
    cursor: pointer;
    animation: text 1s ease-out var(--dt2) backwards;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 0;
}
button.join-button:focus {
    background-color: #e8f6ff;
    color: #10172a;
}
.cards-squad button:hover{
    background-color: #10172a!important;
    border-radius: 0;
}


.cards-squad section:hover{
    border-color: #10172a;
    background: #10172a;
}
@keyframes text {
    0% {
        mask-position: calc(var(--j) * 100%);
    }
}

.tile-container {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.tile-option {
    position: relative;
    cursor: pointer;
}

.tile-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tile-option label {
    display: block;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.tile-option label:hover {
    border-color: #0073aa;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.tile-option input[type="radio"]:checked + label {
    border-color: #0073aa;
    background-color: #f0f8ff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.tile-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.tile-content p {
    font-size: 14px;
    color: #666;
}