/*
    Set styles for UUCD PDP
*/


/* ======= Theme styles - Start ====== */
:root .PA {
    /* icons */
    --pdp-uucd-icon-back: url("https://cdn.photoaffections.com/images/pdp/icon-arrow-back.svg");
}

:root .PA .dialog-ai-sticker {
    /* icons */
    --aisticker-icon-transform: url("https://cdn.photoaffections.com/images/pdp/icon-arrow-transform.svg");
    --aisticker-icon-selected-size: 20px;
    --aisticker-icon-selected: url("https://cdn.photoaffections.com/images/pdp/checkmark-circle-solid.svg");

    /* spacing system */
    --aisticker-gap-xs: 4px;
    --aisticker-gap-sm: 8px;
    --aisticker-gap-base: 16px;
    --aisticker-gap-md: 24px;
    --aisticker-gap-lg: 32px;
    --aisticker-gap-xl: 48px;
    --aisticker-gap-2xl: 64px;
    
    /* border radius system */
    --aisticker-radius-sm: 5px;
    --aisticker-radius-base: 8px;
    --aisticker-radius-lg: 10px;
    --aisticker-radius-xl: 16px;
    
    /* font size system */
    --aisticker-fontsize-xs: 10px;
    --aisticker-fontsize-sm: 12px;
    --aisticker-fontsize-base: 14px;
    --aisticker-fontsize-md: 16px;
    --aisticker-fontsize-lg: 17px;
    --aisticker-fontsize-xl: 20px;
    
    /* line height system */
    --aisticker-lineheight-xs: 16px;
    --aisticker-lineheight-sm: 19px;
    --aisticker-lineheight-base: 20px;
    --aisticker-lineheight-md: 24px;
    --aisticker-lineheight-lg: 26px;
    
    /* component specific sizes */
    --aisticker-panel-minheight: 556px;
    --aisticker-button-width: 403px;
    --aisticker-icon-size-sm: 16px;
    --aisticker-icon-size-base: 24px;
    --aisticker-checkbox-size: 15px;
    --aisticker-progress-height: 10px;
    --aisticker-stickers-width: 270px;
    --aisticker-stickers-height: 420px;
    --aisticker-stickers-list-width: 230px;
    --aisticker-stickers-max-height: 380px;
    --aisticker-sticker-item-size: 112px;
    
    /* layout specific sizes */
    --aisticker-exhibition-icon-size: 40px;
    --aisticker-overlay-width: 812px;
    --aisticker-uploading-image-width: 592px;
    --aisticker-uploading-image-height: 415px;
    --aisticker-progress-width: 400px;
    --aisticker-fail-image-width: 472px;
    --aisticker-fail-image-height: 331px;
    --aisticker-replace-width: 348px;
    --aisticker-transform-before-size: 126px;
    --aisticker-transform-arrow-width: 24px;
    --aisticker-transform-arrow-height: 17px;
    --aisticker-transform-after-width: 198px;
    --aisticker-transform-after-height: 139px;
    
}

/* Dialog Container Variables & Styles */
:root .PA .ui-dialog[aria-describedby="webUploadPhoneDialog"] {
    /* dialog specific variables */
    --dialog-gap-sm: 6px;
    --dialog-gap-base: 1px;
    --dialog-gap-lg: 16px;
    --dialog-gap-xl: 25px;
    --dialog-fontsize-sm: 12px;
    --dialog-titlebar-top: 16px;
}

/* Web Upload Photo Dialog Variables & Styles */
:root .PA .web-upload-photo-dialog {
    /* dialog specific variables */
    --dialog-gap-xs: 4px;
    --dialog-gap-sm: 8px;
    --dialog-gap-base: 10px;
    --dialog-gap-md: 12px;
    --dialog-gap-lg: 15px;
    --dialog-gap-xl: 20px;
    --dialog-radius-sm: 4px;
    --dialog-radius-base: 8px;
    --dialog-fontsize-xs: 10px;
    --dialog-fontsize-sm: 12px;
    --dialog-fontsize-lg: 18px;
    --dialog-qr-size: 142px;
    --dialog-qr-margin: 15px;
    --dialog-step-padding: 16px;
    --dialog-step-margin: 5px;
    --dialog-sms-input-width: 118px;
    --dialog-sms-input-padding: 3px 8px;
    --dialog-sms-btn-width: 98px;
    --dialog-sms-btn-padding: 6px;
}

