.custom-wall-art-upload {
    margin: 1.5em 0;
}

.custom-wall-art-upload-wrapper {
    padding: 0;
}

.custom-wall-art-upload-content {
    background: #fff;
    border-radius: 8px;
    padding: 1em;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.cwau-upload-title {
    margin: 0 0 0.5em 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.cwau-upload-description {
    margin: 0 0 1.5em 0;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

.cwau-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wp--preset--spacing--60, 3rem) var(--wp--preset--spacing--40, 1.5rem);
    border: 2px dashed rgb(184, 184, 184);
    border-radius: 6px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.cwau-upload-box:hover {
border-color: var(--wp--preset--color--contrast-3, #999999);
    background: var(--wp--preset--color--accent-5, #fafafa);
    box-shadow: 0 2px 8px rgba(0, 124, 186, 0.15);
}

.cwau-upload-box.drag-over {
    border-color: #28a745;
    background: #f0fff4;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
}

.cwau-upload-icon {
    margin-bottom: 1em;
    /* width: 48px;
    height: 48px; */
}

.cwau-upload-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    margin: 0;
    display: block;
}



.cwau-upload-hint {
    margin: 0.5em 0 0 0;
    font-size: 0.8rem;
    color: #999;
}

.cwau-file-input {
    display: none;
}

.cwau-upload-progress {
    margin-top: 1.5em;
    padding: 1.5em;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.cwau-progress-bar {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1em;
}

.cwau-progress-fill {
    height: 100%;
background: var(--wp--preset--color--accent-2, #ff7300);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 124, 186, 0.4);
}

.cwau-progress-text {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    font-weight: 500;
}

#crop-area { max-width: 100%; }
#crop-image { max-width: 100%; height: auto; display: block; }

.cwau-toggle-orientation {
    margin-top: 1em;
    padding: 0.75em 1.5em;
background: var(--wp--preset--color--accent-2, #ff7300);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.95em;
    border-radius: var(--wp--custom--radius--pill, 999px);
    font-weight: 500;
    transition: all 0.3s ease;
}

.cwau-toggle-orientation:hover {
background: var(--wp--preset--color--accent-2, #ff7300);
    box-shadow:var(--wp--preset--shadow--natural);
}

.cwau-cart-thumb {
    display: block;
    width: auto;
    height: auto;
    border: 1px solid #ddd;
    padding: 2px;
    background: #fff;
}

/* Hide the inline small preview inside the block product details area. This prevents an
   additional small thumbnail from showing next to the 'Качено изображение' label in
   the Store API 'product detail' section while preserving any visual thumbnail used
   elsewhere (e.g., the cart row image replacement). */
[class*="wc-block-components-product-details"] .cwau-cart-thumb {
    display: none !important;
}

.custom-wall-art-message {
    display: none;
    margin-top: 1em;
    font-size: 0.95rem;
    padding: 12px 16px;
    border-radius: 4px;
    border-left: 4px solid #b00020;
    background: #fff5f5;
}

/* DPI-based message colors - using !important to ensure they override */
.custom-wall-art-message.dpi-low {
    color: #d32f2f !important; /* Red: below 100 DPI */
    border-left-color: #d32f2f !important;
    background: #ffebee !important;
    font-weight: bold;
}
.custom-wall-art-message.dpi-medium {
    color: #f57c00 !important; /* Orange/Yellow: 100-300 DPI */
    border-left-color: #f57c00 !important;
    background: #fff3e0 !important;
    font-weight: normal;
}
.custom-wall-art-message.dpi-high {
    color: #388e3c !important; /* Green: above 300 DPI */
    border-left-color: #388e3c !important;
    background: #e8f5e9 !important;
    font-weight: normal;
}

.custom-wall-art-message.debug {
    white-space: pre-wrap; /* preserve newlines for debug details */
}

@media (max-width: 425px) {
    .custom-wall-art-upload-content {
        padding: 1.5em;
    }

    .cwau-upload-box {
        padding: 2em 1.5em;
    }

    .cwau-upload-title {
        font-size: 1.1rem;
    }

    .cwau-upload-label {
        font-size: 1rem;
    }

    .cwau-upload-icon {
        /* width: 40px;
        height: 40px; */
    }
}

/* Loader overlay for add-to-cart processing */
.cwal-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.cwal-loader-overlay.active {
    display: flex;
}

.cwal-loader-content {
    background: white;
    padding: 2.5em;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 320px;
}

.cwal-loader-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5em;
    position: relative;
    display: inline-block;
}

.cwal-loader-spinner::after {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 5px solid #f3f3f3;
    border-color:  var(--wp--preset--color--accent-2, #ff7300) transparent  var(--wp--preset--color--accent-2, #ff7300) transparent;
    animation: cwal-spin 1.2s linear infinite;
}

@keyframes cwal-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cwal-loader-text {
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    margin: 0.5em 0;
}

.cwal-loader-subtext {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}