/* Banner layout */
.dragbanner{width:100%;min-height:200px;position:relative;z-index:100;overflow:hidden;color:#fff;box-sizing:border-box}
.dragbanner-inner{height:100%;min-height:200px;display:flex;position:relative;z-index:2}
.dragbanner-inner.align-center{justify-content:center;align-items:center;padding:0 20px}
.dragbanner-inner.align-center-left{justify-content:flex-start;align-items:center;padding:0 40px}
.dragbanner-inner.align-bottom-left{justify-content:flex-start;align-items:flex-end;padding:20px 40px}
.dragbanner-content{width:100%;margin:0 auto}

/* Alignment-specific text + element centering */
.align-center .dragbanner-content{text-align:center}
.align-center .dragbanner-title-row{justify-content:center}
.align-center .dragbanner-underline{margin-left:auto;margin-right:auto}

/* Title row — title + settings icon inline */
.dragbanner-title-row{display:flex;align-items:center;gap:10px}
.dragbanner-title{color:#fff;margin:0;padding:0;line-height:1.05;font-weight:700;font-size:clamp(18px, 6vw, var(--title-size))}
.dragbanner-subtitle{color:rgba(255,255,255,.95);margin-top:12px;font-size:clamp(12px, 3.5vw, var(--subtitle-size))}
.dragbanner-underline{height:5px;width:30%;background:rgba(255,255,255,.3);margin-top:12px}

/* Settings toggle — inline with title */
.dragbanner-settings-toggle{
    flex-shrink:0;
    background:none;border:0;cursor:pointer;padding:6px;
    display:inline-flex;align-items:center;justify-content:center;
    opacity:.65;transition:opacity .2s;line-height:0;
    position:relative;z-index:10
}
.dragbanner-settings-toggle:hover{opacity:1}
.dragbanner-settings-toggle svg{width:20px;height:20px;display:block;pointer-events:none}

/* ---- Background image ---- */
.dragbanner-bg{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:1;pointer-events:none;
    user-select:none;-webkit-user-select:none
}
.dragbanner.has-bg-image .dragbanner-inner{text-shadow:0 1px 6px rgba(0,0,0,.4)}
.dragbanner-gradient{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---- Add Banner Image button ---- */
.dragbanner-add-img{
    margin-top:18px;
    display:inline-flex;align-items:center;justify-content:center;
    width:150px;height:35px;
    background:rgba(255,255,255,.15);border:2px dashed rgba(255,255,255,.4);
    color:#fff;font-size:13px;font-weight:600;
    cursor:pointer;transition:all .2s;
    backdrop-filter:blur(2px);position:relative;z-index:5
}
.dragbanner-add-img:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.6)}

/* ---- Dropzone ---- */
.dragbanner-dropzone{
    position:absolute;inset:0;z-index:50;
    background:#d4d4d4;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer
}
.dragbanner-dropzone.drag-over{background:#c0c0c0}
.dragbanner-file-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.dragbanner-dropzone-content{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:#555;pointer-events:none;z-index:1
}
.dragbanner-dropzone-content p{margin:14px 0 0;font-size:15px;font-weight:500;color:#555}
.dragbanner-dropzone-content svg{opacity:.5}
.dragbanner-dropzone-cancel{
    position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
    z-index:10;padding:6px 20px;font-size:13px;color:#666;
    background:none;border:none;text-decoration:underline;
    cursor:pointer
}
.dragbanner-dropzone-cancel:hover{color:#222}

/* ---- Image action buttons (delete / replace) ---- */
.dragbanner-img-actions{
    position:absolute;bottom:12px;right:12px;z-index:10;
    display:flex;gap:6px
}
.dragbanner-img-btn{
    width:34px;height:34px;border-radius:8px;border:0;
    background:rgba(0,0,0,.55);color:#fff;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s;backdrop-filter:blur(4px)
}
.dragbanner-img-btn:hover{background:rgba(0,0,0,.75)}
.dragbanner-img-replace{background:#42a47f}
.dragbanner-img-replace:hover{background:#378c6b}
.dragbanner-img-delete{background:rgba(220,38,38,.8)}
.dragbanner-img-delete:hover{background:rgba(185,28,28,.9)}

/* ---- Position bar ---- */
.dragbanner-pos-bar{
    position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;
    width:550px;max-width:calc(100% - 40px);border-radius:4px;
    background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
    padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:12px;
    font-size:13px;color:rgba(255,255,255,.8)
}
.dragbanner-pos-save{
    padding:7px 18px;border:0;border-radius:6px;
    background:#10b981;color:#fff;font-size:13px;font-weight:600;
    cursor:pointer;transition:background .15s
}
.dragbanner-pos-save:hover{background:#059669}
.dragbanner-pos-save:disabled{opacity:.6;cursor:not-allowed}
.dragbanner-pos-cancel{
    padding:7px 18px;border:1px solid rgba(255,255,255,.3);border-radius:6px;
    background:transparent;color:#fff;font-size:13px;font-weight:500;
    cursor:pointer;transition:background .15s
}
.dragbanner-pos-cancel:hover{background:rgba(255,255,255,.1)}

/* Position mode: make image draggable */
.dragbanner.positioning .dragbanner-bg{pointer-events:auto;cursor:ns-resize}
.dragbanner.positioning .dragbanner-inner{pointer-events:none}
.dragbanner.positioning .dragbanner-img-actions{display:none}

/* Uploading state */
.dragbanner-dropzone.uploading .dragbanner-dropzone-content{opacity:.4}
.dragbanner-dropzone .dragbanner-upload-progress{
    position:absolute;z-index:5;color:#fff;font-size:14px;font-weight:600
}

/* Overlay */
.dragbanner-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.45);
    z-index:9998;display:none;backdrop-filter:blur(2px)
}
.dragbanner-overlay[aria-hidden="false"]{display:block}

/* Modal */
.dragbanner-modal{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    background:#fff;color:#1a1a1a;
    border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);
    display:none;z-index:9999;
    width:420px;max-width:92vw;max-height:90vh;overflow-y:auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
}
.dragbanner-modal[aria-hidden="false"]{display:block}

.dragbanner-modal-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid #e5e7eb
}
.dragbanner-modal-header h3{margin:0;font-size:16px;font-weight:600;color:#111}
.dragbanner-close{
    background:none;border:0;font-size:22px;cursor:pointer;
    color:#999;padding:0;line-height:1;transition:color .15s
}
.dragbanner-close:hover{color:#333}

/* Form */
.dragbanner-form{padding:20px}

.dragbanner-field{margin-bottom:16px}
.dragbanner-field label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:5px}
.dragbanner-field input[type="number"],
.dragbanner-field select{
    width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;
    font-size:14px;color:#1a1a1a;background:#fafafa;box-sizing:border-box;
    transition:border-color .15s
}
.dragbanner-field input[type="number"]:focus,
.dragbanner-field select:focus{border-color:#4f46e5;outline:none;background:#fff}

/* Color picker row */
.dragbanner-color-row{display:flex;align-items:center;gap:10px}
.dragbanner-color-row input[type="color"]{
    width:40px;height:36px;border:1px solid #d1d5db;border-radius:6px;
    padding:2px;cursor:pointer;background:#fafafa
}
.dragbanner-hex-input{
    flex:1;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;
    font-size:14px;font-family:monospace;color:#1a1a1a;background:#fafafa;
    box-sizing:border-box;transition:border-color .15s
}
.dragbanner-hex-input:focus{border-color:#4f46e5;outline:none;background:#fff}

/* Side-by-side fields */
.dragbanner-field-group{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.dragbanner-field-half{flex:1;min-width:0;margin-bottom:0}

/* Toggle checkboxes */
.dragbanner-toggle{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:500;color:#555;cursor:pointer
}
.dragbanner-toggle input[type="checkbox"]{
    width:16px;height:16px;accent-color:#4f46e5;cursor:pointer
}

/* Actions */
.dragbanner-actions{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb}
.dragbanner-save{
    flex:1;padding:10px 0;border:0;border-radius:6px;
    background:#4f46e5;color:#fff;font-size:14px;font-weight:600;
    cursor:pointer;transition:background .15s
}
.dragbanner-save:hover{background:#4338ca}
.dragbanner-save:disabled{opacity:.6;cursor:not-allowed}
.dragbanner-cancel{
    padding:10px 18px;border:1px solid #d1d5db;border-radius:6px;
    background:#fff;color:#555;font-size:14px;font-weight:500;
    cursor:pointer;transition:background .15s
}
.dragbanner-cancel:hover{background:#f3f4f6}

/* Responsive */
@media(max-width:1010px){
    .dragbanner-gradient{display:none}
    .dragbanner.overlay-mode{padding-top:var(--base-pt) !important}
    .dragbanner-img-actions{display:none}
    .dragbanner-add-img{display:none}
}
@media(max-width:768px){
    .dragbanner-inner{min-height:160px}
}
@media(max-width:480px){
    .dragbanner-inner{min-height:120px}
    .dragbanner-modal{width:96vw}
    .dragbanner-dropzone-content{padding:30px 20px}
}