* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
    background-color: #f8f8f2;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo-text {
    font-size: 24px;
    font-weight: bold;
    color: #000;
}

.auth-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 18px;
}

    .auth-link img {
        margin-right: 10px;
    }

.body-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.input-container {
    display: flex;
    background: white;
    border-radius: 50px;
    padding: 8px;
    max-width: 1000px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    height: 80px;
    margin-top: 200px;
}

.link-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 15px 25px;
    font-size: 18px;
    color: #888;
    border-radius: 50px;
}

.shorten-btn {
    background-color: #e429f2;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .shorten-btn:hover {
        background-color: #d31ae0;
    }

.loading {
    display: none;
    margin-top: 20px;
    color: #666;
    font-size: 16px;
}

.error-message {
    display: none;
    margin-top: 20px;
    color: #e42929;
    font-size: 16px;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    width: 90%;
    max-width: 1000px;
}

/* Updated styles for the redesigned result view */
.result-container {
    margin-top: 20px;
    display: none;
    background: #0a1172; /* Dark blue background */
    border-radius: 16px;
    padding: 30px;
    width: 100%;
    max-width: 1000px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* New top section with shortened link and right actions */
.result-top {
    display: flex;
    flex-direction: column; /* вертикальне розташування */
    align-items: flex-start; /* вирівнювання вліво */
    gap: 16px; /* проміжок між блоками */
    position: relative;
    width: 100%;
}

.link-section {
    flex: 1;
    text-align: left; /* текст вліво */
    width: 100%; /* повна ширина */
}

.short-link-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    word-break: break-word;
    overflow-wrap: anywhere; /* ще агресивніше перенесення */
    max-width: 100%; /* використовує всю доступну ширину */
}


.shortened-link {
    font-size: 24px;
    font-weight: bold;
    color: white;
    line-height: 1.4;
}

.original-url {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 20px;
}

.copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

    .copy-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.copy-icon {
    width: 24px;
    height: 24px;
    color: white;
}

