.genyx-dashboard-shell,
.genyx-dashboard-shell *,
.genyx-dashboard-shell *::before,
.genyx-dashboard-shell *::after {

    box-sizing: border-box;

}


/* =========================================================
   MAIN SHELL
========================================================= */

.genyx-dashboard-shell {

    width: 100%;
    min-height: 100vh;

    display: flex;

    background: #01050b;
    color: #ffffff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}


/* =========================================================
   SIDEBAR
========================================================= */

.genyx-dashboard-sidebar {

    width: 220px;
    min-width: 220px;

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #02060d 0%,
            #01050b 100%
        );

    border-right:
        1px solid rgba(255,255,255,0.055);

    padding: 28px 14px;

    display: flex;
    flex-direction: column;

    position: relative;

    z-index: 20;

}


/* =========================================================
   SIDEBAR LOGO
========================================================= */

.genyx-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    text-decoration: none;
    overflow: hidden;
	margin-bottom:10px;
}


/* Logo image */

.genyx-sidebar-logo img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}

/* =========================================================
   GENYX SIDEBAR NAVIGATION
========================================================= */

.genyx-sidebar-nav {

    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;

}


/* =========================================================
   SIDEBAR ITEM
========================================================= */

.genyx-sidebar-item {

    width: 100%;

    height: 48px;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 14px;

    padding: 0 14px;

    margin: 0;

    box-sizing: border-box;

    border: 1px solid transparent !important;

    border-radius: 7px;

    background: transparent !important;

    color: #d8dde7 !important;

    font-family: inherit;

    font-size: 15px;

    font-weight: 400;

    line-height: 1;

    text-align: left;

    text-decoration: none !important;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


/* =========================================================
   SIDEBAR ICON
========================================================= */

.genyx-sidebar-item > i {

    width: 22px;
    min-width: 22px;

    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding: 0;

    color: currentColor;

    font-size: 21px;

    line-height: 1;

    flex-shrink: 0;

}


/* =========================================================
   SIDEBAR TEXT
========================================================= */

.genyx-sidebar-item > span {

    display: block;

    margin: 0;
    padding: 0;

    color: currentColor;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.2;

    white-space: nowrap;

}


.genyx-sidebar-item:hover {

    background:
        linear-gradient(
            90deg,
            rgba(8, 40, 85, 0.55) 0%,
            rgba(5, 22, 48, 0.35) 55%,
            rgba(3, 10, 19, 0.10) 100%
        ) !important;

    color:
        #ffffff !important;

    border-color:
        rgba(25, 91, 170, 0.20) !important;

    box-shadow:
        inset 0 0 15px rgba(0, 90, 255, 0.05);

}


/* =========================================================
   ACTIVE SIDEBAR ITEM
========================================================= */

.genyx-sidebar-item.active {

    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(7, 76, 190, 0.95) 0%,
            rgba(7, 59, 145, 0.78) 32%,
            rgba(5, 27, 62, 0.65) 68%,
            rgba(3, 10, 19, 0.35) 100%
        ) !important;

    border:
        1px solid rgba(20, 105, 255, 0.35) !important;

    border-left:
        3px solid #0878ff !important;

    color:
        #ffffff !important;

    box-shadow:
        inset 0 0 25px rgba(0, 92, 255, 0.10),
        0 0 18px rgba(0, 85, 255, 0.12);

}


/* =========================================================
   ACTIVE ICON
========================================================= */

.genyx-sidebar-item.active > i {

    color: #ffffff !important;

}


/* =========================================================
   EARLY ACCESS PRODUCT CARD
========================================================= */

.genyx-sidebar-featured {

    width: 100%;
    max-width: 204px;

    height: 347px;

    margin: auto auto -10px;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

    border: 1px solid rgba(48, 75, 110, 0.55);

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            #03101e 0%,
            #020b17 100%
        );

}


/* =========================================================
   PRODUCT IMAGE AREA
========================================================= */

.genyx-sidebar-featured-image {

    width: 100%;

    height: 175px;

    display: flex;

    align-items: center;

    justify-content: center;



    box-sizing: border-box;

}


.genyx-sidebar-featured-image img {

    width: 100%;

    height: 100%;

    max-width: 170px;

    max-height: 165px;

    object-fit: contain;

    object-position: center;

    display: block;

}


/* =========================================================
   CONTENT
========================================================= */

.genyx-sidebar-featured-content {

    width: 100%;

    padding: 7px 18px 18px;

    box-sizing: border-box;

}


/* =========================================================
   EARLY ACCESS
========================================================= */

.genyx-sidebar-featured-label {

    margin: 0 0 7px;

    padding: 0;

    color: #1685ff;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0;

    text-transform: uppercase;

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.genyx-sidebar-featured-title {

    margin: 0 0 7px !important;

    padding: 0;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 24px !important;

    font-weight: 400 !important;

    line-height: 1.15;

    letter-spacing: -0.3px;

}


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

.genyx-sidebar-featured-description {

    margin: 0 0 14px !important;

    padding: 0;

    color: #8d98a8 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.35;

}


/* =========================================================
   LEARN MORE BUTTON
========================================================= */

.genyx-sidebar-featured-button {

    width: 100%;

    height: 40px;

    min-height: 40px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(18, 112, 235, 0.65);

    border-radius: 7px;

    background: transparent;

    color: #1685ff !important;

    font-family: inherit !important;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    text-decoration: none !important;

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

}


.genyx-sidebar-featured-button:hover {

    background: rgba(18, 112, 235, 0.10);

    border-color: #1685ff;

    color: #ffffff !important;

}


/* =========================================================
   SIDEBAR HEIGHT SAFETY
========================================================= */

.genyx-dashboard-sidebar {

    overflow-y: auto;

}

/* =========================================================
   MAIN AREA
========================================================= */

.genyx-dashboard-main {

    flex: 1;

    min-width: 0;
    min-height: 100vh;

    position: relative;

    padding:
        0
        28px
        50px;

    background:
        #01050b;

}


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

.genyx-dashboard-header {

    min-height: 207px;

    margin: 0;

    padding:
        50px
        0
        35px;

    position: relative;

   /* background:
        radial-gradient(
            circle at 78% 15%,
            rgba(0, 57, 135, 0.12),
            transparent 30%
        );*/

}


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

.genyx-dashboard-header h1 {

    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 32px !important;

    font-weight: 500 !important;

    line-height: 1.2;

    letter-spacing: -0.5px;

}


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

.genyx-dashboard-header p {

    margin: 0 !important;

    color: #a5afbf !important;

    font-family: inherit !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.5;

}

/* =========================================================
   DASHBOARD HEADER
========================================================= */

.genyx-dashboard-header {

    width: 100%;

    min-height: 180px;

    position: relative;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    padding: 50px 0 30px;

    overflow: hidden;

}


/* =========================================================
   HEADER BACKGROUND
========================================================= */

.genyx-dashboard-header-background {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    /*background:
        radial-gradient(
            circle at 75% 15%,
            rgba(0, 75, 170, 0.16),
            transparent 35%
        );*/

}


/* =========================================================
   HEADER CONTENT
========================================================= */

.genyx-dashboard-header-content {

    position: relative;

    z-index: 2;

}


.genyx-dashboard-header h1 {

    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-size: 32px !important;

    font-weight: 500 !important;

    line-height: 1.2;

}


.genyx-dashboard-header h1 span {

    color: #2d83ff;

}


.genyx-dashboard-header p {

    margin: 0 !important;

    color: #a7b0bf !important;

    font-size: 16px !important;

}


.genyx-header-separator {

    margin: 0 8px;

    color: #788395;

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.genyx-dashboard-header-actions {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 22px;

    padding-top: 2px;

}


/* =========================================================
   NOTIFICATION
========================================================= */

.genyx-dashboard-notification {

    width: 42px;
    height: 42px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #ffffff;

    font-size: 25px;

    cursor: pointer;

}


.genyx-dashboard-notification:hover {

    background: transparent;

    color: #ffffff;

}


.genyx-notification-count {

    position: absolute;

    top: -3px;
    right: -3px;

    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #176bea;

    color: #ffffff;

    font-size: 11px;

    font-weight: 600;

}


/* =========================================================
   AVATAR
========================================================= */

/* =========================================================
   PROFILE AVATAR LINK
========================================================= */

.genyx-dashboard-avatar-link {

    width: 50px;
    height: 50px;

    display: block;

    flex-shrink: 0;

    text-decoration: none;

    border: none;

    outline: none;

    cursor: pointer;

}


/* =========================================================
   PROFILE AVATAR
========================================================= */

.genyx-dashboard-avatar {

    width: 50px;
    height: 50px;

    overflow: hidden;

    border-radius: 50%;

    border: none;

    background: #18202d;

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

}


/* =========================================================
   PROFILE AVATAR IMAGE
========================================================= */

.genyx-dashboard-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   PROFILE AVATAR HOVER
========================================================= */

.genyx-dashboard-avatar-link:hover .genyx-dashboard-avatar {

    transform: scale(1.05);

    opacity: 0.9;

}


/* =========================================================
   PROFILE AVATAR FOCUS
========================================================= */

.genyx-dashboard-avatar-link:focus {

    outline: none;

}

.genyx-dashboard-avatar-link:focus-visible {

    outline: 2px solid #1678ff;

    outline-offset: 4px;

    border-radius: 50%;

}


.genyx-dashboard-avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

}

/* =========================================================
   TOP TABS

   Target design uses the sidebar for navigation.
   Therefore the desktop top tabs are hidden.
========================================================= */

.genyx-dashboard-tabs {

    display: none !important;

}


/* =========================================================
   TAB CONTENT
========================================================= */

.genyx-dashboard-content {

    width: 100%;

}


.genyx-tab-panel {

    display: none;

    width: 100%;

}


.genyx-tab-panel.active {

    display: block;

}


/* =========================================================
   COUPON HERO
========================================================= */

.genyx-dashboard-card {

    width: 100%;

    
    min-height: 241px;

    position: relative;

    display: flex;

    align-items: center;

    padding:
        0
        34px;

    margin: 0;

    border:
        1px solid rgba(52, 76, 111, 0.42);

    border-radius: 11px;

   /* background:

        radial-gradient(
            circle at 82% 50%,
            rgba(0, 62, 145, 0.16),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #050b14 0%,
            #030913 100%
        );

    overflow: hidden;*/

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.015);

}


/* =========================================================
   COUPON CONTENT
========================================================= */

.genyx-dashboard-card-content {

    position: relative;

    z-index: 2;

    width: 55%;

}


.genyx-dashboard-card h2 {

    margin:
        0 0 14px !important;

    color:
        #ffffff !important;

    font-family:
        inherit !important;

    font-size:
        31px !important;

    font-weight:
        500 !important;

    line-height:
        1.2;

    letter-spacing:
        -0.5px;

}


.genyx-dashboard-card p {

    margin:
        0 0 27px !important;

    color:
       #21b570 !important;

    font-family:
        inherit !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.5;

}


/* =========================================================
   COUPON IMAGE AREA
   Elementor can use this area later.
========================================================= */

.genyx-coupon-image-slot {

    position: absolute;

    top: 0;
    right: 0;

    width: 45%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    pointer-events: none;

}


.genyx-coupon-image-slot img {

    width: auto;

    max-width: 82%;
    max-height: 85%;

    height: auto;

    object-fit: contain;

    display: block;

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.genyx-btn-primary {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding:
        0
        25px !important;

    border: 0 !important;

    border-radius: 8px !important;

    background:
        linear-gradient(
            180deg,
            #ff3d4d 0%,
            #ed2636 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(237,38,54,0.18);

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

}


.genyx-btn-primary:hover {

    background:
        linear-gradient(
            180deg,
            #ff4b59 0%,
            #f02d3d 100%
        ) !important;

    color: #ffffff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 30px rgba(237,38,54,0.25);

}


/* =========================================================
   FUTURE LINKS AREA
========================================================= */

.genyx-links-section-placeholder {

    width: 100%;

    min-height: 430px;

    margin-top: 1px;

    border:
        1px solid rgba(43, 65, 96, 0.38);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 9, 17, 0.90),
            rgba(1, 5, 11, 0.96)
        );

}


/* =========================================================
   COUPON HERO — STABLE LAYOUT
========================================================= */

.genyx-dashboard-card {

    width: 100%;

    min-height: 241px;

    position: relative;

    padding: 42px 34px;

    margin: 0;

    border: 1px solid rgba(90, 108, 138, 0.27);

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0, 70, 180, 0.08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #060c15 0%,
            #050a12 100%
        );

    box-sizing: border-box;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.genyx-dashboard-card-content {

    position: relative;

    z-index: 2;

    width: 55%;

    box-sizing: border-box;
}


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

.genyx-dashboard-card h2 {

    margin: 0 0 14px;

    color: #ffffff;

    font-size: 31px;
    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -0.5px;
}


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

.genyx-dashboard-card > p,
.genyx-dashboard-card-content > p {

    margin: 0 0 26px;

    color: #9ba5b5;

    font-size: 16px;

    line-height: 1.5;
}


/* =========================================================
   COUPON GENERATOR
========================================================= */

/* =========================================================
   COUPON INTRO
========================================================= */

.genyx-coupon-intro {

    width: 100%;

}


/* =========================================================
   COUPON GENERATOR
   Stays inside the existing hero card.
========================================================= */

.genyx-coupon-generator {

    display: none;

    position: relative;

    width: 100%;

    margin: 30px 0 0;

    padding: 30px 0 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    box-sizing: border-box;

    z-index: 3;
}

/* =========================================================
   MAXIMUM DISCOUNT
========================================================= */

.genyx-max-discount-box {

    text-align: center;

    margin-bottom: 18px;
}

.genyx-max-discount-box h3 {

    margin: 0 0 6px;

    color: #98a2b5;

    font-size: 16px;

    font-weight: 500;
}

