body {
  /* THIS is not a good way to handle this, and a proper refactoring needs to be performed
    This allows bigger images of media on listings for large screens
    It would be great to adapt to other sizes, but this requires a good refaftoring
     */

  @media screen and (min-width: 2200px) {
      --default-item-width: 342px !important;
      --default-max-item-width: 342px !important;
      --default-item-margin-right-width: 17px !important;
      --default-item-margin-bottom-width: 27px !important;
  }
}

/* Logo positioning fix - Mascot to the right of logo text */
.logo {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transform: translateY(8px) translateX(5px) !important;
}

.logo::after {
    content: '';
    position: absolute !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    left: calc(100% + 15px) !important;
    width: 60px !important;
    height: 60px !important;
    background-image: url('/static/assets/logo/2187698-Wendy-Wendys-mascots-nisetanaqa-removebg-preview.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo::after {
        width: 50px !important;
        height: 50px !important;
        left: calc(100% + 12px) !important;
        top: 40% !important;
    }
}

@media (max-width: 480px) {
    .logo::after {
        width: 45px !important;
        height: 45px !important;
        left: calc(100% + 10px) !important;
        top: 40% !important;
    }
}

/* ===== RED AND CYAN THEME OVERRIDES ===== */
/* Override green/blue colors with red and cyan theme for content pages only */

/* Sign up and Sign in pages */
.user-action-form-wrap .button-link,
.user-action-form-wrap .btn,
.user-action-form-wrap input[type="submit"],
.user-action-form-wrap button[type="submit"] {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: white !important;
}

.user-action-form-wrap .button-link:hover,
.user-action-form-wrap .btn:hover,
.user-action-form-wrap input[type="submit"]:hover,
.user-action-form-wrap button[type="submit"]:hover {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
}

.user-action-form-wrap a,
.user-action-form-wrap .link {
    color: #ff0000 !important;
}

.user-action-form-wrap a:hover,
.user-action-form-wrap .link:hover {
    color: #cc0000 !important;
}

/* About, Terms, Contact, Language pages */
.page-content a,
.page-content .button-link,
.page-content .btn {
    color: #ff0000 !important;
}

.page-content a:hover,
.page-content .button-link:hover,
.page-content .btn:hover {
    color: #cc0000 !important;
}

.page-content .btn-primary,
.page-content input[type="submit"],
.page-content button[type="submit"] {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: white !important;
}

.page-content .btn-primary:hover,
.page-content input[type="submit"]:hover,
.page-content button[type="submit"]:hover {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* Liked, Media, History, Categories, Latest pages */
.media-item .button-link,
.history-item .button-link,
.liked-item .button-link,
.category-item .button-link,
.latest-item .button-link {
    color: #ff0000 !important;
}

.media-item .button-link:hover,
.history-item .button-link:hover,
.liked-item .button-link:hover,
.category-item .button-link:hover,
.latest-item .button-link:hover {
    color: #cc0000 !important;
}

/* Form inputs focus states for content pages */
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus,
.user-action-form-wrap input:focus,
.user-action-form-wrap textarea:focus,
.user-action-form-wrap select:focus {
    border-color: #ff0000 !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2) !important;
}

/* Content page buttons and interactive elements */
.page-content button:not(.btn-secondary):not(.button-secondary),
.page-content input[type="button"]:not(.btn-secondary):not(.button-secondary),
.page-content input[type="submit"]:not(.btn-secondary):not(.button-secondary) {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: white !important;
}

.page-content button:not(.btn-secondary):not(.button-secondary):hover,
.page-content input[type="button"]:not(.btn-secondary):not(.button-secondary):hover,
.page-content input[type="submit"]:not(.btn-secondary):not(.button-secondary):hover {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
}

/* Override any remaining green/blue colors in content areas only */
.page-content [style*="#4a90e2"],
.page-content [style*="#3a7bc8"],
.page-content [style*="green"],
.page-content [style*="blue"],
.user-action-form-wrap [style*="#4a90e2"],
.user-action-form-wrap [style*="#3a7bc8"],
.user-action-form-wrap [style*="green"],
.user-action-form-wrap [style*="blue"] {
    color: #ff0000 !important;
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
}