@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

/* ===== БАЗОВІ СТИЛІ РОЗМІТКИ ===== */
.imageUpload {
    background-color: rgba(0, 0, 0, 0.1);
    max-width: 608px;
    max-height: 648px;

    width: 608px;
    height: 648px;

    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imageUploadContent {
    position: relative;
    width: 464px;
    height: 544px;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
}

.imageUploadInput {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 100px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== СТИЛІ ТЕКСТУ ТА ДАТИ ===== */
.imageUploadContent:has(.imageUploadInput.oneShape) .imageUploadText {
    padding: 0 20px;
}

.imageUploadText {
    font-family: "Monotype Corsiva";
    font-size: 25px;
    color: white;
    height: fit-content;
    display: block;
    white-space: pre-line;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    max-height: calc(2em + 4px);
    padding: 2px;
}

.imageUploadInfo {
    position: relative;
    background: #000;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fourShape.small + .imageUploadInfo {
    height: 87px !important;
}

.fourShape.large + .imageUploadInfo {
    height: 100px !important;
}

.imageUploadContent:has(.imageUploadInput.fourShape) .imageUploadInfo {
    flex-grow: 1;
}

.imageUploadDate {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 120px;
    width: 60px;
    max-width: 60px;
    text-align: center;
    word-break: break-all;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 29px;
    font-family: "Century Gothic";
    line-height: 1.22;
    background: transparent;
    border: 2px solid #fff;
    z-index: 2;
}

/* Класи розміру шрифту */
.smallFont {
    font-size: 15px;
    line-height: 1;
}

.mediumFont {
    font-size: 25px;
    line-height: 1;
}

.largeFont {
    font-size: 35px;
    line-height: 1;
}

/* ===== СТИЛІ ПЕРЕГЛЯДУ ЗОБРАЖЕННЯ ===== */
.imagePreview {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    max-height: 100%;
    background-color: #9D9D9C;
}

.imagePreview img {
    object-fit: cover;
    object-position: center;
}

/* ===== СТИЛІ ІКОНКИ ЗАВАНТАЖЕННЯ + ПЛІСХОЛДЕР ===== */
.miniUploadArea:not(.uploaded)::before {
    position: absolute;
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background-color: currentColor;
    color: #bebebe;
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12.1796%2011.8179C12.2949%2012.6383%2011.7233%2013.3968%2010.903%2013.5121C10.0826%2013.6274%209.32409%2013.0558%209.20879%2012.2354C9.0935%2011.4151%209.66507%2010.6566%2010.4854%2010.5413C11.3058%2010.426%2012.0643%2010.9976%2012.1796%2011.8179Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M14.2794%201.70738L17.736%202.1318C18.535%202.22989%2019.1944%202.31084%2019.7262%202.42069C20.2785%202.53477%2020.7793%202.69557%2021.2309%203.00017C21.9312%203.47253%2022.464%204.15446%2022.7529%204.94824C22.9392%205.46009%2022.9741%205.98496%2022.9511%206.54846C22.9291%207.09101%2022.8481%207.75041%2022.75%208.54938L22.3256%2012.006C22.2275%2012.805%2022.1465%2013.4644%2022.0367%2013.9962C21.9226%2014.5485%2021.7618%2015.0493%2021.4572%2015.5009C20.9848%2016.2012%2020.3029%2016.734%2019.5091%2017.0229C19.4277%2017.0525%2019.3454%2017.0786%2019.2619%2017.1012C18.7289%2017.2459%2018.1796%2016.931%2018.035%2016.398C17.8903%2015.865%2018.2051%2015.3157%2018.7381%2015.171C18.7686%2015.1628%2018.7974%2015.1536%2018.8251%2015.1435C19.222%2014.9991%2019.5629%2014.7327%2019.7991%2014.3825C19.8973%2014.237%2019.989%2014.0224%2020.078%2013.5916C20.1694%2013.1493%2020.2411%2012.5715%2020.3455%2011.7213L20.7599%208.34664C20.8642%207.49645%2020.9344%206.9184%2020.9528%206.46718C20.9707%206.02767%2020.9335%205.79722%2020.8735%205.63228C20.7291%205.23539%2020.4627%204.89442%2020.1125%204.65824C19.967%204.56009%2019.7524%204.46832%2019.3216%204.37934C18.8793%204.28799%2018.3015%204.21625%2017.4513%204.11186L14.0766%203.69751C13.2264%203.59311%2012.6484%203.52292%2012.1972%203.50457C11.7577%203.48669%2011.5272%203.52381%2011.3623%203.58385C10.9654%203.7283%2010.6244%203.9947%2010.3882%204.34485C10.3214%204.44397%2010.2574%204.57566%2010.1956%204.78417C10.0387%205.31369%209.48218%205.61574%208.95265%205.45882C8.42313%205.30189%208.12108%204.74542%208.27801%204.2159C8.38283%203.86218%208.52321%203.53326%208.73015%203.22646C9.20251%202.52616%209.88445%201.99337%2010.6782%201.70446C11.1901%201.51816%2011.7149%201.4833%2012.2784%201.50622C12.821%201.52829%2013.4804%201.60927%2014.2794%201.70738ZM11.7602%208.80029C11.309%208.81864%2010.7309%208.88883%209.88073%208.99322L6.50608%209.40758C5.65588%209.51197%205.07802%209.5837%204.63577%209.67505C4.20499%209.76404%203.99037%209.8558%203.84485%209.95396C3.4947%2010.1901%203.2283%2010.5311%203.08385%2010.928C3.02381%2011.0929%202.98669%2011.3234%203.00457%2011.7629C3.02292%2012.2141%203.09311%2012.7922%203.19751%2013.6424L3.47503%2015.9026C3.68383%2015.676%203.87699%2015.4746%204.05931%2015.3001C4.45033%2014.9256%204.84957%2014.6163%205.33514%2014.4178C6.09046%2014.1092%206.92211%2014.0389%207.71853%2014.2164C8.23053%2014.3305%208.67603%2014.5684%209.12435%2014.8719C9.55516%2015.1635%2010.0505%2015.5598%2010.6493%2016.0389L14.3141%2018.9707C14.4548%2018.7983%2014.5665%2018.6025%2014.6435%2018.3908C14.7036%2018.2259%2014.7407%2017.9954%2014.7228%2017.5559C14.7045%2017.1047%2014.6343%2016.5266%2014.5299%2015.6764L14.1155%2012.3018C14.0111%2011.4516%2013.9394%2010.8737%2013.848%2010.4315C13.7591%2010.0007%2013.6673%209.78609%2013.5691%209.64056C13.333%209.29041%2012.992%209.02402%2012.5951%208.87956C12.4302%208.81953%2012.1997%208.78241%2011.7602%208.80029ZM12.1431%2019.7952L9.43119%2017.6256C8.79321%2017.1152%208.36009%2016.7697%208.00329%2016.5282C7.65652%2016.2934%207.45002%2016.2056%207.28344%2016.1685C6.88523%2016.0797%206.46941%2016.1149%206.09175%2016.2692C5.93377%2016.3338%205.74494%2016.455%205.4425%2016.7446C5.1313%2017.0426%204.76232%2017.456%204.21908%2018.0662L3.81279%2018.5226C3.83428%2018.6544%203.85618%2018.7752%203.87934%2018.8873C3.96832%2019.3181%204.06009%2019.5327%204.15824%2019.6782C4.39442%2020.0284%204.73539%2020.2948%205.13228%2020.4392C5.29722%2020.4993%205.52767%2020.5364%205.96718%2020.5185C6.4184%2020.5002%206.99645%2020.43%207.84664%2020.3256L11.2213%2019.9112C11.5716%2019.8682%2011.8757%2019.8307%2012.1431%2019.7952ZM11.6789%206.80194C12.2424%206.77902%2012.7673%206.81388%2013.2791%207.00018C14.0729%207.28909%2014.7548%207.82188%2015.2272%208.52218C15.5318%208.97376%2015.6926%209.4746%2015.8067%2010.0269C15.9165%2010.5587%2015.9975%2011.2181%2016.0956%2012.0171L16.52%2015.4736C16.6181%2016.2726%2016.6991%2016.9321%2016.7212%2017.4746C16.7441%2018.0381%2016.7092%2018.563%2016.5229%2019.0749C16.234%2019.8686%2015.7012%2020.5506%2015.0009%2021.0229C14.5493%2021.3275%2014.0485%2021.4883%2013.4962%2021.6024C12.9644%2021.7122%2012.305%2021.7932%2011.506%2021.8913L8.04937%2022.3157C7.25041%2022.4138%206.59101%2022.4948%206.04846%2022.5169C5.48496%2022.5398%204.96009%2022.5049%204.44824%2022.3186C3.65446%2022.0297%202.97253%2021.4969%202.50017%2020.7966C2.19557%2020.345%202.03477%2019.8442%201.92069%2019.2919C1.81084%2018.7601%201.72989%2018.1007%201.6318%2017.3017L1.20738%2013.8451C1.10927%2013.0461%201.02829%2012.3867%201.00622%2011.8442C0.983303%2011.2807%201.01816%2010.7558%201.20446%2010.244C1.49337%209.45018%202.02616%208.76824%202.72646%208.29588C3.17804%207.99129%203.67888%207.83049%204.23119%207.7164C4.76296%207.60656%205.42236%207.52561%206.22133%207.42752L9.67798%207.0031C10.4769%206.90498%2011.1364%206.82401%2011.6789%206.80194Z%27%20fill%3D%27%230D0D0D%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12.1796%2011.8179C12.2949%2012.6383%2011.7233%2013.3968%2010.903%2013.5121C10.0826%2013.6274%209.32409%2013.0558%209.20879%2012.2354C9.0935%2011.4151%209.66507%2010.6566%2010.4854%2010.5413C11.3058%2010.426%2012.0643%2010.9976%2012.1796%2011.8179Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M14.2794%201.70738L17.736%202.1318C18.535%202.22989%2019.1944%202.31084%2019.7262%202.42069C20.2785%202.53477%2020.7793%202.69557%2021.2309%203.00017C21.9312%203.47253%2022.464%204.15446%2022.7529%204.94824C22.9392%205.46009%2022.9741%205.98496%2022.9511%206.54846C22.9291%207.09101%2022.8481%207.75041%2022.75%208.54938L22.3256%2012.006C22.2275%2012.805%2022.1465%2013.4644%2022.0367%2013.9962C21.9226%2014.5485%2021.7618%2015.0493%2021.4572%2015.5009C20.9848%2016.2012%2020.3029%2016.734%2019.5091%2017.0229C19.4277%2017.0525%2019.3454%2017.0786%2019.2619%2017.1012C18.7289%2017.2459%2018.1796%2016.931%2018.035%2016.398C17.8903%2015.865%2018.2051%2015.3157%2018.7381%2015.171C18.7686%2015.1628%2018.7974%2015.1536%2018.8251%2015.1435C19.222%2014.9991%2019.5629%2014.7327%2019.7991%2014.3825C19.8973%2014.237%2019.989%2014.0224%2020.078%2013.5916C20.1694%2013.1493%2020.2411%2012.5715%2020.3455%2011.7213L20.7599%208.34664C20.8642%207.49645%2020.9344%206.9184%2020.9528%206.46718C20.9707%206.02767%2020.9335%205.79722%2020.8735%205.63228C20.7291%205.23539%2020.4627%204.89442%2020.1125%204.65824C19.967%204.56009%2019.7524%204.46832%2019.3216%204.37934C18.8793%204.28799%2018.3015%204.21625%2017.4513%204.11186L14.0766%203.69751C13.2264%203.59311%2012.6484%203.52292%2012.1972%203.50457C11.7577%203.48669%2011.5272%203.52381%2011.3623%203.58385C10.9654%203.7283%2010.6244%203.9947%2010.3882%204.34485C10.3214%204.44397%2010.2574%204.57566%2010.1956%204.78417C10.0387%205.31369%209.48218%205.61574%208.95265%205.45882C8.42313%205.30189%208.12108%204.74542%208.27801%204.2159C8.38283%203.86218%208.52321%203.53326%208.73015%203.22646C9.20251%202.52616%209.88445%201.99337%2010.6782%201.70446C11.1901%201.51816%2011.7149%201.4833%2012.2784%201.50622C12.821%201.52829%2013.4804%201.60927%2014.2794%201.70738ZM11.7602%208.80029C11.309%208.81864%2010.7309%208.88883%209.88073%208.99322L6.50608%209.40758C5.65588%209.51197%205.07802%209.5837%204.63577%209.67505C4.20499%209.76404%203.99037%209.8558%203.84485%209.95396C3.4947%2010.1901%203.2283%2010.5311%203.08385%2010.928C3.02381%2011.0929%202.98669%2011.3234%203.00457%2011.7629C3.02292%2012.2141%203.09311%2012.7922%203.19751%2013.6424L3.47503%2015.9026C3.68383%2015.676%203.87699%2015.4746%204.05931%2015.3001C4.45033%2014.9256%204.84957%2014.6163%205.33514%2014.4178C6.09046%2014.1092%206.92211%2014.0389%207.71853%2014.2164C8.23053%2014.3305%208.67603%2014.5684%209.12435%2014.8719C9.55516%2015.1635%2010.0505%2015.5598%2010.6493%2016.0389L14.3141%2018.9707C14.4548%2018.7983%2014.5665%2018.6025%2014.6435%2018.3908C14.7036%2018.2259%2014.7407%2017.9954%2014.7228%2017.5559C14.7045%2017.1047%2014.6343%2016.5266%2014.5299%2015.6764L14.1155%2012.3018C14.0111%2011.4516%2013.9394%2010.8737%2013.848%2010.4315C13.7591%2010.0007%2013.6673%209.78609%2013.5691%209.64056C13.333%209.29041%2012.992%209.02402%2012.5951%208.87956C12.4302%208.81953%2012.1997%208.78241%2011.7602%208.80029ZM12.1431%2019.7952L9.43119%2017.6256C8.79321%2017.1152%208.36009%2016.7697%208.00329%2016.5282C7.65652%2016.2934%207.45002%2016.2056%207.28344%2016.1685C6.88523%2016.0797%206.46941%2016.1149%206.09175%2016.2692C5.93377%2016.3338%205.74494%2016.455%205.4425%2016.7446C5.1313%2017.0426%204.76232%2017.456%204.21908%2018.0662L3.81279%2018.5226C3.83428%2018.6544%203.85618%2018.7752%203.87934%2018.8873C3.96832%2019.3181%204.06009%2019.5327%204.15824%2019.6782C4.39442%2020.0284%204.73539%2020.2948%205.13228%2020.4392C5.29722%2020.4993%205.52767%2020.5364%205.96718%2020.5185C6.4184%2020.5002%206.99645%2020.43%207.84664%2020.3256L11.2213%2019.9112C11.5716%2019.8682%2011.8757%2019.8307%2012.1431%2019.7952ZM11.6789%206.80194C12.2424%206.77902%2012.7673%206.81388%2013.2791%207.00018C14.0729%207.28909%2014.7548%207.82188%2015.2272%208.52218C15.5318%208.97376%2015.6926%209.4746%2015.8067%2010.0269C15.9165%2010.5587%2015.9975%2011.2181%2016.0956%2012.0171L16.52%2015.4736C16.6181%2016.2726%2016.6991%2016.9321%2016.7212%2017.4746C16.7441%2018.0381%2016.7092%2018.563%2016.5229%2019.0749C16.234%2019.8686%2015.7012%2020.5506%2015.0009%2021.0229C14.5493%2021.3275%2014.0485%2021.4883%2013.4962%2021.6024C12.9644%2021.7122%2012.305%2021.7932%2011.506%2021.8913L8.04937%2022.3157C7.25041%2022.4138%206.59101%2022.4948%206.04846%2022.5169C5.48496%2022.5398%204.96009%2022.5049%204.44824%2022.3186C3.65446%2022.0297%202.97253%2021.4969%202.50017%2020.7966C2.19557%2020.345%202.03477%2019.8442%201.92069%2019.2919C1.81084%2018.7601%201.72989%2018.1007%201.6318%2017.3017L1.20738%2013.8451C1.10927%2013.0461%201.02829%2012.3867%201.00622%2011.8442C0.983303%2011.2807%201.01816%2010.7558%201.20446%2010.244C1.49337%209.45018%202.02616%208.76824%202.72646%208.29588C3.17804%207.99129%203.67888%207.83049%204.23119%207.7164C4.76296%207.60656%205.42236%207.52561%206.22133%207.42752L9.67798%207.0031C10.4769%206.90498%2011.1364%206.82401%2011.6789%206.80194Z%27%20fill%3D%27%230D0D0D%27/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.miniUploadArea .uploadPlaceholderText {
    position: absolute;
    font-size: 15px;
    line-height: 17px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    text-align: center;
    top: calc(50% + 18px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    white-space: pre;
    color: transparent;
    background-image: linear-gradient(90deg, #bebebe 0%, #ffffff 10%, #bebebe 20%);
    background-size: 180% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: uploadPlaceholderShimmer 2.5s ease-in-out infinite;
}

.miniUploadArea.uploaded .uploadPlaceholderText {
    display: none;
}

@keyframes uploadPlaceholderShimmer {
    0% {
        background-position: 50% 0%;
    }
    100% {
        background-position: -150% 0%;
    }
}

.imageUploadInput.heartShape .miniUploadArea:not(.uploaded)::before {
    top: 43%;
    left: 54%;
}

.imageUploadInput.heartShape .miniUploadArea .uploadPlaceholderText {
    top: calc(43% + 18px);
    left: 54%;
    transform: translateX(-50%);
}

.imageUploadInput.loveShape .miniUploadArea:not(.uploaded)::before {
    top: 38%;
    left: 72%;
    transform: translate(-50%, -50%);
}

.imageUploadInput.loveShape .miniUploadArea .uploadPlaceholderText {
    top: calc(38% + 18px);
    left: 72%;
    transform: translateX(-50%);
}

.imageUploadInput.loveShape.small .imagePreview {
    position: absolute;
    top: 0px;
    left: 202px;
    max-width: 250px;
    max-height: 215px
}

.imageUploadInput.loveShape.large .imagePreview {
    position: absolute;
    top: 0px;
    left: 250px;
    max-width: 315px;
    max-height: 265px
}

.imageUploadInput.heartShape.small .imagePreview {
    position: absolute;
    top: 0px;
    max-height: 390px;
}

.imageUploadInput.heartShape.large .imagePreview {
    position: absolute;
    top: 0px;
    max-height: 505px;
}

.imageUploadInput.uploaded::before {
    display: none;
}

/* ===== КЕРУВАННЯ МІНІ-ЗОНОЮ ЗАВАНТАЖЕННЯ ===== */
.imageControls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.movingIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;
    pointer-events: none;
}

.movingIcon .movingIconGlyph {
    width: 28px;
    height: 28px;
    display: block;
    background-color: currentColor;
    color: #252c36;
    will-change: transform;
    transform-origin: 50% 100%;
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M11%2012V4.5C11%204.10218%2010.842%203.72064%2010.5607%203.43934C10.2794%203.15804%209.89782%203%209.5%203C9.10218%203%208.72064%203.15804%208.43934%203.43934C8.15804%203.72064%208%204.10218%208%204.5V13L6.53%2011.53C6.23554%2011.2359%205.85125%2011.0486%205.43816%2010.9978C5.02507%2010.9471%204.60688%2011.0359%204.25%2011.25C3.91495%2011.4509%203.67148%2011.7745%203.57138%2012.1522C3.47128%2012.5298%203.52245%2012.9315%203.714%2013.272C5.593%2016.612%206.688%2018.521%207%2019L7.196%2019.3C7.74252%2020.1299%208.48658%2020.811%209.36138%2021.2823C10.2362%2021.7535%2011.2143%2022.0002%2012.208%2022H12H14C15.5913%2022%2017.1174%2021.3679%2018.2426%2020.2426C19.3679%2019.1174%2020%2017.5913%2020%2016V11.5C20%2011.1022%2019.842%2010.7206%2019.5607%2010.4393C19.2794%2010.158%2018.8978%2010%2018.5%2010C18.1022%2010%2017.7206%2010.158%2017.4393%2010.4393C17.158%2010.7206%2017%2011.1022%2017%2011.5M11%2011.5V9.5C11%209.10218%2011.158%208.72064%2011.4393%208.43934C11.7206%208.15804%2012.1022%208%2012.5%208C12.8978%208%2013.2794%208.15804%2013.5607%208.43934C13.842%208.72064%2014%209.10218%2014%209.5V12M14%2010.5C14%2010.1022%2014.158%209.72064%2014.4393%209.43934C14.7206%209.15804%2015.1022%209%2015.5%209C15.8978%209%2016.2794%209.15804%2016.5607%209.43934C16.842%209.72064%2017%2010.1022%2017%2010.5V12M2.54099%205.594C3.3084%205.03297%204.13299%204.55464%205.00099%204.167M14%203.458C15.32%203.812%2016.558%204.36%2017.685%205.07%27%20stroke%3D%27%23354052%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M11%2012V4.5C11%204.10218%2010.842%203.72064%2010.5607%203.43934C10.2794%203.15804%209.89782%203%209.5%203C9.10218%203%208.72064%203.15804%208.43934%203.43934C8.15804%203.72064%208%204.10218%208%204.5V13L6.53%2011.53C6.23554%2011.2359%205.85125%2011.0486%205.43816%2010.9978C5.02507%2010.9471%204.60688%2011.0359%204.25%2011.25C3.91495%2011.4509%203.67148%2011.7745%203.57138%2012.1522C3.47128%2012.5298%203.52245%2012.9315%203.714%2013.272C5.593%2016.612%206.688%2018.521%207%2019L7.196%2019.3C7.74252%2020.1299%208.48658%2020.811%209.36138%2021.2823C10.2362%2021.7535%2011.2143%2022.0002%2012.208%2022H12H14C15.5913%2022%2017.1174%2021.3679%2018.2426%2020.2426C19.3679%2019.1174%2020%2017.5913%2020%2016V11.5C20%2011.1022%2019.842%2010.7206%2019.5607%2010.4393C19.2794%2010.158%2018.8978%2010%2018.5%2010C18.1022%2010%2017.7206%2010.158%2017.4393%2010.4393C17.158%2010.7206%2017%2011.1022%2017%2011.5M11%2011.5V9.5C11%209.10218%2011.158%208.72064%2011.4393%208.43934C11.7206%208.15804%2012.1022%208%2012.5%208C12.8978%208%2013.2794%208.15804%2013.5607%208.43934C13.842%208.72064%2014%209.10218%2014%209.5V12M14%2010.5C14%2010.1022%2014.158%209.72064%2014.4393%209.43934C14.7206%209.15804%2015.1022%209%2015.5%209C15.8978%209%2016.2794%209.15804%2016.5607%209.43934C16.842%209.72064%2017%2010.1022%2017%2010.5V12M2.54099%205.594C3.3084%205.03297%204.13299%204.55464%205.00099%204.167M14%203.458C15.32%203.812%2016.558%204.36%2017.685%205.07%27%20stroke%3D%27%23354052%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
}

.imageUploadInput.uploaded:hover .movingIcon .movingIconGlyph,
.miniUploadArea.uploaded:hover .movingIcon .movingIconGlyph {
    animation: movingIconHint 1.6s ease-in-out;
}

@keyframes movingIconHint {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-6deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.miniUploadArea.uploaded:hover .movingIcon {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
}

.imageUploadInput.loveShape .miniUploadArea .movingIcon {
    top: 40%;
    left: 72%;
    z-index: 100;
}

.imageUploadInput.heartShape .miniUploadArea .movingIcon {
    top: 45%;
    left: 55%;
}

.photoButtons {
    position: absolute;
    top: -5px;
    left: 50%;
    right: auto;
    padding: 5px;
    border-radius: 18px;
    /* border: 1px solid #e6e9eb; — вимкнено */
    background: #fff;
    display: flex;
    flex-direction: row;
    gap: 5px;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.photoButtons.is-visible {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
    pointer-events: auto;
}

.photoButtons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 13px;
    border: none;
    background-color: transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #24272ec7;
    position: relative;
}

.tooltip_inline[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    background: #1f1f1f;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.tooltip_inline[data-tooltip]:hover::after,
.tooltip_inline[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.alignButtons .tooltip_inline[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

#addEmoji.tooltip_inline[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

#textWithSignature.tooltip_inline[data-tooltip]::after,
#textWithoutSignature.tooltip_inline[data-tooltip]::after,
#dateWithValue.tooltip_inline[data-tooltip]::after,
#dateWithoutValue.tooltip_inline[data-tooltip]::after,
#musicAuthorWith.tooltip_inline[data-tooltip]::after,
#musicAuthorWithout.tooltip_inline[data-tooltip]::after,
#musicNameWith.tooltip_inline[data-tooltip]::after,
#musicNameWithout.tooltip_inline[data-tooltip]::after {
    left: 0;
    right: auto;
    transform: translateY(-4px);
}

.alignButtons .tooltip_inline[data-tooltip]:hover::after,
.alignButtons .tooltip_inline[data-tooltip]:focus-visible::after {
    transform: translateY(0);
}

#addEmoji.tooltip_inline[data-tooltip]:hover::after,
#addEmoji.tooltip_inline[data-tooltip]:focus-visible::after {
    transform: translateY(0);
}

#textWithSignature.tooltip_inline[data-tooltip]:hover::after,
#textWithSignature.tooltip_inline[data-tooltip]:focus-visible::after,
#textWithoutSignature.tooltip_inline[data-tooltip]:hover::after,
#textWithoutSignature.tooltip_inline[data-tooltip]:focus-visible::after,
#dateWithValue.tooltip_inline[data-tooltip]:hover::after,
#dateWithValue.tooltip_inline[data-tooltip]:focus-visible::after,
#dateWithoutValue.tooltip_inline[data-tooltip]:hover::after,
#dateWithoutValue.tooltip_inline[data-tooltip]:focus-visible::after,
#musicAuthorWith.tooltip_inline[data-tooltip]:hover::after,
#musicAuthorWith.tooltip_inline[data-tooltip]:focus-visible::after,
#musicAuthorWithout.tooltip_inline[data-tooltip]:hover::after,
#musicAuthorWithout.tooltip_inline[data-tooltip]:focus-visible::after,
#musicNameWith.tooltip_inline[data-tooltip]:hover::after,
#musicNameWith.tooltip_inline[data-tooltip]:focus-visible::after,
#musicNameWithout.tooltip_inline[data-tooltip]:hover::after,
#musicNameWithout.tooltip_inline[data-tooltip]:focus-visible::after {
    transform: translateY(0);
}

@media (min-width: 621px) {
    .alignButtons .tooltip_inline[data-tooltip]::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-4px);
    }

    #addEmoji.tooltip_inline[data-tooltip]::after {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-4px);
    }

    .alignButtons .tooltip_inline[data-tooltip]:hover::after,
    .alignButtons .tooltip_inline[data-tooltip]:focus-visible::after {
        transform: translateX(-50%) translateY(0);
    }

    #addEmoji.tooltip_inline[data-tooltip]:hover::after,
    #addEmoji.tooltip_inline[data-tooltip]:focus-visible::after {
        transform: translateX(-50%) translateY(0);
    }
}

.photoButtons button:hover {
    background-color: #f2f3f4;
    color: #000;
}

.photoButtons button:disabled {
    color: #dadada;
    cursor: not-allowed;
    background-color: transparent;
}

.photoButtons .zoomInIcon,
.photoButtons .zoomOutIcon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: currentColor;
}

