/**
 * MOD Dark Mode
 * Manual Theme System
 * Version 1.0
 */


/* ==========================================================
   LIGHT MODE
   ========================================================== */

html[data-theme="light"] {
    color-scheme: light;
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    --background-default-grey: #161616;
    --background-raised-grey: #1e1e1e;
    --background-overlap-grey: #242424;

    --text-default-grey: #e7e7e7;
    --text-title-grey: #ffffff;
    --text-label-grey: #ffffff;

    --border-default-grey: #444444;
}


/* ==========================================================
   BASE DARK MODE
   ========================================================== */

html[data-theme="dark"] body {
    background-color: #161616;
    color: #e7e7e7;
}


/* ==========================================================
   MOD THEME TOGGLE
   ========================================================== */

.mod-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.mod-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mod-theme-toggle:active {
    transform: scale(0.92);
}

.mod-theme-toggle:focus-visible {
    outline: 2px solid #6a6a6a;
    outline-offset: 2px;
}


/* ==========================================================
   THEME ICON
   ========================================================== */

.mod-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    line-height: 1;
}

.mod-theme-icon svg {
    display: block;

    width: 22px;
    height: 22px;

    overflow: visible;

    transition:
        transform 0.35s ease,
        opacity 0.25s ease;
}


/* ==========================================================
   MOON ICON
   ========================================================== */

.mod-moon {
    fill: #66758a;
}

.mod-theme-toggle:hover .mod-moon {
    transform: rotate(-10deg);
}


/* ==========================================================
   SUN ICON
   ========================================================== */

.mod-sun {
    fill: #f4b942;
}

.mod-sun path {
    fill: none;
    stroke: #f4b942;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.mod-theme-toggle:hover .mod-sun {
    transform: rotate(20deg);
}


/* ==========================================================
   DARK MODE TOGGLE
   ========================================================== */

html[data-theme="dark"] .mod-theme-toggle {
    background: transparent;
}

html[data-theme="dark"] .mod-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mod-theme-toggle:focus-visible {
    outline-color: #d4d4d4;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

body {
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body,
    .mod-theme-toggle,
    .mod-theme-icon svg {
        transition: none;
    }

    .mod-theme-toggle:hover .mod-moon,
    .mod-theme-toggle:hover .mod-sun {
        transform: none;
    }
}


/* ==========================================================
   HEADER - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-header {
    background-color: #171717;
    color: #eeeeee;

    --idle: transparent;
    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(255, 255, 255, 0.10);
}


/* ==========================================================
   HEADER BODY
   ========================================================== */

html[data-theme="dark"] .fr-header__body {
    background-color: #171717;
    color: #eeeeee;
}

html[data-theme="dark"] .fr-header__body-row {
    background-color: #171717;
}


/* ==========================================================
   BRAND / LOGO AREA
   ========================================================== */

html[data-theme="dark"] .fr-header__brand {
    background-color: transparent;
}


/* ==========================================================
   HEADER LOGO - DARK MODE
   ========================================================== */

html[data-theme="dark"] .fr-header__logo {
    background: transparent;
    border-radius: 0;
}

/*
 * E kthen SVG-në e logos në të bardhë.
 * brightness(0) e bën fillimisht të zezë,
 * invert(1) e kthen pastaj në të bardhë.
 */

html[data-theme="dark"] .fr-header__logo svg {
    filter: brightness(0) invert(1);

    opacity: 0.92;

    transition:
        filter 0.25s ease,
        opacity 0.25s ease;
}

html[data-theme="dark"] .fr-header__logo:hover svg {
    opacity: 1;
}


/* ==========================================================
   HEADER TOOLS
   ========================================================== */

html[data-theme="dark"] .fr-header__tools {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-header__tools-links {
    color: #eeeeee;
}


/* Links */

html[data-theme="dark"] .fr-header__tools-links .fr-link {
    color: #e6e6e6;
    background-color: transparent;
}

html[data-theme="dark"] .fr-header__tools-links .fr-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}


/* Buttons */

html[data-theme="dark"] .fr-header__tools-links .fr-btn {
    color: #eeeeee;
    background-color: transparent;
}

html[data-theme="dark"] .fr-header__tools-links .fr-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .fr-header__tools-links .fr-btn:active {
    background-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================
   LANGUAGE SELECTOR
   ========================================================== */

html[data-theme="dark"] .fr-header .fr-translate__btn {
    color: #eeeeee;
    background-color: transparent;
}

html[data-theme="dark"] .fr-header .fr-translate__btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.07);
}