.genyx-max-discount {

    color: #ff4050;

    font-size: 44px;

    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   DISCOUNT FIELD
========================================================= */

.genyx-field {

    width: 100%;

    max-width: 360px;

    margin: 0 auto 12px;

    box-sizing: border-box;
}

.genyx-field label {

    width: 100%;

    min-height: 48px;

    padding: 12px 14px;

    color: #dce1ea;

    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   DISCOUNT INPUT
========================================================= */

.genyx-discount-input {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;
}

.genyx-discount-input input {

    width: 100%;

    min-height: 44px;

    padding: 10px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    background: #080e18;

    color: #ffffff;

    font-family: inherit;

    font-size: 17px;

    outline: none;

    box-sizing: border-box;
}

.genyx-discount-input input:focus {

    border-color: #1768df;

    box-shadow:
        0 0 0 2px rgba(23, 104, 223, 0.12);
}

.genyx-discount-input span {

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;

    flex-shrink: 0;
}


/* =========================================================
   ERROR
========================================================= */

.genyx-discount-error {

    min-height: 22px;

    margin: 0 0 20px;

    color: #ff4b59;

    font-size: 14px;

    text-align: center;
}


/* =========================================================
   CREATE COUPON BUTTON
========================================================= */

#genyx-create-coupon {

    display: flex !important;

    margin: 0 auto;
}

#genyx-create-coupon:disabled {

    opacity: 0.45;

    cursor: not-allowed;
}

/* =========================================================
   CART BUTTON
========================================================= */

.genyx-dashboard-shell .woocommerce-cart-link,
.genyx-dashboard-shell .genyx-cart-button {

    color:
        #ffffff;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .genyx-dashboard-sidebar {

        width: 200px;
        min-width: 200px;

    }

    .genyx-dashboard-main {

        padding-left:
            22px;

        padding-right:
            22px;

    }

    .genyx-dashboard-card h2 {

        font-size:
            27px !important;

    }

}


@media (max-width: 800px) {

    .genyx-dashboard-shell {

        flex-direction:
            column;

    }

    .genyx-dashboard-sidebar {

        width:
            100%;

        min-width:
            0;

        min-height:
            auto;

        border-right:
            0;

        border-bottom:
            1px solid rgba(255,255,255,0.07);

        padding:
            18px;

    }

    .genyx-sidebar-logo {

        margin-bottom:
            20px;

    }

    .genyx-sidebar-nav {

        flex-direction:
            row;

        overflow-x:
            auto;

    }

    .genyx-sidebar-item {

        width:
            auto;

        white-space:
            nowrap;

    }

    .genyx-dashboard-main {

        padding:
            0 16px 30px;

    }

    .genyx-dashboard-header {

        min-height:
            140px;

        padding-top:
            30px;

    }

    .genyx-dashboard-header h1 {

        font-size:
            28px !important;

    }

    .genyx-dashboard-card {

        height:
            auto;

        

        padding:
            30px 24px;

        align-items:
            flex-start;

    }

    .genyx-dashboard-card-content {

        width:
            100%;

    }

    .genyx-coupon-image-slot {

        display:
            none;

    }

}

/* =========================================================
   SIDEBAR ICON + TEXT ALIGNMENT FIX
========================================================= */

.genyx-sidebar-nav .genyx-sidebar-item {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-start !important;

    gap: 14px !important;

    text-align: left !important;

}


/* Icon */

.genyx-sidebar-nav .genyx-sidebar-item > i {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex: 0 0 22px !important;

    width: 22px !important;

    height: 22px !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1 !important;

    font-size: 20px !important;

}


/* Text */

.genyx-sidebar-nav .genyx-sidebar-item > span {

    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 1.2 !important;

    text-align: left !important;

    white-space: nowrap !important;

}

/* =========================================================
   COUPON SUCCESS POPUP
========================================================= */

.genyx-coupon-success-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;
    justify-content: center;

}


/* =========================================================
   OVERLAY
========================================================= */

.genyx-coupon-success-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 3, 9, 0.78);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

}


/* =========================================================
   POPUP CARD
========================================================= */

.genyx-coupon-success-card {

    position: relative;

    z-index: 2;

    width: min(
        460px,
        calc(100% - 40px)
    );

    padding: 40px 36px 34px;

    border:
        1px solid rgba(58, 91, 139, 0.55);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 82, 190, 0.16),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #07101c 0%,
            #030912 100%
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.04);

    text-align: center;

    transform:
        translateY(10px)
        scale(0.97);

    opacity: 0;

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

}


/* =========================================================
   OPEN STATE
========================================================= */

.genyx-coupon-success-modal.is-open {

    display: flex;

}


.genyx-coupon-success-modal.is-open
.genyx-coupon-success-card {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.genyx-coupon-modal-close {

    position: absolute;

    top: 14px;
    right: 16px;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.05);

    color:
        #aeb7c7;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

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

}


.genyx-coupon-modal-close:hover {

    background:
        rgba(255,255,255,0.10);

    color:
        #ffffff;

}


/* =========================================================
   SUCCESS ICON
========================================================= */

.genyx-coupon-success-icon {

    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(31, 213, 126, 0.12);

    border:
        1px solid rgba(31, 213, 126, 0.35);

    color:
        #28d77f;

    font-size: 30px;

    box-shadow:
        0 0 30px rgba(31, 213, 126, 0.08);

}


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

.genyx-coupon-success-card h2 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        26px;

    font-weight:
        500;

    line-height:
        1.2;

}


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

.genyx-coupon-success-description {

    margin:
        0 0 28px;

    color:
        #9ca7b8;

    font-size:
        15px;

    line-height:
        1.5;

}


/* =========================================================
   CODE LABEL
========================================================= */

.genyx-coupon-code-label {

    margin-bottom:
        9px;

    color:
        #78869a;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

}


/* =========================================================
   CODE BOX
========================================================= */

.genyx-coupon-code-box {

    width:
        100%;

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 12px 0 20px;

    border:
        1px solid rgba(37, 108, 255, 0.35);

    border-radius:
        10px;

    background:
        rgba(5, 15, 29, 0.9);

    box-shadow:
        inset 0 0 20px rgba(0, 80, 180, 0.05);

}


#genyx-created-coupon-code {

    color:
        #ffffff;

    font-family:
        monospace;

    font-size:
        23px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


/* =========================================================
   COPY BUTTON
========================================================= */

.genyx-copy-coupon {

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:
        8px;

    background:
        rgba(255,255,255,0.04);

    color:
        #ffffff;

    font-size:
        17px;

    cursor:
        pointer;

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

}


.genyx-copy-coupon:hover {

    background:
        rgba(37,108,255,0.18);

    border-color:
        rgba(37,108,255,0.45);

}


/* =========================================================
   COPY MESSAGE
========================================================= */

.genyx-copy-success {

    min-height:
        20px;

    margin:
        8px 0 18px;

    color:
        #28d77f;

    font-size:
        12px;

    opacity:
        100%;

    transition:
        opacity 0.2s ease;

}


.genyx-copy-success.visible {

    opacity:
        1;

}


/* =========================================================
   DONE BUTTON
========================================================= */

#genyx-close-coupon-success {

    min-width:
        120px;
	margin-top:10px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .genyx-coupon-success-card {

        width:
            calc(100% - 28px);

        padding:
            34px 22px 28px;

    }

    #genyx-created-coupon-code {

        font-size:
            19px;

        letter-spacing:
            1.5px;

    }

}

/* =========================================================
   YOUR COUPONS
========================================================= */

.genyx-coupons-section {

    width: 100%;

    margin-top: 20px;

    border:
        1px solid rgba(43, 65, 96, 0.38);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 9, 17, 0.90),
            rgba(1, 5, 11, 0.96)
        );

    overflow: hidden;

}


/* =========================================================
   COUPONS HEADER
========================================================= */

.genyx-coupons-header {

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 28px;

    border-bottom:
        1px solid rgba(255,255,255,0.07);

}


.genyx-coupons-header h2 {

    margin: 0;

    color: #ffffff;

    font-family: inherit;

    font-size: 20px;

    font-weight: 500;

    line-height: 1.2;

}


.genyx-coupons-count {

    min-width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        0 8px;

    border-radius: 7px;

    background:
        rgba(23, 107, 234, 0.12);

    border:
        1px solid rgba(23, 107, 234, 0.25);

    color: #5c9eff;

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   COUPON TABLE
========================================================= */

.genyx-coupons-table {

    width: 100%;

}


/* =========================================================
   COUPON ROW
========================================================= */

.genyx-coupon-row {

    width: 100%;

    min-height: 64px;

    display: grid;

    grid-template-columns:
    18%
    17%
    minmax(0, 1fr)
    8%
    9%
    13%
    70px;

    align-items: center;

    column-gap: 0;

    padding: 0 22px;

    border-bottom:
        1px solid rgba(255,255,255,0.055);

}

.genyx-coupon-clicks {

    color: #2e8bff;

    font-weight: 500;

}
.genyx-coupon-row:last-child {

    border-bottom: 0;

}


/* =========================================================
   TABLE HEADER
========================================================= */

.genyx-coupon-row-header {

    min-height: 48px;

    background:
        rgba(255,255,255,0.018);

}

.genyx-coupon-row-header
.genyx-coupon-column {

    color: #778397;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.6px;

}


/* =========================================================
   COLUMN
========================================================= */

.genyx-coupon-column {

    min-width: 0;

    color: #dce2eb;

    font-size: 14px;

    line-height: 1.3;

}


/* =========================================================
   COUPON CODE
========================================================= */

.genyx-coupon-code {

    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    letter-spacing: 0.2px;

}


/* =========================================================
   DISCOUNT
========================================================= */

.genyx-coupon-discount-value {

    color: #ff4050;

    font-weight: 600;

}


/* =========================================================
   DATE
========================================================= */

.genyx-coupon-date {

    color: #8e99aa;

}


/* =========================================================
   ROW HOVER
========================================================= */

.genyx-coupon-row:not(.genyx-coupon-row-header):hover {

    background:
        rgba(8, 29, 58, 0.35);

}


/* =========================================================
   EMPTY STATE
========================================================= */

.genyx-coupons-empty {

    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 30px;

    text-align: center;

}


.genyx-coupons-empty-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border-radius: 10px;

    background:
        rgba(23, 107, 234, 0.10);

    border:
        1px solid rgba(23, 107, 234, 0.20);

    color: #4f94ff;

    font-size: 21px;

}


.genyx-coupons-empty h3 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 500;

}


.genyx-coupons-empty p {

    max-width: 420px;

    margin: 0;

    color: #7f8b9e;

    font-size: 14px;

    line-height: 1.5;

}

.genyx-coupons-header {

    padding:
        0 20px;

}





.genyx-coupon-column {

    font-size: 13px;

}

.genyx-coupons-header {

    padding:
        0 20px;

}




.genyx-coupon-column {

    font-size: 13px;

}

/* =========================================================
   AFFILIATE ASSETS
========================================================= */

.genyx-assets-content {

    width: 100%;

}


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

.genyx-assets-header {

    margin-bottom: 28px;

}


.genyx-assets-header h2 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 28px;

    font-weight: 500;

}


.genyx-assets-header p {

    margin: 0;

    color: #9ca7b8;

    font-size: 15px;

}


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

.genyx-frontend-assets-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 20px;

}


/* =========================================================
   ASSET CARD
========================================================= */

.genyx-frontend-asset-card {

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #07101c 0%,
            #040a12 100%
        );

    border:
        1px solid
        rgba(52, 76, 111, 0.42);

    border-radius: 11px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.genyx-frontend-asset-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(37, 108, 255, 0.45);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.20);

}


/* =========================================================
   PREVIEW
========================================================= */

.genyx-frontend-asset-preview {

    width: 100%;

    aspect-ratio: 16 / 10;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        #02070e;

}


.genyx-frontend-asset-preview img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


/* =========================================================
   FILE ICON
========================================================= */

.genyx-frontend-asset-file-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(20, 53, 105, 0.35);

    color: #3b8cff;

    font-size: 34px;

}


/* =========================================================
   INFORMATION
========================================================= */

.genyx-frontend-asset-info {

    padding:
        16px 18px 8px;

}


.genyx-frontend-asset-info h3 {

    margin: 0 0 6px;

    overflow: hidden;

    color: #ffffff;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.4;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.genyx-frontend-asset-info span {

    color: #78869a;

    font-size: 11px;

    text-transform: uppercase;

}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.genyx-frontend-asset-action {

    padding:
        10px 18px 18px;

}


.genyx-asset-download {

    width: 100%;

    min-height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(37, 108, 255, 0.45);

    border-radius: 7px;

    background:
        rgba(7, 54, 125, 0.35);

    color: #ffffff !important;

    font-size: 13px;

    font-weight: 500;

    text-decoration: none !important;

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

}


.genyx-asset-download:hover {

    background:
        rgba(10, 83, 190, 0.55);

    border-color:
        #176bea;

    color: #ffffff !important;

}