.photoButtons .zoomInIcon {
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M18%2011C18%207.13401%2014.866%204%2011%204C7.13401%204%204%207.13401%204%2011C4%2014.866%207.13401%2018%2011%2018C12.89%2018%2014.6038%2017.2497%2015.8633%2016.0322C15.8877%2016.0012%2015.9148%2015.9719%2015.9434%2015.9434C15.9719%2015.9148%2016.0012%2015.8877%2016.0322%2015.8633C17.2497%2014.6038%2018%2012.89%2018%2011ZM10%2014V12H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H10V8C10%207.44772%2010.4477%207%2011%207C11.5523%207%2012%207.44772%2012%208V10H14C14.5523%2010%2015%2010.4477%2015%2011C15%2011.5523%2014.5523%2012%2014%2012H12V14C12%2014.5523%2011.5523%2015%2011%2015C10.4477%2015%2010%2014.5523%2010%2014ZM20%2011C20%2013.125%2019.2619%2015.0766%2018.0303%2016.6162L21.707%2020.293C22.0976%2020.6835%2022.0976%2021.3165%2021.707%2021.707C21.3165%2022.0976%2020.6835%2022.0976%2020.293%2021.707L16.6162%2018.0303C15.0766%2019.2619%2013.125%2020%2011%2020C6.02944%2020%202%2015.9706%202%2011C2%206.02944%206.02944%202%2011%202C15.9706%202%2020%206.02944%2020%2011Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M18%2011C18%207.13401%2014.866%204%2011%204C7.13401%204%204%207.13401%204%2011C4%2014.866%207.13401%2018%2011%2018C12.89%2018%2014.6038%2017.2497%2015.8633%2016.0322C15.8877%2016.0012%2015.9148%2015.9719%2015.9434%2015.9434C15.9719%2015.9148%2016.0012%2015.8877%2016.0322%2015.8633C17.2497%2014.6038%2018%2012.89%2018%2011ZM10%2014V12H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H10V8C10%207.44772%2010.4477%207%2011%207C11.5523%207%2012%207.44772%2012%208V10H14C14.5523%2010%2015%2010.4477%2015%2011C15%2011.5523%2014.5523%2012%2014%2012H12V14C12%2014.5523%2011.5523%2015%2011%2015C10.4477%2015%2010%2014.5523%2010%2014ZM20%2011C20%2013.125%2019.2619%2015.0766%2018.0303%2016.6162L21.707%2020.293C22.0976%2020.6835%2022.0976%2021.3165%2021.707%2021.707C21.3165%2022.0976%2020.6835%2022.0976%2020.293%2021.707L16.6162%2018.0303C15.0766%2019.2619%2013.125%2020%2011%2020C6.02944%2020%202%2015.9706%202%2011C2%206.02944%206.02944%202%2011%202C15.9706%202%2020%206.02944%2020%2011Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") no-repeat center / contain;
}