/* Language dropdown */

html[data-theme="dark"] .fr-header .fr-translate__menu,
html[data-theme="dark"] .fr-header .fr-translate .fr-menu__list {
    background-color: #232323;
    color: #eeeeee;
}

html[data-theme="dark"] .fr-header .fr-translate__language {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-header .fr-translate__language:hover {
    background-color: #303030;
    color: #ffffff;
}

html[data-theme="dark"]
.fr-header
.fr-translate__language[aria-current="true"] {
    color: #ffffff;
    background-color: #303030;
}


/* ==========================================================
   SEARCH
   ========================================================== */

html[data-theme="dark"] .fr-header__search {
    color: #eeeeee;
}


/* Input */

html[data-theme="dark"] .fr-header__search .fr-input {
    background-color: #252525;
    color: #ffffff;

    border-color: #555555;

    box-shadow:
        inset 0 -2px 0 0 #8c8c8c;
}

html[data-theme="dark"] .fr-header__search .fr-input:hover {
    background-color: #2c2c2c;
}

html[data-theme="dark"] .fr-header__search .fr-input:focus {
    background-color: #2c2c2c;
    color: #ffffff;

    box-shadow:
        inset 0 -2px 0 0 #ed1c24;
}


/* Placeholder */

html[data-theme="dark"]
.fr-header__search
.fr-input::placeholder {
    color: #aaaaaa;
    opacity: 1;
}


/* Search label */

html[data-theme="dark"] .fr-header__search .fr-label {
    color: #eeeeee;
}


/* Search button */

html[data-theme="dark"]
.fr-header__search
.fr-search-bar > .fr-btn {
    background-color: #ed1c24;
    color: #ffffff;
}

html[data-theme="dark"]
.fr-header__search
.fr-search-bar > .fr-btn:hover {
    background-color: #d81820;
}

html[data-theme="dark"]
.fr-header__search
.fr-search-bar > .fr-btn:active {
    background-color: #be151c;
}


/* ==========================================================
   THEME TOGGLE INSIDE HEADER
   ========================================================== */

html[data-theme="dark"]
.fr-header
.mod-theme-toggle {
    color: #eeeeee;
}

html[data-theme="dark"]
.fr-header
.mod-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}


/* ==========================================================
   HEADER SEPARATORS / BORDERS
   ========================================================== */

html[data-theme="dark"] .fr-header__service {
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #3a3a3a;
}

html[data-theme="dark"] .fr-header__menu-links::after {
    background-color: #3a3a3a;
}


/* ==========================================================
   SMOOTH TRANSITIONS
   ========================================================== */