.genyx-asset-download i {

    font-size: 15px;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.genyx-assets-empty {

    width: 100%;

    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

    border:
        1px solid
        rgba(52, 76, 111, 0.30);

    border-radius: 11px;

    background:
        rgba(4, 10, 18, 0.60);

}


.genyx-assets-empty-icon {

    margin-bottom: 15px;

    color: #3b8cff;

    font-size: 36px;

}


.genyx-assets-empty h3 {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 500;

}


.genyx-assets-empty p {

    max-width: 450px;

    margin: 0;

    color: #8e99aa;

    font-size: 14px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .genyx-frontend-assets-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


@media (max-width: 650px) {

    .genyx-frontend-assets-grid {

        grid-template-columns:
            1fr;

    }

}
/* =========================================================
   ORDERS SECTION
========================================================= */

.genyx-orders-section {

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* =========================================================
   ORDERS CARD
========================================================= */

.genyx-orders-card {

	scale:1.1;
    width: 98%;

    min-height: 0;

    padding: 38px 34px 24px;

    margin: 0;

    border:
        1px solid rgba(43, 65, 96, 0.42);

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(4, 11, 20, 0.97),
            rgba(2, 7, 13, 0.99)
        );

    box-sizing: border-box;

}


/* =========================================================
   ORDERS HEADER
========================================================= */

.genyx-orders-header {

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 30px;

    margin: 0 0 28px;

}


.genyx-orders-header-content {

    min-width: 0;

}


.genyx-orders-header h2 {

    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-size: 29px !important;

    font-weight: 400 !important;

    line-height: 1.25;

}


.genyx-orders-header p {

    margin: 0 !important;

    color: #8e99aa !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.5;

}


/* =========================================================
   DATE FILTER
========================================================= */

.genyx-orders-filter {

    min-width: 148px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 15px;

    border:
        1px solid rgba(55, 75, 104, 0.50);

    border-radius: 7px;

    background:
        rgba(7, 16, 29, 0.90);

    color: #d8deea;

    font-size: 13px;

    white-space: nowrap;

}


/* =========================================================
   ORDERS TABLE
========================================================= */

.genyx-orders-table {

	scale:1.06;
    width: 100%;

    border:
        1px solid rgba(43, 65, 96, 0.34);

    border-radius: 8px;

    overflow: hidden;

    background:
        rgba(2, 8, 15, 0.60);

    box-sizing: border-box;

}


/* =========================================================
   ORDER ROW
========================================================= */

.genyx-order-row {

    width: 100%;

    min-height: 70px;

    display: grid;

    grid-template-columns:
        1.05fr
        1fr
        0.9fr
        1.1fr
        1.05fr
        1.05fr
        1.05fr;

    align-items: center;

    border-bottom:
        1px solid rgba(255,255,255,0.055);

    box-sizing: border-box;

}


.genyx-order-row:last-child {

    border-bottom: 0;

}


/* =========================================================
   TABLE HEADER
========================================================= */

.genyx-order-row-header {

    min-height: 54px;

    background:
        rgba(8, 17, 30, 0.94);

}


/* =========================================================
   TABLE HEADER TEXT
========================================================= */

.genyx-order-row-header .genyx-order-column {

    color: #8fa0b8;

    font-size: 12px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.25px;

}


/* =========================================================
   TABLE COLUMN
========================================================= */

.genyx-order-column {

    min-width: 0;

    padding:
        17px 18px;

    color: #dce2eb;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.3;

    white-space: nowrap;

    box-sizing: border-box;

}


/* =========================================================
   ORDER NUMBER
========================================================= */

.genyx-order-number {

    color: #f0f3f8;

    font-weight: 500;

}


/* =========================================================
   DATE
========================================================= */

.genyx-order-date {

    color: #d4dae4;

}


/* =========================================================
   COUPON BADGE
========================================================= */

.genyx-coupon-badge {

    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 0 11px;

    border:
        1px solid rgba(0, 110, 255, 0.55);

    border-radius: 5px;

    background:
        rgba(0, 68, 150, 0.16);

    color: #2e8bff;

    font-size: 12px;

    font-weight: 500;

}


/* =========================================================
   ORDER TOTAL
========================================================= */

.genyx-order-total {

    color: #e6ebf3;

    font-weight: 400;

}


/* =========================================================
   COMMISSION
========================================================= */

.genyx-order-commission {

    color: #2e8bff;

    font-weight: 500;

}


/* =========================================================
   ORDERS STATISTICS
========================================================= */

.genyx-orders-statistics {
	
	scale:1.06;

    width: 100%;

    min-height: 92px;

    display: grid;

    grid-template-columns:
        1.8fr
        0.8fr
        0.9fr
        0.9fr;

    align-items: center;

    gap: 35px;

    margin-top: 18px;

    padding:
        17px 22px;

    border:
        1px solid rgba(43, 65, 96, 0.34);

    border-radius: 8px;

    background:
        rgba(5, 13, 23, 0.82);

    box-sizing: border-box;

}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.genyx-order-stat {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
justify-content: center;

    min-width: 0;

}


/* =========================================================
   PRIMARY STAT
========================================================= */

.genyx-order-stat-primary {

    flex-direction: row;

    align-items: center;

    gap: 15px;

}


/* =========================================================
   STAT ICON
========================================================= */

.genyx-order-stat-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid rgba(43, 117, 225, 0.70);

    border-radius: 7px;

    background:
        rgba(4, 24, 49, 0.90);

    color: #dfe8f7;

    font-size: 19px;

}


/* =========================================================
   STAT CONTENT
========================================================= */

.genyx-order-stat-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.genyx-order-stat-content span,
.genyx-order-stat-label {

    color: #7e8b9f;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: 0.2px;

}


.genyx-order-stat-content strong {

    color: #1680ff;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.2;

}


/* =========================================================
   STAT VALUE
========================================================= */

.genyx-order-stat > strong {

    margin-top: 5px;

    color: #e8edf5;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;

}


.genyx-order-stat > strong.genyx-order-stat-blue {

    color: #1680ff;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.genyx-orders-empty {

    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

}


.genyx-orders-empty-icon {

    margin-bottom: 14px;

    color: #3b8cff;

    font-size: 34px;

}


.genyx-orders-empty h3 {

    margin:
        0 0 7px !important;

    color: #ffffff !important;

    font-size: 18px !important;

    font-weight: 500 !important;

}


.genyx-orders-empty p {

    margin: 0 !important;

    color: #7f8b9e !important;

    font-size: 13px !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .genyx-orders-card {

        padding:
            32px 28px 24px;

    }

    .genyx-order-row {

        min-width: 900px;

    }

    .genyx-orders-table {

        overflow-x: auto;

    }

}


@media (max-width: 900px) {

    .genyx-orders-card {

        padding:
            28px 22px 22px;

    }

    .genyx-orders-header h2 {

        font-size: 26px !important;

    }

    .genyx-orders-statistics {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 550px) {

    .genyx-orders-header {

        flex-direction: column;

    }

    .genyx-orders-filter {

        align-self: flex-start;

    }

    .genyx-orders-statistics {

        grid-template-columns:
            1fr;

    }
}

/* =========================================================
   GENYX DASHBOARD HOME
   DESKTOP TARGET DESIGN
========================================================= */


/* =========================================================
   MAIN DASHBOARD WIDTH
========================================================= */

.genyx-dashboard-home {

    width: 100%;

    max-width: 1100px;

    margin:
        -20px
        auto
        0;

}


/* =========================================================
   SHARED PANEL
========================================================= */

.genyx-home-earnings-card,
.genyx-home-stat-card,
.genyx-home-panel,
.genyx-home-position-card {

    border:
        1px solid rgba(43, 65, 96, 0.42);

    background:
        linear-gradient(
            180deg,
            rgba(5, 12, 22, 0.96),
            rgba(2, 7, 14, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.015);

}


/* =========================================================
   TOTAL EARNINGS
========================================================= */

.genyx-home-earnings-card {

    width: 100%;

    min-height: 185px;

    position: relative;

    padding:
        26px 26px;

    border-radius: 12px;

    overflow: hidden;

}


/* =========================================================
   EARNINGS CONTENT
========================================================= */

.genyx-home-earnings-content {

    position: relative;

    z-index: 2;

}


.genyx-home-label {

    display: block;

    margin-bottom: 13px;

    color: #a4afc0;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.2px;

}


.genyx-home-earnings-value {

    color: #ffffff;

    font-size: 54px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -1.5px;

}


.genyx-home-earnings-growth {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 11px;

}


.genyx-home-earnings-growth span {

    color: #22d75a;

    font-size: 16px;

    font-weight: 500;

}


.genyx-home-earnings-growth small {

    color: #b4bdca;

    font-size: 14px;

}
/* =========================================================
   PERIOD SELECTOR
========================================================= */

.genyx-home-period {

    position: absolute;

    top: 19px;
    right: 20px;

    z-index: 5;

    width: 252px;
    height: 49px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    border:
        1px solid rgba(43, 65, 96, 0.65);

    border-radius: 8px;

    background:
        rgba(5, 14, 26, 0.95);

    overflow: hidden;

}


/* =========================================================
   SELECT
========================================================= */

.genyx-home-period select#genyx-period-selector {

    width: 100%;
    height: 100%;

    min-width: 0;

    margin: 0;
    padding: 0 48px 0 16px;

    box-sizing: border-box;

    border: 0 !important;
    outline: none !important;

    border-radius: 8px;

    background:
        transparent !important;

    color: #ffffff !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

}


/* =========================================================
   SELECT HOVER
========================================================= */

.genyx-home-period select#genyx-period-selector:hover {

    background:
        rgba(10, 28, 50, 0.55) !important;

}


/* =========================================================
   SELECT FOCUS
========================================================= */

.genyx-home-period select#genyx-period-selector:focus {

    outline: none !important;

    border: 0 !important;

    box-shadow: none !important;

}


/* =========================================================
   SELECT OPTIONS
========================================================= */

.genyx-home-period select#genyx-period-selector option {

    background: #07111f;

    color: #ffffff;

    padding: 10px;

}


/* =========================================================
   CUSTOM CHEVRON
========================================================= */

.genyx-home-period i {

    position: absolute;

    top: 50%;
    right: 17px;

    transform:
        translateY(-50%);

    margin: 0;

    pointer-events: none;

    color: #8fa0b8;

    font-size: 12px;

    line-height: 1;

}


/* =========================================================
   HOVER CHEVRON
========================================================= */

.genyx-home-period:hover i {

    color: #ffffff;

}

/* =========================================================
   EARNINGS LINE CHART
========================================================= */

.genyx-home-line-chart {

    position: absolute;

    right: 22px;

    bottom: 20px;

    width: 51%;

    height: 92px;

    pointer-events: none;

}


.genyx-home-line-chart svg {

    width: 100%;

    height: 100%;

    display: block;

    overflow: visible;

}


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

.genyx-home-stat-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    margin-top: 17px;

}


/* =========================================================
   STAT CARD
========================================================= */

.genyx-home-stat-card {

    min-height: 176px;

    padding:
        22px 22px;

    border-radius: 10px;

    position: relative;

}


.genyx-home-stat-icon {

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border:
        1px solid rgba(0, 103, 255, 0.55);

    border-radius: 7px;

    background:
        rgba(0, 57, 145, 0.25);

    color: #1680ff;

    font-size: 19px;

}


.genyx-home-stat-label {

    color: #aeb7c5;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2;

}


.genyx-home-stat-value {

    margin-top: 25px;

    color: #ffffff;

    font-size: 38px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.8px;

}


.genyx-home-stat-subtitle {

    margin-top: 7px;

    color: #a5afbd;

    font-size: 14px;

}


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

.genyx-home-lower-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        0.75fr
        1fr;

    gap: 17px;

    margin-top: 29px;

}


/* =========================================================
   LOWER PANELS
========================================================= */

.genyx-home-panel {

    min-height: 254px;

    padding:
        25px 27px;

    border-radius: 11px;

}


.genyx-home-panel h2 {

    margin:
        0
        0
        24px !important;

    color: #ffffff !important;

    font-size: 15px !important;

    font-weight: 500 !important;

    line-height: 1.2;

}


/* =========================================================
   TRAFFIC
========================================================= */

.genyx-home-traffic-content {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 39px;

}


/* =========================================================
   DONUT
========================================================= */

.genyx-home-donut {

    width: 166px;

    height: 166px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--genyx-donut-gradient)
        );

}


.genyx-home-donut-inner {

    width: 101px;

    height: 101px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    border-radius: 50%;

    background:
        #06101d;

}


.genyx-home-donut-inner strong {

    color: #ffffff;

    font-size: 21px;

    font-weight: 400;

    line-height: 1.1;

}


.genyx-home-donut-inner span {

    margin-top: 5px;

    color: #8d99aa;

    font-size: 8px;

    letter-spacing: 0.2px;

}


/* =========================================================
   TRAFFIC LEGEND
========================================================= */

.genyx-home-traffic-legend {

    min-width: 170px;

    display: flex;

    flex-direction: column;

    gap: 19px;

}


.genyx-home-legend-item {

    display: grid;

    grid-template-columns:
        10px
        1fr
        auto;

    align-items: center;

    column-gap: 9px;

    color: #d7dde7;

    font-size: 12px;

}


.genyx-home-legend-item strong {

    color: #dce3ed;

    font-weight: 400;

}

/* =========================================================
   DYNAMIC CAMPAIGN LEGEND
========================================================= */

.genyx-home-legend-dot {

    width: 8px;

    height: 8px;

    display: block;

    flex-shrink: 0;

    background:
        var(--genyx-legend-color);

}


.genyx-home-legend-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #d7dde7;

}


.genyx-home-traffic-empty {

    color: #7f8b9e;

    font-size: 12px;

}

.genyx-home-legend-dot {

    width: 8px;

    height: 8px;

    display: block;

}

/* =========================================================
   PAYOUT
========================================================= */

.genyx-home-payout-content {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.genyx-home-payout-information {

    display: flex;

    flex-direction: column;

}


.genyx-home-payout-label {

    color: #a5afbd;

    font-size: 14px;

    line-height: 1.2;

}


.genyx-home-payout-amount {

    margin:
        10px
        0
        18px;

    color: #ffffff;

    font-size: 39px;

    font-weight: 400;

    line-height: 1;

}


.genyx-home-payout-date {

    margin-top: 6px;

    color: #dce2ea;

    font-size: 16px;

}


.genyx-home-payout-icon {

    width: 104px;

    height: 104px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 8px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 91, 255, 0.45),
            rgba(0, 55, 145, 0.38)
        );

    color: #ffffff;

    font-size: 42px;

}


.genyx-home-payout-status {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 19px;

    padding-top: 13px;

    border-top:
        1px solid rgba(255,255,255,0.07);

    color: #21e65a;

    font-size: 14px;

}


.genyx-home-payout-status i {

    font-size: 21px;

}


/* =========================================================
   POSITION CARD
========================================================= */

.genyx-home-position-card {

    width: 100%;

    min-height: 130px;

    display: grid;

    grid-template-columns:
        170px
        1fr
        240px
        30px;

    align-items: center;

    gap: 25px;

    margin-top: 17px;

    padding:
        22px 27px;

    border-radius: 11px;

}


/* =========================================================
   POSITION
========================================================= */

.genyx-home-position {

    display: flex;

    flex-direction: column;

}


.genyx-home-position-label {

    margin-bottom: 5px;

    color: #1680ff;

    font-size: 14px;

    font-weight: 500;

}


.genyx-home-position strong {

    color: #1680ff;

    font-size: 42px;

    font-weight: 400;

    line-height: 1;

}


/* =========================================================
   PARTNER
========================================================= */