/* Photos Upload Wrapper Variables & Styles */
:root .PA .photos-upload-wrapper {
    --upload-gap-xs: 3px;
    --upload-gap-sm: 6px;
    --upload-gap-base: 8px;
    --upload-gap-md: 12px;
    --upload-gap-lg: 16px;
    --upload-gap-xl: 20px;
    --upload-radius-sm: 4px;
    --upload-radius-base: 6px;
    --upload-radius-lg: 10px;
    --upload-fontsize-xs: 10px;
    --upload-fontsize-sm: 12px;
    --upload-fontsize-base: 14px;
    --upload-fontsize-xl: 19px;
    --upload-lineheight-sm: 13px;
    --upload-lineheight-md: 16px;
    --upload-lineheight-lg: 1.9;
    --upload-lineheight-xl: 25px;
    --upload-height: 350px;
    --upload-icon-width: 50px;
    --upload-icon-height: 48px;
    --upload-btn-width: 228px;
    --upload-before-padding: 62px;
    --upload-list-height: 223px;
    --upload-list-width: 776px;
    --upload-item-size: 116px;
    --upload-item-border: 3px;
    --upload-remove-btn-size: 20px;
    --upload-remove-btn-offset: -8px;
    --upload-scrollbar-width: 5px;
    --upload-border-medium: 2px;
    --upload-border-dashed: 2px;
}

/* Wrapping Paper Size Variables & Styles */
:root .PA .wrapping-paper-sizes-dialog-container {
    /* spacing system */
    --dialog-gap-xs: 10px;
    --dialog-gap-sm: 12px;
    --dialog-gap-base: 16px;
    --dialog-gap-md: 18px;
    --dialog-gap-lg: 28px;
    --dialog-gap-xl: 30px;
    --dialog-gap-2xl: 33px;
    --dialog-gap-3xl: 37px;
    --dialog-gap-4xl: 58px;
    
    /* font size system */
    --dialog-fontsize-sm: 14px;
    --dialog-fontsize-base: 15px;
    --dialog-fontsize-lg: 18px;
    --dialog-fontsize-xl: 20px;
    
    /* line height system */
    --dialog-lineheight-base: 16px;
    --dialog-lineheight-lg: 24px;
    
    /* component specific sizes */
    --dialog-image-max-width: 300px;
    --dialog-image-padding: 11px;
    --dialog-list-margin-left: 30px;
    --dialog-btn-padding-h: 60px;
}

.uucd_detail_page .row{
    margin-left: 0;
    margin-right: 0;
}
/* ======= Theme styles - End ====== */

.uucd_detail_page  .breadcrumbs {
    margin: 0;
}
.ui-dialog {
    max-width: 96%;
}

html .component-selectable-elements.box .container-selection-items .container-option-item .option-item {
    position: relative;
}

html .details_page .container-favorite-icon .btn_unfav {
    height: 3rem;
    width: 3rem;
    cursor: pointer;
    background-position: unset !important;
}

html .details_page .container-gallery .new-tag{
    display: none;
}

html .details_page .quantity-input-text{
    background-color: unset;
}
/* ======= UUCD PDP Options Common - Start ====== */
/* - Color option */
html .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item.selected,
html .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item+.Icon-option-item.selected {
    border: var(--border-width-base) solid var(--border-color-base) !important;
    position: relative;
}

html .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item.selected::after,
html .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item+.Icon-option-item.selected::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(/templates/images/icons/icon-checkmark.svg) no-repeat;
    background-size: 100% 100%;
}