.copy-btn-new {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .copy-btn-new:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.qr-code {
    background: white;
    padding: 12px;
    border-radius: 12px;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qr-code img {
        width: 100%;
        height: 100%;
    }

/* Tags container now at the bottom */
.tags-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.tag {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .tag:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.add-tag {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .add-tag:hover {
        background: rgba(255, 255, 255, 0.2);
    }

@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .logo-text {
        font-size: 20px;
    }

    .auth-link {
        font-size: 16px;
        align-self: flex-end;
    }

    .body-content {
        padding: 20px;
        min-height: auto;
    }

    .link-input {
        font-size: 16px;
        padding: 12px 20px;
        width: 100%;
        border-radius: 12px;
    }

    .shorten-btn {
        margin-top: 10px;
        padding: 12px;
        font-size: 16px;
        width: 100%;
        border-radius: 12px;
    }

    .result-container {
        padding: 20px;
        border-radius: 12px;
    }

    .result-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .right-actions {
        align-self: flex-start;
        margin-top: 12px;
    }

    .shortened-link {
        font-size: 28px;
        word-break: break-word;
    }

    .qr-code {
        width: 100px;
        height: 100px;
    }

    .faq-section {
        padding: 20px;
    }

        .faq-section h2 {
            font-size: 24px;
            text-align: center;
        }

    .faq-item button {
        font-size: 16px;
        padding: 12px 16px;
    }
}


/* Block FAQ */
.home-faq {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #F8F8F2;
    width: 977px;
    margin-top: 400px;
}

.home-faq__title {
    font-family: "Craftwor", sans-serif;
    font-size: 72px;
    font-style: normal;
    font-weight: 900;
    line-height: 132.5%;
    text-align: center;
    color: #1D1B1D;
}

.home-faq__items {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    max-width: 977px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.home-faq__item {
    background-color: #1D1B1D;
    border-radius: 20px;
    padding-top: 36px;
    padding-right: 42px;
    padding-bottom: 36px;
    padding-left: 42px;
}

.home-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    column-gap: 27px;
    border: none;
    background-color: #1D1B1D;
}

.home-faq__question span {
    text-align: start;
    display: flex;
    color: #FFF;
    font-family: "Fixel", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 132.5%;
}

.home-faq__question span.icon {
    display: flex;
    width: 40px;
    height: 39px;
    padding: 6px;
    background-color: #504C50;
    border-radius: 100px;
    position: relative;
    transition: all 0.3s ease 0s;
}

.home-faq__question span.icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 3px;
    border-radius: 20px;
    background-color: #fff;
    transition: all 0.3s ease 0s;
}

.home-faq__question span.icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 13px;
    height: 3px;
    border-radius: 20px;
    background-color: #fff;
    transition: all 0.3s ease 0s;
}

@media (max-width: 1232px) {
    .home-faq {
        padding-top: calc(50px + 70 * ((100vw - 375px) / 857));
        padding-bottom: calc(50px + 70 * ((100vw - 375px) / 857));
    }

    .home-faq__title {
        font-size: calc(32px + 40 * ((100vw - 375px) / 857));
    }

    .home-faq__items {
        margin-top: calc(40px + 40 * ((100vw - 375px) / 857));
    }

    .home-faq__items {
        row-gap: calc(16px + 16 * ((100vw - 375px) / 857));
    }

    .home-faq__item {
        padding-top: calc(24px + 12 * ((100vw - 375px) / 857));
    }

    .home-faq__item {
        padding-right: calc(24px + 18 * ((100vw - 375px) / 857));
    }

    .home-faq__item {
        padding-bottom: calc(24px + 12 * ((100vw - 375px) / 857));
    }

    .home-faq__item {
        padding-left: calc(24px + 18 * ((100vw - 375px) / 857));
    }

    .home-faq__question span {
        font-size: calc(17px + 9 * ((100vw - 375px) / 857));
    }

    .home-faq__answer {
        font-size: calc(16px + 4 * ((100vw - 375px) / 857));
    }
}

@media (max-width: 767px) {
    .home-faq__question span.icon {
        width: 33px;
        height: 32px;
        min-width: 32px;
    }

    .home-faq__question span.icon::before {
        width: 10px;
        height: 2px;
    }

    .home-faq__question span.icon::after {
        width: 10px;
        height: 1.5px;
    }
}

.home-faq__question._active .icon {
    background-color: #E6D7FC;
}

.home-faq__question._active .icon::before {
    background-color: #1D1B1D;
}

.home-faq__question._active .icon::after {
    opacity: 0;
    visibility: hidden;
}

.home-faq__answer {
    padding-top: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Fixel", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 152.375%;
    max-width: 780px;
}

/*Footer*/
.footer {
    background-color: #0D0D10;
    padding-top: 80px;
    padding-bottom: 140px;
}

.footer {
    padding-top: calc(40px + 40 * ((100vw - 375px) / 857));
}

.footer {
    padding-bottom: calc(80px + 60 * ((100vw - 375px) / 857));
}

.footer__body {
    display: flex;
    max-width: 1095px;
    margin: 0 auto;
}

.footer__body {
    justify-content: space-between;
}

.footer__body {
    flex-direction: column;
    row-gap: 56px;
}

.footer__title {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Fixel", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.footer__col-01 {
    margin-left: 100px;
}

.footer__col-01 {
    margin-left: calc(20px + 150 * ((100vw - 375px) / 857));
}

.footer__col-01 {
    margin-left: 0;
}

.footer__col-02 {
    margin-left: 100px;
}

.footer__col-02 {
    margin-left: calc(20px + 150 * ((100vw - 375px) / 857));
}

.footer__col-02 {
    margin-left: 0;
}

.footer__col-03 {
    margin-left: auto;
}

.footer__col-03 {
    margin-left: 0;
}

.footer__col-03 .social .link-wrapper {
    margin: 20px 0px;
    display: block;
}

.footer__col-03 .social .link-wrapper img {
    width: 150px;
}

.footer__social-icon .facebook {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDggMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljk0ODcyIDMuMjY5MjNIOFYwSDUuNjQxMDNDMi42NjY2NyAwLjEwODk3NCAyLjA1MTI4IDEuODUyNTYgMi4wNTEyOCAzLjcwNTEzVjUuMzM5NzRIMFY4LjVIMi4wNTEyOFYxN0g1LjAyNTY0VjguNUg3LjQ4NzE4TDggNS4zMzk3NEg1LjAyNTY0VjQuMzU4OTdDNS4wMjU2NCAzLjcwNTEzIDUuNDM1OSAzLjI2OTIzIDUuOTQ4NzIgMy4yNjkyM1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
}

.footer__social-icon .instagram {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGQ9Ik0xMi4xODA2IDMuMTgwNjRDMTEuNjY0NSAzLjE4MDY0IDExLjI1MTYgMy42MTkzNSAxMS4yNTE2IDQuMTY3NzRDMTEuMjUxNiA0LjcxNjEzIDExLjY2NDUgNS4xNTQ4NCAxMi4xODA2IDUuMTU0ODRDMTIuNjk2OCA1LjE1NDg0IDEzLjEwOTcgNC43MTYxMyAxMy4xMDk3IDQuMTY3NzRDMTMuMjEyOSAzLjYxOTM1IDEyLjY5NjggMy4xODA2NCAxMi4xODA2IDMuMTgwNjRaTTguMDUxNjEgNC4zODcxQzUuODgzODcgNC4zODcxIDQuMTI5MDMgNi4yNTE2MSA0LjEyOTAzIDguNjY0NTJDNC4xMjkwMyAxMS4wNzc0IDUuODgzODcgMTIuODMyMyA4LjA1MTYxIDEyLjgzMjNDMTAuMjE5NCAxMi44MzIzIDExLjk3NDIgMTAuOTY3NyAxMS45NzQyIDguNjY0NTJDMTEuOTc0MiA2LjM2MTI5IDEwLjIxOTQgNC4zODcxIDguMDUxNjEgNC4zODcxWk04LjA1MTYxIDExLjI5NjhDNi42MDY0NSAxMS4yOTY4IDUuNDcwOTcgMTAuMDkwMyA1LjQ3MDk3IDguNTU0ODRDNS40NzA5NyA3LjAxOTM1IDYuNjA2NDUgNS44MTI5IDguMDUxNjEgNS44MTI5QzkuNDk2NzcgNS44MTI5IDEwLjYzMjMgNy4wMTkzNSAxMC42MzIzIDguNTU0ODRDMTAuNTI5IDEwLjA5MDMgOS4zOTM1NSAxMS4yOTY4IDguMDUxNjEgMTEuMjk2OFpNMTYgNS4xNTQ4NEMxNiAyLjMwMzIzIDEzLjgzMjMgMCAxMS4xNDg0IDBINC44NTE2MUMyLjE2Nzc0IDAgMCAyLjMwMzIzIDAgNS4xNTQ4NFYxMS45NTQ4QzAgMTQuODA2NCAyLjE2Nzc0IDE3LjEwOTcgNC44NTE2MSAxNy4xMDk3SDExLjI1MTZDMTMuOTM1NSAxNy4xMDk3IDE2LjEwMzIgMTQuODA2NCAxNi4xMDMyIDExLjk1NDhWNS4xNTQ4NEgxNlpNMTQuNTU0OCAxMS44NDUyQzE0LjU1NDggMTMuODE5NCAxMy4xMDk3IDE1LjM1NDggMTEuMjUxNiAxNS4zNTQ4SDQuODUxNjFDMi45OTM1NSAxNS4zNTQ4IDEuNTQ4MzkgMTMuODE5NCAxLjU0ODM5IDExLjg0NTJWNS4xNTQ4NEMxLjU0ODM5IDMuMTgwNjQgMi45OTM1NSAxLjY0NTE2IDQuODUxNjEgMS42NDUxNkgxMS4yNTE2QzEzLjEwOTcgMS42NDUxNiAxNC41NTQ4IDMuMTgwNjQgMTQuNTU0OCA1LjE1NDg0VjExLjg0NTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE3IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
}

.footer__social-icon .youtube {
    width: 25px;
    height: 25px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAyMiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjc4NTQgNC4wNTgwNkMyMS43ODU0IDMuODM4NzEgMjEuNTcwNyAyLjMwMzIzIDIwLjgxOTUgMS40MjU4MUMxOS45NjEgMC40Mzg3MSAxOC44ODc4IDAuMzI5MDMyIDE4LjQ1ODUgMC4zMjkwMzJIMTguMzUxMkMxNS40NTM3IDAgMTEuMDUzNyAwIDEwLjk0NjMgMEMxMC45NDYzIDAgNi41NDYzNCAwIDMuNTQxNDYgMC4yMTkzNTVIMy40MzQxNUMzLjAwNDg4IDAuMzI5MDMyIDIuMDM5MDIgMC40Mzg3MSAxLjA3MzE3IDEuNDI1ODFDMC40MjkyNjggMi4xOTM1NSAwLjIxNDYzNCAzLjgzODcxIDAuMjE0NjM0IDMuOTQ4MzlDMC4xMDczMTcgNC4wNTgwNiAwIDUuOTIyNTggMCA3LjY3NzQyVjkuMzIyNThDMCAxMS4wNzc0IDAuMTA3MzE3IDEyLjk0MTkgMC4yMTQ2MzQgMTIuOTQxOUMwLjIxNDYzNCAxMy4xNjEzIDAuNDI5MjY4IDE0LjY5NjggMS4xODA0OSAxNS40NjQ1QzIuMDM5MDIgMTYuMzQxOSAzLjExMjIgMTYuNTYxMyAzLjY0ODc4IDE2LjU2MTNDMy43NTYxIDE2LjU2MTMgMy44NjM0MSAxNi41NjEzIDMuODYzNDEgMTYuNTYxM0M1LjU4MDQ5IDE2LjY3MSAxMC44MzkgMTYuNzgwNiAxMS4wNTM3IDE2Ljc4MDZDMTEuMDUzNyAxNi43ODA2IDE1LjQ1MzcgMTYuNzgwNiAxOC4zNTEyIDE2LjU2MTNIMTguNDU4NUMxOC44ODc4IDE2LjU2MTMgMTkuOTYxIDE2LjQ1MTYgMjAuODE5NSAxNS40NjQ1QzIxLjU3MDcgMTQuNjk2OCAyMS43ODU0IDEzLjA1MTYgMjEuNzg1NCAxMi45NDE5QzIxLjc4NTQgMTIuODMyMyAyMiAxMS4wNzc0IDIyIDkuMzIyNThWNy42Nzc0MkMyMiA1LjkyMjU4IDIxLjc4NTQgNC4wNTgwNiAyMS43ODU0IDQuMDU4MDZaTTE0LjM4MDUgOS4xMDMyM0w5LjU1MTIyIDExLjczNTVDOS40NDM5IDExLjg0NTIgOS4yMjkyNyAxMS44NDUyIDkuMTIxOTUgMTEuODQ1MkM5LjAxNDYzIDExLjg0NTIgOC44IDExLjg0NTIgOC42OTI2OCAxMS43MzU1QzguMzcwNzMgMTEuNTE2MSA4LjI2MzQxIDExLjI5NjggOC4yNjM0MSAxMC45Njc3VjUuNTkzNTVDOC4yNjM0MSA1LjI2NDUyIDguNDc4MDUgNC45MzU0OCA4LjY5MjY4IDQuODI1ODFDOS4wMTQ2NCA0LjYwNjQ1IDkuMzM2NTkgNC42MDY0NSA5LjU1MTIyIDQuODI1ODFMMTQuMzgwNSA3LjU2Nzc0QzE0LjcwMjQgNy42Nzc0MiAxNC44MDk4IDguMDA2NDUgMTQuODA5OCA4LjMzNTQ4QzE0LjgwOTggOC42NjQ1MiAxNC43MDI0IDguOTkzNTUgMTQuMzgwNSA5LjEwMzIzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
}

.footer__social-title {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Fixel", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    margin-top: 48px;
}

.footer__social-icons {
    margin-top: 16px;
    display: flex;
    align-items: center;
    column-gap: 16px;
}


/*Adaptive*/
@media (max-width: 768px) {
    header {
        flex-direction: initial;
        align-items: normal;
    }

    .input-container {
        flex-direction: column;
        height: auto;
        padding: 0 16px;
        border-radius: 20px;
        padding: 15px;
        margin-top: 150px;
    }

    .link-input {
        width: 100%;
        margin-bottom: 12px;
        font-size: 16px;
    }

    .shorten-btn {
        width: 100%;
        font-size: 16px;
    }

    .result-top {
        flex-direction: column;
        gap: 16px;
    }

    .qr-code {
        margin-top: 8px;
        text-align: center;
    }

    .home-faq {
        width: 100% !important;
        margin-top: 300px;
    }

    .home-faq__title {
        font-size: 24px;
        text-align: center;
    }

    .home-faq__question {
        font-size: 16px;
        padding: 14px 12px;
    }

    .home-faq__answer {
        font-size: 15px;
        padding: 12px;
    }

    .shortened-link, .original-url {
        font-size: 14px;
        word-break: break-word;
    }

    .result-container {
        padding: 20px;
        border-radius: 16px;
        width: 100%;
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .result-top {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .short-link-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* <-- ЗАМІСТЬ center */
        text-align: left; /* <-- ДОДАЙ */
        gap: 8px;
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .shortened-link {
        font-size: 20px;
        text-align: left;
        font-weight: bold;
        word-break: break-word;
        line-height: 1.3;
        color: white;
    }

    .original-url {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        word-break: break-all;
        margin-top: 4px;
    }

    .qr-code {
        width: 100px;
        height: 100px;
        background: white;
        padding: 10px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .copy-btn-new {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 44px;
        height: 44px;
    }

    .right-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left:0px;
    }
}