.genyx-home-partner {

    display: flex;

    align-items: center;

    gap: 15px;

}


.genyx-home-partner-avatar {

    width: 62px;

    height: 62px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 50%;

    background: #d9d9d9;

}


.genyx-home-partner-avatar img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.genyx-home-partner-information {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.genyx-home-partner-information strong {

    color: #ffffff;

    font-size: 21px;

    font-weight: 400;

}


.genyx-home-partner-information span {

    color: #1680ff;

    font-size: 14px;

}


/* =========================================================
   TOTAL EARNINGS
========================================================= */

.genyx-home-total {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.genyx-home-total span {

    color: #a4adbc;

    font-size: 14px;

}


.genyx-home-total strong {

    color: #ffffff;

    font-size: 31px;

    font-weight: 400;

    line-height: 1;

}


.genyx-home-position-arrow {

    color: #ffffff;

    font-size: 25px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .genyx-dashboard-home {

        max-width: 100%;

    }

}


@media (max-width: 900px) {

    .genyx-home-stat-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .genyx-home-lower-grid {

        grid-template-columns:
            1fr;

    }


    .genyx-home-position-card {

        grid-template-columns:
            1fr
            1fr;

    }


    .genyx-home-total {

        grid-column: 1 / -1;

    }


    .genyx-home-position-arrow {

        display: none;

    }

}


@media (max-width: 650px) {

    .genyx-dashboard-home {

        margin-top: 0;

    }


    .genyx-home-earnings-card {

        min-height: 280px;

    }


    .genyx-home-earnings-value {

        font-size: 44px;

    }


    .genyx-home-line-chart {

        width: 90%;

        height: 75px;

        right: 5%;

        bottom: 15px;

    }


    .genyx-home-stat-grid {

        grid-template-columns:
            1fr;

    }


    .genyx-home-traffic-content {

        flex-direction: column;

        gap: 25px;

    }


    .genyx-home-position-card {

        grid-template-columns:
            1fr;

    }


    .genyx-home-total {

        grid-column: auto;

    }

}

/* =========================================================
   SIDEBAR NAVIGATION CLICK FIX
========================================================= */

.genyx-dashboard-sidebar {
    position: relative;
    z-index: 100;
}

.genyx-sidebar-nav {
    position: relative;
    z-index: 101;
}

.genyx-sidebar-item {
    position: relative;
    z-index: 102;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =========================================================
   AFFILIATE COUPON LINK
========================================================= */

.genyx-coupon-link-wrapper {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   USE LINK
========================================================= */

.genyx-coupon-link-url {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding: 0 10px;

    border:
        1px solid rgba(0, 110, 255, 0.55);

    border-radius: 5px;

    background:
        rgba(0, 68, 150, 0.16);

    color: #2e8bff !important;

    font-size: 11px;

    font-weight: 500;

    text-decoration: none !important;

}


.genyx-coupon-link-url:hover {

    background:
        rgba(0, 110, 255, 0.20);

    color: #ffffff !important;

}


/* =========================================================
   COPY BUTTON
========================================================= */

.genyx-copy-coupon-link {

    width: 72px;

    height: 42px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(255, 0, 90, 0.75);

    border-radius: 6px;

    background:
        rgba(8, 16, 29, 0.95);

    color:
        #ff1768;

    font-size: 20px;

    cursor: pointer;

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

}


.genyx-copy-coupon-link:hover {

    background:
        rgba(255, 0, 90, 0.08);

    color:
        #ffffff;

}

.genyx-copy-coupon-link:hover {

    background:
        rgba(23, 104, 223, 0.15);

    color: #2e8bff;

}

/* =========================================================
   LINKS COLUMN
========================================================= */

.genyx-coupon-links {

    min-width: 0;

}


.genyx-coupon-link-wrapper {

    display: flex;

    align-items: center;

    gap: 14px;

}

/* =========================================================
   MISSING LINK
========================================================= */

.genyx-coupon-link-missing {

    color: #687487;

}


.genyx-coupon-link-url {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 124px;

    height: 42px;

    padding: 0 18px;

    border:
        1px solid rgba(0, 110, 255, 0.65);

    border-radius: 6px;

    background:
        rgba(0, 68, 150, 0.12);

    color: #1685ff !important;

    font-size: 14px;

    font-weight: 400;

    text-decoration: none !important;

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

}


.genyx-coupon-link-url:hover {

    background:
        rgba(0, 110, 255, 0.20);

    border-color:
        #1685ff;

    color:
        #ffffff !important;

}


/* =========================================================
   COUPON LINK LABEL
========================================================= */

.genyx-coupon-link-label {

    margin-top: 24px;

    margin-bottom: 10px;

    color: #8fa0b8;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-align: center;

}


/* =========================================================
   COUPON LINK BOX
========================================================= */

.genyx-coupon-link-box {

    width: 100%;

    min-height: 60px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 0 10px 0 20px;

    border:
        1px solid rgba(0, 110, 255, 0.55);

    border-radius: 10px;

    background:
        rgba(4, 14, 27, 0.85);

    box-sizing: border-box;

}


/* =========================================================
   LINK TEXT
========================================================= */

.genyx-created-coupon-link {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #dce5f2;

    font-size: 13px;

}


/* =========================================================
   LINK COPY BUTTON
========================================================= */

.genyx-copy-coupon-link-modal {

    width: 62px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255, 0, 90, 0.75);

    border-radius: 6px;

    background:
        rgba(8, 16, 29, 0.95);

    color: #ff1768;

    font-size: 20px;

    cursor: pointer;

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

}


.genyx-copy-coupon-link-modal:hover {

    background:
        rgba(255, 0, 90, 0.08);

    color: #ffffff;

}


/* =========================================================
   COPY SUCCESS
========================================================= */

.genyx-link-copy-success {

    display: none;

    margin: 8px 0 0;

    color: #20d98b;

    font-size: 12px;

    text-align: center;

}

/* =========================================================
   AFFILIATE URL
========================================================= */





.genyx-coupon-links {

    min-width: 0;

    overflow: visible;

}


.genyx-coupon-link-wrapper {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;

}


.genyx-coupon-link-url {

    flex: 0 0 124px;

    min-width: 124px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    border:
        1px solid rgba(0, 110, 255, 0.65);

    border-radius: 6px;

    background:
        rgba(0, 68, 150, 0.12);

    color: #1685ff !important;

    font-size: 14px;

    font-weight: 400;

    text-decoration: none !important;

    box-sizing: border-box;

}





/* =========================================================
   CAMPAIGN NAME
========================================================= */

.genyx-campaign-field {

    width: 100%;

    max-width: 360px;

    margin:
        20px auto 12px;

}


/* =========================================================
   CAMPAIGN INPUT
========================================================= */

.genyx-campaign-name-input {

    width: 100%;

    min-height: 44px;

    padding:
        10px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    background:
        #080e18;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        15px;

    outline:
        none;

    box-sizing:
        border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.genyx-campaign-name-input::placeholder {

    color:
        #687487;

}


.genyx-campaign-name-input:focus {

    border-color:
        #1768df;

    box-shadow:
        0 0 0 2px rgba(23, 104, 223, 0.12);

}


/* =========================================================
   CAMPAIGN ERROR
========================================================= */

.genyx-campaign-error {

    min-height:
        22px;

    margin:
        0 0 10px;

    color:
        #ff4b59;

    font-size:
        14px;

    text-align:
        center;

}
/* =========================================================
   CAMPAIGN COLUMN
========================================================= */

.genyx-coupon-campaign {

    min-width: 0;

    overflow: hidden;

}


.genyx-campaign-name {

    display: block;

    width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #dce2eb;

    font-size: 14px;

    font-weight: 400;

}

/*
|--------------------------------------------------------------------------
| FULL ANALYTICS LINK
|--------------------------------------------------------------------------
*/

.genyx-home-full-analytics {

    display: inline-block;

    margin-top: 8px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #1678ff;

    font-size: 14px;

    line-height: 1.4;

    text-decoration: underline;

    cursor: pointer;

    font-family: inherit;

}


.genyx-home-full-analytics:hover {

    color: #4b9aff;

}


/*
|--------------------------------------------------------------------------
| TRAFFIC ANALYTICS MODAL
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

}


.genyx-traffic-analytics-modal.is-open {

    display: flex;

    align-items: center;

    justify-content: center;

}


/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

}


/*
|--------------------------------------------------------------------------
| DIALOG
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-dialog {

    position: relative;

    z-index: 2;

    width: min(
        760px,
        calc(100vw - 40px)
    );

    max-height: calc(
        100vh - 60px
    );

    overflow-y: auto;
overflow-x: hidden;

    background: #030b15;

    border: 1px solid #1a2b40;

    border-radius: 16px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.55);

}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px 28px;

    border-bottom: 1px solid #172538;

}


.genyx-traffic-analytics-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 500;

}


.genyx-traffic-analytics-header span {

    display: block;

    margin-top: 5px;

    color: #70839d;

    font-size: 13px;

}


/*
|--------------------------------------------------------------------------
| CLOSE BUTTON
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-close {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #25384f;

    border-radius: 8px;

    background: #07111e;

    color: #ffffff;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

}


.genyx-traffic-analytics-close:hover {

    background: #101d2d;

}


/*
|--------------------------------------------------------------------------
| TOTAL
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-total {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 20px 28px;

    padding: 18px 20px;

    background: #07111e;

    border: 1px solid #172538;

    border-radius: 10px;

}


.genyx-traffic-analytics-total span {

    color: #70839d;

    font-size: 12px;

    letter-spacing: 0.5px;

}


.genyx-traffic-analytics-total strong {

    color: #ffffff;

    font-size: 24px;

    font-weight: 500;

}


/*
|--------------------------------------------------------------------------
| CAMPAIGN LIST
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-list {

    max-height: 480px;

    overflow-y: auto;

    padding: 0 28px 28px;

}


/*
|--------------------------------------------------------------------------
| CAMPAIGN ROW
|--------------------------------------------------------------------------
*/

.genyx-traffic-analytics-row {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        70px;

    align-items: center;

    gap: 20px;

    min-height: 58px;

    border-bottom: 1px solid #101d2d;

}


.genyx-traffic-analytics-campaign {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-size: 14px;

}


.genyx-traffic-analytics-campaign > span:last-child {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.genyx-traffic-analytics-clicks {

    color: #70839d;

    font-size: 13px;

}


.genyx-traffic-analytics-percentage {

    color: #ffffff;

    font-size: 14px;

    font-weight: 400;

    text-align: right;

}


/*
|--------------------------------------------------------------------------
| PREVENT BACKGROUND SCROLL
|--------------------------------------------------------------------------
*/

body.genyx-traffic-modal-open {

    overflow: hidden;

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .genyx-traffic-analytics-dialog {

        width: calc(100vw - 24px);

        max-height: calc(100vh - 24px);

        border-radius: 12px;

    }


    .genyx-traffic-analytics-header {

        padding: 20px;

    }


    .genyx-traffic-analytics-total {

        margin: 16px 20px;

    }


    .genyx-traffic-analytics-list {

        padding: 0 20px 20px;

    }


    .genyx-traffic-analytics-row {

        grid-template-columns:
            minmax(0, 1fr)
            55px;

        gap: 10px;

        padding: 12px 0;

    }


    .genyx-traffic-analytics-clicks {

        display: none;

    }


    .genyx-traffic-analytics-percentage {

        grid-column: 2;

        grid-row: 1;

    }

}

/* =========================================================
   TRAFFIC ANALYTICS MODAL CHART
========================================================= */

.genyx-traffic-modal-chart {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 28px 0 34px;
}


/* Larger version of the dashboard donut */

.genyx-traffic-modal .genyx-modal-donut {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
}


/* Inner circle */

.genyx-traffic-modal .genyx-modal-donut .genyx-home-donut-inner {
    width: 132px;
    height: 132px;
}


/* Number */

.genyx-traffic-modal .genyx-modal-donut strong {
    font-size: 28px;
}


/* TOTAL CLICKS */

.genyx-traffic-modal .genyx-modal-donut span {
    font-size: 10px;
}

/* =========================================================
   TRAFFIC ANALYTICS MODAL - SCROLLABLE
========================================================= */

.genyx-traffic-analytics-dialog {

    max-height: calc(100vh - 60px);

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: #263449 transparent;
}


/* Chrome / Edge / Safari scrollbar */

.genyx-traffic-analytics-dialog::-webkit-scrollbar {

    width: 6px;

}


.genyx-traffic-analytics-dialog::-webkit-scrollbar-track {

    background: transparent;

}


.genyx-traffic-analytics-dialog::-webkit-scrollbar-thumb {

    background: #263449;

    border-radius: 10px;

}


.genyx-traffic-analytics-dialog::-webkit-scrollbar-thumb:hover {

    background: #34445d;

}

/* =========================================================
   PAYOUTS TAB
========================================================= */

.genyx-payouts {
	
	scale:1.06;

    width: 100%;

    box-sizing: border-box;

}


/* =========================================================
   PAYOUT SUMMARY
========================================================= */

.genyx-payout-summary {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.05fr;

    min-height: 132px;

    margin-bottom: 10px;

    padding: 20px;

    border:
        1px solid rgba(35, 57, 86, 0.55);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #07101b 0%,
            #020913 100%
        );

    box-sizing: border-box;

}


.genyx-payout-summary-item {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        0 22px;

    border-right:
        1px solid rgba(255,255,255,0.06);

}


.genyx-payout-label {

    display: block;

    margin-bottom: 9px;

    color: #b0bac8;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.2px;

}


.genyx-payout-main-value {

    display: block;

    color: #ffffff;

    font-size: 31px;

    font-weight: 400;

    line-height: 1.1;

}


.genyx-payout-growth {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-top: 9px;

    color: #20d982;

    font-size: 11px;

}


.genyx-payout-growth span {

    color: #9ba6b5;

}


.genyx-payout-ready {

    margin-top: 9px;

    color: #20d982;

    font-size: 11px;

}


/* =========================================================
   PAYOUT ACTIONS
========================================================= */

.genyx-payout-actions {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        0 0 0 22px;

}


.genyx-payout-actions .genyx-payout-label {

    margin-bottom: 7px;

}


.genyx-payout-actions button {

    width: 180px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 7px;

    border-radius: 5px;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

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

}


.genyx-payout-action-primary {

    border:
        1px solid #0863e7;

    background:
        linear-gradient(
            180deg,
            #075de0,
            #064cc0
        );

    color: #ffffff;

	
}


.genyx-payout-action-primary:hover {

    background:
        linear-gradient(
            180deg,
            #0869f5,
            #0756d2
        );

}
/* =========================================================
   PAYOUT BUTTON — DISABLED
========================================================= */

.genyx-payout-action-primary.genyx-payout-action-disabled,
.genyx-payout-action-primary.genyx-payout-action-disabled:hover {

    background:
        rgba(60, 72, 90, 0.35) !important;

    border:
        1px solid rgba(100, 115, 135, 0.30) !important;

    color:
        rgba(180, 190, 205, 0.45) !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    cursor:
        not-allowed !important;

    opacity:
        0.65;
	
	max-width:255px!important;

}

/* =========================================================
   PAYOUT LIMIT MESSAGE
========================================================= */

.genyx-payout-limit-message {

    display: block;

    max-width: 230px;

    margin:
        2px 0 8px;

    color:
        #8e99aa;

    font-size:
        10px;

    line-height:
        1.45;

}

/* =========================================================
   PAYOUT NOT READY
========================================================= */

.genyx-payout-not-ready {

    display: block;

    margin-top:
        9px;

    color:
        #8e99aa;

    font-size:
        11px;

}

.genyx-payout-action-secondary {

    border:
        1px solid rgba(44, 65, 94, 0.65) !important;

    background:
        rgba(4, 11, 20, 0.8)!important;

    color: #e0e6ee!important;

	max-width: 255px !important;
}


.genyx-payout-action-secondary:hover {

    background:
        rgba(15, 27, 43, 0.9)!important;

}


/* =========================================================
   PAYOUT STAT GRID
========================================================= */

.genyx-payout-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 8px;

    margin-bottom: 10px;

}


.genyx-payout-stat-card {

    min-height: 108px;

    padding:
        13px;

    border:
        1px solid rgba(35, 57, 86, 0.5);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #07101b 0%,
            #030a13 100%
        );

    box-sizing: border-box;

}


.genyx-payout-stat-icon {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    border:
        1px solid rgba(0, 112, 255, 0.4);

    border-radius: 5px;

    background:
        rgba(0, 82, 190, 0.12);

    color: #1580ff;

    font-size: 13px;

}


.genyx-payout-stat-label {

    display: block;

    margin-bottom: 7px;

    color: #b0bac8;

    font-size: 9px;

    font-weight: 500;

}


.genyx-payout-stat-value {

    display: block;

    color: #ffffff;

    font-size: 23px;

    font-weight: 400;

    line-height: 1.15;

}


.genyx-payout-stat-subtext {

    display: block;

    margin-top: 5px;

    color: #9aa5b5;

    font-size: 9px;

}


.genyx-payout-stat-positive {

    display: block;

    margin-top: 5px;

    color: #20d982;

    font-size: 9px;

}


.genyx-payout-next-date {

    font-size: 17px;

    white-space: nowrap;

}


/* =========================================================
   PAYOUT HISTORY
========================================================= */

.genyx-payout-history {

    width: 100%;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid rgba(35, 57, 86, 0.65);

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #07101b 0%,
            #030a13 100%
        );

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18);

}


