/* ===== GLOBAL STYLES ===== */

.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.subscribe-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.subscribe-form .form-control:focus {
    box-shadow: none;
    outline: none;
}

.form-outline {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-outline .form-control {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    background-color: transparent;
    padding: 0.75rem;
}

.form-outline .form-control:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
    outline: none;
}

.form-outline .form-control:focus + .form-label,
.form-outline .form-control:not(:placeholder-shown) + .form-label {
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.875rem;
    color: #1976d2;
    background-color: white;
    padding: 0 0.25rem;
    z-index: 2;
}

.form-outline .form-label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 1rem;
    color: #6c757d;
    pointer-events: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

.form-control.is-valid {
    border-color: #198754;
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.valid-feedback {
    display: block !important;
    color: #198754;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.invalid-feedback {
    display: block !important;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    z-index: 1;
}

.hidden-navbar {
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    z-index: 1030;
    transition: top 0.4s ease-in-out;
}

.navbar-visible {
    top: 0;
}

.arrow-trigger {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background-color: #343a40;
    color: white;
    padding: 6px 30px;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.arrow-trigger.hidden {
    opacity: 0;
    pointer-events: none;
}

.navbar-collapse-roll {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-collapse-roll.show {
    display: flex !important;
    opacity: 1;
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.dropdown-menu {
    text-align: left;
    align-items: flex-start !important;
}

.dropdown-menu .dropdown-item {
    text-align: left;
}

.custom-language-dropdown {
    left: 50%;
    transform: translateX(-50%);
}

.language-toggle::after {
    display: none;
}

.fade-transition {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}


.fade-transition.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.custom-centered-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    z-index: 1000;
}

.card {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--HM-shadow);
    overflow: hidden;
}

.card-noAnimation {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--HM-shadow);
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 8px 24px var(--HM-shadow) !important;
    transform: translateY(-2px);
}

.card-header {
    background: linear-gradient(135deg, var(--HM-primary), var(--HM-primary-hover)) !important;
    color: white !important;
    padding: 1rem 1.25rem !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

.card-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(30px, -30px);
}

.card-title {
    color: white !important;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
}

.card-body {
    padding: 1.5rem 1.25rem !important;
    background: var(--HM-card-bg) !important;
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .navbar-collapse-roll.show {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.5rem;
    }

    .navbar-collapse-roll .d-flex.align-items-center {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
}




/* =========================
   ADMIN EDIT → GLOBAL STYLES MOVED FROM edit.html.twig
   Scoped to inputs, selects, checkboxes, datetime/password inputs, and buttons.
   NOTE: Variables below are required by these rules.
   ========================= */
/* Theme variables copied from Search */



@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --HM-bg: var(--HM-bg-dark);
        --HM-text: var(--HM-text-dark);
        --HM-card-bg: var(--HM-card-bg-dark);
        --HM-border: var(--HM-border-dark);
        --HM-shadow: var(--HM-shadow-dark);
        --HM-text-muted: #9ca3af;
        --HM-table-hover: rgba(55,65,81,0.7);
    }

    .form-label {
        color: var(--HM-text); font-weight: 500; font-size: 0.9rem; margin-bottom: 0.5rem;
    }

    .form-label.required::after {
        content: '*'; color: var(--HM-primary); margin-left: .25rem;
    }

    .input,
    .select {
        width: 100%;
        border: 2px solid var(--HM-border);
        border-radius: 10px;
        padding: 0.22rem 0.9rem;
        background: var(--HM-card-bg) !important;
        color: var(--HM-text) !important;
        transition: border-color 0.2s, box-shadow 0.2s;
        appearance: none;
        caret-color: var(--HM-text);
    }

    .input:focus,
    .select:focus {
        border-color: var(--HM-primary);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        background: var(--HM-card-bg) !important;
        color: var(--HM-text) !important;
        outline: none;
    }

    .input::placeholder {
        color: var(--HM-text-muted);
    }

    .select-wrap {
        position: relative; overflow: visible; z-index: 10;
    }

    .select-wrap .select {
        padding-right: 2.6rem; background-image: none !important;
    }

    .select-caret {
        position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
        width: 18px; height: 18px; pointer-events: none; opacity: 0.95;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        background-repeat: no-repeat; background-size: contain; background-position: center;
    }

    .select-small {
        background: var(--HM-card-bg) !important;
        border: 2px solid var(--HM-border) !important;
        border-radius: 8px !important;
        color: var(--HM-text) !important;
        padding: 0.375rem 1.4rem 0.375rem 0.5rem;
        height: 32px;
        width: 60px;
        min-width: 60px;
        font-size: 0.9rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .select-caret-small {
        position: absolute;
        right: 1.55rem;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;
        pointer-events: none;
        opacity: 0.95;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    input[type="date"].input::-webkit-calendar-picker-indicator {
        filter: invert(1); opacity: 0.8; cursor: pointer;
    }

    .password-input-container {
        position: relative;
    }

    .password-input {
        padding-right: 2.5rem;
    }

    .password-toggle {
        position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--HM-text-muted); cursor: pointer;
    }

    .password-toggle:hover {
        color: var(--HM-text);
    }

    .password-feedback-row {
        display: flex; justify-content: space-between; align-items: flex-start; margin-top: .35rem; gap: 1rem;
    }

    .password-feedback-row .password-strength {
        flex: 1;
    }

    .password-feedback-row .password-match-indicator {
        flex: 1; text-align: right;
    }

    .strength-meter {
        height: 6px; background: var(--HM-border); border-radius: 4px; overflow: hidden; margin-bottom: .25rem;
    }

    .strength-bar {
        height: 100%; width: 0%; transition: width .25s, background-color .25s;
    }

    .strength-0 .strength-bar {
        width: 10%; background: #ef4444;
    }

    .strength-1 .strength-bar {
        width: 35%; background: #f59e0b;
    }

    .strength-2 .strength-bar {
        width: 60%; background: #fbbf24;
    }

    .strength-3 .strength-bar {
        width: 85%; background: #10b981;
    }

    .strength-4 .strength-bar {
        width: 100%; background: #059669;
    }

    .strength-text, .match-text {
        color: var(--HM-text-muted); font-size: .85rem;
    }

    .match-text.match {
        color: #10b981; font-weight: 700;
    }

    .match-text.no-match {
        color: #ef4444; font-weight: 700;
    }

    .input.is-invalid {
        border-color: #ef4444 !important;
    }

    .input.is-valid {
        border-color: #10b981 !important;
    }

    /* CHECKBOX – fixed broken rule and tick rendering */
    .checkbox-wrapper {
        display: flex; align-items: center; margin-top: .5rem;
    }

    .checkbox-wrapper input[type="checkbox"] {
        display: none;
    }

    .checkbox-label {
        display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; color: var(--HM-text); position: relative;
    }

    .checkbox-label::before {
        content: '';
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid var(--HM-border);
        border-radius: 5px;
        background: var(--HM-card-bg);
        transition: border-color .15s, background-color .15s;
        margin-right: 0.5rem;
    }

    .checkbox-wrapper input[type="checkbox"]:focus + .checkbox-label::before,
    .checkbox-wrapper input[type="checkbox"] + .checkbox-label:hover::before {
        border-color: var(--HM-primary);
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    }

    .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::before {
        background: var(--HM-primary);
        border-color: var(--HM-primary);
    }

    .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::after {
        content: '';
        position: absolute;
        left: 13%;
        top: 42%;
        transform: translate(-50%, -50%) rotate(45deg); /* 🔥 perfect centering */
        width: 7px;
        height: 14px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        pointer-events: none;
    }

    .btn-secondary {
        background: linear-gradient(135deg, var(--HM-secondary), #4b5563) !important;
        border: none !important;
        border-radius: 8px !important;
        color: white !important;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-secondary:hover {
        background: linear-gradient(135deg, #4b5563, #374151) !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--HM-primary), var(--HM-primary-hover)) !important; border: none !important; border-radius: 8px !important; color: #fff !important; padding: 0.75rem 1.5rem; font-weight: 500; transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--HM-primary-hover), #991b1b) !important;
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }

    .input:focus,
    .select:focus,
    .btn-primary:focus {
        outline: none !important;
        box-shadow: 0 0 0 2px var(--HM-accent) !important;
    }
}



/* ===== ADMIN SPINNER ANIMATION ===== */
@keyframes loading-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ===== ADMIN SPINNER (moved from search.html.twig) ===== */
.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--HM-border);
    border-radius: 50%;
    border-top: 2px solid var(--HM-primary);
    animation: loading-spin 1s linear infinite;
}


/* ===== MOVED FROM search.html.twig: hm-table styles ===== */

/* Table Styles */
.hm-table-responsive{
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--HM-border);
}

.hm-table{
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--HM-card-bg) !important;
}