.photoButtons .zoomOutIcon {
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M18%2011C18%207.13401%2014.866%204%2011%204C7.13401%204%204%207.13401%204%2011C4%2014.866%207.13401%2018%2011%2018C12.89%2018%2014.6038%2017.2497%2015.8633%2016.0322C15.8877%2016.0012%2015.9148%2015.9719%2015.9434%2015.9434C15.9719%2015.9148%2016.0012%2015.8877%2016.0322%2015.8633C17.2497%2014.6038%2018%2012.89%2018%2011ZM14%2010C14.5523%2010%2015%2010.4477%2015%2011C15%2011.5523%2014.5523%2012%2014%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H14ZM20%2011C20%2013.125%2019.2619%2015.0766%2018.0303%2016.6162L21.707%2020.293C22.0976%2020.6835%2022.0976%2021.3165%2021.707%2021.707C21.3165%2022.0976%2020.6835%2022.0976%2020.293%2021.707L16.6162%2018.0303C15.0766%2019.2619%2013.125%2020%2011%2020C6.02944%2020%202%2015.9706%202%2011C2%206.02944%206.02944%202%2011%202C15.9706%202%2020%206.02944%2020%2011Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M18%2011C18%207.13401%2014.866%204%2011%204C7.13401%204%204%207.13401%204%2011C4%2014.866%207.13401%2018%2011%2018C12.89%2018%2014.6038%2017.2497%2015.8633%2016.0322C15.8877%2016.0012%2015.9148%2015.9719%2015.9434%2015.9434C15.9719%2015.9148%2016.0012%2015.8877%2016.0322%2015.8633C17.2497%2014.6038%2018%2012.89%2018%2011ZM14%2010C14.5523%2010%2015%2010.4477%2015%2011C15%2011.5523%2014.5523%2012%2014%2012H8C7.44772%2012%207%2011.5523%207%2011C7%2010.4477%207.44772%2010%208%2010H14ZM20%2011C20%2013.125%2019.2619%2015.0766%2018.0303%2016.6162L21.707%2020.293C22.0976%2020.6835%2022.0976%2021.3165%2021.707%2021.707C21.3165%2022.0976%2020.6835%2022.0976%2020.293%2021.707L16.6162%2018.0303C15.0766%2019.2619%2013.125%2020%2011%2020C6.02944%2020%202%2015.9706%202%2011C2%206.02944%206.02944%202%2011%202C15.9706%202%2020%206.02944%2020%2011Z%27%20fill%3D%27black%27/%3E%3C/svg%3E") no-repeat center / contain;
}
.photoButtons .rotateIcon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: currentColor;
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M9%204.54997C10.9759%203.75432%2013.1869%203.77617%2015.1466%204.61071C17.1064%205.44524%2018.6544%207.02411%2019.45%208.99997C20.2457%2010.9758%2020.2238%2013.1868%2019.3893%2015.1466C18.5547%2017.1064%2016.9759%2018.6543%2015%2019.45M15%2015V20H20M5.63%207.15997V7.16997M4.06%2011V11.01M4.63%2015.1V15.11M7.15997%2018.37V18.38M11%2019.94V19.95%27%20stroke%3D%27%23354052%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M9%204.54997C10.9759%203.75432%2013.1869%203.77617%2015.1466%204.61071C17.1064%205.44524%2018.6544%207.02411%2019.45%208.99997C20.2457%2010.9758%2020.2238%2013.1868%2019.3893%2015.1466C18.5547%2017.1064%2016.9759%2018.6543%2015%2019.45M15%2015V20H20M5.63%207.15997V7.16997M4.06%2011V11.01M4.63%2015.1V15.11M7.15997%2018.37V18.38M11%2019.94V19.95%27%20stroke%3D%27%23354052%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
}