/* =========================================================
   HISTORY HEADER
========================================================= */

.genyx-payout-history-header {

    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 20px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

}


.genyx-payout-history-header h2 {

    margin: 0;

    color: #ffffff;

    font-size: 14px !important;

    line-height: 1.3;

    font-weight: 500;

    letter-spacing: 0.2px;

}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.genyx-payout-view-all {

    width: 92px !important;

    min-width: 92px !important;

    height: 38px !important;

    min-height: 38px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid #ff1764 !important;

    border-radius: 5px !important;

    outline: none !important;

    background:
        rgba(5, 14, 26, 0.85) !important;

    color: #ff1764 !important;

    font-family: inherit !important;

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    cursor: pointer;

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

}


.genyx-payout-view-all:hover {

    background:
        rgba(255, 23, 100, 0.08) !important;

    border-color:
        #ff2f78 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 14px rgba(255, 23, 100, 0.18);

    transform:
        translateY(-1px);

}


/* =========================================================
   TABLE HEADER + ROW
========================================================= */

.genyx-payout-history-head,
.genyx-payout-history-row {

    display: grid;

    grid-template-columns:
        1fr
        1.1fr
        1fr
        1.35fr
        1fr
        1.4fr
        0.65fr;

    align-items: center;

    column-gap: 16px;

    padding:
        0 20px;

    box-sizing: border-box;

}


/* =========================================================
   TABLE HEADER
========================================================= */

.genyx-payout-history-head {

    min-height: 40px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    color:
        #8292a8;

    font-size: 10px !important;

    font-weight: 500;

    letter-spacing: 0.35px;

    text-transform: uppercase;

}


/* =========================================================
   TABLE ROW
========================================================= */

.genyx-payout-history-row {

    min-height: 52px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

    color:
        #b8c3d2;

    font-size: 12px !important;

    line-height: 1.4;

    transition:
        background 0.2s ease;

}


.genyx-payout-history-row:hover {

    background:
        rgba(15, 82, 155, 0.055);

}


.genyx-payout-history-row:last-of-type {

    border-bottom: 0;

}


