/*Order Details*/

/* My Account Content Container */
.myAccountContent {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
}

.myAccountContent > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.myAccountContent .custom-table-controls-bottom.controls-bottom-row {
    margin-top: auto;
    padding-top: 24px;
}

/* Order History Table Wrapper */
#order-history {
    display: flex;
    flex-direction: column;
}

#order-history .table {
    background: white;
    border: 1px solid #6B5ACB;
    border-radius: 12px;
    overflow: hidden;
}

.myacc_content .back_button {
    color: var(--dark_blue) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 27px;
    float: right;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    font-family: 'Manrope', sans-serif;
}

#order-products thead tr,
#keys_table thead tr,
#order-history-table thead tr {
    background: rgba(238, 236, 251, 0.5) !important;
}

/* Table headers */
#order-products th,
#keys_table th,
#order-history-table th {
    color: #0D0034;
    text-align: left;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    padding: 16px;
    border-bottom: 1px solid rgba(189, 189, 189, 0.2);
    position: relative;
}

/* Vertical line separators between columns */
#order-history-table th:not(:last-child)::after,
#order-history-table td:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 30px;
    bottom: 0;
    width: 1px;
    background: rgba(189, 189, 189, 0.2);
}

#order-products th:first-child {
    width: 40%;
    text-align: left;
}

#order-products th:nth-child(3),
#order-products th:nth-child(4) {
    text-align: right;
}

#order-products tbody tr td:nth-child(2) {
    text-align: center;
}

#order-products tr:nth-of-type(even),
#keys_table tr:nth-of-type(even),
#order-history-table tr:nth-of-type(even) {
    background: unset !important;
}

#order-products tr td,
#keys_table tr td,
#order-history-table tr td {
    border-bottom: 1px solid rgba(13, 0, 52, 0.10);
}

.myAccountContent .table .order-actions a {
    padding: 10px 26px 8px 26px !important;
    background-color: var(--accent_purple);
    border-color: var(--accent_purple);
}

.myacc_content .section_header {
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(189, 189, 189, 0.20) !important;
    background: var(--light_white_purple);
    padding: 16px 24px;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#keys_table {
    table-layout: fixed;
    display: table;

}

#keys-section .white-background,
#order-history .white-background {
    display: flex;
}
.myacc_content #keys_table {
    margin: 20px;
}

#keys_table th {
    text-align: left;
    width: 50%;
}

#keys_table th, #keys_table td {
    word-wrap: break-word;
    padding: 16px;
}

#keys_table td:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

#keys_table td img.productImage {
    max-width: 55px;
    height: auto;
}

.key-container {
    display: flex;
    align-items: center;
    background: var(--back_light_purple);
    padding: 6px 6px 6px 10px;
    border-radius: 10px;
    max-width: 100%;
    position: relative;
    gap: 24px;
    justify-content: space-between;
}

.key_text {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark_blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.copy-button {
    background: var(--accent_purple);
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.copy-button.disabled {
    background: #D9D9D9 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.tooltip {
    visibility: hidden;
    background-color: var(--accent_purple);
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    border-radius: 5px;
    position: absolute;
    top: -35px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip.show {
    visibility: visible;
    opacity: 1;
}

#keys_table .activation_guide {
    text-decoration: underline;
    color: var(--accent_purple) !important;
    text-underline-offset: 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    float: right;
    margin-top: 6px;
}

#keys_table .key-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

#keys_table .key-actions .activation_guide {
    float: none;
    margin-top: 0;
}

#keys_table .key-actions .report-issue {
    text-decoration: underline;
    color: var(--dark_purple, #0D0034) !important;
    text-underline-offset: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    opacity: 0.8;
}

#keys_table .key-actions .report-issue:hover {
    opacity: 1;
}

.myacc_content a:before {
    content: unset !important;
}

.myacc_content #order-history .section_header {
    gap: 8px;
}

.myacc_content #order-history .section_header p {
    margin-bottom: 0px;
    line-height: 20px;
}

#order-history-table {
    margin: 20px;
    width: 100%;
}

#order-history .statuses {
    text-align: left;
}

#order-history-table th {
    width: unset;
    text-align: left;
}

/* Table data cells */
#order-history-table td {
    padding: 16px;
    vertical-align: middle;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #0D0034;
    position: relative;
}

#order-history-table tr td:last-child {
    padding: 16px;
}

/* See Details Button */
#order-history-table .order-actions .btn,
#order-history-table .order-actions a.btn {
    background: #9747FF;
    border: none;
    border-radius: 6px;
    padding: 10px 26px 8px 26px;
    color: #FFFFFF;
    font-family: 'Exo', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.3s ease;
}

#order-history-table .order-actions .btn:hover,
#order-history-table .order-actions a.btn:hover {
    background: #8036E6;
    color: #FFFFFF;
    text-decoration: none;
}

/* Status Badge */
#order-history-table td .label-pill,
.table .label-pill {
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    padding: 4px 12px;
    text-align: center;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
}

