/* Leo 3D Design — frontend (navy + gold) */
.leo3d { max-width: 860px; margin: 0 auto; color: #1c2b4a; font-size: 16px; }
.leo3d-card { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; padding: 28px; box-shadow: 0 6px 24px rgba(11,42,91,.08); }
.leo3d-card h2 { color: #0b2a5b; margin-top: 0; font-size: 26px; }
.leo3d-sub { color: #5b6b8c; margin-top: -8px; }
.leo3d-form label { display: block; margin: 14px 0; font-weight: 600; color: #0b2a5b; }
.leo3d-form input[type=text], .leo3d-form input[type=email], .leo3d-form input[type=tel],
.leo3d-form input[type=number], .leo3d-form input[type=url], .leo3d-form select, .leo3d-form textarea {
    display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #c9d4e8;
    border-radius: 8px; font-size: 15px; font-weight: 400; box-sizing: border-box;
}
.leo3d-form.inline { display: flex; gap: 10px; align-items: flex-end; }
.leo3d-form.inline label { flex: 1; margin: 0; }
.leo3d-check { display: flex !important; align-items: center; gap: 10px; }
.leo3d-check input { width: auto !important; margin: 0 !important; }
.leo3d-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.leo3d-btn { display: inline-block; background: #e8b93c; color: #0b2a5b; font-weight: 700; border: none;
    border-radius: 8px; padding: 12px 22px; cursor: pointer; text-decoration: none; font-size: 15px; }
.leo3d-btn:hover { background: #d9a92e; color: #0b2a5b; }
.leo3d-btn.big { display: block; text-align: center; font-size: 17px; margin-top: 16px; }
.leo3d-btn.small { padding: 8px 14px; font-size: 13px; }
.leo3d-btn.ghost { background: #eef1f7; color: #0b2a5b; }
.leo3d-total { background: #0b2a5b; color: #fff; border-radius: 10px; padding: 18px; margin: 18px 0; }
.leo3d-total.slim { padding: 12px 18px; }
.leo3d-line { display: flex; justify-content: space-between; padding: 5px 0; }
.leo3d-line.grand { font-size: 20px; font-weight: 800; border-top: 1px solid rgba(255,255,255,.25); margin-top: 8px; padding-top: 12px; }
.leo3d-line.grand span:last-child { color: #e8b93c; }
.leo3d-note { font-size: 13px; color: #8a97b3; }
.leo3d-empty { color: #8a97b3; font-style: italic; }
.leo3d-job { border: 1px solid #e3e8f2; border-radius: 10px; padding: 18px; margin: 18px 0; }
.leo3d-job-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #0b2a5b; }
.leo3d-status { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; background: #eef1f7; color: #0b2a5b; text-transform: uppercase; }
.leo3d-status.st-new { background: #fff3cd; color: #856404; }
.leo3d-status.st-in_progress { background: #cce5ff; color: #004085; }
.leo3d-status.st-in_review { background: #e2d9f3; color: #3d1f7a; }
.leo3d-status.st-delivered { background: #d4edda; color: #155724; }
.leo3d-status.st-cancelled { background: #f8d7da; color: #721c24; }
.leo3d-actions { margin: 12px 0; display: flex; gap: 10px; }

/* Before / After slider */
.leo3d-ba { position: relative; overflow: hidden; border-radius: 10px; user-select: none; margin: 12px 0; background: #0b2a5b; }
.leo3d-ba-img { display: block; width: 100%; height: auto; pointer-events: none; }
.leo3d-ba-top { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; border-right: 3px solid #e8b93c; }
.leo3d-ba-top .leo3d-ba-img { width: auto; height: 100%; max-width: none; }
.leo3d-ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.leo3d-ba-handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);
    background: #e8b93c; color: #0b2a5b; font-weight: 800; border-radius: 50%; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: ew-resize; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.leo3d-ba-tag { position: absolute; top: 10px; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px;
    background: rgba(11,42,91,.75); color: #fff; text-transform: uppercase; pointer-events: none; }
.leo3d-ba-tag.left { left: 10px; }
.leo3d-ba-tag.right { right: 10px; background: rgba(232,185,60,.9); color: #0b2a5b; }

/* Gallery */
.leo3d-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.leo3d-gallery-cap { text-align: center; font-weight: 700; color: #0b2a5b; margin-top: 6px; }
@media (max-width: 640px) { .leo3d-gallery-grid, .leo3d-grid2 { grid-template-columns: 1fr; } }