/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* CSS HEX */
:root {
    /* Brand Colors */
    --celadon: #a9e5bbff;
    --vanilla: #fcf6b1ff;
    --xanthous: #f7b32bff;
    --red-cmyk: #f72c25ff;
    --brand-pink: #f30072;
    --dark-purple: #2d1e2fff;

    /* Bootstrap Breakpoints (for use in CSS)
       Note: These match Bootstrap 5's breakpoint values
       Usage: @media (max-width: var(--bs-breakpoint-md-max)) { ... } */
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;

    /* Max-width breakpoints (for use with max-width queries)
       Bootstrap convention: use .98px to avoid overlap issues */
    --bs-breakpoint-sm-max: 575.98px;
    --bs-breakpoint-md-max: 767.98px;
    --bs-breakpoint-lg-max: 991.98px;
    --bs-breakpoint-xl-max: 1199.98px;
    --bs-breakpoint-xxl-max: 1399.98px;

    /* App Layout Dimensions */
    --app-sidebar-width: 260px;
    --app-title-height: 78px;
    --app-mobile-header-height: 31px;
    --app-footer-height: 36px;
    --app-bottom-menu-height: 56px;

    /* Custom Colors */
    --dropzone-color: #cfe4f9;
}

/* Required field indicator */
.form-label.required::after {
    content: " *";
    color: var(--red-cmyk);
}
/* on boostrap md and smaller app-title-height is 0 */
@media (max-width: var(--bs-breakpoint-md)) {
    :root {
        --app-title-height: 31px;
    }
}

/* Mobile adjustments for CSS variables */
@media (max-width: 782px) {
    :root {
        --app-footer-height: 0px;
    }
}

.mw-700 {
    max-width: 700px;
}

.mw-1100 {
    max-width: 1100px;
}

.mw-1200 {
    max-width: 1200px;
}

.mw-1300 {
    max-width: 1300px;
}

.top-3 {
    top: 15px;
}

.mh-40 {
    min-height: 40vh;
}

.max-h-300 {
    max-height: 300px;
}

.right-3 {
    right: 15px;
}

.cursor-pointer {
    cursor: pointer;
}

/* ===================================================================
   CUSTOM UTILITY CLASSES
   Bootstrap extensions for common patterns
   =================================================================== */

/* Padding utilities - values not in Bootstrap's spacing scale */
.pb-30 {
    padding-bottom: 30px;
}

/* Spinner size utilities - for Bootstrap spinner-border component */
.spinner-sm {
    width: 2rem;
    height: 2rem;
}

.spinner-lg {
    width: 3rem;
    height: 3rem;
}

/* Z-index utilities - common layering values */
.z-1 {
    z-index: 1;
}

.z-10 {
    z-index: 10;
}

/* ===================================================================
   SAVE INDICATOR
   =================================================================== */
/* Subtle save confirmation indicator that appears in top-right */

.save-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 9999;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Adjust for WordPress admin bar */
body.admin-bar .save-indicator {
    top: calc(20px + var(--wp-admin-bar-height-desktop));
}

@media (max-width: 782px) {
    body.admin-bar .save-indicator {
        top: calc(20px + var(--wp-admin-bar-height-mobile));
    }
}

.save-indicator.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Spinner animation - shows while saving */
.save-indicator .spinner {
    width: 18px;
    height: 18px;
    animation: rotate 1s linear infinite;
}

.save-indicator .spinner circle {
    stroke: white;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

/* Checkmark - shown briefly after spinner */
.save-indicator .checkmark {
    width: 18px;
    height: 18px;
    display: none;
}

.save-indicator .checkmark circle {
    stroke: white;
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
    fill: none;
}

.save-indicator .checkmark path {
    stroke: white;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}

/* Animations */
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* ===================================================================
   Media Play Icons (used on thumbnails for video/audio content)
   =================================================================== */

.media-play-icon-wrapper {
    z-index: 5;
    pointer-events: none;
}

.media-play-icon {
    font-size: 3rem;
    color: rgba(var(--bs-white-rgb), 0.8);
}

.youtube-play-icon {
    color: #ff0000;
}

.pdf-icon {
    color: #dc3545;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.open-pdf-link {
    text-decoration: none;
    z-index: 2;
}

.open-pdf-img {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: transform 0.2s ease;
}

.open-pdf-link:hover .open-pdf-img {
    transform: scale(1.05);
}

/* ===================================================================
   Album Theme Selector Component Styles
   =================================================================== */

.theme-card,
.font-card {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    border: 2px solid transparent;
}

.theme-card.selected,
.font-card.selected {
    border-color: var(--bs-primary);
}

.selected-indicator {
    width: 30px;
    height: 30px;
}

/* ===================================================================
   Event Selection Tool Component Styles
   =================================================================== */

.event-list {
    min-height: 50px;
}

/* ===================================================================
   Close Modal Button - White Stroke for Contrast
   =================================================================== */

.btn-close-modal i.fa-times {
    -webkit-text-stroke: 1.5px white;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 2px white;
}

/* ===================================================================
   Media Image Update Processing Indicator
   =================================================================== */

img.processing-media-update {
    position: relative;
    opacity: 0.5;
}

img.processing-media-update::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===================================================================
   Quill Editor in Offcanvas
   =================================================================== */

/* Container styling */
.quill-editor {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Remove default Quill border since we handle it on container */
.quill-editor .ql-container {
    border: none;
    font-size: 1rem;
    font-family: inherit;
}

.quill-editor .ql-editor {
    min-height: 120px;
    padding: 0.75rem;
}

.quill-editor .ql-editor.ql-blank::before {
    font-style: normal;
    color: #6c757d;
}

/* Compact toolbar for offcanvas */
.quill-editor .ql-toolbar {
    border: none;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.375rem 0.375rem 0 0;
}

.quill-editor .ql-toolbar button {
    width: 28px;
    height: 28px;
}


/* Event editor full-height Quill */
#event-content-editor .ql-editor {
    min-height: 400px;
    font-size: 1rem;
}


/* ===================================================================
   Typography Harmonization — 3rd-party Widget Overrides
   ===================================================================
   Quill (snow theme) and Uppy ship their own font stacks and greys,
   which bleed onto the page. Force both to inherit the app's system-ui
   stack and collapse their hardcoded text colors onto --bs-body-color. */

/* Quill: toolbar + editor inherit font family; toolbar picker color
   maps to body color (Quill's default is #444). */
.ql-toolbar,
.ql-toolbar *,
.ql-editor {
    font-family: inherit;
}

.ql-snow .ql-picker,
.ql-snow .ql-picker-label {
    color: var(--bs-body-color);
}

/* Uppy: dashboard inherits font family; title (#000) and tab labels
   (#525252) map to body color; browse link uses brand pink. */
.uppy-Dashboard,
.uppy-Dashboard * {
    font-family: inherit;
}

.uppy-Dashboard-AddFiles-title,
.uppy-DashboardTab-btn {
    color: var(--bs-body-color);
}

.uppy-Dashboard-browse {
    color: var(--bs-link-color);
}

.uppy-Dashboard-browse:hover,
.uppy-Dashboard-browse:focus {
    color: var(--bs-link-hover-color);
}

/* Lapsed subscription — content visible but non-interactive */
.lapsed-content {
    pointer-events: none;
    user-select: none;
}

.lapsed-content .card-body {
    opacity: 0.45;
}