/* Lighten background effect */
#order-history-table td .label-pill::before,
.table .label-pill::before {
    content: '';
    position: absolute;
    inset: 1px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    pointer-events: none;
    z-index: -1;
}

/* Delivered status - Green */
#order-history-table .label-pill.state_5 {
    border: 1px solid #4AC350;
    background-color: #E8FFE9;
    color: #4AC350;
}

#order-history-table .label-pill.state_10 {
    border: 1px solid var(--accent_purple);
    background-color: #bcafff;
    color: var(--accent_purple);
}

.order-message-form .message_div h3 {
    color: var(--dark_purple);
    text-align: center;
    font-family: Manrope;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 24px !important;
    margin-top: 40px;
}

.ri-chat-buttons .message_button,
.order-message-form .message_button {
    color: #FFF;
    font-family: Exo;
    font-size: 18px;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 20px; /* 111.111% */
    text-transform: uppercase;
    display: flex;
    height: 48px;
    padding: 14px 48px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: linear-gradient(93deg, #6732AA 2.51%, #A26DE6 79.33%);
    margin: auto;
    width: fit-content;
    margin-bottom: 40px;
}

.ri-chat-buttons .message_button {
    margin: 0px;
    margin-bottom: 0px;
}

/*.page-order-detail #wrapper,*/
#order-detail {
    background: var(--back_light_purple_transparent);
}

.page-order-detail #main {
    background-color: unset !important;
}

#order-detail .myAccountContent {
    padding: 0px;
}

#order-details-products {
    margin: 20px;
}

#order-detail .myacc_content {
    background: unset;
}

#order-detail .white-background {
    background: white;
    padding: 0.1px 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#order-detail #order-products {
    margin-bottom: 20px;
}

#order-detail #order-details-products {
    padding-bottom: 0px;
}

#order-detail .myacc_content header {
    background: rgba(238, 236, 251, 0.5);
}

#order-history,
.order-message-form,
#keys-section {
    background: white;
    padding-bottom: 0px;
    border-radius: 20px !important;
}

#order-details-header {
    background: white;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

#order-detail #myacc_content-header {
    background: white;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/*.ellipse-5 {*/
/*    width: 65%;*/
/*    height: 20%;*/
/*    left: 35%;*/
/*    top: -80px;*/
/*    filter: blur(250px);*/
/*}*/

/*.ellipse-6 {*/
/*    width: 65%;*/
/*    height: 20%;*/
/*    left: -40%;*/
/*    top: 600px;*/
/*    filter: blur(250px);*/
/*}*/

/*.ellipse-8 {*/
/*    width: 35%;*/
/*    height: 20%;*/
/*    left: 65%;*/
/*    top: 1062px;*/
/*    filter: blur(250px);*/
/*}*/

/*My Library*/

.myaccount_table th {
    color: var(--dark_blue);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    width: 35%;
    padding: 16px;
    vertical-align: middle;
}



.myaccount_table td img.productImage {
    max-width: 55px;
    height: auto;
}

.myaccount_table .key-container {
    display: flex;
    align-items: center;
    background: var(--back_light_purple);
    padding: 6px 6px 6px 10px;
    border-radius: 10px;
    max-width: 40ch;
    position: relative;
    gap: 24px;
    justify-content: space-between;
}

.myaccount_table .key_text {
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark_blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.myaccount_table .copy-button {
    background: var(--accent_purple);
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.myaccount_table .tooltip {
    visibility: hidden;
    background-color: var(--accent_purple);
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    border-radius: 5px;
    position: absolute;
    top: -35px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.myaccount_table .tooltip.show {
    visibility: visible;
    opacity: 1;
}

.myaccount_table .activation_guide {
    text-decoration: underline;
    color: var(--accent_purple) !important;
    text-underline-offset: 4px;
    font-size: 16px;
    font-weight: 600 !important;
    line-height: normal;
    float: right;
    margin-top: 6px;
}

/*My Library*/
#wkserialkeyview th:first-child,
#gkkeymanagerview-desktop th:first-child,
#gkkeymanagerview-mobile th:first-child {
    width: 15% !important;
}

#wkserialkeyview td:first-child,
#gkkeymanagerview-desktop td:first-child,
#gkkeymanagerview-mobile td:first-child {
    vertical-align: middle;
}

#wkserialkeyview td,
#gkkeymanagerview-desktop td,
#gkkeymanagerview-mobile td {
    font-weight: 600 !important;
    border-bottom: 1px solid #BDBDBD33;
}

.key-container.bordered {
    border-color: #fff !important;
}

#gkkeymanagerview-mobile td:first-child {
    font-weight: 700 !important;
}

#wkserialkeyview th:nth-child(2),
#gkkeymanagerview-desktop th:nth-child(2),
#gkkeymanagerview-mobile th:nth-child(2) {
    width: 35% !important;
}

#wkserialkeyview td:nth-child(2),
#gkkeymanagerview-desktop td:nth-child(2),
#gkkeymanagerview-mobile td:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 12px;
}

