/* ==========================================================
   DIGITALAPPLY IMAGE COMPRESSOR
   Version 1.0
========================================================== */

.daic-app {
    --da-orange: #f97316;
    --da-orange-dark: #ea580c;
    --da-orange-soft: #fff7ed;

    --da-green: #067647;
    --da-green-soft: #ecfdf3;

    --da-blue: #175cd3;
    --da-blue-soft: #eff8ff;

    --da-red: #b42318;
    --da-red-soft: #fef3f2;

    --da-navy: #101828;
    --da-text: #344054;
    --da-muted: #667085;

    --da-border: #e4e7ec;
    --da-soft: #f8fafc;

    width: 100%;
    max-width: 780px;

    margin: 28px auto;

    color: var(--da-navy);

    font-family: inherit;

    box-sizing: border-box;
}


.daic-app *,
.daic-app *::before,
.daic-app *::after {
    box-sizing: border-box;
}


.daic-card {
    padding: 36px;

    background: #ffffff;

    border: 1px solid #eaecf0;
    border-radius: 20px;

    box-shadow:
        0 4px 10px rgba(16, 24, 40, 0.03),
        0 20px 45px rgba(16, 24, 40, 0.07);
}


/* ==========================================================
   HEADER
========================================================== */

.daic-header {
    text-align: center;

    margin-bottom: 22px;
}


.daic-icon {
    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 12px;

    border-radius: 18px;

    background: var(--da-orange-soft);

    color: var(--da-orange);
}


.daic-icon svg {
    width: 30px;
    height: 30px;
}


.daic-badge {
    display: inline-block;

    margin-bottom: 8px;

    padding: 5px 11px;

    border-radius: 999px;

    background: var(--da-orange-soft);

    color: #c2410c;

    font-size: 11px;
    font-weight: 750;
}


.daic-header h2 {
    margin: 0;

    padding: 0;

    color: var(--da-navy);

    font-size: 30px;
    line-height: 1.25;

    letter-spacing: -0.4px;
}


.daic-header p {
    max-width: 610px;

    margin: 10px auto 0;

    color: var(--da-muted);

    font-size: 14px;
    line-height: 1.65;
}


/* ==========================================================
   PRIVACY
========================================================== */

.daic-privacy {
    display: flex;

    gap: 11px;

    align-items: flex-start;

    padding: 13px 15px;

    margin-bottom: 25px;

    border: 1px solid #abefc6;
    border-radius: 11px;

    background: var(--da-green-soft);
}


.daic-privacy-icon {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #dcfae6;

    color: var(--da-green);
}


.daic-privacy-icon svg {
    width: 17px;
    height: 17px;
}


.daic-privacy strong {
    display: block;

    margin-bottom: 2px;

    color: var(--da-green);

    font-size: 11.5px;
}


.daic-privacy p {
    margin: 0;

    color: #475467;

    font-size: 10.5px;
    line-height: 1.55;
}


/* ==========================================================
   SECTIONS
========================================================== */

.daic-section {
    padding: 22px 0;

    border-top: 1px solid #f2f4f7;
}


.daic-section-heading {
    display: flex;

    gap: 11px;

    align-items: flex-start;

    margin-bottom: 17px;
}


.daic-section-heading > span {
    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--da-orange-soft);

    color: var(--da-orange-dark);

    font-size: 12px;
    font-weight: 800;
}


.daic-section-heading h3 {
    margin: 0 0 3px;

    padding: 0;

    color: var(--da-navy);

    font-size: 17px;
    line-height: 1.35;
}


.daic-section-heading p {
    margin: 0;

    color: var(--da-muted);

    font-size: 11.5px;
    line-height: 1.5;
}


/* ==========================================================
   UPLOAD
========================================================== */

.daic-file-input {
    display: none !important;
}


.daic-upload-zone {
    width: 100%;

    min-height: 175px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 25px;

    border: 2px dashed #d0d5dd;
    border-radius: 13px;

    background: #fcfcfd;

    color: var(--da-navy);

    font-family: inherit;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}


.daic-upload-zone:hover,
.daic-upload-zone.daic-dragging {
    border-color: var(--da-orange);

    background: var(--da-orange-soft);
}


.daic-upload-zone:active {
    transform: scale(0.995);
}


.daic-upload-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 4px;

    border-radius: 13px;

    background: var(--da-orange-soft);

    color: var(--da-orange);
}


.daic-upload-icon svg {
    width: 23px;
    height: 23px;
}


.daic-upload-zone strong {
    font-size: 13px;
}


.daic-upload-zone small {
    color: var(--da-muted);

    font-size: 10px;
}


/* ==========================================================
   SELECTED FILE
========================================================== */

.daic-selected-file {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border: 1px solid var(--da-border);
    border-radius: 11px;

    background: var(--da-soft);
}


.daic-selected-file[hidden] {
    display: none !important;
}


.daic-thumb-wrap {
    flex: 0 0 62px;

    width: 62px;
    height: 62px;

    overflow: hidden;

    border-radius: 9px;

    background: #ffffff;
}


