/*  ******************************************************

ANIMATION

****************************************************** */

@keyframes pulseScale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulseScale 0.75s ease;
    animation-iteration-count: 2;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.banner-shimmer {
    position: relative;
    overflow: hidden;
}

.banner-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
    transform: skewX(-20deg);

    z-index: 0;
    /* BELOW content */
}

.banner-shimmer>* {
    position: relative;
    z-index: 1;
    /* ABOVE shimmer */
}

input,
select,
textarea {
    font-size: 16px;
}

/*  ******************************************************

BRANDING

****************************************************** */

a {
    color: #fcbb07 !important;
}

.rockphonix-bg-dark {
    background-color: #2d2e32 !important;
}

.rockphonix-bg-grey {
    background-color: #9298a1 !important;
}

.rockphonix-bg-white {
    background-color: #dddfe4 !important;
}

.rockphonix-bg-slate {
    background-color: #262c35 !important;
}

.rockphonix-bg-light {
    background-color: #fcbb07 !important;
}

.rockphonix-bg-info {
    background-color: #ffedbd !important;
}

.rockphonix-bg-success {
    background-color: #16ae3c;
}

.rockphonix-bg-warning {
    background-color: #fc0707 !important;
}

/* ================================
   Rockphonix Membership Colours
   ================================ */

/* Gold – bright and confident accent */
.rockphonix-gold {
    color: #fcbb07 !important;
}

/* Rockphonix Gold */
.rockphonix-bg-gold {
    background: linear-gradient(135deg, #fcbb07, #ffde73);
    color: #2d2e32;
    /* dark text for contrast */
}

/* Silver – cool, clean metallic tone */
.rockphonix-silver {
    color: #c0c0c0 !important;
}

/* Silver */
.rockphonix-bg-silver {
    background: linear-gradient(135deg, #c0c0c0, #e6e6e6);
    color: #1c1c1c;
}

/* Bronze – rich warm metallic with depth */
.rockphonix-bronze {
    color: #d98c4e !important;
}

/* Bronze */
.rockphonix-bg-bronze {
    background: linear-gradient(135deg, #b87333, #d98c4e);
    color: #fffaf0;
}


.rockphonix-dark {
    color: #2d2e32 !important;
}

.rockphonix-grey {
    color: #9298a1 !important;
}

.rockphonix-light {
    color: #fcbb07 !important;
}

.rockphonix-white {
    color: #dddfe4 !important;
}

.rockphonix-slate {
    color: #262c35 !important;
}

.dropdown-menu-wide {
    min-width: 240px;
}

.rockphonix-input-group {
    background-color: #3c424c;
    border: solid 1px #3c424c;
    color: #ccc;
}

.rockphonix-button,
.rockphonix-button:checked,
.rockphonix-button:focus,
.rockphonix-button:active {
    background-color: #3c424c;
    border: none;
    color: #e6e6e6;
    display: inline-block;
    padding: 6px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    text-decoration: none;
}

.rockphonix-button:hover {
    background-color: #fcbb07;
    color: #2d2e32 !important;
}

.rockphonix-button:hover i {
    color: #2d2e32 !important;
}

.rockphonix-button:disabled {
    background-color: #3c424c !important;
    color: #666;
}

.rockphonix-button:disabled i {
    color: #666 !important;
}

.rockphonix-input {
    background-color: #262c35;
    border: solid 1px #3c424c;
    color: #fff !important;
}

.rockphonix-input::placeholder {
    color: #dddfe4 !important;
    font-size: 0.9em;
    opacity: 1;
}

.rockphonix-input:focus {
    background-color: #2d2e32;
    border-color: #fcbb07;
    /* yellow border */
    box-shadow: 0 0 0 0.2rem rgba(252, 187, 7, 0.6);
    /* golden glow */
    font-size: 0.9em !important;
    outline: none;
    /* remove default outline */
}

.rockphonix-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #262c35 inset;
    /* background override */
    -webkit-text-fill-color: #ccc;
    /* text color */
    border: 1px solid #3c424c;
    /* border styling */
    transition: background-color 5000s ease-in-out 0s;
    /* prevents flash */
    font-size: 0.9em !important;
}

.rockphonix-input:-webkit-autofill:hover,
.rockphonix-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #262c35 inset;
    -webkit-text-fill-color: #999;
    border: 1px solid #3c424c;
}

.rockphonix-input-icon {
    background-color: #3c424c;
    border: solid 1px #3c424c;
    color: #ccc;
}

.icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fcbb07;
    /* Rockphonix yellow */
    color: #2d2e32;
    /* dark grey for contrast */
    font-size: 16px;
}

.rockphonix-divider {
    border-bottom: solid 1px #3c424c !important;
}

/*  ******************************************************

LAYOUT

****************************************************** */

body {
    font-family: poppins;
}

@media (min-width: 768px) {
    .content-container {
        padding-top: 90px;
    }
}