#wkserialkeyview,
#gkkeymanagerview-desktop,
#gkkeymanagerview-mobile {
    margin: 0px !important;
    width: 100%;
    table-layout: auto;
}

/* Status column styling */
#wkserialkeyview th:nth-child(4),
#wkserialkeyview td:nth-child(4),
#gkkeymanagerview-desktop th:nth-child(4),
#gkkeymanagerview-desktop td:nth-child(4),
#gkkeymanagerview-mobile th:nth-child(4),
#gkkeymanagerview-mobile td:nth-child(4) {
    text-align: center;
    width: 10%;
    padding: 16px;
}

/* Status column container - vertical layout */
.status-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
}

/* Icon wrapper - 30x30px circle with colored background from order state */
.status-icon-wrapper {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Icon inside wrapper */
.status-icon-wrapper .status-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Status text below icon */
.status-text {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    color: #241848;
    text-align: center;
    margin: 0;
}

/* Legacy label-pill support for fallback */
#wkserialkeyview td .label-pill,
#gkkeymanagerview-desktop td .label-pill,
#gkkeymanagerview-mobile td .label-pill {
    border-radius: 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    padding: 4px 12px;
    text-align: center;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

table#wkserialkeyview td, table#wkserialkeyview th,
table#gkkeymanagerview-desktop td, table#gkkeymanagerview-desktop th,
table#gkkeymanagerview-mobile td, table#gkkeymanagerview-mobile th {
    padding: 16px !important;
}

/* Order Status Column Styles */
.order-status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 6px;
    box-sizing: border-box;
}

.status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
}

/* White overlay to reduce background opacity - works with any inline background color */
.status-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.84);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.status-icon img,
.status-icon svg {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.status-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #241848;
    text-align: center;
    margin: 0;
}

/* Mobile table specific styles */
.hidden-md-up .order-status-container {
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
}

.hidden-md-up .status-text {
    text-align: left;
}

.records-per-page label{
    color: var(--dark_purple);
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.records-per-page select {
    font-size: 16px;
    width: 75px;
    padding: 8px 12px;
    appearance: none;
}

.records-per-page select {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0 100%), url('/modules/wkserialkeymanager/views/img/icon/eva_arrow-up-fill.png');
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 18px;
    min-height: 34px;
    min-width: 75px;
    width: 75px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid rgba(13, 0, 52, 0.30);
    /*height: 36px;*/
}

.controls-top-row input.search-input {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0 100%), url('/modules/wkserialkeymanager/views/img/icon/search.png');
    background-position: left 8px center;
    background-repeat: no-repeat;
    background-size: 22px;
    color: var(--dark_purple);
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    padding: 6px 34px;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(13, 0, 52, 0.30);
    width: 260px;
}

.controls-top-row .search-input:focus {
    padding-left: 34px !important;
    border-color: var(--purple_default) !important;
    background-color: white !important;
}

.controls-top-row label {
    margin-bottom: 0px;
}

.controls-top-row .table-search label {
    float: right;
}

.controls-top-row {
    margin-bottom: 24px;
}

#main #myacc_content-header h1 {
    color: var(--dark_blue) !important;
    font-family: Exo !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 22px;
}

#main #myacc_content-header h1 p {
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-top: 8px;
    margin-bottom: 0px;
}

#main #myacc_content-header .myacc_provider_blocks {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}
#main #myacc_content-header .myacc_provider_blocks .myacc_provider_box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    column-gap: 20px;
    row-gap: 15px;
}
#main #myacc_content-header .myacc_provider_blocks .myacc_provider_box .form-group{
    width: calc(50% - 10px);
    margin: 0;
}
#main #myacc_content-header .myacc_provider_blocks .myacc_provider_box .form-group .col-md-12{
    padding: 0;
}
#main #myacc_content-header .myacc_provider_blocks .myacc_provider_box .form-group label{
    color: var(--dark_blue);
    font-family: 'Manrope', sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 20px;
}
#main #myacc_content-header .myacc_provider_blocks .myacc_provider_box .form-group input{
    height: 52px;
    padding: 14px 20px;
    line-height: 24px;
    border-radius: 8px;
    border-color: rgba(49, 39, 112, 0.40);
    background: rgba(238, 236, 251, 0.50);
    color: rgba(49, 39, 112, 0.40);
}

.controls-top-row input.search-input:hover {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0 100%), url(/modules/wkserialkeymanager/views/img/icon/search.png) !important;
    background-position: left 8px center !important;
    background-repeat: no-repeat !important;
    background-size: 22px !important;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    width: 100%;
}

.pagination-controls button {
    background: no-repeat;
    border: none;
    padding-top: 5px;
}

.pagination-controls .pagination-pages {
    border: 1px solid var(--dark_blue);
    font-family: Manrope;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    width: 38px;
    border-radius: 4px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    margin: 0 10px; /* Add some margin around the page numbers */
}

.pagination-controls .pagination-pages .current-page {
    width: 20px;
}