.photoButtons .deleteIcon {
    width: 20px;
    height: 20px;
    display: block;
    background-color: #e04848;
    mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M11%2011C11%2010.4477%2010.5523%2010%2010%2010C9.44772%2010%209%2010.4477%209%2011V16C9%2016.5523%209.44772%2017%2010%2017C10.5523%2017%2011%2016.5523%2011%2016V11Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M15%2011C15%2010.4477%2014.5523%2010%2014%2010C13.4477%2010%2013%2010.4477%2013%2011V16C13%2016.5523%2013.4477%2017%2014%2017C14.5523%2017%2015%2016.5523%2015%2016V11Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M12.6577%202C14.4931%202%2016.0931%203.24919%2016.5382%205.02986L16.7808%206H18.9858C18.9944%205.99989%2019.0031%205.99989%2019.0117%206H20C20.5523%206%2021%206.44772%2021%207C21%207.55228%2020.5523%208%2020%208H19.8986L18.7815%2018.4261C18.5637%2020.4587%2016.8484%2022%2014.8043%2022H9.19574C7.15155%2022%205.43628%2020.4587%205.2185%2018.4261L4.10142%208H4C3.44772%208%203%207.55228%203%207C3%206.44772%203.44772%206%204%206H4.98829C4.99693%205.99989%205.00555%205.99989%205.01416%206H7.21922L7.46176%205.02986C7.90693%203.24919%209.50686%202%2011.3423%202H12.6577ZM16.0209%208C16.0064%208.00032%2015.992%208.00031%2015.9776%208H8.02242C8.00802%208.00031%207.99357%208.00032%207.97909%208H6.11287L7.20712%2018.2131C7.31601%2019.2293%208.17365%2020%209.19574%2020H14.8043C15.8264%2020%2016.684%2019.2293%2016.7929%2018.2131L17.8871%208H16.0209ZM9.40203%205.51493L9.28076%206H14.7192L14.5979%205.51493C14.3754%204.62459%2013.5754%204%2012.6577%204H11.3423C10.4246%204%209.62461%204.62459%209.40203%205.51493Z%27%20fill%3D%27%230D0D0D%27/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M11%2011C11%2010.4477%2010.5523%2010%2010%2010C9.44772%2010%209%2010.4477%209%2011V16C9%2016.5523%209.44772%2017%2010%2017C10.5523%2017%2011%2016.5523%2011%2016V11Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M15%2011C15%2010.4477%2014.5523%2010%2014%2010C13.4477%2010%2013%2010.4477%2013%2011V16C13%2016.5523%2013.4477%2017%2014%2017C14.5523%2017%2015%2016.5523%2015%2016V11Z%27%20fill%3D%27%230D0D0D%27/%3E%3Cpath%20d%3D%27M12.6577%202C14.4931%202%2016.0931%203.24919%2016.5382%205.02986L16.7808%206H18.9858C18.9944%205.99989%2019.0031%205.99989%2019.0117%206H20C20.5523%206%2021%206.44772%2021%207C21%207.55228%2020.5523%208%2020%208H19.8986L18.7815%2018.4261C18.5637%2020.4587%2016.8484%2022%2014.8043%2022H9.19574C7.15155%2022%205.43628%2020.4587%205.2185%2018.4261L4.10142%208H4C3.44772%208%203%207.55228%203%207C3%206.44772%203.44772%206%204%206H4.98829C4.99693%205.99989%205.00555%205.99989%205.01416%206H7.21922L7.46176%205.02986C7.90693%203.24919%209.50686%202%2011.3423%202H12.6577ZM16.0209%208C16.0064%208.00032%2015.992%208.00031%2015.9776%208H8.02242C8.00802%208.00031%207.99357%208.00032%207.97909%208H6.11287L7.20712%2018.2131C7.31601%2019.2293%208.17365%2020%209.19574%2020H14.8043C15.8264%2020%2016.684%2019.2293%2016.7929%2018.2131L17.8871%208H16.0209ZM9.40203%205.51493L9.28076%206H14.7192L14.5979%205.51493C14.3754%204.62459%2013.5754%204%2012.6577%204H11.3423C10.4246%204%209.62461%204.62459%209.40203%205.51493Z%27%20fill%3D%27%230D0D0D%27/%3E%3C/svg%3E") no-repeat center / contain;
}

