/**
 * Settings
 */

.lipnamo .form-table th {vertical-align:middle;}
.lipnamo .form-table th, .lipnamo .form-table td {padding:10px;}
.lipnamo .lipnamo-generate {margin-bottom:20px;}

/**
 * Preview Gallery
 */

.lipnamo-preview {
    height:300px; max-width:800px;
    background-color:#fff;border:#ccd0d4 solid 1px;
    margin-bottom:20px;overflow-x:auto;
}
.lipnamo-preview .lipnamo-input__img {margin-bottom:10px;}

.lipnamo-preview .lipnamo-preview-item.attachment {width:16.66%;}
.lipnamo-preview .lipnamo-preview-item.attachment img {max-height:100%; max-width:100%;}

/* Loading state for preview items */
.lipnamo-preview-item.lipnamo-loading .lipnamo-preview-wrapper {
    opacity:0.5;
    pointer-events:none;
}

.lipnamo-preview-item.lipnamo-loading .lipnamo-preview-wrapper::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:2px solid #ccc;
    border-top-color:#0073aa;
    border-radius:50%;
    animation:lipnamo-spin 1s linear infinite;
}

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

/* Empty state */
.lipnamo-preview__list:empty::after {
    content:"No images selected. Click 'Upload Images' to add some.";
    display:block;
    padding:20px;
    text-align:center;
    color:#666;
    font-style:italic;
}

/**
 * Length control
 */

.lipnamo-length-control input {margin:0 0 16px;}
.lipnamo-length-control label, .lipnamo-length-control select {
    display:inline-block;min-width:160px;vertical-align:middle;
    margin:6px 0 12px !important;
}

/**
 * Progress Bar
 */

.lipnamo-progress-wrapper {
    max-width:1000px;
    margin-bottom:20px;
    background-color:#fff;
    padding:15px 10px;
    border:1px solid #c3c4c7;
    border-radius:4px;
}

.lipnamo-progress {
    margin-bottom:5px;
    color:#1d2327;
    background-color:#dcdcde;
    border-radius:3px;
    overflow:hidden;
    height:20px;
}

.lipnamo-progress-bar {
    height:20px;
    padding:1px 0;
    background-color:#2271b1;
    border-radius:2px;
    transition:width 0.3s ease;
}