.custom-table-controls-bottom {
    margin-top: 24px;
    display: flex;
}

.no-results-message {
    padding: 16px;
    text-align: center;
    color: var(--dark_blue);
    border: 1px solid var(--light_purple);
    border-radius: 6px;
}

#module-gkkeymanager-library .myacc_content table .empty-results-message {
    text-align: center;
    padding: 16px !important;
}

#module-gkkeymanager-library .myaccount_table td a {
    color: var(--accent_purple);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.showing-entries {
    font-size: 14px;
    font-family: 'Manrope';
    font-weight: 500;
}

.productCardScaled {
    width: 55px;
    overflow: hidden;
    height: 75px;
    flex: 0 0 55px;
}

.productCardScaled .product-card {
    transform: scale(0.27);
    transform-origin: top left;
    width: 370%;
    height: 370%;
}

.productCardScaled .product-mystery-box img {
    max-width: 95px;
    pointer-events: none !important;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .myacc_left_inner .links a {
        margin-bottom: 16px;
    }

    .myacc_left_inner .links a:nth-last-child(-n+2) {
        margin-bottom: 20px;
    }

    .myacc_left {
        padding-bottom: 76px;
    }

    .myacc_left_inner {
        margin-bottom: 0px;
    }

    .myacc_name {
        font-family: 'Exo';
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        text-transform: uppercase;
    }

    #myacc_content-header h1 {
        display: block !important;
    }

    #order-products td {
        vertical-align: middle;
    }

    .order-message-form .message_button {
        margin-bottom: 20px;
    }

    #wkserialkeyview tr td,
    #gkkeymanagerview-desktop tr td,
    #gkkeymanagerview-mobile tr td {
        padding: 12px 15px 12px 12px;
    }

    .myaccount_table .key-container {
        max-width: 17ch;
    }

    #wkserialkeyview th:nth-child(2),
    #gkkeymanagerview-desktop th:nth-child(2),
    #gkkeymanagerview-mobile th:nth-child(2) {
        width: 50% !important;
    }

    .ellipse-6 {
        width: 100%;
    }
}

