/*
 * BE Skin 4D Maker — App CSS
 * Built on top of OreUI by Spectrollay
 */

/* ─── Layout centering ─── */
main {
    padding-bottom: 40px;
    min-width: unset !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Constrain konten di dalam block, bukan block-nya */
.main_title_area,
.main_block_content,
.main-header {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* ─── Header ─── */
.header_title {
    font-family: "Minecraft Ten", sans-serif;
    font-size: 17px !important;
    color: #1E1E1F;
    letter-spacing: 0.5px;
}

/* ─── main_title overrides ─── */
.main_title_span {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    font-family: "NotoSans Bold", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.main_title_span_main {
    font-family: "Minecraft Seven", sans-serif;
    font-size: 22px;
    margin-top: 4px;
}

.main_title_span_sub {
    font-family: "NotoSans Bold", sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

/* ─── footer_info ─── */
.footer_info {
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    padding: 16px 0;
    font-family: "NotoSans Bold", sans-serif;
}

/* ─── main-header (section label) ─── */
.main-header {
    font-family: "Minecraft Five Bold", sans-serif !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 8px 16px !important;
}

/* ─── Input fields ─── */
.ore_input {
    background-color: #D0D1D4;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -3px #58585A, inset 2px 2px rgba(255,255,255,0.5);
    color: #000;
    font-family: "NotoSans Bold", sans-serif;
    font-size: 14px;
    height: 38px;
    margin: 4px 0;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow 0.15s;
}
.ore_input:focus {
    box-shadow: inset 0 -3px #2E6BE5, inset 2px 2px rgba(255,255,255,0.5);
    background-color: #E6E8EB;
}
.ore_input::placeholder { color: #58585A; }

/* ─── Select ─── */
.ore_select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #D0D1D4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 2px solid #1E1E1F;
    box-shadow: inset 0 -3px #58585A, inset 2px 2px rgba(255,255,255,0.5);
    color: #000;
    cursor: pointer;
    font-family: "NotoSans Bold", sans-serif;
    font-size: 13px;
    height: 38px;
    margin: 4px 0;
    padding: 0 32px 0 10px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.ore_select:focus {
    box-shadow: inset 0 -3px #2E6BE5, inset 2px 2px rgba(255,255,255,0.5);
    background-color: #E6E8EB;
}
.ore_select option { background-color: #E6E8EB; color: #000; }

/* ─── Field group ─── */
.ore_field_group { display: flex; flex-direction: column; gap: 4px; }
.ore_field { margin-bottom: 12px; }
.ore_label {
    display: block;
    font-family: "NotoSans Bold", sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}
.ore_required { color: #F46D6D; }
.ore_optional { color: rgba(255,255,255,0.4); font-size: 11px; }
.ore_hint { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

/* ─── Radio ─── */
.ore_radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}
.ore_radio input[type="radio"] { accent-color: #3C8527; cursor: pointer; width: 16px; height: 16px; }

/* ─── Checkbox row ─── */
.ore_checkbox_row {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 0;
}

/* ─── Dropzone ─── */
.ore_dropzone {
    align-items: center;
    background-color: rgba(255,255,255,0.05);
    border: 2px dashed #58585A;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    width: 100%;
    margin: 4px 0;
}
.ore_dropzone:hover, .ore_dropzone_hover {
    background-color: rgba(46,107,229,0.08);
    border-color: #2E6BE5;
}
.ore_dropzone_ok {
    background-color: rgba(108,195,73,0.08);
    border-color: #6CC349;
    border-style: solid;
}

/* Dropzone mini (inline) */
.ore_dropzone_mini {
    flex-direction: row;
    min-height: 54px;
    padding: 8px 12px;
    gap: 10px;
    justify-content: flex-start;
}

.dz_icon { font-size: 36px; }
.dz_label { font-size: 14px; color: rgba(255,255,255,0.7); }
.dz_sub { font-size: 11px; color: rgba(255,255,255,0.4); }
.dz_mini_img {
    width: 40px; height: 40px;
    object-fit: contain; image-rendering: pixelated;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.dz_mini_info { text-align: left; }

/* ─── Summary rows ─── */
.ore_summary_row {
    display: flex;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ore_sum_k { color: rgba(255,255,255,0.5); width: 120px; flex-shrink: 0; font-family: "NotoSans Bold", sans-serif; }
.ore_sum_v { color: rgba(255,255,255,0.9); word-break: break-all; }

/* ─── Skin grid (preview page) ─── */
.ore_skin_grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ore_skin_tile {
    align-items: center;
    background-color: #1E1E1F;
    border: 2px solid #333334;
    display: flex;
    flex-direction: column;
    padding: 6px;
    width: 60px;
}

/* ─── Skin thumb (list) ─── */
.ore_skin_thumb {
    align-items: center;
    background-color: #1E1E1F;
    border: 2px solid #333334;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    width: 48px;
}

/* ─── Link btn (text button) ─── */
.ore_link_btn {
    background: none;
    border: none;
    color: #F46D6D;
    font-family: "NotoSans Bold", sans-serif;
    font-size: 11px;
    cursor: pointer;
    padding: 3px 0;
}

/* ─── code tag ─── */
code {
    font-family: "Minecraft Five", monospace;
    font-size: 0.85em;
    background: rgba(255,255,255,0.1);
    padding: 1px 4px;
}