html .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item.white-color-option.selected::after {
    background: url(/templates/images/icons/icon-checkmark-black.svg) no-repeat;
    background-size: 100% 100%;
}

/* uucd Text/Multiple option */
html .component-selectable-elements.box .container-selection-items .container-option-item.Text-option-item,
html .component-selectable-elements.box .container-selection-items .container-option-item.Multiple-option-item {
    width: auto;
    height: 4rem;
    min-width: 4rem;
}

html .container-selection-items .container-option-item.Multiple-option-item .option-multiple {
    text-align: center;
}

/* - sold out */
html .details_page .component-selectable-elements.box .container-selection-items .container-option-item.sold-out {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--color-pa-light-grey-10);
    background-color: #eeeeee;
    cursor: default;
    opacity: .7;
}

html .details_page .component-selectable-elements.box .container-selection-items .container-option-item.sold-out .option-color {
    filter: grayscale(50%);
}

html .details_page .component-selectable-elements.box .container-selection-items .container-option-item.sold-out::after {
    content: ' ';
    position: absolute;
    width: 141.4%;
    border-bottom: 2px solid var(--color-pa-light-grey-10);
    box-shadow: 0 0 1px -.5px var(--color-pa-light-grey-10);
    transform: rotate(-45deg);
}

.details_page .component-selectable-elements.box .container-selection-items .container-option-item.sold-out>div::after {
    display: none;
}

html .tooltipster-sidetip.tooltipster-shadow .tooltipster-content {
    color: var(--color-pa-dark-grey);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
}

/* ======= UUCD PDP Options Common - End ====== */



/* ======= Multiple Size choice - Start ====== */
html .multiple-choice-content .summary-panel .price-savings .label::before {
    display: none;
}

/* ======= Multiple Size choice - End ====== */




/* ======= UCD Dialog UI override - Start ====== */
/* - upload photo dialog */
html .ui-dialog.designerDialog .ui-dialog-content {
    padding: 0.6rem 1.2rem;
}

html .ui-dialog.designerDialog #no_flash_upload_method {
    float: none !important;
    display: block !important;
}