/* Force mobile table layout at 768px for serial keys */
@media (max-width: 768px) {
    .myAccountContent {
        padding: 16px;
        overflow-x: auto;
    }
    #wkserialkeyview.hidden-sm-down,
    #gkkeymanagerview-desktop {
        display: none !important;
    }
    #wkserialkeyview.hidden-md-up,
    #gkkeymanagerview-mobile {
        display: table !important;
        width: 100% !important;
    }

    /* Override general nth-of-type(even) rule for mobile serial keys table */
    #wkserialkeyview.hidden-md-up tr:nth-of-type(even),
    #gkkeymanagerview-mobile tr:nth-of-type(even) {
        background: unset !important;
    }

    /* Apply background only to rows with .odd class (manual grouping per product) */
    #wkserialkeyview.hidden-md-up tr.odd,
    #gkkeymanagerview-mobile tr.odd {
        /* background: var(--back_light_purple_transparent) !important; */
        background: rgba(238, 236, 251, 0.50) !important;
    }

    #wkserialkeyview .key_container,
    #gkkeymanagerview-mobile .key_container {
        display: block !important;
    }

    #wkserialkeyview .key_container .key-container,
    #gkkeymanagerview-mobile .key_container .key-container {
        max-width: 100% !important;
    }

    #wkserialkeyview .key_container .activation_guide,
    #gkkeymanagerview-mobile .key_container .activation_guide {
        float: unset;
        display: block;
    }

    table#wkserialkeyview td, table#wkserialkeyview th,
    table#gkkeymanagerview-mobile td, table#gkkeymanagerview-mobile th {
        padding: 8px !important;
    }

    table#wkserialkeyview tr.first-element td,
    table#gkkeymanagerview-mobile tr.first-element td {
        padding-top: 20px !important;
    }
    table#wkserialkeyview tr.last-element td,
    table#gkkeymanagerview-mobile tr.last-element td {
        padding-bottom: 20px !important;
    }

    #main #myacc_content-header .myacc_provider_blocks .myacc_provider_box .form-group{
        width: 100%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    #main > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .myacc_left_inner .links a {
        margin-bottom: 20px;
    }

    .myacc_left_inner .links a:last-child(-n+2) {
        margin-bottom: 16px;
    }

    .myacc_left_inner .links a:last-child {
        margin-bottom: 16px;
    }

    .myacc_left_inner {
        margin-bottom: 0px;
    }

    .myacc_left {
        padding-bottom: 60px;
    }

    .myacc_content .back_button {
        float: left;
        width: 100%;
    }

    .myacc_content header,
    .myacc_content .section_header {
        padding: 12px 16px;
    }

    #order-products-mobile,
    #preorder_list {
        margin-top: 20px;
    }

    #preorder_list thead {
        display: none !important;
    }

    #order-products-mobile tr td:first-child,
    #preorder_list tr td:first-child,
    .keys_table tr td:first-child {
        color: var(--dark_blue);
        font-family: Manrope;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 700 !important;
        line-height: 19px !important;
        width: 40%;
    }

    #order-products-mobile td,
    #preorder_list td {
        padding: 12px;
        vertical-align: middle;
    }

    #order-products-mobile tr:nth-of-type(even),
    #preorder_list tr:nth-of-type(even) {
        background: unset !important;
    }

    #order-products-mobile td,
    #preorder_list td {
        border-bottom: 1px solid #e7e5eb;
    }

    #order-products-mobile td:not(:last-child)::after,
    #preorder_list td:not(:last-child)::after,
    .table th:not(:last-child)::after {
        border-right: 1px solid #e7e5eb;
    }

    #order-products-mobile tr.odd,
    #preorder_list tr.odd,
    #keys_table tr.odd {
        background: var(--light_white_purple) !important;
    }

    .myacc_content .keys_table {
        margin: 20px 0px !important;
    }

    .keys_table td {
        padding: 8px !important;
    }

    .keys_table tr td:first-child {
        width: 34%;
        display: table-cell !important;
        vertical-align: middle;
        padding: 8px 8px 8px 12px !important;
    }

    .keys_table table td:after {
        display: none;
    }

    .keys_table table td {
        padding: 0px !important;
        border-bottom: none !important;
    }

    .keys_table table tr td:first-child {
        padding-right: 8px;
    }

    .keys_table .activation_guide {
        float: left !important;
    }

    /* .keys_table tr.odd .key-container {
        border: 1px solid var(--purple_default);
    } */

    .order-message-form .message_div h3 {
        margin-top: 16px;
    }

    .order-message-form .message_button {
        margin-bottom: 0px;
    }

    #order-history .white-background {
        padding: 16px !important;
    }

    #order-history #order-history-table {
        margin: 0px;
    }

    #order-history #order-history-table td {
        font-family: Manrope;
        font-style: normal;
        font-weight: 600 !important;
    }

    #order-history #order-history-table tr td:first-child {
        width: 60%;
        padding: 16px 16px 16px 8px;
    }

    #order-history #order-history-table td:after {
        border-right: 1px solid #e7e5eb;
    }

    #myacc_content-header h1 {
        display: block !important;
    }

    .white-background {
        padding: 1px 15px !important;
    }

    #order-detail .back_button {
        margin-top: 10px;
    }

    #order-history .history-line {
        text-align: center;
    }

    #wkserialkeyview tr td,
    #gkkeymanagerview-desktop tr td,
    #gkkeymanagerview-mobile tr td {
        padding: 8px;
    }

    .myaccount_table .key-container {
        max-width: 17ch;
    }

    #wkserialkeyview th:nth-child(2),
    #gkkeymanagerview-desktop th:nth-child(2),
    #gkkeymanagerview-mobile th:nth-child(2) {
        width: 50% !important;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey .myAccountContent,
    #module-gkkeymanager-library .myAccountContent {
        padding-bottom: 0px;
    }

   /* .myaccount_table td img {
        max-width: 45px;
    } */

    #module-wkserialkeymanager-wkserialkeyorderkey .hidden-md-up .myacc_left .container,
    #module-wkserialkeymanager-wkserialkeyorderkey .hidden-md-up .myAccountContent,
    #module-gkkeymanager-library .hidden-md-up .myacc_left .container,
    #module-gkkeymanager-library .hidden-md-up .myAccountContent {
        padding: 16px !important;
    }

    .hidden-md-up tr td:first-child {
        font-size: 14px !important;
        width: 35%;
    }

    .key_container {
        display: block !important;
    }

    .activation_guide {
        float: none !important;
    }

    .key-container {
        margin-bottom: 6px;
    }

    .table td:not(:last-child)::after, .table th:not(:last-child)::after {
        border-right: 1px solid #e7e5eb;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey .hidden-md-up tr.odd,
    #module-gkkeymanager-library .hidden-md-up tr.odd {
        background: var(--back_light_purple_transparent) !important;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey .hidden-md-up tr.first-element td,
    #module-gkkeymanager-library .hidden-md-up tr.first-element td {
        padding-top: 20px;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey .hidden-md-up tr.last-element td,
    #module-gkkeymanager-library .hidden-md-up tr.last-element td {
        padding-bottom: 20px;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey #myacc_content-header h1 p,
    #module-gkkeymanager-library #myacc_content-header h1 p {
        font-size: 15px;
    }
    #module-wkserialkeymanager-wkserialkeyorderkey #myacc_content-header h1 p a,
    #module-gkkeymanager-library #myacc_content-header h1 p a {
        font-size: 14px;
    }

    #module-wkserialkeymanager-wkserialkeyorderkey #main > .container,
    #module-gkkeymanager-library #main > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .custom-table-controls-top .table-search label {
        width: 100%;
    }
    .custom-table-controls-top .table-search input {
        width: 100% !important;
        margin-top: 16px;
    }

    .custom-table-controls-top .controls-top-row {
        margin-bottom: 16px;
    }

    .custom-table-controls-bottom {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .custom-table-controls-bottom > div:nth-child(1) {
        order: 2;
        width: 100%;
    }

    .custom-table-controls-bottom > div:nth-child(2) {
        order: 1;
        width: 100%;
    }

    .custom-table-controls-bottom .showing-entries {
        text-align: center;
        margin-top: 8px;
    }

    .key-container.bordered {
        border: 1px solid var(--purple_default);
        border-radius: 8px;
    }
}