.daic-thumb-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.daic-file-info {
    min-width: 0;

    flex: 1;
}


.daic-file-info strong {
    display: block;

    overflow: hidden;

    margin-bottom: 4px;

    color: var(--da-navy);

    font-size: 11.5px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.daic-file-info span {
    display: block;

    color: var(--da-muted);

    font-size: 9.5px;
}


.daic-remove {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 8px;

    background: #ffffff;

    color: #667085;

    font-family: inherit;

    font-size: 21px;

    cursor: pointer;
}


.daic-remove:hover {
    background: var(--da-red-soft);

    color: var(--da-red);
}


/* ==========================================================
   TARGET SIZE
========================================================== */

.daic-target-options {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 8px;
}


.daic-target {
    min-height: 68px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 1px;

    padding: 8px;

    border: 1px solid #d0d5dd;
    border-radius: 10px;

    background: #ffffff;

    color: var(--da-navy);

    font-family: inherit;

    cursor: pointer;

    transition: 0.2s ease;
}


.daic-target strong {
    font-size: 15px;
}


.daic-target span {
    color: var(--da-muted);

    font-size: 9px;
}


.daic-target:hover {
    border-color: #fdba74;

    background: #fffaf5;
}


.daic-target.active {
    border-color: var(--da-orange);

    background: var(--da-orange-soft);

    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.08);
}


.daic-target.active strong,
.daic-target.active span {
    color: var(--da-orange-dark);
}


/* ==========================================================
   CUSTOM
========================================================== */

.daic-custom-box {
    padding: 14px;

    margin-top: 12px;

    border: 1px solid var(--da-border);
    border-radius: 10px;

    background: var(--da-soft);
}


.daic-custom-box[hidden] {
    display: none !important;
}


.daic-custom-box label,
.daic-range-grid label {
    display: block;

    margin-bottom: 6px;

    color: var(--da-text);

    font-size: 10.5px;
    font-weight: 650;
}


.daic-custom-input {
    display: flex;

    align-items: center;

    overflow: hidden;

    max-width: 240px;

    border: 1px solid #d0d5dd;
    border-radius: 9px;

    background: #ffffff;
}


.daic-custom-input:focus-within {
    border-color: var(--da-orange);

    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.08);
}


.daic-custom-input input {
    width: 100%;

    min-height: 45px;

    padding: 0 12px;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    background: transparent;

    color: var(--da-navy);

    font-family: inherit;
}


.daic-custom-input span {
    padding-right: 12px;

    color: var(--da-muted);

    font-size: 10px;
}


.daic-custom-box > small {
    display: block;

    margin-top: 6px;

    color: #98a2b3;

    font-size: 9px;
}


/* ==========================================================
   ADVANCED
========================================================== */

.daic-advanced {
    margin-top: 13px;

    border: 1px solid var(--da-border);
    border-radius: 10px;

    background: #ffffff;
}


.daic-advanced summary {
    padding: 12px 14px;

    color: var(--da-text);

    font-size: 10.5px;
    font-weight: 650;

    cursor: pointer;
}


.daic-advanced[open] summary {
    border-bottom: 1px solid var(--da-border);
}


.daic-range-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    padding: 14px 14px 8px;
}


.daic-range-grid input {
    width: 100%;

    min-height: 44px;

    padding: 0 11px;

    border: 1px solid #d0d5dd;
    border-radius: 8px;

    background: #ffffff;

    color: var(--da-navy);

    font-family: inherit;

    outline: none;
}


.daic-range-grid input:focus {
    border-color: var(--da-orange);

    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.08);
}


.daic-advanced > p {
    margin: 0;

    padding: 0 14px 14px;

    color: var(--da-muted);

    font-size: 9.5px;
    line-height: 1.55;
}


/* ==========================================================
   ERROR
========================================================== */

.daic-error {
    padding: 11px 13px;

    margin: 6px 0 13px;

    border: 1px solid #fecdca;
    border-radius: 9px;

    background: var(--da-red-soft);

    color: var(--da-red);

    font-size: 11px;
    line-height: 1.55;
}


.daic-error[hidden] {
    display: none !important;
}


/* ==========================================================
   COMPRESS BUTTON
========================================================== */

.daic-compress-btn {
    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 18px;

    border: 0;
    border-radius: 10px;

    background: var(--da-orange);

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;
    font-weight: 750;

    cursor: pointer;

    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18);
}


.daic-compress-btn:hover {
    background: var(--da-orange-dark);
}


.daic-compress-btn:disabled {
    opacity: 0.65;

    cursor: wait;
}


.daic-spinner {
    width: 17px;
    height: 17px;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: daic-spin 0.7s linear infinite;
}


.daic-spinner[hidden] {
    display: none !important;
}


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


/* ==========================================================
   RESULT
========================================================== */

.daic-result {
    padding-top: 30px;

    margin-top: 30px;

    border-top: 1px solid var(--da-border);

    animation: daic-fade 0.3s ease;
}


.daic-result[hidden] {
    display: none !important;
}


