body {
    font-family: "Outfit", sans-serif;
}

.glass-header {
    background: linear-gradient(110.43deg, #f0aab6 -136.75%, #e32929 134.95%);
}

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
}

#page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: linear-gradient(0deg, rgba(231, 0, 11, 0.2) 33%, #e7000b 100%);
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-text {
    margin-top: 20px;
    color: #e7000b;
    font-size: 16px;
    font-weight: 500;
}

.template-thumbnail.selected .overlay {
    opacity: 1 !important;
}

/* Custom Checkbox Styling - Red Circle with White Checkmark */
.template-checkbox,
.screen-checkbox,
.favorite-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    cursor: pointer !important;
    position: relative;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
}

.template-checkbox:hover,
.screen-checkbox:hover,
.favorite-checkbox:hover {
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.1) !important;
}

.template-checkbox:checked,
.screen-checkbox:checked,
.favorite-checkbox:checked {
    background-color: #e7000b !important;
    border-color: #e7000b !important;
}

.template-checkbox:checked::after,
.screen-checkbox:checked::after,
.favorite-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    display: block;
}

.template-checkbox:focus,
.screen-checkbox:focus,
.favorite-checkbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.2) !important;
}
/* In multi-select mode the overlay is force-shown via !opacity-100 (added by JS).
   Hide view/edit buttons so only the checkbox remains visible.
   Normal hover is unaffected — it uses group-hover:opacity-100, not !opacity-100. */
.template-thumbnail .bg-black\/5.\!opacity-100 .view-template,
.template-thumbnail .bg-black\/5.\!opacity-100 .open-design {
    display: none !important;
}
/* Mirror template-checkbox styles for folder-checkbox so folder checkboxes match visuals and behavior */
.folder-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    cursor: pointer !important;
    position: relative;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
}

.folder-checkbox:hover {
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.1) !important;
}

.folder-checkbox:checked {
    background-color: #e7000b !important;
    border-color: #e7000b !important;
}

.folder-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    display: block;
}

.folder-checkbox:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(231, 0, 11, 0.2) !important;
}

/* Ensure folder-specific tweaks on light background */
.folder-check .folder-checkbox {
    border-color: rgba(54,65,83,0.6) !important;
    background-color: transparent !important;
    z-index: 20 !important;
}

.folder-check .folder-checkbox:hover {
    border-color: rgba(54,65,83,0.8) !important;
    box-shadow: 0 0 0 3px rgba(54,65,83,0.06) !important;
}

.folder-check .folder-checkbox:checked {
    background-color: #e7000b !important;
    border-color: #e7000b !important;
}

.folder-check .folder-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    display: block;
}
#ms-btn-add-to-favorites svg path {
    transition: all 0.2s ease;
}

/* Hover (only when NOT active) */
#ms-btn-add-to-favorites:not(.active):hover svg path {
    stroke: #E7000B;
}
#ms-btn-add-to-favorites:not(.active):hover svg rect {
    fill: #E7000B;
}

/* Active state (always filled) */
#ms-btn-add-to-favorites.active svg path {
    fill: #E7000B;
    stroke: #E7000B;
}

#btn-add-to-favorites.active svg path,
.temp-btn-add-to-favorites.active svg path {
    stroke: #E7000B;
    fill: #E7000B;
}

#btn-add-to-favorites.active .favorite-text,
.temp-btn-add-to-favorites.active .favorite-text {
    color: #E7000B;
}

/* Hover (only when NOT active) */
#ms-btn-move-to-folder:not(.active):hover svg path {
stroke: #E7000B;
}

/* Hover (only when NOT active) */
#ms-btn-download:not(.active):hover svg path {
    stroke: #E7000B;
}


/* Hover (only when NOT active) */
#ms-btn-delete:not(.active):hover svg path {
    stroke: #E7000B;
}

/* Hover (only when NOT active) */
#ms-close-btn:not(.active):hover svg path {
    stroke: #E7000B;
}

#templates-page-container .template-card {
    width: 100% !important;
}