header {
    position: sticky;
    top: 0;
    transition: z-index .5s step-end;
    transition-delay: 0s;
    width: 100%;
    z-index: 3;
    display: flex;
    padding: 10px 20px 15px;
}
.logo {
    flex-basis: 0;
    flex-grow: 1;
    justify-content: flex-start;
}
.logo svg {
    inline-size: 150px;
}
.logo img {
    height: 45px;
    width: auto;
}

.main-page-container {
    max-width: 100vw;
    margin-top: 0px;
    /*background-color: red;*/
}

.layout {           
    display: grid;
    grid-template: "main aside" 1fr/9fr minmax(400px,1fr);
    grid-gap: 0 48px;
    padding-inline-end: 48px;
    scroll-margin-top: 52px;
    scrollbar-width: none;
    transition: none;
}
.render {
    grid-area: main;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
    position: sticky;

    height: calc(100vh - 70px);
    top: 70px;

    background: white;
}

.no-header .render {
    height: 100vh;
    top: 0px;
}

.render-logo {
    padding: 10px 20px 15px;
}
.render-logo img {
    max-width: 150px;
    height: auto;
}

#image-wrapper {
    max-height: 100%;
    height: 100%;
}

.options {
    grid-area: aside;
    -webkit-overflow-scrolling: touch;
    overflow: visible !important;

    margin: 20px 0px 0px;
    /*padding-bottom: 130px;*/
    position: relative;
}
.render img.render-image {
    max-height: 100%;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: top;
    display: block;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
        padding: 0 var(--gapSmall);
        grid-template: none;
        grid-gap: 0;
        display: block;
    }
    .render {
        order: 1;
        grid-area: none;
        height: auto;
        max-height: auto;
        overflow: auto;
        position: relative;
        height: auto;
    }
    .no-header .render {
        height: auto;
    }
    #image-wrapper {
        max-height: auto;
        height: auto;
    }

    .options {
        order: 2;
        grid-area: none;
        overflow: auto;
        padding-bottom: 0;
    }

    .options #countriesGrid {
        max-height: 200px;
    }
}



/* --- Option card (radio) --- */
.opt {
    position: relative;
    border: 1px solid var(--txt-light);
    border-radius: 10px;
    padding: 12px;
    
    cursor: pointer;
    /*background: #fff;*/
    margin-top: var(--marBotBase);
}

.opt .opt-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.opt:hover {
    background: #fafafa;
}

.opt-left,
.opt-right {
    display: flex;
    gap: 10px;
    /*align-items: flex-start;*/
}

.opt-right {
    margin-left: gapXsmall;
}

.opt-title {
    font-weight: 600;
    line-height: 1.1;
}

.opt-sub {
    font-size: .85rem;
    color: #6c757d;
    margin-top: 2px;
}

.opt-price {
    font-size: .85rem;
    color: #6c757d;
    white-space: nowrap;
    flex-grow: 1;
    text-align: right;
}

.opt input {
    margin-top: 2px;
}

/* POPHOVER */
.opt .popover-container {
    position: absolute;
    top: 50%;
    left: -30px;
    /* background: red; */
    width: 25px;
    height: 25px;
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    font-size: var(--fontLead);
}

.opt .popover-container button {
    width: 100%;
    padding: 0;
}
.popover-content {
    display: none;
}