@media (max-width: 767.98px) {
    .content-container {
        padding-top: 60px;
    }
}

/*  ******************************************************

WIDTHS

****************************************************** */

.rockphonix-w-80 {
    width: 80px;
}

.rockphonix-w-100 {
    width: 100px;
}

.rockphonix-w-120 {
    width: 120px;
}

.rockphonix-w-240 {
    width: 240px;
}

/*  ******************************************************

NAV BAR

****************************************************** */

.rockphonix-nav {
    background-color: rgba(33, 37, 41, 0.8);
    /* dark with 90% opacity */
    backdrop-filter: blur(6px);
    /* optional: adds a frosted glass effect */
}

.nav-link span {
    color: #fff;
}

.nav-link:hover,
.nav-link.active {
    background-color: #fcbb07 !important;
}

.nav-link:hover span,
.nav-link.active span,
.nav-link:hover i,
.nav-link.active i {
    color: #262c35;
}

/*  ******************************************************

CARDS

****************************************************** */

.rockphonix-card {
    background-color: rgba(33, 37, 41, 0.8);
    padding: 20px;
}

.rockphonix-card i {
    color: #fcbb07;
}

.rockphonix-card.warning {
    background-color: #381e1e;
}

.rockphonix-card.warning i {
    color: #dc3545;
}

.rockphonix-card.dark {
    background-color: #212529;
}

/*  ******************************************************

CALENDAR

****************************************************** */

#calendar {

    margin-bottom: 100px;
    position: relative;

    .time-row {
        background-color: #3c424c;
        color: #dddfe4;
        height: 42px;
        border-top: 1px solid #2d2e32;
        position: relative;
        display: flex;
        align-items: flex-start;
        opacity: 1;
    }

    .time-row.offshift {
        opacity: 0.2;
    }

    .time-row:hover {
        background-color: #525965;
        cursor: pointer;
    }

    .time-row.active {
        background-color: #999;
    }

    .time-label {
        width: 70px;
        font-size: 0.8rem;
        position: absolute;
        left: 6px;
        top: 6px;
    }

    .booking {
        background-color: #dddfe4;
        cursor: pointer;
        position: absolute;
        font-size: 0.90rem;
        line-height: 1.2;
        padding: 4px;
    }

    .booking:hover {
        background-color: #fcbb07;
    }

    .booking.selected {
        background-color: #fff;
    }

    .booking.selected:hover {
        background-color: #fcbb07;
    }

    .booking.personal-time {
        background:
            repeating-linear-gradient(45deg,
                rgba(33, 33, 33, 0.8),
                /* stripe color */
                rgba(0, 0, 0, 0.8) 2px,
                transparent 2px,
                transparent 4px),
            rgba(45, 46, 50, 0.1);
        /* base background */
        border: 1px solid #2d2e32;
        color: #fff;
        padding: 8px;
    }
}

/*  ******************************************************

MINI MENU

****************************************************** */

.mini-context-menu {
    position: absolute;
    z-index: 9999;
    background: #2d2e32;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    padding: 0;
    min-width: 180px;
}

.mini-context-menu .menu-header {
    background-color: #000;
    font-size: 0.9em;
    padding: 8px;
}

.mini-context-menu .menu-item {
    background-color: #dddfe4;
    color: #262c35;
    font-size: 0.9em;
    padding: 8px 12px;
    cursor: pointer;
}

.mini-context-menu .menu-item:hover {
    background-color: #fcbb07;
    color: #2d2e32;
}

.mini-context-menu .menu-item:hover i {
    color: #2d2e32 !important;
}


/*  ******************************************************

KENDO OVERRIDES

****************************************************** */

.k-button {
    color: #fcbb07 !important;
}

.k-calendar td.k-disabled {
    opacity: 0.2;
}

.k-calendar .k-today {
    background-color: #fff;
    color: #2d2e32 !important;
}

.k-calendar .k-selected {
    background-color: #fcbb07 !important;
}

.k-calendar .k-selected .k-link {
    background-color: #fcbb07 !important;
}

.k-invalid {
    border-color: #dc3545 !important;
}

.k-listview {
    background-color: transparent !important;
    border: none;
}

.k-selected {
    background-color: #fcbb07 !important;
    color: #2d2e32 !important;
}

.k-window-title {
    /* background-color: #2d2e32 !important; */
    color: #fff !important;
}

.k-window {
    background-color: #2d2e32 !important;
    border-color: #3c424c !important;
    color: white;
    font-size: 0.9em;
    margin: 10px;
    padding: 0;
    transition: border 0.75s ease;
    max-width: 420px;
}

.k-window .k-button {
    background-color: #3c424c;
    border: none;
    color: #ccc;
    padding: 6px 8px;
    text-transform: uppercase;
    transition: background-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease;
}

.k-window .k-button:hover,
.k-window .k-button:focus {
    background-color: #fcbb07;
    color: #000 !important;
    box-shadow: 0 0 2px #fcbb07,
}