.genyx-payout-history-row > span {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================================
   PAYOUT ID
========================================================= */

.genyx-payout-history-row > span:first-child {

    color:
        #aebbd0;

}


/* =========================================================
   AMOUNT
========================================================= */

.genyx-payout-amount {

    color:
        #ffffff !important;

    font-size: 13px !important;

    font-weight: 500;

}


/* =========================================================
   PAYOUT METHOD
========================================================= */

.genyx-payout-method {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        #c0cad8;

}


.genyx-payout-method i {

    flex-shrink: 0;

    color:
        #1590ff;

    font-size: 16px !important;

}


.genyx-payout-method .bi-bank {

    color:
        #b7c1d0;

}


/* =========================================================
   STATUS
========================================================= */

.genyx-payout-status {

    width: fit-content;

    min-width: 55px;

    min-height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding:
        0 11px;

    border:
        1px solid rgba(19, 190, 106, 0.35);

    border-radius: 5px;

    background:
        rgba(12, 170, 91, 0.10);

    color:
        #20d982;

    font-size: 11px !important;

    font-weight: 500;

    line-height: 1;

}


/* =========================================================
   VIEW / EYE BUTTON
========================================================= */

.genyx-payout-view-button {

    width: 64px !important;

    min-width: 64px !important;

    height: 34px !important;

    min-height: 34px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid #ff1764 !important;

    border-radius: 5px !important;

    outline: none !important;

    background:
        rgba(5, 14, 26, 0.85) !important;

    color:
        #ff1764 !important;

    font-family: inherit !important;

    cursor: pointer;

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

}


.genyx-payout-view-button i {

    margin: 0 !important;

    font-size: 17px !important;

    line-height: 1 !important;

}


.genyx-payout-view-button:hover {

    border-color:
        #ff3b82 !important;

    background:
        rgba(255, 23, 100, 0.08) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 14px rgba(255, 23, 100, 0.18);

    transform:
        translateY(-1px);

}


.genyx-payout-view-button:active {

    transform:
        translateY(0);

}


/* =========================================================
   HISTORY FOOTER
========================================================= */

.genyx-payout-history-footer {

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 20px;

    box-sizing: border-box;

    border-top:
        1px solid rgba(255, 255, 255, 0.055);

    color:
        #8f9daf;

    font-size: 11px !important;

}


/* =========================================================
   PAGINATION
========================================================= */

.genyx-payout-pagination {

    display: flex;

    align-items: center;

    gap: 6px;

}


.genyx-payout-pagination button {

    width: 32px !important;

    min-width: 32px !important;

    height: 32px !important;

    min-height: 32px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border:
        1px solid rgba(44, 65, 94, 0.65) !important;

    border-radius: 5px !important;

    background:
        rgba(8, 17, 29, 0.8) !important;

    color:
        #8d99aa !important;

    font-family: inherit !important;

    font-size: 11px !important;

    line-height: 1 !important;

    cursor: pointer;

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

}


.genyx-payout-pagination button:hover:not(:disabled) {

    border-color:
        #1768df !important;

    background:
        rgba(7, 75, 170, 0.12) !important;

    color:
        #ffffff !important;

}


.genyx-payout-pagination button.active {

    border-color:
        #075fe0 !important;

    background:
        #075fe0 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 12px rgba(7, 95, 224, 0.22);

}


.genyx-payout-pagination button:disabled {

    opacity:
        0.45;

    cursor:
        default;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .genyx-payout-summary {

        grid-template-columns:
            1fr
            1fr;

        gap: 20px;

    }


    .genyx-payout-actions {

        grid-column: 1 / -1;

        padding:
            15px 22px 0;

        border-top:
            1px solid rgba(255,255,255,0.06);

    }


    .genyx-payout-stat-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }


    .genyx-payout-history-head,
    .genyx-payout-history-row {

        column-gap: 12px;

        padding-left: 16px;

        padding-right: 16px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    .genyx-payout-summary {

        grid-template-columns:
            1fr;

    }


    .genyx-payout-summary-item {

        padding:
            10px 0;

        border-right: 0;

    }


    .genyx-payout-actions {

        grid-column: auto;

        padding:
            15px 0 0;

    }


    .genyx-payout-stat-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .genyx-payout-history {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }


    .genyx-payout-history-head,
    .genyx-payout-history-row {

        min-width: 850px;

    }


    .genyx-payout-history-header {

        min-height: 50px;

        padding:
            0 15px;

    }


    .genyx-payout-history-header h2 {

        font-size: 13px !important;

    }


    .genyx-payout-view-all {

        width: 82px !important;

        min-width: 82px !important;

        height: 34px !important;

        min-height: 34px !important;

        font-size: 12px !important;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .genyx-payout-stat-grid {

        grid-template-columns:
            1fr;

    }


    .genyx-payout-history-footer {

        padding:
            0 15px;

    }

}

/*
|--------------------------------------------------------------------------
| Payout Button - Disabled
|--------------------------------------------------------------------------
*/

.genyx-request-payout.genyx-payout-disabled {

    opacity: 0.45;

    cursor: not-allowed;

    filter: grayscale(0.5);

    pointer-events: none;

}


/*
|--------------------------------------------------------------------------
| Prevent Hover Effects On Disabled Button
|--------------------------------------------------------------------------
*/

.genyx-request-payout.genyx-payout-disabled:hover {

    opacity: 0.45;

    transform: none;

}


/*
|--------------------------------------------------------------------------
| Payout Status
|--------------------------------------------------------------------------
*/

.genyx-payout-status {

    margin-top: 10px;

    font-size: 13px;

    line-height: 1.5;

}


/*
|--------------------------------------------------------------------------
| Ready
|--------------------------------------------------------------------------
*/

.genyx-payout-ready {

    color: #00e58a;

}


/*
|--------------------------------------------------------------------------
| Not Ready
|--------------------------------------------------------------------------
*/

.genyx-payout-not-ready {

    color: #8b9bb4;

}


.genyx-payout-not-ready strong {

    color: #ffffff;

}


/* ---------------------------------------------------------
   PAYOUT ACTION CONTAINER
--------------------------------------------------------- */

.genyx-payout-actions {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding-left: 22px;

}


/* ---------------------------------------------------------
   ACTION LABEL
--------------------------------------------------------- */

.genyx-payout-actions > .genyx-payout-label {

    margin-bottom: 9px;

    color: #9fb2ca;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.35px;

    text-transform: uppercase;

}


/* ---------------------------------------------------------
   ALL PAYOUT BUTTONS
--------------------------------------------------------- */

.genyx-payout-actions > button {

    position: relative;

    width: 100%;

    max-width: 255px;

    min-height: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin: 0 0 9px;

    padding: 0 18px;

    box-sizing: border-box;

    border-radius: 7px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.05px;

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

}


/* =========================================================
   REQUEST PAYOUT — ACTIVE
========================================================= */

.genyx-payout-action-primary:not(:disabled) {

    border: 1px solid #147cff !important;

    background:
        linear-gradient(
            135deg,
            #0755d9 0%,
            #126df5 50%,
            #0755d9 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(0, 102, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

}


/* Active hover */

.genyx-payout-action-primary:not(:disabled):hover {

    border-color: #3291ff !important;

    background:
        linear-gradient(
            135deg,
            #0864ed 0%,
            #1680ff 50%,
            #0864ed 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 18px rgba(0, 119, 255, 0.30),
        0 0 35px rgba(0, 89, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    transform: translateY(-1px);

}


/* =========================================================
   REQUEST PAYOUT — DISABLED
========================================================= */

.genyx-payout-action-primary.genyx-payout-action-disabled,
.genyx-payout-action-primary.genyx-payout-action-disabled:hover,
.genyx-payout-action-primary:disabled {

    background:
        linear-gradient(
            135deg,
            #101a28 0%,
            #172334 100%
        ) !important;

    border:
        1px solid #2a3a50 !important;

    color:
        #56677d !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

    opacity: 1 !important;

    cursor:
        not-allowed !important;

    transform:
        none !important;

}


/* Disabled icon */

.genyx-payout-action-primary.genyx-payout-action-disabled i,
.genyx-payout-action-primary:disabled i {

    color: #53657b !important;

}


/* =========================================================
   PAYOUT STATUS MESSAGE
========================================================= */

.genyx-payout-actions .genyx-payout-status {

    width: 100%;

    max-width: 255px;

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    margin:
        0 0 9px;

    padding:
        7px 12px;

    border-radius: 6px;

    font-size: 12px;

    line-height: 1.4;

    text-align: center;

}


/* =========================================================
   NOT READY MESSAGE
========================================================= */

.genyx-payout-actions
.genyx-payout-status.genyx-payout-not-ready {

    position: relative;

    border:
        1px solid rgba(0, 180, 255, 0.32);

    background:
        linear-gradient(
            135deg,
            rgba(0, 112, 180, 0.13),
            rgba(0, 55, 105, 0.10)
        );

    color:
        #9db2c9 !important;

    box-shadow:
        inset 0 0 18px rgba(0, 120, 255, 0.035),
        0 0 10px rgba(0, 100, 255, 0.035);

}


/* Blue accent line */

.genyx-payout-actions
.genyx-payout-status.genyx-payout-not-ready::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 2px;

    border-radius:
        6px 0 0 6px;

    background:
        linear-gradient(
            to bottom,
            #1680ff,
            #00c8ff
        );

    box-shadow:
        0 0 8px rgba(0, 150, 255, 0.45);

}


/* Amount inside message */

.genyx-payout-actions
.genyx-payout-status.genyx-payout-not-ready strong {

    margin-left: 4px;

    margin-right: 4px;

    color:
        #ffffff !important;

    font-weight:
        600;

    text-shadow:
        0 0 8px rgba(0, 140, 255, 0.30);

}


/* =========================================================
   READY MESSAGE
========================================================= */

.genyx-payout-actions
.genyx-payout-status.genyx-payout-ready {

    border:
        1px solid rgba(0, 220, 160, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(0, 180, 130, 0.12),
            rgba(0, 100, 90, 0.08)
        );

    color:
        #00e6a0 !important;

    box-shadow:
        inset 0 0 15px rgba(0, 220, 160, 0.025);

}


/* =========================================================
   PAYOUT SETTINGS
========================================================= */

.genyx-payout-actions
.genyx-payout-action-secondary {

    border:
        1px solid #ff1764 !important;

    background:
        rgba(4, 11, 20, 0.72) !important;

    color:
        #ff2d70 !important;

}


/* Settings hover */

.genyx-payout-actions
.genyx-payout-action-secondary:hover {

    border-color:
        #ff3d80 !important;

    background:
        rgba(255, 23, 100, 0.055) !important;

    color:
        #ff4a85 !important;

    box-shadow:
        0 0 14px rgba(255, 23, 100, 0.14);

    transform:
        translateY(-1px);

}


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

.genyx-payout-actions button i {

    font-size: 13px;

    line-height: 1;

}


/* Disabled icon */

.genyx-payout-actions
.genyx-payout-action-disabled i {

    color: #53657b !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .genyx-payout-actions {

        padding-left: 15px;

    }

}


@media (max-width: 700px) {

    .genyx-payout-actions {

        padding:
            20px 0 0;

        align-items: stretch;

    }

    .genyx-payout-actions > button,
    .genyx-payout-actions .genyx-payout-status {

        max-width: none;

        width: 100%;

    }

}
/* =========================================================
   GENYX PAYOUT SETTINGS MODAL
========================================================= */

.genyx-payout-settings-modal {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 2147483647 !important;

    display: none;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 30px;

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   OPEN STATE
========================================================= */

.genyx-payout-settings-modal.is-open {

    display: flex !important;

}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.genyx-payout-settings-overlay {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background:

        linear-gradient(
            135deg,
            rgba(0, 8, 20, 0.82),
            rgba(0, 12, 30, 0.76)
        );

    /*
    |--------------------------------------------------------------------------
    | Blur everything behind the modal
    |--------------------------------------------------------------------------
    */

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    /*
    |--------------------------------------------------------------------------
    | Make sure overlay stays behind dialog
    |--------------------------------------------------------------------------
    */

    z-index: 1;

}


/* =========================================================
   MODAL DIALOG
========================================================= */

.genyx-payout-settings-dialog {

    position: relative !important;

    z-index: 2;

    width: min(
        620px,
        calc(100vw - 60px)
    );

    max-width: 620px;

    max-height: calc(
        100vh - 60px
    );

    overflow-y: auto;

    box-sizing: border-box;

    margin: 0 !important;

    background:

        linear-gradient(
            145deg,
            rgba(7, 18, 32, 0.99),
            rgba(2, 9, 20, 0.99)
        );

    border:

        1px solid
        rgba(45, 135, 255, 0.38);

    border-radius: 18px;

    color: #ffffff;

    box-shadow:

        0 30px 100px
        rgba(0, 0, 0, 0.75),

        0 0 60px
        rgba(0, 110, 255, 0.14),

        0 0 0 1px
        rgba(0, 120, 255, 0.05);

}


/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.genyx-payout-settings-dialog::-webkit-scrollbar {

    width: 7px;

}


.genyx-payout-settings-dialog::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.25);

}


.genyx-payout-settings-dialog::-webkit-scrollbar-thumb {

    background: rgba(30, 120, 255, 0.45);

    border-radius: 10px;

}


.genyx-payout-settings-dialog::-webkit-scrollbar-thumb:hover {

    background: rgba(30, 120, 255, 0.75);

}


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

.genyx-payout-settings-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 26px 28px 22px;

    border-bottom:

        1px solid
        rgba(65, 120, 180, 0.16);

}


.genyx-payout-settings-header h2 {

    margin: 0 0 7px;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 600;

    color: #ffffff;

}


.genyx-payout-settings-header p {

    margin: 0;

    font-size: 13px;

    line-height: 1.5;

    color: #7f9abb;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.genyx-payout-settings-close {

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:

        1px solid
        rgba(255, 30, 90, 0.65);

    border-radius: 7px;

    background:
        rgba(5, 13, 25, 0.75);

    color: #ff2d6f;

    cursor: pointer;

    transition:

        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.genyx-payout-settings-close:hover {

    background:
        rgba(255, 30, 90, 0.08);

    border-color:
        #ff2d6f;

    box-shadow:

        0 0 18px
        rgba(255, 30, 90, 0.18);

}


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

.genyx-payout-settings-body {

    padding: 26px 28px;

}


/* =========================================================
   FIELD
========================================================= */

.genyx-payout-field {

    margin-bottom: 19px;

}


.genyx-payout-field:last-child {

    margin-bottom: 0;

}


.genyx-payout-field label {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    color: #8aa8ca;

}


.genyx-payout-field input,
.genyx-payout-field select {

    width: 100%;

    box-sizing: border-box;

    min-height: 46px;

    padding: 11px 14px;

    border:

        1px solid
        rgba(57, 123, 201, 0.28);

    border-radius: 8px;

    background:
        rgba(3, 12, 24, 0.9);

    color: #ffffff;

    font-size: 14px;

    outline: none;

    transition:

        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.genyx-payout-field input::placeholder {

    color: #4f6885;

}


.genyx-payout-field input:focus,
.genyx-payout-field select:focus {

    border-color:
        #1678ff;

    background:
        rgba(4, 15, 30, 0.98);

    box-shadow:

        0 0 0 3px
        rgba(22, 120, 255, 0.10),

        0 0 20px
        rgba(22, 120, 255, 0.08);

}


/* =========================================================
   METHOD SECTIONS
========================================================= */

.genyx-payout-method-fields {

    padding: 17px;

    margin-top: 4px;

    border:

        1px solid
        rgba(45, 115, 190, 0.14);

    border-radius: 10px;

    background:
        rgba(5, 17, 31, 0.55);

}


/* =========================================================
   MESSAGES
========================================================= */

.genyx-payout-settings-message {

    margin-top: 20px;

    padding: 12px 14px;

    border-radius: 7px;

    font-size: 13px;

    line-height: 1.5;

}


.genyx-payout-settings-error {

    border:

        1px solid
        rgba(255, 45, 90, 0.35);

    background:
        rgba(255, 30, 80, 0.07);

    color: #ff5b85;

}


.genyx-payout-settings-success {

    border:

        1px solid
        rgba(0, 220, 150, 0.28);

    background:
        rgba(0, 220, 150, 0.06);

    color: #00e59a;

}


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

.genyx-payout-settings-footer {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 18px 28px 24px;

    border-top:

        1px solid
        rgba(65, 120, 180, 0.16);

}


/* =========================================================
   CANCEL
========================================================= */

.genyx-payout-settings-cancel {

    min-height: 43px;

    padding: 0 18px;

    border:

        1px solid
        rgba(90, 120, 155, 0.28) !important;

    border-radius: 8px;

    background:
        rgba(8, 18, 31, 0.8) !important;

    color: #91a8c2 !important;

    cursor: pointer;

    transition:

        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease !important;

}


.genyx-payout-settings-cancel:hover {

    border-color:
        rgba(90, 140, 180, 0.5);

    color: #ffffff;

    background:
        rgba(15, 30, 48, 0.9);

}


/* =========================================================
   SAVE
========================================================= */

.genyx-payout-settings-save {

    min-height: 43px;

    padding: 0 20px;

    border:

        1px solid
        #1678ff !important;

    border-radius: 8px;

    background:

        linear-gradient(
            135deg,
            #1267e8,
            #064cc7
        );

    color: #ffffff !important;

    font-weight: 500;

    cursor: pointer;

    box-shadow:

        0 0 20px
        rgba(22, 120, 255, 0.12);

    transition:

        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.genyx-payout-settings-save:hover {

    transform: translateY(-1px);

    box-shadow:

        0 0 25px
        rgba(22, 120, 255, 0.28);

}


.genyx-payout-settings-save:disabled {

    opacity: 0.65;

    cursor: wait;

    transform: none;

}


/* =========================================================
   BACKGROUND PAGE LOCK
========================================================= */

body.genyx-payout-settings-open {

    overflow: hidden !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .genyx-payout-settings-modal {

        padding: 15px !important;

    }


    .genyx-payout-settings-dialog {

        width: calc(100vw - 30px);

        max-height: calc(100vh - 30px);

        border-radius: 14px;

    }


    .genyx-payout-settings-header {

        padding: 21px;

    }


    .genyx-payout-settings-body {

        padding: 21px;

    }


    .genyx-payout-settings-footer {

        padding: 16px 21px 21px;

        flex-direction: column-reverse;

    }


    .genyx-payout-settings-cancel,
    .genyx-payout-settings-save {

        width: 100%;

    }

}


/* =========================================================
   GENYX GLOBAL TYPOGRAPHY SCALE
   ---------------------------------------------------------
   Big  = 31px
   Mid  = 20px
   Small = 13px

   This block is intentionally placed at the END of the file
   so it overrides older component-specific font sizes without
   changing the layout, spacing, colors, borders, or logic.

   Icon font sizes are preserved separately.
========================================================= */


/* =========================================================
   SMALL TEXT — 13px
========================================================= */

.genyx-dashboard-shell p,
.genyx-dashboard-shell label,
.genyx-dashboard-shell small,
.genyx-dashboard-shell li,
.genyx-dashboard-shell td,
.genyx-dashboard-shell th,
.genyx-dashboard-shell input,
.genyx-dashboard-shell select,
.genyx-dashboard-shell textarea,

.genyx-dashboard-header p,

.genyx-sidebar-featured-label,
.genyx-sidebar-featured-description,
.genyx-sidebar-featured-button,

.genyx-notification-count,

.genyx-dashboard-card p,
.genyx-dashboard-card > p,
.genyx-dashboard-card-content > p,

.genyx-field label,
.genyx-discount-error,

.genyx-coupon-success-description,
.genyx-coupon-code-label,
.genyx-copy-success,

.genyx-coupons-count,
.genyx-coupon-row-header .genyx-coupon-column,
.genyx-coupon-column,
.genyx-coupon-code,
.genyx-coupons-empty p,

.genyx-assets-header p,
.genyx-frontend-asset-info span,
.genyx-asset-download,
.genyx-assets-empty p,

.genyx-orders-header p,
.genyx-orders-filter,
.genyx-order-row-header .genyx-order-column,
.genyx-order-column,
.genyx-coupon-badge,
.genyx-order-stat-content span,
.genyx-order-stat-label,
.genyx-order-stat > strong,
.genyx-orders-empty p,

.genyx-home-label,
.genyx-home-earnings-growth span,
.genyx-home-earnings-growth small,
.genyx-home-period select#genyx-period-selector,
.genyx-home-stat-label,
.genyx-home-stat-subtitle,
.genyx-home-panel h2,
.genyx-home-donut-inner span,
.genyx-home-legend-item,
.genyx-home-traffic-empty,
.genyx-home-payout-label,
.genyx-home-payout-date,
.genyx-home-payout-status,
.genyx-home-position-label,
.genyx-home-partner-information span,
.genyx-home-total span,

.genyx-coupon-link-url,
.genyx-coupon-link-label,
.genyx-created-coupon-link,
.genyx-link-copy-success,
.genyx-campaign-name-input,
.genyx-campaign-error,
.genyx-campaign-name,
.genyx-home-full-analytics,

.genyx-traffic-analytics-header span,
.genyx-traffic-analytics-total span,
.genyx-traffic-analytics-campaign,
.genyx-traffic-analytics-clicks,
.genyx-traffic-analytics-percentage,
.genyx-traffic-modal .genyx-modal-donut span,

.genyx-payout-label,
.genyx-payout-growth,
.genyx-payout-ready,
.genyx-payout-limit-message,
.genyx-payout-not-ready,
.genyx-payout-history-head,
.genyx-payout-history-row,
.genyx-payout-amount,
.genyx-payout-status,
.genyx-payout-history-footer,
.genyx-payout-pagination button,
.genyx-payout-actions > .genyx-payout-label,
.genyx-payout-actions .genyx-payout-status,
.genyx-payout-settings-header p,
.genyx-payout-field label,
.genyx-payout-field input,
.genyx-payout-field select,
.genyx-payout-settings-message,

.genyx-campaign-error,
.genyx-discount-error {
    font-size: 13px !important;
}


/* =========================================================
   MID TEXT — 20px
========================================================= */

.genyx-sidebar-item,
.genyx-sidebar-item > span,

.genyx-sidebar-featured-title,

.genyx-btn-primary,

.genyx-discount-input span,

.genyx-coupon-success-card h2,
.genyx-coupons-header h2,
.genyx-coupons-empty h3,

.genyx-assets-header h2,
.genyx-frontend-asset-info h3,
.genyx-assets-empty h3,

.genyx-orders-header h2,
.genyx-order-stat-content strong,
.genyx-orders-empty h3,

.genyx-home-panel h2,
.genyx-home-donut-inner strong,

.genyx-copy-coupon-link,
.genyx-copy-coupon-link-modal,

.genyx-traffic-analytics-header h2,
.genyx-payout-stat-value,

.genyx-payout-next-date,

.genyx-payout-history-header h2,
.genyx-payout-view-all,

.genyx-payout-actions > button,
.genyx-payout-settings-header h2 {
    font-size: 20px !important;
}


/* =========================================================
   BIG TEXT — 31px
========================================================= */

.genyx-dashboard-header h1,

.genyx-dashboard-card h2,

.genyx-max-discount,

.genyx-coupon-hero h1,
.genyx-coupon-success-icon,

.genyx-created-coupon-code,
#genyx-created-coupon-code,

.genyx-assets-header h2,

.genyx-orders-header h2,

.genyx-home-earnings-value,
.genyx-home-stat-value,
.genyx-home-payout-amount,
.genyx-home-position strong,
.genyx-home-total strong,

.genyx-traffic-analytics-total strong,
.genyx-traffic-modal .genyx-modal-donut strong,

.genyx-payout-main-value {
    font-size: 31px !important;
}


/* =========================================================
   PAYOUT HISTORY — FINAL SCALE
========================================================= */

.genyx-payout-history-header h2 {
    font-size: 20px !important;
}

.genyx-payout-view-all {
    font-size: 13px !important;
}

.genyx-payout-history-head {
    font-size: 13px !important;
}

.genyx-payout-history-row {
    font-size: 13px !important;
}

.genyx-payout-amount {
    font-size: 13px !important;
}

.genyx-payout-status {
    font-size: 13px !important;
}

.genyx-payout-history-footer {
    font-size: 13px !important;
}

.genyx-payout-pagination button {
    font-size: 13px !important;
}


/* =========================================================
   BUTTON TEXT
========================================================= */

.genyx-dashboard-shell button {
    font-size: 13px !important;
}

.genyx-btn-primary,
.genyx-copy-coupon-link,
.genyx-copy-coupon-link-modal,
.genyx-payout-actions > button,
.genyx-payout-view-all {
    font-size: 20px !important;
}


/* =========================================================
   RESTORE ICON SIZES
   ---------------------------------------------------------
   These are NOT text and therefore should not be enlarged
   to the 13/20/31 typography scale.
========================================================= */

.genyx-sidebar-item > i {
    font-size: 21px !important;
}

.genyx-sidebar-nav .genyx-sidebar-item > i {
    font-size: 20px !important;
}

.genyx-dashboard-notification {
    font-size: 25px !important;
}

.genyx-coupon-modal-close,
.genyx-traffic-analytics-close {
    font-size: 24px !important;
}

.genyx-coupon-success-icon {
    font-size: 30px !important;
}

.genyx-coupons-empty-icon {
    font-size: 21px !important;
}

.genyx-frontend-asset-file-icon {
    font-size: 34px !important;
}

.genyx-asset-download i {
    font-size: 15px !important;
}

.genyx-assets-empty-icon {
    font-size: 36px !important;
}

.genyx-order-stat-icon {
    font-size: 19px !important;
}

.genyx-orders-empty-icon {
    font-size: 34px !important;
}

.genyx-home-stat-icon {
    font-size: 19px !important;
}

.genyx-home-payout-icon {
    font-size: 42px !important;
}

.genyx-home-payout-status i {
    font-size: 21px !important;
}

.genyx-home-position-arrow {
    font-size: 25px !important;
}

.genyx-home-period i {
    font-size: 12px !important;
}

.genyx-payout-stat-icon {
    font-size: 13px !important;
}

.genyx-payout-method i {
    font-size: 16px !important;
}

.genyx-payout-view-button i {
    font-size: 17px !important;
}

.genyx-payout-actions button i {
    font-size: 13px !important;
}


/* =========================================================
   IMPORTANT: INPUT VALUE / SELECT TEXT
========================================================= */

.genyx-payout-field input,
.genyx-payout-field select,
.genyx-campaign-name-input,
.genyx-home-period select#genyx-period-selector {
    font-size: 13px !important;
}


/* =========================================================
   MOBILE — KEEP THE SAME TYPOGRAPHY SCALE
========================================================= */

@media (max-width: 700px) {

    .genyx-dashboard-header h1 {
        font-size: 31px !important;
    }

    .genyx-dashboard-card h2,
    .genyx-assets-header h2,
    .genyx-orders-header h2,
    .genyx-payout-main-value,
    .genyx-home-earnings-value,
    .genyx-home-stat-value,
    .genyx-home-payout-amount,
    .genyx-home-position strong,
    .genyx-home-total strong {
        font-size: 31px !important;
    }

    .genyx-sidebar-item,
    .genyx-sidebar-item > span,
    .genyx-sidebar-featured-title,
    .genyx-coupons-header h2,
    .genyx-coupons-empty h3,
    .genyx-assets-header h2,
    .genyx-frontend-asset-info h3,
    .genyx-assets-empty h3,
    .genyx-orders-header h2,
    .genyx-order-stat-content strong,
    .genyx-orders-empty h3,
    .genyx-payout-stat-value,
    .genyx-payout-history-header h2,
    .genyx-payout-settings-header h2 {
        font-size: 20px !important;
    }

    .genyx-dashboard-shell p,
    .genyx-dashboard-shell label,
    .genyx-dashboard-shell small,
    .genyx-dashboard-shell li,
    .genyx-dashboard-shell td,
    .genyx-dashboard-shell th,
    .genyx-dashboard-shell input,
    .genyx-dashboard-shell select,
    .genyx-dashboard-shell textarea {
        font-size: 13px !important;
    }

    .genyx-payout-history-head,
    .genyx-payout-history-row,
    .genyx-payout-history-footer {
        font-size: 13px !important;
    }

    .genyx-payout-view-all {
        font-size: 13px !important;
    }

}




.genyx-dashboard-shell .genyx-btn-primary,
.genyx-dashboard-shell .genyx-copy-coupon-link,
.genyx-dashboard-shell .genyx-copy-coupon-link-modal,
.genyx-dashboard-shell .genyx-payout-actions > button {
    font-size: 20px !important;
}

/* =========================================================
   COUPON ACTIONS
========================================================= */

.genyx-coupon-actions {

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


/* =========================================================
   DELETE BUTTON
========================================================= */

.genyx-delete-coupon {

    width: 46px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(255, 23, 104, 0.75);

    border-radius: 6px;

    background:
        rgba(8, 16, 29, 0.95);

    color:
        #ff1768;

    font-family: inherit;

    font-size: 18px;

    cursor: pointer;

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

}


.genyx-delete-coupon:hover {

    background:
        rgba(255, 23, 104, 0.10);

    border-color:
        #ff1768;

    color:
        #ffffff;

    box-shadow:
        0 0 16px rgba(255, 23, 104, 0.18);

}


.genyx-delete-coupon:active {

    transform:
        scale(0.96);

}


/* =========================================================
   DELETE LOADING
========================================================= */

.genyx-delete-coupon.is-deleting {

    opacity:
        0.65;

    cursor:
        wait;

}


/* =========================================================
   ROTATING LOADING ICON
========================================================= */

.genyx-delete-coupon.is-deleting i {

    animation:
        genyxDeleteSpin 0.8s linear infinite;

}


@keyframes genyxDeleteSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   CUSTOM COUPON CODE FIELD
========================================================= */

.genyx-custom-coupon-code-input {

    width: 100%;

    min-height: 44px;

    padding: 10px 14px;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 8px;

    background:
        #080e18;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        15px;

    outline:
        none;

    box-sizing:
        border-box;

    text-transform:
        uppercase;

}


.genyx-custom-coupon-code-input:focus {

    border-color:
        #1768df;

    box-shadow:
        0 0 0 2px rgba(23,104,223,0.12);

}


.genyx-coupon-code-help {

	display:none;
    margin:
        6px 0 0;

    color:
        #687487;

    font-size:
        12px;

}


.genyx-coupon-code-error {

    min-height:
        18px;

    margin:
        5px 0 0;

    color:
        #ff4c67;

    font-size:
        13px;

}

/* =========================================================
   EDIT COUPON MODAL
========================================================= */

.genyx-edit-coupon-modal {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   OPEN STATE
========================================================= */

.genyx-edit-coupon-modal.is-open {

    display: flex;

}


/* =========================================================
   OVERLAY
========================================================= */

.genyx-edit-coupon-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(0, 3, 9, 0.78);

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

}


/* =========================================================
   EDIT COUPON CARD
========================================================= */

.genyx-edit-coupon-card {

    position: relative;

    z-index: 2;

    width: min(
        520px,
        calc(100% - 40px)
    );

    padding:
        38px 36px 34px;

    box-sizing: border-box;

    border:
        1px solid rgba(58, 91, 139, 0.55);

    border-radius: 16px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(0, 82, 190, 0.16),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            #07101c 0%,
            #030912 100%
        );

    box-shadow:

        0 30px 80px
        rgba(0, 0, 0, 0.55),

        inset 0 1px 0
        rgba(255,255,255,0.04);

    transform:
        translateY(10px)
        scale(0.97);

    opacity: 0;

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

}


/* =========================================================
   OPEN CARD ANIMATION
========================================================= */

.genyx-edit-coupon-modal.is-open
.genyx-edit-coupon-card {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.genyx-edit-coupon-close {

    position: absolute;

    top: 14px;

    right: 16px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid rgba(255, 23, 104, 0.65);

    border-radius: 6px;

    background:
        rgba(8, 16, 29, 0.75);

    color:
        #ff1768;

    font-family: inherit;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;

}


.genyx-edit-coupon-close:hover {

    background:
        rgba(255, 23, 104, 0.10);

    border-color:
        #ff1768;

    color:
        #ffffff;

    box-shadow:
        0 0 16px
        rgba(255, 23, 104, 0.18);

}


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

.genyx-edit-coupon-card h2 {

    margin:
        0 55px 10px 0;

    color:
        #ffffff;

    font-size:
        31px;

    font-weight:
        500;

    line-height:
        1.2;

}


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

.genyx-edit-coupon-description {

    margin:
        0 0 30px;

    color:
        #13c77a;

    font-size:
        13px;

    line-height:
        1.5;

}


/* =========================================================
   FIELD
========================================================= */

.genyx-edit-coupon-field {

    margin-bottom:
        26px;

}


.genyx-edit-coupon-field label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        500;

}


/* =========================================================
   INPUT
========================================================= */

.genyx-edit-coupon-field input {

    width:
        100%;

    min-height:
        52px;

    padding:
        0 15px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(255,255,255,0.16);

    border-radius:
        7px;

    background:
        #080f19;

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        13px;

    outline:
        none;

    text-transform:
        uppercase;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.genyx-edit-coupon-field input:focus {

    border-color:
        #1768df;

    box-shadow:
        0 0 0 2px
        rgba(23,104,223,0.12);

}


/* =========================================================
   ERROR
========================================================= */

.genyx-edit-coupon-error {

    min-height:
        18px;

    margin:
        8px 0 0;

    color:
        #ff4c67;

    font-size:
        13px;

}


/* =========================================================
   ACTIONS
========================================================= */

.genyx-edit-coupon-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

}


/* =========================================================
   CANCEL
========================================================= */

.genyx-edit-coupon-cancel {

    min-height:
        52px;

    padding:
        0 24px;

    border:
        1px solid
        rgba(255,23,104,0.75);

    border-radius:
        7px;

    background:
        transparent;

    color:
        #ff1768;

    font-family:
        inherit;

    font-size:
        13px;

    cursor:
        pointer;

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

}


.genyx-edit-coupon-cancel:hover {

    background:
        rgba(255,23,104,0.08);

    color:
        #ffffff;

}


/* =========================================================
   SAVE BUTTON
========================================================= */

.genyx-edit-coupon-actions
.genyx-btn-primary {

    min-height:
        52px;

    padding:
        0 26px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .genyx-edit-coupon-card {

        width:
            calc(100% - 28px);

        padding:
            32px 22px 26px;

        border-radius:
            13px;

    }


    .genyx-edit-coupon-card h2 {

        font-size:
            20px;

    }


    .genyx-edit-coupon-description {

        font-size:
            13px;

    }


    .genyx-edit-coupon-actions {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

    }


    .genyx-edit-coupon-cancel,
    .genyx-edit-coupon-actions
    .genyx-btn-primary {

        width:
            100%;

    }

}

body.genyx-modal-open {

    overflow: hidden;

}

/* =========================================================
   COUPON CREATION — HOW IT WORKS
========================================================= */

.genyx-coupon-info-box {

    width: 100%;

    max-width: 620px;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    box-sizing: border-box;

    margin:
        24px 0 30px;

    padding:
        16px 28px;

    border:
        1px solid rgba(22, 126, 255, 0.60);

    border-radius: 10px;

    background:
        rgba(5, 20, 38, 0.72);

}


/* =========================================================
   INFO ICON
========================================================= */

.genyx-coupon-info-icon {

    width: 44px;

    height: 44px;

    flex:
        0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 2px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #2589ff 0%,
            #075bd6 100%
        );

    box-shadow:
        0 4px 14px rgba(0, 102, 255, 0.22);

}


.genyx-coupon-info-icon span {

    color: #ffffff;

    font-size: 27px;

    font-weight: 500;

    line-height: 1;

}


/* =========================================================
   INFO CONTENT
========================================================= */

.genyx-coupon-info-content {

    flex: 1;

    min-width: 0;

}


.genyx-coupon-info-content h3 {

    margin:
        0 0 5px;

    padding: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 600;

    line-height: 1.3;

}


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

.genyx-coupon-info-content p {

    margin:
        0;

    padding: 0;

    color: #aeb9c7;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.45;

}


/*
 * Keep the three sentences close together exactly
 * like the client's reference.
 */

.genyx-coupon-info-content p + p {

    margin-top: 0;

}


/* =========================================================
   IMPORTANT WORDS
========================================================= */

.genyx-coupon-info-content strong {

    color: #1685ff;

    font-weight: 600;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .genyx-coupon-info-box {

        max-width: 100%;

        gap: 13px;

        margin:
            20px 0 25px;

        padding:
            15px 17px;

        border-radius: 9px;

    }


    .genyx-coupon-info-icon {

        width: 40px;

        height: 40px;

        flex:
            0 0 40px;

    }


    .genyx-coupon-info-icon span {

        font-size: 24px;

    }


    .genyx-coupon-info-content h3 {

        font-size: 16px;

        margin-bottom: 4px;

    }


    .genyx-coupon-info-content p {

        font-size: 13px;

        line-height: 1.45;

    }

}

/* =========================================================
   COUPON GENERATOR — CENTERED LAYOUT
   ---------------------------------------------------------
   Centers the complete coupon creation form and reduces
   unnecessary vertical spacing.
========================================================= */

#genyx-coupon-panel {

    width: 100%;

    max-width: 760px;

    margin:
        20px auto 0;

    padding:
        24px 0 0;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   MAXIMUM DISCOUNT
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-max-discount-box {

    width: 100%;

    text-align: center;

    margin:
        0 auto 16px;

}


#genyx-coupon-panel .genyx-max-discount-box h3 {

    margin:
        0 0 4px;

}


#genyx-coupon-panel .genyx-max-discount {

    line-height: 1;

}