/* - uucd dialog common */
html .ui-dialog.uucd-related-dialog {
    border-radius: 1.4rem;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-title {
    font-size: 1.8rem;
    margin: 0.6rem 0;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-title::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url("/templates/images/icons/icon-warning.png") no-repeat;
    background-size: 100% 100%;
    margin-right: 0.8rem;
    vertical-align: middle;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-titlebar {
    padding-bottom: 0.2rem;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-titlebar-close {
    right: 1.2rem;
    margin-top: -1.4rem;
    opacity: 0.6;
}

html .ui-dialog.uucd-related-dialog #showConfirm,
html .ui-dialog.uucd-related-dialog .ui-dialog-content {
    text-align: center;
    color: #010822;
    font-size: 1.4rem;
    padding-bottom: 1.8rem;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-buttonpane {
    background: none;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-buttonset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
}

html .ui-dialog.uucd-related-dialog.button-reverse .ui-dialog-buttonset {
    flex-direction: row-reverse;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-buttonpane button {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    margin: 0;
}

html .ui-dialog.uucd-related-dialog .ui-dialog-buttonpane button.cancel-btn {
    background: #f5f5f5;
    color: #494e61;
    min-width: 12.6rem;
}

/* ======= UCD Dialog UI override - End ====== */


/* ======= PDP UCD Editor Area - Start ====== */
html .container-ucd-editor-main #ucd-editor-main {
    outline: 0.2rem solid rgba(204, 204, 204, 0.20);
}

html .container-ucd-perz.personalize-area {
    border-radius: var(--border-radius-middle);
    background: rgba(250, 250, 250, 0.96);
}

html .container-ucd-perz .title {
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: var(--font-weight-bold);
}

html .container-ucd-perz.personalize-area.dialog-displayed {
    padding: 1.6rem;
    margin-top: 1.6rem;
}

html .container-ucd-perz:has(.container-ai-sticker-hint) {
    padding: 1.6rem;
    margin-top: 1.6rem;
}

/* ======= PDP UCD Editor Area - End ====== */


/* ======= Back UCD buuton - Start ====== */
html .container-back-to-ucd-editor {
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
    color: var(--color-primary);
}

html .container-back-to-ucd-editor>a {
    border-radius: var(--border-radius-base);
    border: 0.2rem solid var(--color-primary);
    padding: 1rem 4rem;
    line-height: 2.4rem;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
}

html .container-back-to-ucd-editor>a::before {
    content: '';
    width: 2.6rem;
    height: 1.6rem;
    background-image: var(--pdp-uucd-icon-back);
    display: block;
    background-size: 100% 100%;
    margin-right: 0.8rem;
}

/* ======= Back UCD buuton - End ====== */

/* ======= Advanced UCD link - Start ====== */
html .container-advanced-designer {
    margin-top: 1.6rem;
}

html .container-advanced-designer>a {
    text-align: center;
    color: var(--color-primary);
    font-size: 1.6rem;
    line-height: 2.4rem;
}

html .ui-dialog.dialog-go-advanced-designer .ui-dialog-buttonpane button {
    font-size: 1.3rem;
}
/* ======= Advanced UCD link - End ====== */


/* ======= Ai Sticker Override - Start ====== */
html .container-ai-sticker {
    margin-top: 16px;
}

html .container-ai-sticker-hint {
    font-size: 14px;
    line-height: 16px;
    font-weight: var(--font-weight-bold);
    margin-top: 24px;
}

html .container-ai-sticker-hint .desktop-only {
    display: block;
}

html .container-ai-sticker-hint .mobile-only {
    display: none;
}

html .container-ai-sticker>a {
    color: var(--color-primary);
    font-size: 14px;
    line-height: 16px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

.ai-sticker-dialog .panel-upload .upload-header p {
    margin-bottom: 0;
}
/* ======= Ai Sticker Override - End ====== */


/* mobile */
@media (max-width: 575px) {

    /* ======= PDP UCD Editor Area - Start ====== */
    html .container-ucd-editor-main #ucd-editor-main {
        overflow: hidden;
        height: 45rem;
    }

    /* ======= PDP UCD Editor Area - End ====== */

    /* ======= UUCD PDP Options Common - Start ====== */
    .details_page .component-selectable-elements .container-selection-items .container-option-item {
        background: var(--color-white);
    }
    /* - color option */
    .details_page .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item~.Icon-option-item,
    .details_page .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item {
        width: 8.2vmin;
        height: 8.2vmin;
        min-width: 8.2vmin;
        border-radius: 50%;
    }

    /* ======= UUCD PDP Options Common - End ====== */

    /* ======= Ai Sticker Override - Start ====== */
    .ui-dialog.ai_sticker_upload_dialog {
        border: none !important;
        box-shadow: none !important;
    }
    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-content,
    .ui-dialog[aria-describedby="ai_sticker_replace_dialog"] .ui-dialog-content {
        width: 100% !important;
    }

    .ai-sticker-replace-dialog .replace-stickers-container .close {
        float: unset;
    }

    html .container-ai-sticker-hint .desktop-only {
        display: none;
    }

    html .container-ai-sticker-hint .mobile-only {
        display: block;
    }

    .ui-dialog.ai_sticker_upload_dialog {
        box-shadow: none;
    }

    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-titlebar {
        position: relative;
    }

    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-title {
        display: none !important;
    }

    .ui-dialog.ai_sticker_upload_dialog button.ui-dialog-titlebar-close {
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        position: absolute !important;
        top: 16px !important;
    }

    .ui-dialog.ai_sticker_upload_dialog button.ui-dialog-titlebar-close::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url(/templates/images/icons/icon-close.svg) no-repeat center center;
        background-size: 100% 100%;
        pointer-events: none;
    }

    .ui-dialog.ai_sticker_upload_dialog:not(.mobile-dlgEaMsgWin) .ui-widget-header {
        line-height: 1;
    }

    .ui-dialog.ai_sticker_upload_dialog:not(.mobile-dlgEaMsgWin) .ui-dialog-title {
        padding: 0 !important;
        font-size: 0 !important;
    }

    .ai-sticker-dialog .step-footer .close {
        float: unset;
    }

    .panel-upload.with-stickers .photos-upload-wrapper .image-list-wrapper .list-wrapper,
    .photos-upload-wrapper .image-list-wrapper .list-wrapper {
        padding: 2.05vmin 0;
    }
    .photos-upload-wrapper .image-list-wrapper .image-item.selected {
        border: var(--upload-item-border) solid var(--color-primary) !important;
    }
    /* ======= Ai Sticker Override - End ====== */


    html .wrapping-paper-sizes-dialog-container .option-title {
        font-weight: var(--font-weight-bold);
    }
}

/* desktop */
@media (min-width: 576px) {
    
    /* ======= PDP UCD Editor Area - Start ====== */
    html .container-ucd-editor-main #ucd-editor-main {
        min-height: 50rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        background: var(--color-white);
    }
    /* ======= PDP UCD Editor Area - End ====== */

    /* ======= UUCD PDP Options Common - Start ====== */
    /* - color option */
    .details_page .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item~.Icon-option-item,
    .details_page .component-selectable-elements.box .container-selection-items .container-option-item.Color-option-item {
        width: 3.6rem;
        height: 3.6rem;
        min-width: 3.6rem;
        border-radius: 50%;
    }

    /* ======= UUCD PDP Options Common - End ====== */

    /* ======= Ai Sticker Override - Start ====== */
    .ui-dialog.dialog-minimal .ui-dialog-content {
        padding: 20px 30px;
    }
    .ui-dialog.dialog-minimal.ai_sticker_upload_dialog .ui-dialog-content {
        padding: 6px 30px;
    }
    .ui-dialog.dialog-minimal .container {
        width: 100%;
    }
    .ui-dialog.dialog-minimal .ui-dialog-titlebar {
        border: none;
        background: none;
        padding: 0;
    }

    .ui-dialog.dialog-minimal .ui-dialog-titlebar.mobile-dialog-title {
        height: 0;
        line-height: 0;
    }

    .ui-dialog.dialog-minimal .ui-dialog-title {
        display: none;
    }

    .ui-dialog.dialog-minimal .ui-dialog-titlebar .ui-dialog-titlebar-close {
        width: 16px;
        height: 16px;
        margin: 0;
        position: absolute;
        top: 16px;
        right: 16px;
        background: url(/templates/images/icons/icon-close.svg) no-repeat !important;
        background-size: 100% 100%;
        z-index: 2;
    }
    .ui-dialog.dialog-minimal .ui-dialog-titlebar-close:hover {
        background-position: 0;
    }

    /* ======= Ai Sticker Override - End ====== */
    
    /* ======= PDP card style description - Start ====== */
    .details_page .product-detail-container .product-desc-wrapper.desc-under-perz-btn {
        margin: 1.2rem 0 0 1.8rem;
        padding: 0;
    }
    
    .details_page .product-detail-container .product-desc-wrapper.desc-under-perz-btn .title {
        text-transform: none;
        font-size: 1.4rem;
        padding: 0 0 0.5rem;
        letter-spacing: 0;
        margin: 0;
    }
    .details_page .product-detail-container .product-desc-wrapper.desc-under-perz-btn .product-description {
        font-size: 1.3rem;
        line-height: 1.8rem;
        line-height: 2rem;
    }
    .details_page .product-detail-container .product-desc-wrapper.desc-under-perz-btn .lessmore-bullets.component-bullets-description ul li {
        line-height: 2.4rem;
    }
    /* ======= PDP STI style description - End ====== */
}

@media (min-width: 1440px) {}

@media (min-width: 1920px) {}