.hm-table-head{
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
}

[data-theme="dark"] .hm-table-head{
    background: linear-gradient(135deg, #374151, #4b5563) !important;
}

:root:not([data-theme="light"]) .hm-table-head{
    background: linear-gradient(135deg, #374151, #4b5563) !important;
}

.hm-table-th{
    background: transparent !important;
    color: var(--HM-text) !important;
    font-weight: 600 !important;
    padding: 1rem 0.75rem !important;
    border-bottom: 2px solid var(--HM-border) !important;
    border-right: 1px solid var(--HM-border) !important;
    font-size: 0.9rem;
    white-space: nowrap;
}

[data-theme="dark"] .hm-table-th{
    color: #f9fafb !important;
}

:root:not([data-theme="light"]) .hm-table-th{
    color: #f9fafb !important;
}

.hm-table-th:last-child{
    border-right: none !important;
}

.sortable.hm-table-th{
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.hm-table-body .hm-table-row{
    transition: all 0.3s ease;
}

.hm-table-cell{
    padding: 1rem 0.75rem !important;
    border-bottom: 1px solid var(--HM-border) !important;
    border-right: 1px solid var(--HM-border) !important;
    color: var(--HM-text) !important;
    font-size: 0.9rem;
}

.hm-table-cell:last-child{
    border-right: none !important;
}

.hm-table-responsive{
    font-size: 0.8rem;
}

.hm-table-th, .hm-table-cell{
    padding: 0.5rem !important;
}

/* Loading States */
.hm-table-body.loading{
opacity: 0.7;
pointer-events: none;
}

        /* ===== MARKET SEARCH PAGE STYLES ===== */
        /* Market search page specific styles - for market search and related pages */
        .market-item-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .market-item-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px var(--HM-shadow) !important;
        }
        
        .market-item-image .image-placeholder {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            transition: background 0.3s ease;
        }
        
        [data-theme="dark"] .market-item-image .image-placeholder {
            background: linear-gradient(135deg, #2d3748, #4a5568);
        }
        
        :root:not([data-theme="light"]) .market-item-image .image-placeholder {
            background: linear-gradient(135deg, #2d3748, #4a5568);
        }
        
        .market-pagination .pagination .page-link {
            background: var(--HM-card-bg);
            border: 1px solid var(--HM-border);
            color: var(--HM-text);
            padding: 0.5rem 0.75rem;
            margin: 0 0.125rem;
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .market-pagination .pagination .page-link:hover {
            background: var(--HM-primary);
            border-color: var(--HM-primary);
            color: white;
        }
        
        .market-pagination .pagination .page-item.active .page-link {
            background: var(--HM-primary);
            border-color: var(--HM-primary);
        }
        
        /* ===== MARKET VIEW PAGE STYLES ===== */
        /* Market view page specific styles - for market item detail page */
        /* Market item main image area – uses themed surface */
.market-item-gallery .main-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--HM-card-bg);
}

        
        .market-item-gallery .main-image-container img {
            width: 100%;
            height: auto;
            max-height: 500px;
            object-fit: contain;
            transition: transform 0.3s ease;
        }
        
        .market-item-gallery .main-image-container:hover img {
            transform: scale(1.02);
        }
        
        .thumbnail-gallery .thumbnail {
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 6px;
            overflow: hidden;
            transition: border-color 0.3s ease;
        }
        
        .thumbnail-gallery .thumbnail:hover,
        .thumbnail-gallery .thumbnail.active {
            border-color: var(--HM-primary);
        }
        
        .thumbnail-gallery .thumbnail img {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }
        
        .bg-orange {
            background-color: #FF6B35 !important;
        }
        
        .btn-orange {
            background-color: #FF6B35;
            border-color: #FF6B35;
            color: white;
            font-weight: 600;
        }
        
        .btn-orange:hover {
            background-color: #e55a2e;
            border-color: #e55a2e;
            color: white;
        }
        
        .text-orange {
            color: #FF6B35 !important;
        }
        
        .seller-avatar {
            flex-shrink: 0;
        }
        
        .delivery-option {
            padding: 0.25rem 0;
        }
        
        .payment-icon {
            height: 20px;
            width: 30px;
            border-radius: 3px;
            margin: 0 2px;
        }
        
        .protection-info {
            background: var(--HM-card-bg);
            padding: 0.75rem;
            border-radius: 6px;
            border: 1px solid var(--HM-border);
        }
        
        [data-theme="dark"] .protection-info {
            background: #2d3748;
            border-color: #4a5568;
        }
        
        :root:not([data-theme="light"]) .protection-info {
            background: #2d3748;
            border-color: #4a5568;
        }
        
        .market-item-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        /* Smaller cards in market view */
        #market-view-container .card {
            border-radius: 8px;
        }
        
        #market-view-container .card-header {
            background: var(--HM-card-bg);
            border-bottom: 1px solid var(--HM-border);
            padding: 0.75rem 1rem;
        }
        
        #market-view-container .card-body {
            padding: 1rem;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .market-item-gallery .main-image-container img {
                max-height: 300px;
            }
            
            .thumbnail-gallery .thumbnail img {
                height: 100px;
            }
            
            #market-view-container .card-body {
                padding: 0.75rem;
            }
        }
        
        /* Badge styles for tags */
        .badge.bg-light {
            background-color: var(--HM-card-bg) !important;
            border: 1px solid var(--HM-border);
            color: var(--HM-text) !important;
        }
        
        .badge.bg-light:hover {
            background-color: var(--HM-primary) !important;
            border-color: var(--HM-primary);
            color: white !important;
        }
        
        .object-fit-cover {
            object-fit: cover;
        }
        
        .object-fit-contain {
            object-fit: contain;
        }
        
        .market-item-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        
        /* ===== MARKET CREATE PAGE STYLES ===== */
        /* Market create page specific styles - for market create form page */
        .market-create-form .form-group {
            margin-bottom: 1rem;
        }
        
        .market-create-form .required::after {
            content: '*';
            color: var(--HM-primary);
            margin-left: 0.25rem;
        }
        
        .market-create-form .checkbox-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        
        .market-create-form .checkbox-wrapper input[type="checkbox"] {
            display: none;
        }
        
        .market-create-form .checkbox-label {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            cursor: pointer;
            color: var(--HM-text);
            position: relative;
            font-weight: 500;
        }
        
        .market-create-form .checkbox-label::before {
            content: '';
            display: inline-block;
            width: 22px;
            height: 22px;
            border: 2px solid var(--HM-border);
            border-radius: 5px;
            background: var(--HM-card-bg);
            transition: border-color 0.15s, background-color 0.15s;
            margin-right: 0.5rem;
        }
        
        .market-create-form .checkbox-wrapper input[type="checkbox"]:focus + .checkbox-label::before,
        .market-create-form .checkbox-wrapper input[type="checkbox"] + .checkbox-label:hover::before {
            border-color: var(--HM-primary);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        }
        
        .market-create-form .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::before {
            background: var(--HM-primary);
            border-color: var(--HM-primary);
        }
        
        .market-create-form .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::after {
            content: '';
            position: absolute;
            left: 13%;
            top: 42%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 7px;
            height: 14px;
            border-right: 3px solid #fff;
            border-bottom: 3px solid #fff;
            pointer-events: none;
        }
        
        .market-create-form .select-wrap {
            position: relative;
            overflow: visible;
            z-index: 10;
        }
        
        .market-create-form .select-wrap .select {
            padding-right: 2.6rem;
            background-image: none !important;
        }
        
        /* ===== MARKET WATCHLIST STYLES ===== */
        /* Market watchlist specific styles - for heart icons and watch functionality */
        .like-icon {
            transition: all 0.3s ease;
        }

        .like-icon:hover {
            transform: scale(1.1);
            background: rgba(255,255,255,0.95) !important;
        }

        .like-icon i {
            transition: all 0.3s ease;
        }

        /* Heart icon colors for different states */
        .like-icon .fa-heart {
            font-size: 14px;
        }

        /* Default state - not watching */
        .market-item-card[data-watch-status="not_watching"] .like-icon i {
            color: #ccc;
        }

        /* Watching state - green */
        .market-item-card[data-watch-status="watching"] .like-icon i {
            color: #22c55e;
        }

        /* Owner state - gold/yellow */
        .market-item-card[data-watch-status="owner"] .like-icon i {
            color: #fbbf24;
        }

        /* Hover effects */
        .market-item-card[data-watch-status="not_watching"] .like-icon:hover i {
            color: #22c55e;
        }

        .market-item-card[data-watch-status="watching"] .like-icon:hover i {
            color: #16a34a;
        }

        .market-item-card[data-watch-status="owner"] .like-icon:hover i {
            color: #f59e0b;
        }

        /* Notification styles */
        .notification {
            animation: slideInRight 0.3s ease-out;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        .market-create-form .select-caret {
            position: absolute;
            right: 0.6rem;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            pointer-events: none;
            opacity: 0.95;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        
        [data-theme="dark"] .market-create-form .select-caret {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        }
        
        :root:not([data-theme="light"]) .market-create-form .select-caret {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
        }
        
        @media (max-width: 768px) {
            .market-create-form .d-flex.justify-content-between {
                flex-direction: column;
                gap: 1rem;
            }
        
            .market-create-form .btn-lg {
                width: 100%;
            }
        }

/* ===== GLOBAL IMAGE GALLERY COMPONENT ===== */
/* Global image gallery component - for all pages that need image upload functionality */
.global-image-gallery {
    border: 2px dashed var(--HM-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--HM-card-bg);
    transition: border-color 0.3s ease;
}

.global-image-gallery.dragover {
    border-color: var(--HM-primary);
    background: rgba(220, 38, 38, 0.05);
}

.gallery-preview {
    margin-top: 20px;
    display: none;
}

.main-image-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

[data-theme="dark"] .main-image-container {
    background: #2d3748;
}

:root:not([data-theme="light"]) .main-image-container {
    background: #2d3748;
}

.main-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.thumbnail-strip {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    padding: 10px;
    overflow-x: auto;
    white-space: nowrap;
}

.thumbnail-container {
    display: inline-flex;
    gap: 10px;
    min-height: 80px;
}

.thumbnail-item {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: #f8f9fa;
}

[data-theme="dark"] .thumbnail-item {
    background: #2d3748;
}

:root:not([data-theme="light"]) .thumbnail-item {
    background: #2d3748;
}

.thumbnail-item.active {
    border-color: var(--HM-primary);
}

.thumbnail-item:hover {
    border-color: var(--HM-primary);
    transform: scale(1.05);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item .remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: var(--HM-primary);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thumbnail-item:hover .remove-btn {
    opacity: 1;
}

.thumbnail-item.dragging {
    opacity: 0.5;
}

.thumbnail-item.drop-target {
    border-color: var(--HM-primary) !important;
    border-width: 3px !important;
    border-style: dashed !important;
}

.drag-placeholder {
    width: 80px;
    height: 80px;
    border: 2px dashed var(--HM-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--HM-text-muted);
    font-size: 12px;
    flex-shrink: 0;
}

.upload-area {
    text-align: center;
    padding: 40px 20px;
}

.upload-icon {
    font-size: 48px;
    color: var(--HM-text-muted);
    margin-bottom: 15px;
}

.upload-text {
    color: var(--HM-text);
    font-size: 16px;
    margin-bottom: 10px;
}

.upload-hint {
    color: var(--HM-text-muted);
    font-size: 14px;
}

.upload-btn {
    background: var(--HM-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.upload-btn:hover {
    background: var(--HM-primary-hover);
}

.global-image-gallery .hidden-input {
    display: none !important;
}

/* Also hide default file inputs in gallery */
.global-image-gallery input[type="file"] {
    display: none !important;
}

/* Hidden input class */
.hidden-input {
    display: none !important;
}

/* Add thumbnail for adding more images */
.thumbnail-item.add-thumbnail {
    border: 2px dashed var(--HM-border);
    background: var(--HM-card-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-item.add-thumbnail:hover {
    border-color: var(--HM-primary);
    border-style: solid;
    background: rgba(220, 38, 38, 0.1);
    transform: scale(1.05);
}

.thumbnail-item.add-thumbnail .add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--HM-primary);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 20px;
    transition: all 0.3s ease;
}

.thumbnail-item.add-thumbnail:hover .add-icon {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* Responsive adjustments for global image gallery */
@media (max-width: 768px) {
    .main-image-container {
        height: 250px;
    }
    
    .thumbnail-item {
        width: 70px;
        height: 70px;
    }
    
    .thumbnail-item.add-thumbnail .add-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .thumbnail-item.add-thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        border: 2px dashed var(--HM-border);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        background: #f8f9fa;
    }

    .thumbnail-item.add-thumbnail:hover {
        border-color: var(--HM-primary);
        background: #fff0f0;
    }

    .add-thumbnail-inner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--HM-primary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-thumbnail-inner .plus-icon {
        color: white;
        font-size: 24px;
        line-height: 1;
    }
    
    .upload-area {
        padding: 30px 15px;
    }
    
    .upload-icon {
        font-size: 36px;
    }
}

/* ===== GLOBAL WYSIWYG EDITOR COMPONENT ===== */
/* Global WYSIWYG editor component - for all pages that need rich text editing functionality */
.wysiwyg-container,
.wysiwyg-container.ql-container,
.wysiwyg-container.ql-container.ql-snow {
    border: 2px solid var(--HM-border) !important;
    background: var(--HM-card-bg) !important;
    transition: border-color 0.3s ease !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.wysiwyg-container:focus-within,
.wysiwyg-container.ql-container:focus-within,
.wysiwyg-container.ql-container.ql-snow:focus-within {
    border-color: var(--HM-primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* Quill toolbar styling with maximum specificity */
.wysiwyg-container .ql-toolbar.ql-snow,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow,
.wysiwyg-container.ql-container.ql-snow .ql-toolbar.ql-snow {
    background: var(--HM-card-bg) !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--HM-border) !important;
    padding: 0.75rem !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.wysiwyg-container .ql-toolbar .ql-formats {
    margin-right: 15px !important;
}

/* Toolbar buttons with maximum specificity and red hover */
.wysiwyg-container .ql-toolbar.ql-snow button,
.wysiwyg-container .ql-toolbar.ql-snow .ql-picker-label,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow .ql-picker-label {
    color: var(--HM-text) !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    padding: 0.375rem !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
    height: 32px !important;
    width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.wysiwyg-container .ql-toolbar.ql-snow button:hover,
.wysiwyg-container .ql-toolbar.ql-snow .ql-picker-label:hover,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button:hover,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow .ql-picker-label:hover {
    background: var(--HM-primary) !important;
    color: white !important;
    border-color: var(--HM-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
}

.wysiwyg-container .ql-toolbar.ql-snow button.ql-active,
.wysiwyg-container .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button.ql-active,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    background: var(--HM-primary) !important;
    color: white !important;
    border-color: var(--HM-primary) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3) !important;
}

/* SVG icons in buttons - MAXIMUM SPECIFICITY - RED HOVER */
.wysiwyg-container .ql-toolbar.ql-snow button svg,
.wysiwyg-container .ql-toolbar.ql-snow .ql-picker-label svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow .ql-picker-label svg {
    fill: var(--HM-text) !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
}

/* RED HOVER EFFECT - Multiple selectors for maximum coverage */
.wysiwyg-container .ql-toolbar.ql-snow button:hover svg,
.wysiwyg-container .ql-toolbar.ql-snow button.ql-active svg,
.wysiwyg-container .ql-toolbar.ql-snow .ql-picker-label:hover svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button:hover svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button.ql-active svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow .ql-picker-label:hover svg,
.wysiwyg-container .ql-toolbar button:hover svg,
.wysiwyg-container .ql-toolbar button.ql-active svg,
.wysiwyg-container .ql-toolbar .ql-picker-label:hover svg,
.ql-toolbar.ql-snow button:hover svg,
.ql-toolbar.ql-snow button.ql-active svg,
.ql-toolbar button:hover svg,
.ql-toolbar button.ql-active svg {
    fill: #DC2626 !important; /* Red color instead of white */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* Additional targeting for Quill's default classes - RED HOVER */
.ql-snow .ql-toolbar button:hover svg,
.ql-snow .ql-toolbar button.ql-active svg,
.ql-snow.ql-toolbar button:hover svg,
.ql-snow.ql-toolbar button.ql-active svg {
    fill: #DC2626 !important; /* Red color */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* Force override any possible Quill SVG styling */
.wysiwyg-container svg,
.wysiwyg-container .ql-toolbar svg,
.wysiwyg-container .ql-toolbar.ql-snow svg {
    transition: fill 0.3s ease !important;
}

.wysiwyg-container button:hover svg,
.wysiwyg-container .ql-active svg {
    fill: white !important;
}

/* NUCLEAR OPTION - Override everything - RED HOVER */
.wysiwyg-container *:hover svg {
    fill: #DC2626 !important; /* Red color */
    transform: scale(1.1) !important; /* 10% bigger */
}

.wysiwyg-container .ql-active svg {
    fill: #DC2626 !important; /* Red color */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* Target all possible SVG elements in toolbar - RED HOVER */
.wysiwyg-container .ql-toolbar *:hover svg,
.wysiwyg-container .ql-toolbar *.ql-active svg {
    fill: #DC2626 !important; /* Red color */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* Even more specific targeting - RED HOVER */
.wysiwyg-container [class*="ql-"]:hover svg,
.wysiwyg-container [class*="ql-"].ql-active svg {
    fill: #DC2626 !important; /* Red color */
    transform: scale(1.1) !important; /* 10% bigger */
}

.wysiwyg-container .ql-toolbar .ql-picker {
    color: var(--HM-text) !important;
}

.wysiwyg-container .ql-toolbar .ql-picker-label {
    padding: 0.375rem 0.75rem !important;
    width: auto !important;
}

.wysiwyg-container .ql-toolbar .ql-picker-options {
    background: var(--HM-card-bg) !important;
    border: 1px solid var(--HM-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px var(--HM-shadow) !important;
    z-index: 1000 !important;
    margin-top: 4px !important;
}

.wysiwyg-container .ql-toolbar .ql-picker-item {
    color: var(--HM-text) !important;
    padding: 0.5rem 0.75rem !important;
    transition: background-color 0.3s ease !important;
}

.wysiwyg-container .ql-toolbar .ql-picker-item:hover {
    background: rgba(220, 38, 38, 0.1) !important;
}

/* Quill editor content area with maximum specificity */
.wysiwyg-container .ql-editor,
.wysiwyg-container.ql-container .ql-editor,
.wysiwyg-container.ql-container.ql-snow .ql-editor {
    background: var(--HM-card-bg) !important;
    color: var(--HM-text) !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    min-height: 200px !important;
    padding: 1.25rem !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: none !important;
}

.wysiwyg-container .ql-editor.ql-blank::before,
.wysiwyg-container.ql-container .ql-editor.ql-blank::before,
.wysiwyg-container.ql-container.ql-snow .ql-editor.ql-blank::before {
    color: var(--HM-text-muted) !important;
    font-style: normal !important;
    left: 1.25rem !important;
    right: 1.25rem !important;
    opacity: 0.7 !important;
}

.wysiwyg-container .ql-editor p {
    margin-bottom: 0.75rem !important;
}

.wysiwyg-container .ql-editor p:last-child {
    margin-bottom: 0 !important;
}

.wysiwyg-container .ql-editor h1,
.wysiwyg-container .ql-editor h2,
.wysiwyg-container .ql-editor h3 {
    color: var(--HM-text) !important;
    font-weight: 600 !important;
    margin-bottom: 0.75rem !important;
    margin-top: 1.25rem !important;
    line-height: 1.3 !important;
}

.wysiwyg-container .ql-editor h1:first-child,
.wysiwyg-container .ql-editor h2:first-child,
.wysiwyg-container .ql-editor h3:first-child {
    margin-top: 0 !important;
}

.wysiwyg-container .ql-editor h1 {
    font-size: 1.5rem !important;
}

.wysiwyg-container .ql-editor h2 {
    font-size: 1.25rem !important;
}

.wysiwyg-container .ql-editor h3 {
    font-size: 1.1rem !important;
}

.wysiwyg-container .ql-editor ul,
.wysiwyg-container .ql-editor ol {
    margin-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
}

.wysiwyg-container .ql-editor li {
    margin-bottom: 0.25rem !important;
}

.wysiwyg-container .ql-editor blockquote {
    border-left: 4px solid var(--HM-primary) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.75rem 1rem !important;
    color: var(--HM-text-muted) !important;
    font-style: italic !important;
    background: rgba(220, 38, 38, 0.05) !important;
    border-radius: 0 6px 6px 0 !important;
    margin-bottom: 0.75rem !important;
}

.wysiwyg-container .ql-editor a {
    color: var(--HM-primary) !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.wysiwyg-container .ql-editor a:hover {
    color: var(--HM-primary-hover) !important;
}

/* Separator between toolbar groups */
.wysiwyg-container .ql-toolbar .ql-formats {
    position: relative !important;
}

.wysiwyg-container .ql-toolbar .ql-formats:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: -7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 20px !important;
    background: var(--HM-border) !important;
}

/* Dark theme specific overrides with maximum specificity */
[data-theme="dark"] .wysiwyg-container .ql-toolbar.ql-snow button svg,
[data-theme="dark"] .wysiwyg-container.ql-container .ql-toolbar.ql-snow button svg,
:root:not([data-theme="light"]) .wysiwyg-container .ql-toolbar.ql-snow button svg,
:root:not([data-theme="light"]) .wysiwyg-container.ql-container .ql-toolbar.ql-snow button svg {
    fill: var(--HM-text) !important;
    transition: fill 0.3s ease !important;
}

[data-theme="dark"] .wysiwyg-container .ql-toolbar.ql-snow button:hover svg,
[data-theme="dark"] .wysiwyg-container .ql-toolbar.ql-snow button.ql-active svg,
[data-theme="dark"] .wysiwyg-container.ql-container .ql-toolbar.ql-snow button:hover svg,
[data-theme="dark"] .wysiwyg-container.ql-container .ql-toolbar.ql-snow button.ql-active svg,
:root:not([data-theme="light"]) .wysiwyg-container .ql-toolbar.ql-snow button:hover svg,
:root:not([data-theme="light"]) .wysiwyg-container .ql-toolbar.ql-snow button.ql-active svg,
:root:not([data-theme="light"]) .wysiwyg-container.ql-container .ql-toolbar.ql-snow button:hover svg,
:root:not([data-theme="light"]) .wysiwyg-container.ql-container .ql-toolbar.ql-snow button.ql-active svg {
    fill: white !important;
}

/* Responsive adjustments for WYSIWYG editor */
@media (max-width: 768px) {
    .wysiwyg-container .ql-toolbar.ql-snow,
    .wysiwyg-container.ql-container .ql-toolbar.ql-snow {
        padding: 0.5rem !important;
    }
    
    .wysiwyg-container .ql-toolbar .ql-formats {
        margin-right: 10px !important;
    }
    
    .wysiwyg-container .ql-toolbar.ql-snow button,
    .wysiwyg-container.ql-container .ql-toolbar.ql-snow button {
        height: 28px !important;
        width: 28px !important;
        padding: 0.25rem !important;
        margin: 0 1px !important;
    }
    
    .wysiwyg-container .ql-toolbar .ql-picker-label {
        height: 28px !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .wysiwyg-container .ql-editor,
    .wysiwyg-container.ql-container .ql-editor {
        min-height: 150px !important;
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Error states for WYSIWYG */
.wysiwyg-container.is-invalid {
    border-color: #dc3545 !important;
}

.wysiwyg-container.is-invalid:focus-within {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
}

.wysiwyg-container.is-valid {
    border-color: #198754 !important;
}

.wysiwyg-container.is-valid:focus-within {
    border-color: #198754 !important;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.12) !important;
}

/* Force override any Quill default styles */
.ql-container.ql-snow {
    border: none !important;
}

.ql-toolbar.ql-snow {
    border: none !important;
}

/* FINAL NUCLEAR OPTION - HIGHEST PRIORITY SVG RULES - RED HOVER */
.wysiwyg-container button:hover > svg,
.wysiwyg-container .ql-toolbar button:hover > svg,
.wysiwyg-container .ql-toolbar.ql-snow button:hover > svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button:hover > svg,
.wysiwyg-container button.ql-active > svg,
.wysiwyg-container .ql-toolbar button.ql-active > svg,
.wysiwyg-container .ql-toolbar.ql-snow button.ql-active > svg,
.wysiwyg-container.ql-container .ql-toolbar.ql-snow button.ql-active > svg {
    fill: #DC2626 !important; /* Red color */
    color: #DC2626 !important; /* Backup for color property */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* Backup rules in case above doesn't work - RED HOVER */
.wysiwyg-container [data-value]:hover svg,
.wysiwyg-container [data-value].ql-active svg,
.wysiwyg-container .ql-bold:hover svg,
.wysiwyg-container .ql-italic:hover svg,
.wysiwyg-container .ql-underline:hover svg,
.wysiwyg-container .ql-strike:hover svg,
.wysiwyg-container .ql-list:hover svg,
.wysiwyg-container .ql-link:hover svg {
    fill: #DC2626 !important; /* Red color */
    color: #DC2626 !important; /* Backup for color property */
    transform: scale(1.1) !important; /* 10% bigger */
}

/* ===== MARKET CREATE PAGE - ENLARGED ELEMENTS ===== */
/* Market create page specific enlarged styles - for enlarged WYSIWYG and main image */

/* Enlarged WYSIWYG editor - 40% height increase */
.wysiwyg-enlarged .ql-editor,
.wysiwyg-enlarged.ql-container .ql-editor,
.wysiwyg-enlarged.ql-container.ql-snow .ql-editor {
    min-height: 280px !important; /* 200px * 1.4 = 280px */
    padding: 1.5rem !important;
}

/* Enlarged main image container - 30% height increase */
.main-image-enlarged {
    height: 390px !important; /* 300px * 1.3 = 390px */
}

/* Mobile responsive adjustments for enlarged elements */
@media (max-width: 768px) {
    .wysiwyg-enlarged .ql-editor,
    .wysiwyg-enlarged.ql-container .ql-editor {
        min-height: 210px !important; /* 150px * 1.4 = 210px */
    }
    
    .main-image-enlarged {
        height: 325px !important; /* 250px * 1.3 = 325px */
    }
}

/* ===== MARKET CREATE PAGE - TRANSPORT OPTIONS INLINE LAYOUT ===== */
/* Market create page specific styles - for inline transport options with price inputs */

.market-create-form .transport-option-row {
    margin-bottom: 1rem;
}

.market-create-form .transport-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.market-create-form .transport-checkbox-container .checkbox-wrapper {
    flex-shrink: 0;
    margin-bottom: 0;
    width: 140px; /* Fixed width for consistent alignment */
}

.market-create-form .transport-price-input {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    display: none; /* Hidden by default */
    animation: slideIn 0.3s ease-out;
}

.market-create-form .transport-price-input input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--HM-border);
    border-radius: 6px;
    background: var(--HM-card-bg);
    color: var(--HM-text);
    font-size: 0.9rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.market-create-form .transport-price-input input:focus {
    border-color: var(--HM-primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    outline: none;
}

.market-create-form .transport-price-input input::placeholder {
    color: var(--HM-text-muted);
    font-size: 0.85rem;
}

/* Centered checkbox tick - overriding existing checkbox styles for market create form */
.market-create-form .checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::after {
    content: '';
    position: absolute;
    left: 8px; /* Adjusted for perfect centering */
    top: 45%;
    transform: translateY(-50%) rotate(45deg); /* Perfect vertical centering */
    width: 7px;
    height: 14px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    pointer-events: none;
}

/* Animation for showing price inputs */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
        max-width: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        max-width: 200px;
    }
}

/* Responsive adjustments for transport options */
@media (max-width: 768px) {
    .market-create-form .transport-checkbox-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .market-create-form .transport-checkbox-container .checkbox-wrapper {
        width: auto; /* Reset fixed width on mobile */
    }
    
    .market-create-form .transport-price-input {
        width: 100%;
        max-width: none;
        margin-top: 0.5rem;
    }
    
    .market-create-form .transport-price-input input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Dark theme support for transport options */
[data-theme="dark"] .market-create-form .transport-price-input input,
:root:not([data-theme="light"]) .market-create-form .transport-price-input input {
    background: var(--HM-card-bg);
    color: var(--HM-text);
    border-color: var(--HM-border);
}

[data-theme="dark"] .market-create-form .transport-price-input input:focus,
:root:not([data-theme="light"]) .market-create-form .transport-price-input input:focus {
    border-color: var(--HM-primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Themed placeholder background inside market item gallery */
.market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, var(--HM-card-bg), var(--HM-bg));
    transition: background 0.3s ease;
}

/* Explicit dark theme override (in case app enforces dark via data attribute) */
[data-theme="dark"] .market-item-gallery .image-placeholder,
:root:not([data-theme="light"]) .market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, #2d3748, #1f2937);
}



/* === Explicit theme overrides for market gallery (high specificity) === */
/* Light mode (default) */
:root[data-theme="light"] .market-item-gallery .main-image-container {
    background: var(--HM-card-bg); /* light neutral */
}
:root[data-theme="light"] .market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

/* Dark mode */
:root[data-theme="dark"] .market-item-gallery .main-image-container {
    background: var(--HM-card-bg); /* dark neutral */
}
:root[data-theme="dark"] .market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, #161a1e, #0f1216);
}



/* === Gallery background: robust theme handling (works for html/body/any ancestor [data-theme]) === */
.market-item-gallery .main-image-container {
    /* base fallback (light) */
    background: var(--HM-gallery-bg, var(--HM-card-bg, #f8f9fa));
    background-color: var(--HM-gallery-bg, var(--HM-card-bg, #f8f9fa));
}

/* LIGHT: cover all common placements of the attribute */
[data-theme="light"] .market-item-gallery .main-image-container,
html[data-theme="light"] .market-item-gallery .main-image-container,
body[data-theme="light"] .market-item-gallery .main-image-container {
    background: var(--HM-card-bg);
    background-color: #f8f9fa !important;
}

[data-theme="light"] .market-item-gallery .image-placeholder,
html[data-theme="light"] .market-item-gallery .image-placeholder,
body[data-theme="light"] .market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
}

/* DARK: use a soft near-black, not pure black */
[data-theme="dark"] .market-item-gallery .main-image-container,
html[data-theme="dark"] .market-item-gallery .main-image-container,
body[data-theme="dark"] .market-item-gallery .main-image-container {
    background: var(--HM-card-bg); /* soft charcoal */
    background-color: #151a20 !important;
}

[data-theme="dark"] .market-item-gallery .image-placeholder,
html[data-theme="dark"] .market-item-gallery .image-placeholder,
body[data-theme="dark"] .market-item-gallery .image-placeholder {
    background: linear-gradient(135deg, #1a2027, #0f1419) !important;
}

/* If system theme is used (no explicit data-theme), honor prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .market-item-gallery .main-image-container {
      background: var(--HM-card-bg);
      background-color: #151a20;
  }
  :root:not([data-theme="light"]) .market-item-gallery .image-placeholder {
      background: linear-gradient(135deg, #1a2027, #0f1419);
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .market-item-gallery .main-image-container {
      background: var(--HM-card-bg);
      background-color: #f8f9fa;
  }
  :root:not([data-theme="dark"]) .market-item-gallery .image-placeholder {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  }
}



/* === Gallery theming via CSS variables (follows site theme) === */
/* 1) Define gallery variables for both themes */
:root {
  --HM-gallery-surface: #f8f9fa;            /* light surface */
  --HM-gallery-soft-1: #f8f9fa;             /* light gradient start */
  --HM-gallery-soft-2: #e9ecef;             /* light gradient end */
}
:root[data-theme="dark"] {
  --HM-gallery-surface: #151a20;            /* dark surface (soft charcoal) */
  --HM-gallery-soft-1: #1a2027;             /* dark gradient start */
  --HM-gallery-soft-2: #0f1419;             /* dark gradient end */
}

/* If no explicit data-theme, use system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --HM-gallery-surface: #151a20;
    --HM-gallery-soft-1: #1a2027;
    --HM-gallery-soft-2: #0f1419;
  }
}

/* 2) Use those variables in the market gallery */
.market-item-gallery .main-image-container {
  background: var(--HM-gallery-surface) !important;
}
.market-item-gallery .image-placeholder {
  background: linear-gradient(135deg, var(--HM-gallery-soft-1), var(--HM-gallery-soft-2)) !important;
}

/* === Dark/Light responsive page background and WYSIWYG toolbar overrides === */
/* All comments and code are in English as requested. */

/* Page background and text follow theme variables */
html, body {
  background: var(--HM-bg);
  color: var(--HM-text);
  transition: background-color .2s ease, color .2s ease;
  min-height: 100%;
}

/* Force white WYSIWYG toolbar in dark mode for Quill 'snow' theme */
[data-theme="dark"] .wysiwyg-container .ql-toolbar.ql-snow {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-bottom: 1px solid var(--HM-border) !important;
}

[data-theme="dark"] .wysiwyg-container .ql-toolbar .ql-stroke {
  stroke: #1f2937 !important;
}

[data-theme="dark"] .wysiwyg-container .ql-toolbar .ql-fill {
  fill: #1f2937 !important;
}

/* Ensure toolbar buttons/pickers are visible on white */
[data-theme="dark"] .wysiwyg-container .ql-toolbar button,
[data-theme="dark"] .wysiwyg-container .ql-toolbar .ql-picker,
[data-theme="dark"] .wysiwyg-container .ql-toolbar .ql-picker-label {
  color: #1f2937 !important;
}


/* News page styles - for /news page */
.news-header {
    text-align: center;
    margin-bottom: 3rem;
}

.news-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--HM-text);
}

.news-subtitle {
    color: var(--HM-text-muted);
    font-size: 1.1rem;
}

.news-search-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.news-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--HM-card-bg);
    color: var(--HM-text);
}

.news-search-btn {
    padding: 0.75rem 1.5rem;
    background: var(--HM-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.news-search-btn:hover {
    background: var(--primary-dark);
}

.news-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.news-filter-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    background: var(--HM-card-bg);
    color: var(--HM-text);
    cursor: pointer;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.news-card {
    background: var(--HM-card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--HM-border);
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--HM-shadow);
}

.news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.news-category {
    background: var(--HM-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.news-date {
    color: var(--HM-text-muted);
    font-size: 0.9rem;
}

.news-card-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.news-card-title a {
    color: var(--HM-text);
    text-decoration: none;
    transition: color 0.3s;
}

.news-card-title a:hover {
    color: var(--HM-primary);
}

.news-card-excerpt {
    color: var(--HM-text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--HM-border);
}

.news-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--HM-text-muted);
}

.news-stats {
    display: flex;
    gap: 1rem;
}

.news-rating,
.news-comments {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--HM-text-muted);
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.news-tag {
    background: var(--bg-tertiary);
    color: var(--HM-text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--HM-card-bg);
    color: var(--HM-text);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--HM-border);
    transition: all 0.3s;
}

.pagination-btn:hover {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
}

.pagination-number {
    padding: 0.5rem 0.75rem;
    background: var(--HM-card-bg);
    color: var(--HM-text);
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid var(--HM-border);
    transition: all 0.3s;
    min-width: 40px;
    text-align: center;
}

.pagination-number:hover,
.pagination-number.active {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

/* ===== CLUB DOCUMENTS PAGE STYLES ===== */
/* Club documents page specific styles - for /club/{nameURL}/documents page */
.club-documents-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--HM-text);
    margin-bottom: 0.5rem;
}

.club-documents-subtitle {
    font-size: 1.1rem;
    color: var(--HM-text-muted);
}

.club-documents-search-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.club-documents-search-wrapper .input-group-text {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    color: var(--HM-text-muted);
}

.club-documents-search-wrapper .form-control {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    color: var(--HM-text);
    padding: 0.75rem 1rem;
}

.club-documents-search-wrapper .form-control:focus {
    background: var(--HM-card-bg);
    border-color: var(--HM-primary);
    color: var(--HM-text);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.club-documents-search-wrapper .form-control::placeholder {
    color: var(--HM-text-muted);
}

.club-documents-search-wrapper .btn-outline-secondary {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    color: var(--HM-text-muted);
}

.club-documents-search-wrapper .btn-outline-secondary:hover {
    background: var(--HM-primary);
    border-color: var(--HM-primary);
    color: white;
}

.club-documents-search-info {
    text-align: center;
    font-size: 0.9rem;
    color: var(--HM-text-muted);
}

.club-document-group {
    transition: all 0.3s ease;
}

.club-document-group .card {
    border: 1px solid var(--HM-border);
    transition: all 0.3s ease;
}

.club-document-group .card:hover {
    box-shadow: 0 6px 20px var(--HM-shadow);
    transform: translateY(-2px);
}

.club-document-group .card-header {
    background: linear-gradient(135deg, var(--HM-primary), var(--HM-primary-hover));
    color: white;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.club-document-group .card-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    color: white;
}

.club-document-group .card-body {
    padding: 0;
}

.club-document-item {
    border: none;
    border-bottom: 1px solid var(--HM-border);
    padding: 1rem 1.25rem;
    background: var(--HM-card-bg);
    transition: background-color 0.3s ease;
}

.club-document-item:last-child {
    border-bottom: none;
}

.club-document-item:hover {
    background: rgba(220, 38, 38, 0.05);
}

.club-document-icon {
    flex-shrink: 0;
}

.club-document-item .btn-outline-primary {
    background: transparent;
    border-color: var(--HM-primary);
    color: var(--HM-primary);
    transition: all 0.3s ease;
}

.club-document-item .btn-outline-primary:hover {
    background: var(--HM-primary);
    border-color: var(--HM-primary);
    color: white;
}

#loadMoreBtn {
    background: linear-gradient(135deg, var(--HM-primary), var(--HM-primary-hover));
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

#loadMoreBtn:hover {
    background: linear-gradient(135deg, var(--HM-primary-hover), #991b1b);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

#loadedPagesInfo {
    font-size: 0.9rem;
    color: var(--HM-text-muted);
}

/* Loading spinner */
#loadingIndicator .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

/* No results message */
#noResultsMessage {
    background: rgba(220, 38, 38, 0.1);
    border-left: 4px solid var(--HM-primary);
    border-radius: 8px;
    padding: 1.5rem;
    color: var(--HM-text);
}

/* Dark theme specific adjustments */
[data-theme="dark"] .club-documents-search-wrapper .input-group-text,
[data-theme="dark"] .club-documents-search-wrapper .form-control,
[data-theme="dark"] .club-documents-search-wrapper .btn-outline-secondary {
    background: var(--HM-card-bg);
    border-color: var(--HM-border);
}

[data-theme="dark"] .club-document-item:hover {
    background: rgba(220, 38, 38, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .club-documents-title {
        font-size: 1.5rem;
    }
    
    .club-document-group .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .club-document-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .club-document-item .btn-outline-primary {
        width: 100%;
    }
}

.pagination-dots {
    display: flex;
    align-items: center;
    color: var(--HM-text-muted);
    padding: 0 0.5rem;
}

.news-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--HM-text-muted);
}

.news-empty i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.news-empty h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--HM-text);
}

/* Article detail page styles - for /news/{urlName} page */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--HM-text-muted);
}

.article-breadcrumb a {
    color: var(--HM-text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.article-breadcrumb a:hover {
    color: var(--HM-primary);
}

.breadcrumb-separator {
    color: var(--HM-text-muted);
}

.article-content {
    background: var(--HM-card-bg);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--HM-border);
}

.article-header {
    border-bottom: 2px solid var(--HM-border);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.article-meta-top {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.article-category,
.article-topic {
    background: var(--HM-primary);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.article-topic {
    background: var(--bg-tertiary);
    color: var(--HM-text);
}

.article-title {
    font-size: 2.5rem;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    color: var(--HM-text);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--HM-text-muted);
    margin-bottom: 1rem;
}

.article-author,
.article-date,
.article-edited {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.article-rating,
.article-comments-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--HM-text-muted);
}

.article-rating-count {
    font-size: 0.9rem;
    opacity: 0.7;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-tag {
    background: var(--bg-tertiary);
    color: var(--HM-text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--HM-text);
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--HM-text);
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.article-body ul,
.article-body ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-footer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--HM-border);
}

.article-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.article-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    color: var(--HM-text);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.article-action-btn:hover {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

.related-articles {
    margin-bottom: 2rem;
}

.related-articles h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--HM-text);
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.related-article-card {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--HM-text);
    transition: all 0.3s;
}

.related-article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--HM-shadow);
}

.related-article-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--HM-text);
}

.related-article-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--HM-text-muted);
    margin-bottom: 0.5rem;
}

.related-article-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--HM-text-muted);
}