@keyframes slide-top {
    0% { opacity: 0; transform: translateY(-15%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-right {
    0% { opacity: 0; transform: translateX(15%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes slide-bottom {
    0% { opacity: 0; transform: translateY(15%); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-left {
    0% { opacity: 0; transform: translateX(-15%); }
    100% { opacity: 1; transform: translateX(0); }
}

.popover {
    padding: var(--configCardPaddY);
    border: 1px solid var(--popHoverBorder);
    border-radius: 16px;
    background: var(--popHoverBk);
    color: var(--txt-light);
    /*box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);*/
    max-width: 300px;
    z-index: 1000;
    font-size: var(--fontSmall);

    box-shadow: 0px 9px 12px 0px #00000040;
    backdrop-filter: blur(20px)
}
.popover--top { margin-top: -16px; animation: 0.4s slide-top; }
.popover--top::before, .popover--top::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px;
    border: 8px solid transparent; border-top-color: var(--popHoverBk);
}
.popover--top::before { margin-top: 1px; border-top-color: var(--popHoverBorder); }
.popover--right { margin-left: 16px; animation: 0.4s slide-right; }
.popover--right::before, .popover--right::after {
    content: ""; position: absolute; top: 50%; right: 100%; margin-top: -8px;
    border: 8px solid transparent; border-right-color: var(--popHoverBk);
}
.popover--right::before { margin-right: 1px; border-right-color: var(--popHoverBorder); }
.popover--bottom { margin-top: 16px; animation: 0.4s slide-bottom; }
.popover--bottom::before, .popover--bottom::after {
    content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -8px;
    border: 8px solid transparent; border-bottom-color: var(--popHoverBk);
}
.popover--bottom::before { margin-bottom: 1px; border-bottom-color: var(--popHoverBorder); }
.popover--left { margin-left: -16px; animation: 0.4s slide-left; }
.popover--left::before, .popover--left::after {
    content: ""; position: absolute; top: 50%; left: 100%; margin-top: -8px;
    border: 8px solid transparent; border-left-color: var(--popHoverBk);
}
.popover--left::before { margin-left: 1px; border-left-color: var(--popHoverBorder); }

.popover-trigger {
    /*
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    */
    background: transparent;
    cursor: pointer;
    color: var(--txt-light);
    font-size: var(--fontLead);
}
/*.popover-trigger:hover { background: #0056b3; }*/

/* Image option list */
.opt-group {
    position: relative;
    border: 1px solid var(--txt-light);
    border-radius: 10px;
    padding: var(--configCardPaddY) var(--configCardPaddX) calc(var(--configCardPaddY)/2);
    margin-top: var(--configCardPaddY);
}
.opt-group-label {
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--configCardPaddX);
    transform: translateY(-50%);
    justify-content: space-between;
}
.opt-group-label > div {
    background: var(--configCardBkAside);
    padding: 3px 5px;
    font-size: var(--fontSmall);
    color: var(--txt-light);
}

.opt-group-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.8rem;
    padding: 4px 0px;
}
.opt-group-list-elem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
}

.dot {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--popHoverBk);
    display: inline-block;
    box-shadow: inset 3px -5px 9px rgba(0, 0, 0, 0.2);
    filter: blur(0.9px);
    animation: 1.5s ease-in;
}
.dot:hover {
    filter: blur(0px);  
    animation: 1.5s ease-in;  
}
input[type="radio"].color-radio:checked+.dot {
    outline: 1px solid var(--primary);
    outline-offset: 2px;
    filter: blur(0px);
}
input[type="radio"].color-radio:checked~.dot-label {
    color: var(--primary);
}
input[type="radio"].color-radio:checked+.dot:after {
    content: "v";
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    width: 11px;
    height: 11px;
    line-height: 11px;
    font-size: 8px;
}



#goPayment-wrapper {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
    /*left: 0;*/
    z-index: 2;
    width: 100%;
    padding: 20px var(--gapBig) 0;
}

#goPayment-wrapper .payment-card {
    width: 100%;
    padding: var(--configCardPaddY) var(--configCardPaddX);
    /*background: var(--configCardBkAside);*/
    border: 1px solid var(--configCardBkBorder);
    border-top-right-radius: var(--configCardBorderRad);
    border-top-left-radius: var(--configCardBorderRad);
    box-shadow: 0px -10px 20px -9px #00000040;
    /*backdrop-filter: blur(50px);*/

    background: rgba(243,243,243, 0.6);
    backdrop-filter: blur(2px) saturate(180%);
    box-shadow: 0px -10px 20px -9px #00000040, 
              inset 0 4px 20px rgba(243,243,243, 0.3);
}  

/* PayPal Loader */
#paymentLoader {
    position: fixed;
    z-index: 100;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    display: none;
}
.paymentLoaderWrap {
    width: 60px;
    height: 60px;
    position:relative;
    top: 50%;
    left: 50%;
    transform: translate(-24px, -24px);
}
.paymentLoaderSpinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;

    top: 50%;
    left: 50%;
}
.paymentLoaderSpinner::before , .paymentLoaderSpinner::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 8px solid #333;
    animation: prixClipFix 2s linear infinite ;
}
.paymentLoaderSpinner::after{
    border-color: #e3e80a;
    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
    inset: 12px;
}

@keyframes rotate {
    0%   {transform: rotate(0deg)}
    100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

#image-wrapper {
    position: relative;
}

#image-loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

#image-loading-overlay.visible {
    display: flex !important;
}

.image-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}