@keyframes daic-fade {

    from {
        opacity: 0;

        transform: translateY(6px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


.daic-result-top {
    text-align: center;

    margin-bottom: 20px;
}


.daic-success-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 9px;

    border-radius: 50%;

    background: var(--da-green-soft);

    color: var(--da-green);

    font-size: 23px;
    font-weight: 800;
}


.daic-result-top > span {
    color: #98a2b3;

    font-size: 8.5px;
    font-weight: 800;

    letter-spacing: 1px;
}


.daic-result-top h3 {
    margin: 6px 0 3px;

    padding: 0;

    color: var(--da-navy);

    font-size: 23px;
}


.daic-result-top p {
    margin: 0;

    color: var(--da-muted);

    font-size: 10.5px;
}


/* Comparison */

.daic-comparison {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


.daic-stat {
    padding: 16px;

    border: 1px solid var(--da-border);
    border-radius: 11px;

    background: var(--da-soft);

    text-align: center;
}


.daic-stat small {
    display: block;

    margin-bottom: 4px;

    color: var(--da-muted);

    font-size: 9px;
}


.daic-stat strong {
    color: var(--da-navy);

    font-size: 19px;
}


.daic-stat-success {
    border-color: #abefc6;

    background: var(--da-green-soft);
}


.daic-stat-success strong {
    color: var(--da-green);
}


.daic-arrow {
    color: #98a2b3;

    font-size: 18px;
}


/* Result grid */

.daic-result-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 8px;

    margin-bottom: 14px;
}


.daic-result-grid > div {
    padding: 12px;

    border: 1px solid var(--da-border);
    border-radius: 9px;

    background: #ffffff;
}


.daic-result-grid span {
    display: block;

    margin-bottom: 3px;

    color: var(--da-muted);

    font-size: 8.5px;
}


.daic-result-grid strong {
    color: var(--da-navy);

    font-size: 11.5px;
}


/* Result preview */

.daic-result-preview {
    display: flex;

    justify-content: center;

    overflow: hidden;

    padding: 16px;

    margin-bottom: 13px;

    border: 1px solid var(--da-border);
    border-radius: 11px;

    background:
        linear-gradient(45deg, #f2f4f7 25%, transparent 25%),
        linear-gradient(-45deg, #f2f4f7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f2f4f7 75%),
        linear-gradient(-45deg, transparent 75%, #f2f4f7 75%);

    background-size: 18px 18px;

    background-position:
        0 0,
        0 9px,
        9px -9px,
        -9px 0;
}


.daic-result-preview img {
    display: block;

    max-width: 100%;
    max-height: 380px;

    border-radius: 7px;

    object-fit: contain;
}


/* Download */

.daic-download {
    width: 100%;

    min-height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 16px;

    border-radius: 10px;

    background: var(--da-green);

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px;
    font-weight: 750;
}


.daic-download:hover {
    background: #05603a;

    color: #ffffff !important;
}


.daic-download svg {
    width: 18px;
    height: 18px;
}


/* Result note */

.daic-result-note {
    padding: 12px 13px;

    margin-top: 12px;

    border: 1px solid #b2ddff;
    border-radius: 9px;

    background: var(--da-blue-soft);

    color: #475467;

    font-size: 9.5px;
    line-height: 1.6;
}


.daic-result-note strong {
    color: var(--da-blue);
}


.daic-new-image {
    display: block;

    margin: 13px auto 0;

    padding: 5px;

    border: 0;

    background: transparent;

    color: var(--da-muted);

    font-family: inherit;

    font-size: 10px;

    text-decoration: underline;

    cursor: pointer;
}


/* ==========================================================
   FOOTER NOTE
========================================================== */

.daic-footer-note {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 17px;

    color: #98a2b3;

    text-align: center;

    font-size: 8.5px;
    line-height: 1.45;
}


.daic-footer-note svg {
    flex: 0 0 14px;

    width: 14px;
    height: 14px;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .daic-app {
        margin: 18px auto;
    }


    .daic-card {
        padding: 23px 16px;

        border-radius: 15px;
    }


    .daic-header h2 {
        font-size: 24px;
    }


    .daic-header p {
        font-size: 12.5px;
    }


    .daic-target-options {
        grid-template-columns: repeat(3, 1fr);
    }


    .daic-upload-zone {
        min-height: 155px;
    }


    .daic-range-grid {
        grid-template-columns: 1fr 1fr;
    }


    .daic-result-top h3 {
        font-size: 20px;
    }

}


@media (max-width: 420px) {

    .daic-target-options {
        grid-template-columns: repeat(2, 1fr);
    }


    .daic-comparison {
        grid-template-columns: 1fr;
    }


    .daic-arrow {
        transform: rotate(90deg);

        text-align: center;
    }


    .daic-result-grid {
        grid-template-columns: 1fr;
    }

}


@media (prefers-reduced-motion: reduce) {

    .daic-app * {
        scroll-behavior: auto !important;

        animation: none !important;

        transition: none !important;
    }

}