/* My Wishlist */
#module-pk_favorites-account .products.row {
    margin: 0 !important;
    gap: 20px !important;
}

#module-pk_favorites-account .product-item {
    padding: 0 !important;
    margin: 0 !important;
}

#favoriteproducts_block_account .product-item.product-miniature .thumbnail-container {
    max-width: unset;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    #module-pk_favorites-account .product-item {
        width: calc(33.3333% - 13.33px) !important; /* 3 columns with 20px gap */
    }
}

@media only screen and (max-width: 767px) {
    #module-pk_favorites-account .myacc_content {
        background-color: unset;
    }

    #module-pk_favorites-account .myacc_content .page-header {
        border-radius: 12px;
        background-color: white;
    }

    #module-pk_favorites-account .myAccountContent {
        padding: 16px 0px;
    }
}


@media only screen and (min-width: 1024px) {
    #module-pk_favorites-account .product-item {
        width: calc(25% - 15px) !important; /* 4 columns with 20px gap */
    }
}

.myacc_content #notifications {
    margin-top: unset;
}

/* Override Bootstrap breakpoints for preorder table to prevent overflow on tablets */
@media (min-width: 768px) and (max-width: 839px) {
    #preorder_list.hidden-sm-down {
        display: none !important;
    }
    #preorder_list.hidden-md-up {
        display: table !important;
    }
    /* Remove alternating row background for mobile table */
    #preorder_list.hidden-md-up tr:nth-of-type(even) {
        background: unset !important;
    }

    #preorder_list.hidden-md-up td {
        padding: 12px;
        vertical-align: middle;
        border-bottom: 1px solid #e7e5eb;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }

    #preorder_list.hidden-md-up td:not(:last-child)::after {
        border-right: 1px solid #e7e5eb;
    }

    #preorder_list.hidden-md-up tr.odd {
        background: var(--light_white_purple) !important;
    }

    #preorder_list.hidden-md-up tr td:first-child {
        color: var(--dark_blue);
        font-family: Manrope;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 700 !important;
        line-height: 19px !important;
        width: 40%;
    }

    #preorder_list.hidden-md-up tr td[colspan] {
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }
}

/* Reduce padding for preorder table at 840px-965px to prevent overflow */
@media (min-width: 840px) and (max-width: 965px) {
    #preorder_list.hidden-sm-down th {
        padding: 8px !important;
    }
    #preorder_list.hidden-sm-down td {
        padding: 8px 12px !important;
    }
}

/* Reduce padding for preorder table at 992px-1199px to prevent overflow when additional sections appear */
@media (min-width: 992px) and (max-width: 1199px) {
    #preorder_list.hidden-sm-down th {
        padding: 8px !important;
    }
    #preorder_list.hidden-sm-down td {
        padding: 8px 10px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #preorder_list.hidden-sm-down td {
        padding: 12px 19px !important;
    }
}

#preorder_list td {
    text-align: center;
}

/* Profile Page (Identity) - 2 Column Layout */
.profile-form-two-column .profile-form-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-form-two-column .profile-form-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.profile-form-two-column .profile-form-col {
    flex: 1;
    min-width: 0;
}

/* Form Field Styling */
.profile-form-two-column .form-group {
    gap: 2px;
    margin-bottom: 0;
}

#customer-form > div > div:nth-child(5) {
    margin-top: 8px !important;
}

.profile-form-two-column .form-footer {
    margin-top: 24px;
}

.profile-form-two-column label {
    color: var(--dark_blue);
    font-family: 'Manrope', sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 20px;
}

.profile-form-two-column input[type="text"],
.profile-form-two-column input[type="email"],
.profile-form-two-column input[type="password"],
.profile-form-two-column input[type="date"],
.profile-form-two-column select {
    background: white;
    border: 1px solid var(--dark_blue);
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: var(--dark_blue);
    width: 100%;
    box-sizing: border-box;
}

.profile-form-two-column input::placeholder {
    color: var(--dark_blue);
    opacity: 0.6;
}

.profile-form-two-column input:focus,
.profile-form-two-column select:focus {
    background: #EEECFB;
    outline: none;
    border-color: #0D0034;
}

/* Birthday field helper text */
.profile-form-two-column .form-group .form-control-comment {
    color: #312770;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    opacity: 0.7;
    margin-top: 4px;
}

/* Password field styling */
.profile-form-two-column .field-password-policy {
    width: 100%;
}

.profile-form-two-column .input-group {
    position: relative;
    width: 100%;
}

.profile-form-two-column .input-group input {
    padding-right: 50px;
}