.article-comments-section {
    margin-top: 3rem;
}

.article-comments-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--HM-text);
}

.comment-form {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.comment-textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--HM-bg);
    color: var(--HM-text);
    resize: vertical;
    margin-bottom: 1rem;
}

.comment-submit-btn {
    padding: 0.75rem 1.5rem;
    background: var(--HM-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.comment-submit-btn:hover {
    background: var(--primary-dark);
}

.comment-login-prompt {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.comment-login-prompt p {
    margin-bottom: 1rem;
    color: var(--HM-text-muted);
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.comment {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.comment-header {
    margin-bottom: 0.75rem;
}

.comment-author {
    font-weight: 600;
    color: var(--HM-text);
}

.comment-content {
    color: var(--HM-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.comment-actions {
    display: flex;
    gap: 1rem;
}

.comment-like,
.comment-dislike,
.comment-reply {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--HM-text-muted);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.comment-like:hover,
.comment-dislike:hover,
.comment-reply:hover {
    background: var(--HM-primary);
    color: white;
}

.sub-comments {
    margin-top: 1.5rem;
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 2px solid var(--HM-border);
    padding-left: 1.5rem;
}

.sub-comment {
    background: var(--bg-tertiary);
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }

    .article-title {
        font-size: 1.8rem;
    }

    .related-articles-grid {
        grid-template-columns: 1fr;
    }

    .sub-comments {
        margin-left: 1rem;
        padding-left: 1rem;
    }

    .news-pagination {
        flex-direction: column;
    }

    .pagination-numbers {
        order: -1;
    }
}

/* News create form styles - for /news/create page */
.news-create-container {
    background: var(--HM-card-bg);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--HM-border);
}

.news-create-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--HM-border);
}

.news-create-header h1 {
    font-size: 2.5rem;
    color: var(--HM-text);
    margin-bottom: 0.5rem;
}

.news-create-subtitle {
    color: var(--HM-text-muted);
    font-size: 1.1rem;
}

.news-create-form {
    max-width: 100%;
}

.form-group-news {
    margin-bottom: 1.5rem;
}

.form-row-news {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-label-news {
    display: block;
    font-weight: 600;
    color: var(--HM-text);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.form-label-news.required::after {
    content: ' *';
    color: var(--HM-primary);
}

.form-input-news,
.form-select-news {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--HM-bg);
    color: var(--HM-text);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input-news:focus,
.form-select-news:focus {
    outline: none;
    border-color: var(--HM-primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--HM-text-muted);
}

.form-actions-news {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--HM-border);
}

.btn-primary-news,
.btn-secondary-news {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-primary-news {
    background: var(--HM-primary);
    color: white;
}

.btn-primary-news:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-secondary-news {
    background: var(--bg-tertiary);
    color: var(--HM-text);
    border: 1px solid var(--HM-border);
}

.btn-secondary-news:hover {
    background: var(--HM-border);
}

.form-info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(220, 38, 38, 0.1);
    border-left: 4px solid var(--HM-primary);
    border-radius: 8px;
    margin-top: 2rem;
}

.form-info-box i {
    color: var(--HM-primary);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.form-info-box strong {
    display: block;
    color: var(--HM-text);
    margin-bottom: 0.25rem;
}

.form-info-box p {
    color: var(--HM-text-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* Quill editor dark mode support */
[data-theme="dark"] .ql-toolbar,
[data-theme="dark"] .ql-container {
    border-color: var(--HM-border) !important;
}

[data-theme="dark"] .ql-toolbar {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ql-editor {
    color: var(--HM-text);
}

[data-theme="dark"] .ql-stroke {
    stroke: var(--HM-text) !important;
}

[data-theme="dark"] .ql-fill {
    fill: var(--HM-text) !important;
}

[data-theme="dark"] .ql-picker-label {
    color: var(--HM-text) !important;
}

[data-theme="dark"] .ql-editor.ql-blank::before {
    color: var(--HM-text-muted);
}

@media (max-width: 768px) {
    .form-row-news {
        grid-template-columns: 1fr;
    }

    .form-actions-news {
        flex-direction: column-reverse;
    }

    .btn-primary-news,
    .btn-secondary-news {
        width: 100%;
        justify-content: center;
    }
}

/* (add to app.css) Comments with 3 levels support */
.comment.level-1 {
    margin-left: 0;
}

.comment.level-2 {
    margin-left: 2rem;
    border-left: 2px solid var(--HM-border);
    padding-left: 1.5rem;
}

.comment.level-3 {
    margin-left: 4rem;
    border-left: 2px solid var(--HM-primary);
    padding-left: 1.5rem;
}

.comment-show-replies {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    color: var(--HM-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}

.comment-show-replies:hover {
    background: var(--HM-primary);
    color: white;
}

.replies-container {
    margin-top: 1rem;
}

.load-more-replies-btn {
    display: block;
    margin: 1rem auto;
    padding: 0.5rem 1.5rem;
    background: var(--bg-tertiary);
    color: var(--HM-text);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.load-more-replies-btn:hover {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

.reply-form {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* (add to app.css) Comment avatar and date styles */
.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.comment-user-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.comment-user-link:hover {
    opacity: 0.8;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--HM-border);
}

.comment-author {
    font-weight: 600;
    color: var(--HM-text);
}

.comment-date {
    font-size: 0.85rem;
    color: var(--HM-text-muted);
}

/* (add to app.css) Active rating buttons and share modal */
.article-action-btn.active {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.share-modal-content {
    background: var(--HM-card-bg);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
}

.share-modal-content h3 {
    margin-bottom: 1.5rem;
    color: var(--HM-text);
}

.share-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.share-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    color: var(--HM-text);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
}

.share-link:hover {
    background: var(--HM-primary);
    color: white;
}

.share-link.facebook:hover {
    background: #1877f2;
}

.share-link.twitter:hover {
    background: #1da1f2;
}

.share-link.linkedin:hover {
    background: #0077b5;
}

.share-link-copy {
    display: flex;
    gap: 0.5rem;
}

.share-link-copy input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    background: var(--HM-bg);
    color: var(--HM-text);
}

.share-link-copy button {
    padding: 0.75rem 1.5rem;
    background: var(--HM-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.share-link-copy button:hover {
    background: var(--primary-dark);
}

.share-modal-close {
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    color: var(--HM-text);
    border: 1px solid var(--HM-border);
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s;
}

.share-modal-close:hover {
    background: var(--HM-border);
}

/* (add to app.css) Article author with avatar */
.article-author-info {
    display: flex;
    align-items: center;
}

.article-author-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity 0.3s;
}

.article-author-link:hover {
    opacity: 0.8;
}

.article-author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--HM-border);
}

.article-author-name {
    font-weight: 600;
    color: var(--HM-text);
    font-size: 1.1rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    color: var(--HM-text-muted);
    margin-bottom: 1rem;
}

/* Article action buttons with counts */
.article-action-btn {
    min-width: 80px;
}

.article-action-btn .action-count {
    font-weight: 600;
    font-size: 1rem;
}

.article-action-btn.active .action-count {
    color: white;
}

@media (max-width: 768px) {
    .article-meta {
        gap: 1rem;
    }

    .article-author-avatar {
        width: 40px;
        height: 40px;
    }
}

/* (add to app.css) Article edit button */
.article-author-actions {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--HM-border);
}

.btn-edit-article {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--HM-primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-edit-article:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.article-state-info {
    margin-bottom: 2rem;
}

/* (add to app.css) Loading indicator */
.loading-indicator {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--HM-text-muted);
}

.loading-indicator i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--HM-primary);
}

.loading-indicator p {
    font-size: 1.1rem;
}

.author-link {
    color: var(--HM-text);
    text-decoration: none;
    transition: color 0.3s;
}

.author-link:hover {
    color: var(--HM-primary);
}

.news-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
}

.pagination-btn,
.pagination-number {
    background: var(--HM-card-bg);
    border: 1px solid var(--HM-border);
    color: var(--HM-text);
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-btn:hover,
.pagination-number:hover {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}

.pagination-number.active {
    background: var(--HM-primary);
    color: white;
    border-color: var(--HM-primary);
}