/* ---------------------------------------------------------
   ALL FORM FIELDS
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-field {

    width: 100%;

    max-width: 460px;

    margin:
        0 auto 14px;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   FIELD LABELS
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-field label {

    display: block;

    width: 100%;

    min-height: auto;

    padding:
        0 0 7px;

    margin: 0;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   DISCOUNT INPUT
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-discount-input {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

}


#genyx-coupon-panel .genyx-discount-input input {

    width: 100%;

    min-height: 44px;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   ERROR MESSAGE
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-discount-error {

    width: 100%;

    max-width: 460px;

    margin:
        -4px auto 10px;

    text-align: center;

}


/* ---------------------------------------------------------
   CAMPAIGN FIELD
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-campaign-name {

    width: 100%;

    max-width: 460px;

    margin:
        0 auto 14px;

}


/* ---------------------------------------------------------
   CAMPAIGN INPUT
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-campaign-name-input {

    width: 100%;

    min-height: 44px;

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   CAMPAIGN ERROR
--------------------------------------------------------- */

#genyx-coupon-panel .genyx-campaign-error {

    width: 100%;

    max-width: 460px;

    margin:
        -4px auto 10px;

    text-align: center;

}


/* ---------------------------------------------------------
   CREATE COUPON BUTTON
--------------------------------------------------------- */