.photoButtons .photoButtonsSeparator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #dfdfdf;
    align-self: center;
}

/* ===== МАКЕТ ONE (ОДИН БЛОК) ===== */

.imageUploadContent:has(.imageUploadInput.oneShape.small) {
    width: 388px;
    height: 453px;
}

.imageUploadContent:has(.imageUploadInput.oneShape.large) {
    width: 570px;
    height: 570px;
}

.imageUploadContent:has(.imageUploadInput.fourShape.small) {
    width: 383px;
    height: 453px;
}

.imageUploadContent:has(.imageUploadInput.fourShape.large) {
    width: 570px;
    height: 570px;
    padding: 20px 20px 0;
}

.imageUploadContent:has(.imageUploadInput.loveShape.small) {
    width: 453px;
    height: 283px;
}

.imageUploadContent:has(.imageUploadInput.loveShape.large) {
    width: 567px;
    height: 351px;
}

.imageUploadInput.oneShape .imageUploadInfo {
    height: 50px;
}

.imageUploadInput.fourShape .imageUploadInfo {
    height: 80px;
}

/* ===== СТИЛІ МАКЕТУ HEART ===== */
.imageUploadInput.heartShape {
    height: 100%;
}

.imageUploadContent:has(.imageUploadInput.heartShape.large) {
    width: 542px;
    height: 562px;
}