.profile-form-container .form-footer {
    margin-top: 24px;
}

/* Mobile Responsive - Single Column */
@media (max-width: 767px) {
    .profile-form-two-column .profile-form-container {
        padding: 16px;
        gap: 20px;
    }

    .profile-form-two-column .profile-form-row {
        flex-direction: column;
        gap: 15px;
    }

    .profile-form-two-column input[type="text"],
    .profile-form-two-column input[type="email"],
    .profile-form-two-column input[type="password"],
    .profile-form-two-column input[type="date"],
    .profile-form-two-column select {
        padding: 12px 16px;
        font-size: 16px;
    }

    .profile-form-two-column .btn-primary {
        padding: 14px 40px;
        font-size: 16px;
    }
}

/* Tablet Responsive */
@media (min-width: 768px) and (max-width: 991px) {
    .profile-form-two-column .profile-form-container {
        padding: 18px;
    }

    .profile-form-two-column .profile-form-row {
        gap: 16px;
    }
}

/*My Account Sidebar and Layout - Moved from all.css*/
.myacc_left {
    min-height: 500px;
    padding: 20px 20px 80px 20px;
    background: #fff;
    border-radius: 20px;
    border: none;
}

.myacc_left .myacc_left_header {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    color: var(--dark_blue);
    border-bottom: 1px solid rgba(13, 0, 52, 0.2);
}
.myacc_left .myacc_left_header .myacc_name_link{
    display: flex;
}
.myacc_left .myacc_left_header .myacc_name{
    border-bottom: unset !important;
    padding-bottom: 0;
    color: var(--Dark-Blue, #0D0034);
    font-family: Exo;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
}
.myacc_left .myacc_signed_in_with {
    color: var(--Dark-Blue, #0D0034);
    font-weight: 700;
    line-height: 20px;
    margin-top: 16px;
}


.myacc_left .links {
    margin-top: 0 !important;
}

.myacc_left .links a.logout {
    margin-top: 0;
    padding-top: 16px ;
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 20px;
    width: calc(100% - 40px);
    color: var(--Dark-Blue, #0D0034);
    font-size: 20px;
    text-transform: capitalize;
}

.myacc_left .links a {
    order: 500;
}

.myacc_left .links .logout {
    order: 600;
}

.myacc_left #favorites-link {
    order: 350;
}

.myacc_left #keys-link {
    order: 20;
}

.myacc_left #history-link {
    order: 10;
}

.myacc_left #preorderLink {
    order: 40;
}

.myacc_name {
    border-bottom: 1px solid rgba(13, 0, 52, 0.2) !important;
}

.myacc_left .links svg {
    margin-right: 9px;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--dark_blue);
    transition: color 0.3s ease, transform 0.3s ease;
}

.myacc_left .links a {
    color: var(--dark_blue);
    display: flex;
    align-items: center;
}

.myacc_left .links a.activePage {
    color: var(--accent_purple);
}

.myacc_left .links a.activePage svg {
    color: var(--accent_purple);
}

.myacc_left .links a:hover {
    color: var(--accent_purple);
}

.myacc_left .links a:hover svg {
    color: var(--accent_purple);
    transform: translateX(4px);
}

.myacc_content .page-header a {
    color: var(--accent_purple);
    font-weight: 700 !important;
}

.myacc_content {
    background: #fff;
    padding: 0;
    margin-left: 20px;
    border-radius: 20px !important;
    width: calc(75% - 20px);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}
#history .myacc_content {
    min-height: auto;
}

.myacc_content > .myAccountContent {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.myacc_content header {
    border-radius: 20px 20px 0 0;
    border: 1px solid rgba(189, 189, 189, 0.20) !important;
    background: rgba(238, 236, 251, 0.50);
    padding: 16px 20px;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.myacc_content header h1 {
    margin-bottom: 0 !important;
}

.page-my-account #main,
.page-customer-account #main,
#module-pk_favorites-account #main,
#module-preorder-preorderorderdetails #main,
#module-wkserialkeymanager-wkserialkeyorderkey #main,
#module-gkkeymanager-library #main
{
    background-color: #EEECFB !important;
    padding-top: 40px !important;
}

body.page-my-account #top_column,
body.page-customer-account #top_column,
body#history #top_column,
body#module-pk_favorites-account #top_column,
body#module-psgdpr-gdpr #top_column,
body#module-preorder-preorderorderdetails #top_column,
body#module-wkserialkeymanager-wkserialkeyorderkey #top_column,
body#module-gkkeymanager-library #top_column {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.roy-reload.animsition {
    background: #EEECFB !important;
}

/*Table Styles for My Account - Moved from all.css*/
.table td, .table th {
    border-top: 0 !important;
    position: relative;
    padding: 12px 25px;
}

.table td {
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    font-family: "Manrope", serif;
    color: var(--dark_blue);
}

.table th {
    border-bottom: 1px solid #BDBDBD33 !important;
    color: var(--dark_blue);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    font-family: "Manrope", serif;
}

.table thead tr {
    background: rgba(238, 236, 251, 0.50);
}

.table {
    overflow: hidden;
    border: 1px solid var(--light_purple) !important;
    border-radius: 20px;
    border-spacing: 0;
    border-collapse: inherit;
}

#history .table {
    margin-bottom: 0;
}