#genyx-coupon-panel #genyx-create-coupon {

    display: flex;

    width: auto;

    margin:
        18px auto 0;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    #genyx-coupon-panel {

        width: 100%;

        max-width: 100%;

        margin:
            16px auto 0;

        padding:
            20px 0 0;

    }


    #genyx-coupon-panel .genyx-field,
    #genyx-coupon-panel .genyx-campaign-name,
    #genyx-coupon-panel .genyx-discount-error,
    #genyx-coupon-panel .genyx-campaign-error {

        max-width: 100%;

    }


    #genyx-coupon-panel .genyx-max-discount-box {

        margin-bottom: 14px;

    }


    #genyx-coupon-panel #genyx-create-coupon {

        margin-top:
            14px;

    }

}

/* =========================================================
   COUPON CREATION — FINAL CENTERED LAYOUT
   ---------------------------------------------------------
   Expands only the dashboard card containing the coupon
   generator so the generator can be centered across the
   full available card width.
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-dashboard-card-content {

    width: 100%;

    max-width: none;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   COUPON GENERATOR
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel {

    width: 100%;

    max-width: 716px;

    margin:
        20px auto 0;

    padding:
        24px 0 0;

    box-sizing: border-box;
}


/* =========================================================
   MAXIMUM DISCOUNT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
.genyx-max-discount-box {

    width: 100%;

    max-width: 716px;

    margin:
        0 auto 22px;

    padding: 0;

    text-align: center;

    box-sizing: border-box;
}


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

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
.genyx-max-discount-box h3 {

    margin:
        0 0 5px;

    padding: 0;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.3;

    color: #dce1ea;
}


/* MAXIMUM DISCOUNT NUMBER
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
.genyx-max-discount {

    margin: 0;

    font-size: 42px;

    font-weight: 700;

    line-height: 1;

    color: #ff4050;
}


/* =========================================================
   HOW IT WORKS BOX
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-box {

    width: 100%;

    max-width: 716px;

    margin:
        22px auto 32px;

    padding:
        20px 32px;

    box-sizing: border-box;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    border:
        1px solid rgba(22, 126, 255, 0.75);

    border-radius: 12px;

    background:
        rgba(5, 20, 38, 0.55);
}


/* INFO ICON
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-icon {

    width: 50px;

    height: 50px;

    flex:
        0 0 50px;

    margin-top: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #2589ff 0%,
            #075bd6 100%
        );

    box-shadow:
        0 4px 14px rgba(0, 102, 255, 0.22);
}


/* INFO ICON TEXT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-icon span {

    font-size: 28px;

    line-height: 1;

    font-weight: 500;

    color: #ffffff;
}


/* =========================================================
   INFO CONTENT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-content {

    flex: 1;

    min-width: 0;
}


/* HOW IT WORKS TITLE
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-content h3 {

    margin:
        0 0 6px;

    padding: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 600;

    line-height: 1.25;
}


/* INFO TEXT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-content p {

    margin: 0;

    padding: 0;

    color: #00d68f;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.5;
}


/* IMPORTANT WORDS
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
.genyx-coupon-info-content strong {

    color: #1685ff;

    font-weight: 600;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel .genyx-field {

    width: 100%;

    max-width: 604px;

    margin:
        0 auto 18px;

    box-sizing: border-box;
}


/* =========================================================
   FIELD LABELS
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel .genyx-field label {

    display: block;

    width: 100%;

    min-height: auto;

    margin: 0;

    padding:
        0 0 8px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    box-sizing: border-box;
}


/* =========================================================
   INPUTS
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel input {

    width: 100%;

    min-height: 50px;

    box-sizing: border-box;
}


/* =========================================================
   DISCOUNT INPUT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel .genyx-discount-input {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   DISCOUNT %
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel .genyx-discount-input span {

    flex-shrink: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;
}


/* =========================================================
   GREEN COUPON CODE HELP TEXT
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
.genyx-coupon-code-help {

    width: 100%;

    max-width: 604px;

    margin:
        -2px auto 22px;

    color: #00d68f;

    text-align: center;

    font-size: 14px;

    line-height: 1.4;
}


/* =========================================================
   CAMPAIGN FIELD
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
.genyx-campaign-name {

    width: 100%;

    max-width: 604px;

    margin:
        0 auto 18px;
}


/* =========================================================
   CREATE BUTTON
========================================================= */

.genyx-dashboard-card:has(#genyx-coupon-panel)
#genyx-coupon-panel
#genyx-create-coupon {

    display: flex;

    width: auto;

    margin:
        -74px auto 0;

    min-height: 60px;

    padding:
        0 36px;

    font-size: 20px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .genyx-dashboard-card:has(#genyx-coupon-panel)
    .genyx-dashboard-card-content {

        width: 100%;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    #genyx-coupon-panel {

        width: 100%;

        max-width: 100%;

        padding:
            20px 16px 0;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    .genyx-coupon-info-box {

        width: 100%;

        max-width: 100%;

        padding:
            18px;

        gap: 14px;

        margin:
            18px auto 26px;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    .genyx-coupon-info-icon {

        width: 44px;

        height: 44px;

        flex:
            0 0 44px;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    .genyx-coupon-info-content h3 {

        font-size: 17px;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    .genyx-coupon-info-content p {

        font-size: 13px;

        line-height: 1.45;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    #genyx-coupon-panel .genyx-field,
    .genyx-dashboard-card:has(#genyx-coupon-panel)
    #genyx-coupon-panel .genyx-campaign-name {

        max-width: 100%;
    }


    .genyx-dashboard-card:has(#genyx-coupon-panel)
    #genyx-create-coupon {

        width: auto;

        min-height: 52px;

        font-size: 17px;
    }
}

/* =========================================================
   COUPON TABLE — FINAL ALIGNMENT FIX
   ---------------------------------------------------------
   Fixes:
   1. Edit/Delete buttons having different dimensions
   2. Copy button overflowing into Campaign column
   3. Campaign names overlapping the copy button
   4. Button/icon vertical alignment
========================================================= */


/* =========================================================
   ACTIONS COLUMN
========================================================= */

.genyx-coupon-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: visible !important;
}


/* =========================================================
   EDIT + DELETE BUTTONS
   ---------------------------------------------------------
   Both buttons intentionally use exactly the same
   dimensions.
========================================================= */

.genyx-coupon-actions .genyx-edit-coupon,
.genyx-coupon-actions .genyx-delete-coupon {

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 6px !important;

    line-height: 1 !important;
    vertical-align: middle !important;
}


/* Keep the existing edit styling */

.genyx-coupon-actions .genyx-edit-coupon {

    border: 1px solid rgba(255, 23, 104, 0.75) !important;

    background:
        rgba(8, 16, 29, 0.95) !important;

    color: #ff1768 !important;

    cursor: pointer !important;
}


/* Keep the existing delete styling */

.genyx-coupon-actions .genyx-delete-coupon {

    border: 1px solid rgba(255, 23, 104, 0.75) !important;

    background:
        rgba(8, 16, 29, 0.95) !important;

    color: #ff1768 !important;

    cursor: pointer !important;
}


/* Icons */

.genyx-coupon-actions .genyx-edit-coupon i,
.genyx-coupon-actions .genyx-delete-coupon i {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    line-height: 1 !important;

    font-size: 18px !important;
}


/* =========================================================
   LINKS COLUMN
   ---------------------------------------------------------
   The original copy button was 72px wide.

   Combined with:
   124px Use Link
   + 12px gap
   + 72px Copy
   = 208px

   This exceeded the available Links column.

   Copy is therefore reduced to the same 46px width
   as the action buttons.
========================================================= */

.genyx-coupon-links {

    min-width: 0 !important;

    width: 100% !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


.genyx-coupon-link-wrapper {

    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   USE LINK BUTTON
========================================================= */

.genyx-coupon-link-url {

    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;

    height: 42px !important;
    min-height: 42px !important;

    flex: 0 0 124px !important;

    box-sizing: border-box !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    padding: 0 18px !important;

    white-space: nowrap !important;
}


/* =========================================================
   COPY LINK BUTTON
   ---------------------------------------------------------
   Same 46 × 42 dimensions as Edit/Delete.
========================================================= */

.genyx-coupon-links .genyx-copy-coupon-link {

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    flex: 0 0 46px !important;

    box-sizing: border-box !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 6px !important;

    line-height: 1 !important;
}


/* Copy icon */

.genyx-coupon-links .genyx-copy-coupon-link i {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    line-height: 1 !important;

    font-size: 18px !important;
}


/* =========================================================
   CAMPAIGN COLUMN
   ---------------------------------------------------------
   Prevent campaign text from spilling outside its
   own grid cell.
========================================================= */

.genyx-coupon-campaign {

    min-width: 0 !important;

    width: 100% !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


.genyx-coupon-campaign .genyx-campaign-name {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

    margin: 0 !important;
}


/* =========================================================
   TABLE ROW — SAFETY
========================================================= */

.genyx-coupon-row {

    align-items: center !important;

    box-sizing: border-box !important;
}


.genyx-coupon-row > .genyx-coupon-column {

    min-width: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MOBILE
   ---------------------------------------------------------
   Preserve the horizontal desktop-style coupon grid.
========================================================= */

@media (max-width: 800px) {

    .genyx-coupon-actions .genyx-edit-coupon,
    .genyx-coupon-actions .genyx-delete-coupon {

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        flex: 0 0 46px !important;
    }


    .genyx-coupon-links .genyx-copy-coupon-link {

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

        flex: 0 0 46px !important;
    }

}

/* =========================================================
   COUPON TABLE — BALANCED COLUMN LAYOUT FINAL FIX
   ========================================================= */

.genyx-coupon-row,
.genyx-coupon-row-header {
    display: grid !important;
    grid-template-columns:
        1.10fr
        1.20fr
        1.50fr
        0.65fr
        0.75fr
        1.00fr
        100px !important;
    column-gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Keep every grid cell inside its assigned track. */
.genyx-coupon-row > .genyx-coupon-column,
.genyx-coupon-row-header > .genyx-coupon-column {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Links: enough room for Use Link + Copy without entering Campaign. */
.genyx-coupon-links {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.genyx-coupon-link-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.genyx-coupon-link-url {
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    height: 42px !important;
    flex: 0 0 124px !important;
    box-sizing: border-box !important;
}

.genyx-coupon-links .genyx-copy-coupon-link {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 46px !important;
    box-sizing: border-box !important;
}

/* Campaign cannot overlap neighboring columns. */
.genyx-coupon-campaign {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.genyx-coupon-campaign .genyx-campaign-name {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Actions: 2 x 46px buttons + 4px gap = 96px, inside 100px track. */
.genyx-coupon-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.genyx-coupon-actions .genyx-edit-coupon,
.genyx-coupon-actions .genyx-delete-coupon {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    flex: 0 0 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================================
   MOBILE / HORIZONTAL SCROLL
   Keep the intentionally wide coupon grid on smaller screens.
   ========================================================= */
@media (max-width: 800px) {
    .genyx-coupon-row,
    .genyx-coupon-row-header {
        grid-template-columns:
            140px
            182px
            180px
            85px
            85px
            120px
            100px !important;
        width: max-content !important;
        min-width: 992px !important;
    }
}




.genyx-coupon-row-header .genyx-coupon-column {
    text-align: center !important;
}

/* =========================================================
   COUPON TABLE — CENTER HEADERS + CONTENT
========================================================= */

/* Center all column headings */
.genyx-coupon-row-header .genyx-coupon-column {
    text-align: center !important;
}

/* Center all coupon row content */
.genyx-coupon-row:not(.genyx-coupon-row-header) .genyx-coupon-column {
    text-align: center !important;
}

/* =========================================================
   DASHBOARD — USE ONE NORMAL PAGE SCROLL
   ========================================================= */

.genyx-dashboard-sidebar {
    overflow-y: visible !important;
    overflow-x: visible !important;
}