.imageUploadContent:has(.imageUploadInput.heartShape.small) {
    max-width: 417px;
    max-height: 431px;
}

.imageUploadInput.heartShape .miniUploadArea {
    mask: url("../assets/images/variants/heartMask.svg") no-repeat center/contain;
}

.imageUploadInput.heartShape .miniUploadArea::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../assets/images/variants/heart.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
}

/* ===== СТИЛІ МАКЕТУ LOVE ===== */

.imageUploadInput.loveShape .miniUploadArea {
    mask: url("../assets/images/variants/loveMask.svg") no-repeat center/contain;
    position: relative;
}

.imageUploadInput.loveShape .miniUploadArea::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../assets/images/variants/love.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
}

.imageUploadText.loveShape {
    width: 100%;
    max-width: 220px;
    background: transparent;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 1999;
    overflow: hidden;
    white-space: pre-line;
    line-height: 1;
    position: absolute;
    top: 67%;
    left: 32%;
    align-items: flex-start;
    max-height: calc(2em + 4px);
    padding: 2px 0;
}

.imageUploadDate.loveShape {
    border: none;
    width: fit-content;
    max-width: fit-content;
    top: 77%;
    left: 72%;
    transform: translate(-50%, 0);
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    z-index: 100;
    font-family: "Monotype Corsiva";
}

