/*
    Set styles for UUCD PDP
*/


/* ======= Theme styles - Start ====== */
:root .STI {
    /* icons */
    --pdp-uucd-icon-back: url("https://cdn.simplytoimpress.com/images/pdp/icon-arrow-back.svg");
    --aisticker-icon-transform: url("https://cdn.simplytoimpress.com/images/pdp/icon-arrow-transform.svg");
    --aisticker-icon-selected: url("https://cdn.simplytoimpress.com/images/pdp/checkmark-circle-solid.svg");
}
/* ======= Theme styles - End ====== */

.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;
}

/* ======= 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-stius-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-stius-light-grey-10);
    box-shadow: 0 0 1px -.5px var(--color-stius-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-stius-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: 1.6rem;
}
html .container-ai-sticker-hint {
  font-size: 1.4rem;
  line-height: 1.6rem;
  font-weight: var(--font-weight-bold);
  margin-top: 2.4rem;
}
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: 1.4rem;
  line-height: 1.6rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}
/* ======= 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 ====== */
    /* - 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[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: 1.6rem !important;
        height: 1.6rem !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        position: absolute !important;
        top: 1.6rem !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;
    }
    .ai-sticker-dialog .panel-upload .upload-header p {
        margin-bottom: 0;
    }
    /* ======= Ai Sticker Override - End ====== */

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

/* desktop */
@media (min-width: 576px) {

    /* ======= 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.ai_sticker_upload_dialog .ui-dialog-content {
        padding: 0.6rem 3rem;
    }
    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-titlebar {
        border: none;
    }
    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-titlebar-close {
        background: url(/templates/images/icons/icon-close.svg) no-repeat;
        background-size: 100% 100%;
    }
    .ui-dialog.ai_sticker_upload_dialog .ui-dialog-titlebar-close:hover {
        background-position: 0;
    }
    /* ======= Ai Sticker Override - End ====== */
}


@media (min-width: 576px) and (max-width: 1419px) {
    /* Style For Ipad */
}

@media (min-width: 1200px) {
    /* STI no 1200 breakpoint */
}

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

@media (min-width: 1900px) {

}