#order-history-mobile {
    border-radius: 8px;
}

#history .table.hidden-sm-down {
    border-radius: 12px;
}

#order-history-mobile .no-orders {
   padding: 26px 5px !important;
}

.table td:not(:last-child)::after,
.table th:not(:last-child)::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 24px);
    border-right: 2px solid #e7e5eb;
}

.table tr:nth-of-type(even) {
    background: var(--back_light_purple_transparent) !important;
}

table#gkkeymanagerview-desktop tr:nth-of-type(even) {
    background: none !important;
}

#history .table td, #history .table th {
    padding-left: 8px;
    padding-right: 8px;
}

#history .table td:first-child, #history .table th:first-child {
    padding-left: 16px;
}

#history .table td:last-child, #history .table th:last-child {
    padding-right: 16px;
}

#preorder_list td.order-actions a {
    background: var(--purple_default);
    border-color: var(--purple_default);
    padding: 10px 26px !important;
    border-radius: 6px;
}

.table .thead-default th {
    background: transparent;
    font-weight: 700 !important;
}

/* Additional My Account-specific rules - Moved from all.css */
.page-customer-account #main h1, #module-pk_favorites-account h1 {
    display: block !important;
}

.myacc_left .links a.logout, .side_menu #side_acc_wrap .acc_ul > a.logout:not(.acc_text_create):not(.acc_text_login) {
    border-color: #2418484D;
}

.page-customer-account #content .forgot-password {
    font-size: 16px !important;
    padding-bottom: 20px !important;
}

.page-customer-account {
    background: var(--back_light_purple);
}

.page-customer-account main {
    overflow: hidden;
}

/*Wishlist*/

#module-pk_favorites-account #top_column {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Always show remove button on mobile and tablet */
@media only screen and (max-width : 991px) {
    #favoriteproducts_block_account .product-item .remove-fav.btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .order-status-container {
        padding: 8px 0;
    }

    #history .table td:last-child, #history .table th:last-child {
        padding-right: 8px;
    }
    #history .table {
        margin-bottom: 0px;
    }

    .status-text {
        font-size: 13px;
        line-height: 16px;
    }

    #order-history-mobile thead {
        display: none !important;
    }

    #order-history-mobile tr td:first-child {
        color: var(--dark_blue);
        font-family: Manrope;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 700 !important;
        line-height: 19px !important;
        width: 40%;
    }

    #order-history-mobile td {
        padding: 12px;
        vertical-align: middle;
    }

    #order-history-mobile tr:nth-of-type(even) {
        background: unset !important;
    }

    #order-history-mobile td {
        border-bottom: 1px solid #e7e5eb;
    }

    #order-history-mobile td:not(:last-child)::after {
        border-right: 1px solid #e7e5eb;
    }

    #order-history-mobile tr.odd {
        background: var(--light_white_purple) !important;
    }

    #order-history-mobile td.order-actions a {
        background: var(--accent_purple);
        border-color: var(--accent_purple);
        padding: 10px 26px !important;
        border-radius: 6px;
        width: 100%;
        text-transform: uppercase;
        font-size: 16px;
        font-family: Exo;
        font-weight: 700;
        line-height: 24px;
    }
}

@media (max-width: 991px) {
    .myacc_left,
    .myacc_content {
        min-height: auto;
    }

    .myacc_content {
        width: 100%;
        margin-left: 0;
        margin-top: 30px;
    }
}

/* Regular key reveal button - Figma design (node 8640-116414) */
.regular-key-reveal {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 6px 6px 6px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background-color: #9747FF;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.regular-key-reveal span {
    flex: 1 0 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

/* Hover state from Figma (node 8640-116416) */
.regular-key-reveal:hover {
    background-color: #5813A2;
    /* border-color: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(19, 13, 51, 0.39); */

    border-color: #cab5e2;
    box-shadow: 0 8px 15px 0 rgba(255, 255, 255, 0.25) inset, 0 0 10px 0 rgba(19, 13, 51, 0.39);

}

/* Inner glow effect on hover */
/* .regular-key-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0px 8px 15px 0px rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
} */

.regular-key-reveal:hover::after {
    opacity: 1;
}

.regular-key-reveal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.regular-key-reveal:disabled:hover {
    background-color: #9747FF;
    border-color: transparent;
    box-shadow: none;
}

.regular-key-reveal:disabled:hover::after {
    opacity: 0;
}

/* Override .key-container styles when regular-key-reveal is inside (same as mysterybox-reveal) */
.key-container:has(.regular-key-reveal) {
    background: none;
    padding: 0;
    border: none;
}

/* Hide copy button when key not revealed */
.key-container:has(.regular-key-reveal) .copy-button {
    display: none;
}