/* ===== СТИЛІ МАКЕТУ MUSIC ===== */

.imageUploadContent:has(.imageUploadInput.musicShape.small) {
    width: 386px;
    height: 473px;
}

.imageUploadContent:has(.imageUploadInput.musicShape.large) {
    width: 567px;
    height: 593px;
}

.imageUploadInput.musicShape.small {
    background: url("../assets/images/variants/music.svg") no-repeat center/contain;
    width: 386px;
    height: 473px;
    position: relative;
    cursor: default;
}

.imageUploadInput.musicShape.small .miniUploadArea {
    position: absolute;
    width: 318px;
    height: 240px;
    top: 28px;
}

.imageUploadInput.musicShape.large {
    background: url("../assets/images/variants/musicLarge.svg") no-repeat center/contain;
    width: 567px;
    height: 593px;
    position: relative;
    cursor: default;
}

.imageUploadInput.musicShape.large .miniUploadArea {
    position: absolute;
    width: 482px;
    height: 331px;
    top: 33px;
}

.imageMusic {
    width: 283px;
    position: absolute;
    z-index: 100;
    bottom: 155px;
    left: 51px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3px;
}

.imageUploadInput.musicShape.large .imageMusic {
    width: 319px;
    position: absolute;
    bottom: 168px;
    left: 124px;
    gap: 3px;
}

