/* ============================================================
   Orbitalia – Drag and Drop Upload for Elementor Forms
   All colours and sizes are driven by CSS custom properties
   set inline on .elementor-dragandrophandler-container.
   ============================================================ */

/* Utility */
.hidden {
    display: none !important; /* keeps hidden file input invisible */
}

.elementor-field-type-file_upload label {
    width: 100%;
}

/* ── File list ─────────────────────────────────────────────── */
.elementor-taks-type {
    list-style: none;
    margin: 0;
    padding: 0;
}
.elementor-taks-type li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.elementor-taks-type li > div {
    flex: 1;
}
.elementor-taks-type li .elementor-fileprogressBar {
    flex: 2;
}

/* ── Drop zone container ───────────────────────────────────── */
.elementor-dragandrophandler-container {
    width: 100%;
}

.elementor-dragandrophandler {
    border-width:  var(--dnd-border-width,  2px);
    border-style:  var(--dnd-border-style,  dashed);
    border-color:  var(--dnd-border-color,  #92AAB0);
    border-radius: var(--dnd-border-radius, 0);
    background:    var(--dnd-bg,            transparent);
    color:         var(--dnd-text-color,    #92AAB0);
    width:    100%;
    height:   var(--dnd-height,  200px);
    padding:  var(--dnd-padding, 10px 0 10px 10px);
    font-size:  200%;
    text-align: center;
    position:   relative;
    box-sizing: border-box;
    transition: border-color 0.2s ease-out, opacity 0.2s ease-out;
}

/* Drag-over state – JS adds this class instead of inline styles */
.elementor-dragandrophandler.is-dragging {
    border-style: solid;
    opacity: 0.85;
}

.elementor-dragandrophandler-inner {
    overflow:       hidden;
    white-space:    nowrap;
    width:          100%;
    text-overflow:  ellipsis;
    text-align:     center;
    line-height:    40px;
    padding-top:    15px;
}

/* ── Drag & Drop text ──────────────────────────────────────── */
.elementor-text-drop {
    font-size:   var(--dnd-drop-text-size, 35px);
    font-weight: bold;
}

.elementor-text-or {
    font-size: var(--dnd-or-size, 16px);
}

/* ── Browse button ─────────────────────────────────────────── */
.elementor-text-browser a {
    display:      inline-block;
    background:   var(--dnd-btn-bg,           #6381E6);
    color:        var(--dnd-btn-color,         #fff);
    border-color: var(--dnd-btn-border-color,  #6381E6);
    font-size:    var(--dnd-btn-font-size,     18px);
    font-weight:  var(--dnd-btn-font-weight,   700);
    padding:      10px 20px;
    border-radius: 4px;
    text-align:   center;
    vertical-align: top;
    cursor:       pointer;
    text-decoration: none;
    transition:   opacity 0.2s ease-out;
}
.elementor-text-browser a:hover {
    opacity: 0.8;
}

/* ── Progress bar ──────────────────────────────────────────── */
.elementor-drop-progressBar {
    width:       calc(100% - 65px);
    border-radius: 5px;
    overflow:    hidden;
    display:     inline-block;
    margin:      0 10px 5px 65px;
    vertical-align: top;
    flex:        6;
    box-sizing:  content-box;
}
.elementor-drop-progressBar div {
    height:           auto;
    color:            #fff;
    text-align:       right;
    line-height:      15px;
    width:            0;
    background-color: #4caf50;
    border-radius:    3px;
    font-size:        13px;
}
.elementor-drop-progressBar.elementor-text-error-pro div {
    background-color: #565555;
}
.elementor-drop-progressBar.elementor-text-error {
    border: none;
    color:  red;
}

/* ── Status bar ────────────────────────────────────────────── */
.elementor-drop-statusbar {
    width:         100%;
    padding:       10px 10px 0;
    vertical-align: top;
    margin:        10px 0;
    position:      relative;
}
.elementor-drop-statusbar > div {
    overflow: hidden;
}
.elementor-drop-text-error {
    color:        red;
    padding-left: 50px;
}

/* ── File type badge ───────────────────────────────────────── */
.elementor-drop-type_file {
    display:       inline-block;
    position:      absolute;
    font-size:     12px;
    font-weight:   700;
    line-height:   13px;
    margin-top:    25px;
    padding:       0 4px;
    border-radius: 2px;
    box-shadow:    1px 1px 2px #abc;
    color:         #fff;
    background:    #0080c8;
    text-transform: uppercase;
}

.elementor-drop-filename {
    display:       inline-block;
    vertical-align: top;
    margin-left:   65px;
}

.elementor-drop-type {
    width:      50px;
    height:     50px;
    background: url(../images/generic.png) no-repeat center center;
    background-size: 100%;
    position:   absolute;
}

.elementor-drop-img {
    width:    50px;
    height:   50px;
    position: absolute;
}
.elementor-drop-img img {
    width:  100%;
    height: 100%;
}

.elementor-drop-filesize {
    display:       inline-block;
    vertical-align: top;
    color:         #444242;
    font-weight:   700;
    margin-left:   10px;
    margin-right:  5px;
}

/* ── Remove / abort controls ───────────────────────────────── */
.elementor_file_upload_remove,
.elementor-drop-abort {
    position:   absolute;
    top:        10px;
    right:      10px;
    width:      16px;
    height:     16px;
    background: url(../images/remove.png) center no-repeat;
    cursor:     pointer;
}
.elementor_file_upload_remove a {
    text-decoration: none;
    display:         inline-block;
    background:      #f7f7f8 url(../images/trash.png) center no-repeat;
    text-indent:     -999999px;
    width:           25px;
    height:          25px;
    border:          1px solid #34495e;
}
.elementor_file_upload_remove a:hover {
    opacity: 0.8;
}

/* ── Responsive ────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .elementor-dragandrophandler-inner {
        padding-top: 10px;
    }
}