.fr-header,
.fr-header__body,
.fr-header__brand,
.fr-header__tools,
.fr-header__search .fr-input {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ==========================================================
   MAIN NAVIGATION - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-nav {
    background-color: #1a1a1a;
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #ed1c24;
}


/* ==========================================================
   NAV ITEMS
   ========================================================== */

html[data-theme="dark"] .fr-nav__item {
    background-color: transparent;
}

html[data-theme="dark"] .fr-nav__btn,
html[data-theme="dark"] .fr-nav__link {
    color: #e8e8e8;
    background-color: transparent;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Hover */

html[data-theme="dark"] .fr-nav__btn:hover,
html[data-theme="dark"] .fr-nav__link:hover {
    color: #ffffff;
    background-color: #242424;
}


/* Active / Current */

html[data-theme="dark"]
.fr-nav__btn[aria-current]:not([aria-current="false"]),
html[data-theme="dark"]
.fr-nav__link[aria-current]:not([aria-current="false"]) {
    color: #ffffff;
}


/* Active underline */

html[data-theme="dark"]
.fr-nav__btn[aria-current]:not([aria-current="false"])::before,
html[data-theme="dark"]
.fr-nav__link[aria-current]:not([aria-current="false"])::before {
    background-color: #ed1c24;
}


/* ==========================================================
   OPEN NAV BUTTON
   ========================================================== */

html[data-theme="dark"]
.fr-nav__btn[aria-expanded="true"]:not(:disabled) {
    --idle: transparent;
    --hover: #2a2a2a;
    --active: #2a2a2a;

    background-color: #2a2a2a;
    color: #ffffff;
}


/* Arrow icon */

html[data-theme="dark"] .fr-nav__btn::after {
    color: #cfcfcf;
}

html[data-theme="dark"]
.fr-nav__btn[aria-expanded="true"]::after {
    color: #ffffff;
}


/* ==========================================================
   DROPDOWN MENU
   ========================================================== */

html[data-theme="dark"] .fr-menu {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-menu__list {
    --idle: transparent;
    --hover: #303030;
    --active: #383838;

    background-color: #232323;
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #ed1c24,
        0 8px 20px rgba(0, 0, 0, 0.28);
}


/* Dropdown links */

html[data-theme="dark"]
.fr-menu .fr-nav__link {
    color: #e6e6e6;

    box-shadow:
        0 calc(-1rem - 1px) 0 -1rem #3d3d3d;
}

html[data-theme="dark"]
.fr-menu .fr-nav__link:hover {
    color: #ffffff;
    background-color: #303030;
}

html[data-theme="dark"]
.fr-menu .fr-nav__link:active {
    background-color: #383838;
}


/* ==========================================================
   MEGA MENU
   ========================================================== */

html[data-theme="dark"] .fr-mega-menu {
    --idle: transparent;
    --hover: #303030;
    --active: #383838;

    background-color: #232323;
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #ed1c24;

    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.28));
}

html[data-theme="dark"] .fr-mega-menu__category {
    color: #ffffff;

    box-shadow:
        0 calc(1rem + 1px) 0 -1rem #3d3d3d;
}

html[data-theme="dark"] .fr-mega-menu__leader {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-mega-menu__leader p {
    color: #cfcfcf;
}

html[data-theme="dark"]
.fr-mega-menu .fr-nav__link {
    color: #e6e6e6;
}

html[data-theme="dark"]
.fr-mega-menu .fr-nav__link:hover {
    color: #ffffff;
    background-color: #303030;
}


/* ==========================================================
   MENU SEPARATORS
   ========================================================== */

html[data-theme="dark"] .fr-nav__item:first-child::before {
    box-shadow:
        inset 0 -1px 0 0 #3a3a3a;
}

html[data-theme="dark"] .fr-nav__item:last-child::before {
    box-shadow:
        0 -1px 0 0 #3a3a3a;
}


/* ==========================================================
   NAVIGATION TRANSITIONS
   ========================================================== */

.fr-nav,
.fr-nav__btn,
.fr-nav__link,
.fr-menu__list,
.fr-mega-menu {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

/* ==========================================================
   NEWSROOM / HOMEPAGE NEWS - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news {
    background-color: #161616;
    color: #eeeeee;
}


/* ==========================================================
   NEWSROOM CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news_container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   NEWSROOM TITLE
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news_title {
    color: #ffffff;
}


/* ==========================================================
   NEWS CARDS
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news .fr-card {
    background-color: #202020;
    color: #eeeeee;

    border-color: #353535;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Card body */

html[data-theme="dark"] .fr-homepage-news .fr-card__body {
    background-color: #202020;
    color: #eeeeee;
}


/* Card content */

html[data-theme="dark"] .fr-homepage-news .fr-card__content {
    background-color: transparent;
    color: #eeeeee;
}


/* Card footer / date area */

html[data-theme="dark"] .fr-homepage-news .fr-card__end {
    color: #bdbdbd;
}


/* ==========================================================
   NEWS TITLES
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news .fr-card__title,
html[data-theme="dark"] .fr-homepage-news h2,
html[data-theme="dark"] .fr-homepage-news h3 {
    color: #ffffff;
}


/* Links inside cards */

html[data-theme="dark"] .fr-homepage-news .fr-card a {
    color: #ffffff;
}

html[data-theme="dark"] .fr-homepage-news .fr-card a:hover {
    color: #ffffff;
}


/* ==========================================================
   NEWS TEXT / INTRO
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news .fr-card p {
    color: #d2d2d2;
}


/* Dates and metadata */

html[data-theme="dark"] .fr-homepage-news time,
html[data-theme="dark"] .fr-homepage-news .fr-card__detail,
html[data-theme="dark"] .fr-homepage-news .fr-card__desc {
    color: #b5b5b5;
}


/* ==========================================================
   MAIN NEWS ARTICLE
   ========================================================== */

html[data-theme="dark"]
.fr-homepage-news_main-article {
    background-color: #202020;
}


/* ==========================================================
   SECOND NEWS ARTICLE
   ========================================================== */

html[data-theme="dark"]
.fr-homepage-news_second-article {
    background-color: #202020;
}


/* ==========================================================
   THIRD NEWS ARTICLE
   ========================================================== */

html[data-theme="dark"]
.fr-homepage-news_third-article {
    background-color: #202020;
}


/* ==========================================================
   FOURTH NEWS ARTICLE
   ========================================================== */

html[data-theme="dark"]
.fr-homepage-news_fourth-article {
    background-color: #202020;
}


/* ==========================================================
   CARD HOVER
   ========================================================== */

html[data-theme="dark"]
.fr-homepage-news .fr-card:hover {
    background-color: #262626;
}


/* ==========================================================
   IMAGES
   ========================================================== */

/*
 * Fotot nuk i errësojmë dhe nuk përdorim filter.
 * Ruajmë ngjyrat origjinale të fotografive.
 */

html[data-theme="dark"] .fr-homepage-news img {
    filter: none;
    opacity: 1;
}


/* ==========================================================
   "TË GJITHA NGA NEWSROOM" BUTTON
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news_link {
    background-color: #ed1c24;
    color: #ffffff;

    border-color: #ed1c24;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

html[data-theme="dark"] .fr-homepage-news_link:hover {
    background-color: #d81820;
    color: #ffffff;
}

html[data-theme="dark"] .fr-homepage-news_link:active {
    background-color: #be151c;
}


/* ==========================================================
   NEWSROOM SEPARATORS
   ========================================================== */

html[data-theme="dark"] .fr-homepage-news hr {
    border-color: #404040;
}


/* ==========================================================
   NEWSROOM TRANSITIONS
   ========================================================== */

.fr-homepage-news,
.fr-homepage-news .fr-card,
.fr-homepage-news .fr-card__body {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

/* ==========================================================
   JU DHE FORCAT E ARMATOSURA - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .target-five-entries_container {
    background-color: #1b1b1b;
    color: #eeeeee;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

html[data-theme="dark"] .target-five-entries_description {
    color: #ffffff;
}


/* ==========================================================
   GRID ITEMS
   ========================================================== */

html[data-theme="dark"] .target-five-entries_grid_content {
    color: #eeeeee;
}


/* Item titles */

html[data-theme="dark"] .target-five-entries_title {
    color: #ffffff;
}


/* ==========================================================
   ICONS / PICTOGRAMS
   ========================================================== */

/*
 * Për momentin ikonat i ruajmë me ngjyrat origjinale.
 * Nuk përdorim invert/filter global sepse secila ikonë
 * mund të ketë ngjyra të ndryshme.
 */

html[data-theme="dark"] .target-five-entries_picto {
    filter: none;
    opacity: 1;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


/* Hover shumë diskret */

html[data-theme="dark"]
.target-five-entries_grid_content:hover
.target-five-entries_picto {
    transform: translateY(-2px);
}


/* ==========================================================
   SEPARATORS
   ========================================================== */

html[data-theme="dark"]
.target-five-entries_container
.fr_separator {
    border-color: #555555;
    background-color: #555555;
}


/* ==========================================================
   LINKS / ARROWS
   ========================================================== */

html[data-theme="dark"] .target-five-entries_link {
    color: #e8e8e8;
    background-color: transparent;
}

html[data-theme="dark"] .target-five-entries_link::before,
html[data-theme="dark"] .target-five-entries_link::after {
    color: #ed1c24;
}

html[data-theme="dark"] .target-five-entries_link:hover {
    color: #ffffff;
    background-color: transparent;
}


/* ==========================================================
   ITEM HOVER
   ========================================================== */

html[data-theme="dark"] .target-five-entries_grid_content {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

html[data-theme="dark"] .target-five-entries_grid_content:hover {
    color: #ffffff;
}


/* ==========================================================
   SECTION TRANSITIONS
   ========================================================== */

.target-five-entries_container,
.target-five-entries_description,
.target-five-entries_title,
.target-five-entries_link {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

/* ==========================================================
   MBROJTJA NË MEDIA SOCIALE - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .social-flockler-wall {
    background-color: #181818;
    color: #eeeeee;
}


/* ==========================================================
   SECTION CONTAINER
   ========================================================== */

html[data-theme="dark"] .social-flockler-wall .fr-container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

html[data-theme="dark"] .social-flockler-wall .fr-title {
    color: #ffffff;
}

html[data-theme="dark"] .social-flockler-wall .fr-title--underline {
    color: #ffffff;
}


/* ==========================================================
   TITLE UNDERLINE
   ========================================================== */

html[data-theme="dark"]
.social-flockler-wall
.fr-title--underline::after {
    background-color: #ed1c24;
}


/* ==========================================================
   SOCIAL STREAM IFRAME
   ========================================================== */

html[data-theme="dark"] .social-flockler-wall iframe {
    background-color: #1f1f1f;

    border-radius: 4px;

    box-shadow:
        0 0 0 1px #303030,
        0 8px 24px rgba(0, 0, 0, 0.20);

    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ==========================================================
   CAPTION
   ========================================================== */

html[data-theme="dark"]
.social-flockler-wall
.fr-content-media__caption {
    color: #b5b5b5;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.social-flockler-wall,
.social-flockler-wall .fr-title,
.social-flockler-wall iframe {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}
/* ==========================================================
   STRUKTURA CIVILE DHE USHTARAKE - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .homepage-paragraph {
    background-color: #161616;
    color: #eeeeee;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

html[data-theme="dark"] .homepage-paragraph > .fr-container > h2 {
    color: #ffffff;
}


/* ==========================================================
   TILES
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile {
    background-color: #202020;
    color: #eeeeee;

    border-color: #353535;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}


/* Tile body */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__body {
    background-color: transparent;
    color: #eeeeee;
}


/* Tile content */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__content {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   TITLES / LINKS
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__title {
    color: #ffffff;
}

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__link {
    color: #ffffff;
}

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__link:hover {
    color: #ffffff;
}


/* ==========================================================
   PICTOGRAM AREA
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__header {
    background-color: transparent;
}

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__pictogram {
    background-color: transparent;
}


/*
 * Ikonat/logot i ruajmë në ngjyrat origjinale.
 */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile__pictogram img {
    filter: none;
    opacity: 1;
}


/* ==========================================================
   TILE HOVER
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile:hover {
    background-color: #272727;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25);

    transform: translateY(-2px);
}


/* ==========================================================
   TILE ACCENT
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tile::before {
    background-color: #ed1c24;
}


/* ==========================================================
   GRID CONTAINER
   ========================================================== */

html[data-theme="dark"]
.homepage-paragraph
.fr-tiles {
    background-color: transparent;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.homepage-paragraph,
.homepage-paragraph .fr-tile,
.homepage-paragraph .fr-tile__title,
.homepage-paragraph .fr-tile__link {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

/* ==========================================================
   MBROJTJA NË ... - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-manual-lifts {
    background-color: #181818;
    color: #eeeeee;
}


/* ==========================================================
   SECTION CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-manual-lifts--container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

html[data-theme="dark"] .manual-lifts-block_title {
    color: #ffffff;
}


/* ==========================================================
   CARDS
   ========================================================== */

html[data-theme="dark"] .fr-card--manual-lifts {
    background-color: #202020;
    color: #eeeeee;

    border-color: #353535;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}


/* Card body */

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__body {
    background-color: #202020;
    color: #eeeeee;
}


/* Card content */

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__content {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   CARD TITLES
   ========================================================== */

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__title {
    color: #ffffff;
}

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__link {
    color: #ffffff;
}

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__link:hover {
    color: #ffffff;
}


/* ==========================================================
   DESCRIPTION
   ========================================================== */

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__desc {
    color: #cfcfcf;
}


/* ==========================================================
   IMAGES
   ========================================================== */

/*
 * Fotografitë ruhen origjinale.
 * Nuk përdorim invert/brightness këtu.
 */

html[data-theme="dark"]
.fr-card--manual-lifts
.fr-card__img img {
    filter: none;
    opacity: 1;
}


/* ==========================================================
   CARD HOVER
   ========================================================== */

html[data-theme="dark"]
.fr-card--manual-lifts:hover {
    background-color: #272727;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25);

    transform: translateY(-2px);
}


/* ==========================================================
   CARD ACCENT
   ========================================================== */

html[data-theme="dark"]
.fr-card--manual-lifts::before {
    background-color: #ed1c24;
}


/* ==========================================================
   GRID
   ========================================================== */

html[data-theme="dark"] .fr-cards--manual-lifts {
    background-color: transparent;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.fr-manual-lifts,
.fr-card--manual-lifts,
.fr-card--manual-lifts .fr-card__title,
.fr-card--manual-lifts .fr-card__desc {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

/* ==========================================================
   HAPËSIRA MEDIATIKE - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-mediatheque {
    background-color: #181818;
    color: #eeeeee;
}


/* ==========================================================
   SECTION CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-mediatheque__container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   VIDEO SIDE
   ========================================================== */

html[data-theme="dark"] .fr-mediatheque__videoside {
    background-color: transparent;
    color: #eeeeee;
}

html[data-theme="dark"] .fr-mediatheque__videoside .fr-title,
html[data-theme="dark"] .fr-mediatheque__videoside .fr-title--underline {
    color: #ffffff;
}


/* Underline */

html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-title--underline {
    border-bottom-color: #555555;
}


/* ==========================================================
   VIDEO MODULE
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque__videoside video,
html[data-theme="dark"]
.fr-mediatheque__videoside iframe {
    background-color: #101010;

    box-shadow:
        0 0 0 1px #303030,
        0 8px 24px rgba(0, 0, 0, 0.20);
}


/* ==========================================================
   MEDIA TILES AREA
   ========================================================== */

html[data-theme="dark"] .fr-mediatheque__tiles {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   LIBRARY CARDS
   ========================================================== */

html[data-theme="dark"] .fr-card__library {
    background-color: transparent;
}


/* ==========================================================
   TILES
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile {
    background-color: #202020;
    color: #eeeeee;

    border-color: #353535;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.20s ease;
}


/* Tile body */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__body {
    background-color: transparent;
    color: #eeeeee;
}


/* Tile content */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__content {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   TILE TITLES / LINKS
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__title {
    color: #ffffff;
}

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__link {
    color: #ffffff;
}

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__link:hover {
    color: #ffffff;
}


/* ==========================================================
   PICTOGRAMS
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile__pictogram {
    background-color: transparent;
}


/*
 * Në këtë seksion ke dy variante të ikonës:
 * .fr-img--light dhe .fr-img--dark
 */

html[data-theme="dark"]
.fr-mediatheque
.fr-img--light {
    display: none;
}

html[data-theme="dark"]
.fr-mediatheque
.fr-img--dark {
    display: block;
}


/* Sigurohemi që ikona dark të duket pastër */

html[data-theme="dark"]
.fr-mediatheque
.fr-img--dark {
    filter: none;
    opacity: 0.95;
}


/* ==========================================================
   TILE HOVER
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile:hover {
    background-color: #272727;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.25);

    transform: translateY(-2px);
}

html[data-theme="dark"]
.fr-mediatheque
.fr-tile:hover
.fr-img--dark {
    opacity: 1;
}


/* ==========================================================
   TILE ACCENT
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque
.fr-tile::before {
    background-color: #ed1c24;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.fr-mediatheque,
.fr-mediatheque .fr-tile,
.fr-mediatheque .fr-tile__title,
.fr-mediatheque .fr-tile__link,
.fr-mediatheque .fr-img--dark {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.20s ease,
        opacity 0.20s ease;
}

/* ==========================================================
   VIDEO TITLE / HOVER FIX - DARK MODE
   ========================================================== */

html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover .fr-card__body,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover .fr-card__content {
    background-color: #202020;
    color: #ffffff;
}

html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover .fr-card__title,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover .fr-card__title a,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card:hover .fr-card__link {
    color: #ffffff;
    background-color: transparent;
}

html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card__body,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card__content {
    background-color: #202020;
    color: #eeeeee;
}

html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card__title,
html[data-theme="dark"]
.fr-mediatheque__videoside
.fr-card__title a {
    color: #ffffff;
}

/* ==========================================================
   PUNËSIME / REKRUTIME / PROKURIME / KUALIFIKIME
   DARK MODE - Desktop
   ========================================================== */

html[data-theme="dark"] .fr-diffusion {
    background-color: #181818;
    color: #eeeeee;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-diffusion > .fr-container {
    background-color: #181818;
    color: #eeeeee;
}


/* ==========================================================
   IMAGE SIDE
   ========================================================== */

html[data-theme="dark"] .fr-diffusion__image {
    background-color: #181818;
}

html[data-theme="dark"] .fr-diffusion__image img {
    filter: none;
    opacity: 1;
}


/* ==========================================================
   DESCRIPTION SIDE
   ========================================================== */

html[data-theme="dark"] .fr-diffusion__description {
    background-color: #1d1d1d;
    color: #eeeeee;
}


/* Title */

html[data-theme="dark"] .fr-diffusion__description h2 {
    color: #ffffff;
}


/* Description */

html[data-theme="dark"] .fr-diffusion__description p {
    color: #cfcfcf;
}


/* ==========================================================
   NJOFTIME BUTTON
   ========================================================== */

html[data-theme="dark"]
.fr-diffusion__description
.fr-btn--secondary {
    background-color: transparent;
    color: #ffffff;

    box-shadow:
        inset 0 0 0 1px #ed1c24;
}

html[data-theme="dark"]
.fr-diffusion__description
.fr-btn--secondary:hover {
    background-color: #ed1c24;
    color: #ffffff;
}

html[data-theme="dark"]
.fr-diffusion__description
.fr-btn--secondary:active {
    background-color: #be151c;
    color: #ffffff;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.fr-diffusion,
.fr-diffusion__description,
.fr-diffusion__description h2,
.fr-diffusion__description p,
.fr-diffusion__description .fr-btn--secondary {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

/* ==========================================================
   NA NDIQNI NË MEDIAT SOCIALE - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-follow {
    background-color: #1b1b1b;
    color: #eeeeee;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-follow .fr-container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   SOCIAL AREA
   ========================================================== */

html[data-theme="dark"] .fr-follow__social,
html[data-theme="dark"] .follow__social {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   TITLE
   ========================================================== */

html[data-theme="dark"] .follow__social-title {
    color: #ffffff;
}


/* ==========================================================
   SOCIAL BUTTON GROUP
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btns-group {
    background-color: transparent;
}


/* ==========================================================
   SOCIAL BUTTONS
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btn {
    background-color: #242424;
    color: #eeeeee;

    border-radius: 4px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* Hover */

html[data-theme="dark"]
.fr-follow
.fr-btn:hover {
    background-color: #303030;
    color: #ffffff;

    transform: translateY(-1px);
}


/* Active */

html[data-theme="dark"]
.fr-follow
.fr-btn:active {
    background-color: #383838;
    color: #ffffff;

    transform: translateY(0);
}


/* ==========================================================
   SOCIAL ICONS
   ========================================================== */

/*
 * Ikonat social janë SVG background images nga DSFR.
 * Në Dark Mode i bëjmë të bardha për kontrast më të mirë.
 */

html[data-theme="dark"]
.fr-follow
.fr-btn::before {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}


/* ==========================================================
   FACEBOOK
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btn--facebook:hover {
    background-color: #1877f2;
    color: #ffffff;
}


/* ==========================================================
   X / TWITTER
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btn--twitter-x:hover,
html[data-theme="dark"]
.fr-follow
.fr-btn--twitter:hover {
    background-color: #111111;
    color: #ffffff;

    box-shadow:
        inset 0 0 0 1px #444444;
}


/* ==========================================================
   INSTAGRAM
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btn--instagram:hover {
    background-color: #c13584;
    color: #ffffff;
}


/* ==========================================================
   YOUTUBE
   ========================================================== */

html[data-theme="dark"]
.fr-follow
.fr-btn--youtube:hover {
    background-color: #ff0000;
    color: #ffffff;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.fr-follow,
.fr-follow__social,
.follow__social-title,
.fr-follow .fr-btn {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* ==========================================================
   FOOTER - DARK MODE
   Desktop
   ========================================================== */

html[data-theme="dark"] .fr-footer {
    background-color: #141414;
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #ed1c24,
        inset 0 -1px 0 0 #2f2f2f;
}


/* ==========================================================
   FOOTER CONTAINER
   ========================================================== */

html[data-theme="dark"] .fr-footer .fr-container {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   FOOTER BODY
   ========================================================== */

html[data-theme="dark"] .fr-footer__body {
    background-color: transparent;
    color: #eeeeee;
}


/* ==========================================================
   FOOTER BRAND / LOGO
   ========================================================== */

html[data-theme="dark"] .fr-footer__brand {
    background-color: transparent;
}

html[data-theme="dark"] .fr-footer__brand-link {
    background-color: transparent;
}



/* ==========================================================
   FOOTER LOGO
   Ruhet pamja origjinale
   ========================================================== */

html[data-theme="dark"] .fr-footer__brand img {
    filter: none;
    opacity: 1;
}




/* ==========================================================
   MAIN FOOTER LINKS
   president.al / parlament.al / kryeministria.al / e-albania
   ========================================================== */

html[data-theme="dark"] .fr-footer__content {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-footer__content-list {
    color: #eeeeee;
}

html[data-theme="dark"] .fr-footer__content-link {
    color: #d8d8d8;
    background-color: transparent;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

html[data-theme="dark"] .fr-footer__content-link:hover {
    color: #ffffff;
    background-color: transparent;
}


/* ==========================================================
   FOOTER BOTTOM
   ========================================================== */

html[data-theme="dark"] .fr-footer__bottom {
    color: #bdbdbd;

    box-shadow:
        inset 0 1px 0 0 #333333;
}


/* Bottom links */

html[data-theme="dark"] .fr-footer__bottom-link {
    color: #bdbdbd;
    background-color: transparent;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

html[data-theme="dark"] .fr-footer__bottom-link:hover {
    color: #ffffff;
    background-color: transparent;
}


/* ==========================================================
   BOTTOM SEPARATORS
   ========================================================== */

html[data-theme="dark"] .fr-footer__bottom-item::before {
    box-shadow:
        inset 0 0 0 1px #444444;
}


/* ==========================================================
   FOOTER COPY
   ========================================================== */

html[data-theme="dark"] .fr-footer__bottom-copy {
    color: #9f9f9f;
}

html[data-theme="dark"] .fr-footer__bottom-copy a {
    color: #cfcfcf;
}

html[data-theme="dark"] .fr-footer__bottom-copy a:hover {
    color: #ffffff;
}


/* ==========================================================
   FOOTER BUTTONS
   ========================================================== */

html[data-theme="dark"] .fr-footer__bottom .fr-btn {
    color: #d0d0d0;
    background-color: transparent;
}

html[data-theme="dark"] .fr-footer__bottom .fr-btn:hover {
    color: #ffffff;
    background-color: #222222;
}


/* ==========================================================
   FOOTER PARTNERS
   ========================================================== */

html[data-theme="dark"] .fr-footer__partners {
    color: #eeeeee;

    box-shadow:
        inset 0 1px 0 0 #333333;
}

html[data-theme="dark"] .fr-footer__partners-title {
    color: #ffffff;
}

html[data-theme="dark"] .fr-footer__partners .fr-footer__logo {
    background-color: #202020;

    box-shadow:
        inset 0 0 0 1px #3a3a3a;
}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.fr-footer,
.fr-footer__content-link,
.fr-footer__bottom-link,
.fr-footer__brand img {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}
/* ==========================================================
   THEME TOGGLE - MOBILE POSITION
   ========================================================== */

.mod-theme-toggle-mobile {
    display: none;
}

@media (max-width: 991px) {

    .mod-theme-toggle-mobile {
        display: inline-flex;
        flex: 0 0 auto;

        width: 40px;
        height: 40px;

        margin: 0;
    }

    .fr-header__navbar {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .fr-header__navbar .mod-theme-toggle-mobile {
        order: 1;
    }

    .fr-header__navbar .fr-btn--search {
        order: 2;
    }

    .fr-header__navbar .fr-btn--menu {
        order: 3;
    }

}

@media (max-width: 991px) {

    .fr-header__tools .mod-theme-toggle {
        display: none;
    }

}

/* ==========================================================
   MOBILE - HIDE DESKTOP DARK MODE TOGGLE INSIDE BURGER MENU
   ========================================================== */

@media (max-width: 991px) {

    /*
     * Fsheh vetëm toggle-in desktop që DSFR
     * e vendos brenda menusë mobile.
     */
    #menu-modal-id #mod-theme-toggle,
    .fr-header__menu #mod-theme-toggle,
    .fr-header__tools #mod-theme-toggle {
        display: none !important;
    }

    /*
     * Toggle-i i dedikuar për mobile në navbar
     * duhet të vazhdojë të shfaqet.
     */
    .fr-header__navbar #mod-theme-toggle-mobile {
        display: inline-flex !important;
    }
}