.imageMusicDuration {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.imageMusicName,
.imageMusicAuthor {
    height: 14px;
    max-width: 283px;
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.musicShape.large .imageMusicName,
.musicShape.large .imageMusicAuthor {
    max-width: 319px;
}

.imageMusicName,
.imageMusicAuthor,
.imageMusicTotalDuration,
.imageMusicCurrentDuration {
    font-family: "Century Gothic";
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    color: #FFFFFF;
}

/* ===== СТИЛІ МАКЕТУ FOUR ===== */
.imageUploadInput.fourShape {
    display: grid;
    grid-template-columns: repeat(2, 171px);
    grid-template-rows: repeat(2, 171px);
    gap: 7px;
    box-sizing: border-box;
    place-items: center;
    background: #000;
    width: 349px;
    height: 349px;
}

.imageUploadInput.fourShape.large {
    grid-template-columns: repeat(2, 261.5px);
    grid-template-rows: repeat(2, 221px);
    width: 530px;
    height: 449px;
    gap: 7px;
}

.imageUploadInput.fourShape.large .miniUploadArea {
    aspect-ratio: 261.5/221;
    min-width: 100%;
    min-height: 100%;
}

.imageUploadContent:has(.imageUploadInput.fourShape) {
    background: #000;
    padding: 17px 16px 0px;
    justify-content: space-between;
}

.imageUploadInput.fourShape .miniUploadArea {
    max-height: 171px;
    max-width: 171px;
}

.imageUploadInput.fourShape.large .miniUploadArea {
    max-height: 221px;
    max-width: 261.5px;
}

/* ===== СТИЛІ МІНІ-ЗОНИ ЗАВАНТАЖЕННЯ ===== */
.miniUploadArea {
    position: relative;
    background-color: #858585;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Вимкнено: .miniUploadArea:hover {
    background: #858585;
} */

.miniUploadArea.uploaded {
    border: none;
}

.miniUploadArea .imagePreview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.miniUploadArea.uploaded .imagePreview {
    display: block;
}

.miniUploadArea .imagePreview img {
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.miniUploadArea .imagePreview img.is-zooming {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.miniUploadArea .imagePreview img.is-resetting {
    transition: none !important;
}

.miniUploadArea .imagePreview img.is-clamping {
    transition: transform 0.2s ease;
}

.miniUploadArea .imagePreview img.imageLoaded {
    opacity: 1;
}

/* ===== СТАНИ ЗАВАНТАЖЕННЯ ===== */
.miniUploadArea.uploading {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.miniUploadArea.error {
    border-color: rgba(255, 100, 100, 0.8);
    background: rgba(255, 100, 100, 0.1);
}

.imageMusicInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ===== АДАПТИВНІ СТИЛІ ДЛЯ МОБІЛЬНИХ ===== */
@media (max-width: 620px) {
    :root {
        --preview-scale: 0.62;
    }

    .imageUpload {
        width: calc(100% + 32px);
        height: 440px;
        border-radius: 0;
        margin-top: -20px;
    }

    .imageUploadContent {
        width: calc(464px * var(--preview-scale));
        height: calc(544px * var(--preview-scale));
        min-height: calc(200px * var(--preview-scale));
        border-radius: calc(18px * var(--preview-scale));
    }

    .imageUploadInput {
        min-height: calc(100px * var(--preview-scale));
        border-radius: calc(10px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.oneShape) .imageUploadText {
        padding: 0 calc(20px * var(--preview-scale));
    }

    .imageUploadText {
        font-size: calc(25px * var(--preview-scale));
    }

    .imageUploadInfo {
        height: calc(50px * var(--preview-scale));
    }

    .imageUploadDate {
        top: calc(50px * var(--preview-scale));
        left: calc(50px * var(--preview-scale));
        height: calc(120px * var(--preview-scale));
        width: calc(60px * var(--preview-scale));
        max-width: calc(60px * var(--preview-scale));
        padding: calc(4px * var(--preview-scale)) calc(8px * var(--preview-scale));
        border-radius: calc(4px * var(--preview-scale));
        font-size: calc(29px * var(--preview-scale));
        border-width: calc(2px * var(--preview-scale));
        line-height: 1.22;
    }

    .mediumFont {
        font-size: calc(25px * var(--preview-scale));
        line-height: 1;
    }

    .smallFont {
        font-size: calc(15px * var(--preview-scale));
        line-height: 1;
    }

    .largeFont {
        font-size: calc(35px * var(--preview-scale));
        line-height: 1;
    }

    .imageUploadContent:has(.imageUploadInput.oneShape.small) {
        width: calc(388px * var(--preview-scale));
        height: calc(453px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.oneShape.large) {
        width: calc(570px * var(--preview-scale));
        height: calc(570px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.fourShape.small) {
        width: calc(383px * var(--preview-scale));
        height: calc(453px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.fourShape.large) {
        width: calc(570px * var(--preview-scale));
        height: calc(570px * var(--preview-scale));
        padding: calc(20px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.loveShape.small) {
        width: calc(453px * var(--preview-scale));
        height: calc(283px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.loveShape.large) {
        width: calc(567px * var(--preview-scale));
        height: calc(351px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.heartShape.large) {
        width: calc(542px * var(--preview-scale));
        height: calc(562px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.heartShape.small) {
        max-width: calc(417px * var(--preview-scale));
        max-height: calc(431px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.musicShape.small) {
        width: calc(386px * var(--preview-scale));
        height: calc(473px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.musicShape.large) {
        width: calc(567px * var(--preview-scale));
        height: calc(593px * var(--preview-scale));
    }

    .imageUploadInput.oneShape .imageUploadInfo {
        height: calc(50px * var(--preview-scale));
    }

    .imageUploadInput.fourShape .imageUploadInfo {
        height: calc(80px * var(--preview-scale));
    }

    .imageUploadInput.loveShape.small .imagePreview {
        left: calc(202px * var(--preview-scale));
        max-width: calc(250px * var(--preview-scale));
        max-height: calc(215px * var(--preview-scale));
    }

    .imageUploadInput.loveShape.large .imagePreview {
        left: calc(250px * var(--preview-scale));
        max-width: calc(315px * var(--preview-scale));
        max-height: calc(265px * var(--preview-scale));
    }

    .imageUploadInput.heartShape.small .imagePreview {
        max-height: calc(390px * var(--preview-scale));
    }

    .imageUploadInput.heartShape.large .imagePreview {
        max-height: calc(505px * var(--preview-scale));
    }

    .imageUploadText.loveShape {
        max-width: calc(220px * var(--preview-scale));
    }

    .imageUploadDate.loveShape {
        font-size: calc(14px * var(--preview-scale));
    }

    .imageUploadInput.musicShape.small {
        width: calc(386px * var(--preview-scale));
        height: calc(473px * var(--preview-scale));
    }

    .imageUploadInput.musicShape.small .miniUploadArea {
        width: calc(318px * var(--preview-scale));
        height: calc(240px * var(--preview-scale));
        top: calc(28px * var(--preview-scale));
    }

    .imageUploadInput.musicShape.large {
        width: calc(567px * var(--preview-scale));
        height: calc(593px * var(--preview-scale));
    }

    .imageUploadInput.musicShape.large .miniUploadArea {
        width: calc(482px * var(--preview-scale));
        height: calc(331px * var(--preview-scale));
        top: calc(33px * var(--preview-scale));
    }

    .imageMusic {
        width: calc(283px * var(--preview-scale));
        bottom: calc(155px * var(--preview-scale));
        left: calc(51px * var(--preview-scale));
        gap: calc(3px * var(--preview-scale));
    }

    .imageUploadInput.musicShape.large .imageMusic {
        width: calc(319px * var(--preview-scale));
        bottom: calc(168px * var(--preview-scale));
        left: calc(124px * var(--preview-scale));
        gap: calc(3px * var(--preview-scale));
    }

    .imageMusicName,
    .imageMusicAuthor {
        height: calc(14px * var(--preview-scale));
        max-width: calc(283px * var(--preview-scale));
    }

    .imageMusicName,
    .imageMusicAuthor,
    .imageMusicTotalDuration,
    .imageMusicCurrentDuration {
        font-size: calc(12px * var(--preview-scale));
    }

    .imageUploadInput.fourShape {
        grid-template-columns: repeat(2, calc(171px * var(--preview-scale)));
        grid-template-rows: repeat(2, calc(171px * var(--preview-scale)));
        gap: calc(7px * var(--preview-scale));
        width: calc(349px * var(--preview-scale));
        height: calc(349px * var(--preview-scale));
    }

    .imageUploadInput.fourShape.large {
        grid-template-columns: repeat(2, calc(261.5px * var(--preview-scale)));
        grid-template-rows: repeat(2, calc(221px * var(--preview-scale)));
        width: calc(530px * var(--preview-scale));
        height: calc(449px * var(--preview-scale));
        gap: calc(7px * var(--preview-scale));
    }

    .imageUploadContent:has(.imageUploadInput.fourShape) {
        padding: calc(17px * var(--preview-scale)) calc(16px * var(--preview-scale)) calc(12px * var(--preview-scale));
    }

    .imageUploadInput.fourShape .miniUploadArea {
        max-height: calc(171px * var(--preview-scale));
        max-width: calc(171px * var(--preview-scale));
    }

    .imageUploadInput.fourShape.large .miniUploadArea {
        max-height: calc(221px * var(--preview-scale));
        max-width: calc(261.5px * var(--preview-scale));
    }

    /*== Для макету one + всі ==*/
    .miniUploadArea:not(.uploaded)::before {
        width: 24px;
        height: 24px;
    }

    .miniUploadArea .uploadPlaceholderText {
        font-size: 14px;
        line-height: 15px;
    }

    /*== Для макету love ==*/
    .imageUploadInput.loveShape .miniUploadArea:not(.uploaded)::before {
        top: 33%;
        left: 72%;
    }

    .imageUploadInput.loveShape .miniUploadArea .uploadPlaceholderText {
        top: calc(33% + 15px);
    }

    /*== Для макету music ==*/
    .imageUploadInput.musicShape.small .miniUploadArea:not(.uploaded)::before {
        top: 42%;
    }

    .imageUploadInput.musicShape.small .miniUploadArea .uploadPlaceholderText {
        top: calc(42% + 15px);
    }

    .imageUploadInput.musicShape.large .miniUploadArea:not(.uploaded)::before {
        top: 45%;
    }

    .imageUploadInput.musicShape.large .miniUploadArea .uploadPlaceholderText {
        top: calc(45% + 15px);
    }

    /*== Для макету heart ==*/
    .imageUploadInput.heartShape .miniUploadArea:not(.uploaded)::before {
        top: 40%;
        left: 54%;
    }

    .imageUploadInput.heartShape .miniUploadArea .uploadPlaceholderText {
        top: calc(40% + 15px);
        left: 54%;
    }

    /*== Для макету four ==*/
    .imageUploadInput.fourShape.small .miniUploadArea:not(.uploaded)::before {
        top: 37%;
    }

    .imageUploadInput.fourShape.small .miniUploadArea .uploadPlaceholderText {
        top: calc(37% + 15px);
    }

    .imageUploadInput.fourShape.large .miniUploadArea:not(.uploaded)::before {
        top: 40%;
    }

    .imageUploadInput.fourShape.large .miniUploadArea .uploadPlaceholderText {
        top: calc(40% + 15px);
    }
}