/* Reuse the gear/enclosure layout, typography, canvas tools and dialogs. */
.elementor-kit-723 .magnet-page .gear-toolbar-actions button,
.magnet-page .gear-toolbar-actions button {
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.magnet-page .gear-toolbar-actions svg {
    width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.magnet-page .gear-toolbar-actions button:focus-visible {
    outline:2px solid var(--gear-teal);outline-offset:3px;
}
@media(max-width:640px) {
    .magnet-page .gear-preview-toolbar {
        display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;
    }
    .magnet-page .gear-preview-toolbar>div:first-child {flex:1 1 auto}
    .magnet-page .gear-toolbar-actions {display:flex;flex-wrap:nowrap;gap:6px;margin-left:auto}
    .elementor-kit-723 .magnet-page .gear-toolbar-actions button,
    .magnet-page .gear-toolbar-actions button {
        width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
        border-radius:10px;color:var(--gear-teal);
    }
    .magnet-page .gear-toolbar-actions svg {width:22px;height:22px}
    .magnet-page .gear-toolbar-actions button span {display:none}
}
.magnet-page #magnet-canvas {display:block;width:100%;height:100%;touch-action:none}
@media(min-width:1025px) {
    .magnet-page #magnet-canvas,
    .magnet-page .magnet-motif-editor {
        transform-origin:right center;
        transition:transform .24s ease;
    }
    .magnet-page .gear-canvas-wrap.has-tool-editor #magnet-canvas,
    .magnet-page .gear-canvas-wrap.has-tool-editor .magnet-motif-editor {
        transform:translateX(14%) scale(.68);
    }
}
@media(prefers-reduced-motion:reduce) {
    .magnet-page #magnet-canvas,
    .magnet-page .magnet-motif-editor {transition:none}
}
.magnet-page #magnet-status.is-error {color:#ffae98}
.magnet-page #magnet-colors label {display:grid;gap:8px}
.magnet-page #magnet-price {font-size:clamp(1rem,2vw,1.5rem)}
.elementor-kit-723 .gear-page .gear-result-actions #magnet-order,
.gear-result-actions #magnet-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    margin: 0;
    padding: 13px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--gear-yellow);
    box-shadow: none;
    color: #0a0b0e;
    font: 700 .95rem/1.2 Rubik, Arial, sans-serif;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.gear-result-actions button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.elementor-kit-723 .gear-page .gear-result-actions #magnet-order:hover:not(:disabled),
.elementor-kit-723 .gear-page .gear-result-actions #magnet-order:focus-visible:not(:disabled) {
    border: 0;
    background: var(--gear-yellow);
    color: #0a0b0e;
    opacity: .85;
    transform: translateY(-2px);
}
.elementor-kit-723 .gear-page .gear-result-actions #magnet-order:disabled {
    border: 0;
    background: var(--gear-yellow);
    box-shadow: none;
    color: #0a0b0e;
    opacity: .4;
    cursor: not-allowed;
}

/* Custom file picker keeps the native keyboard-accessible input. */
.magnet-page .gear-fields .magnet-upload {
    position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:14px;
    padding:22px; border:1px dashed #34746f; border-radius:14px;
    background:linear-gradient(120deg,rgba(0,206,168,.09),rgba(0,206,168,.02));
    cursor:pointer; transition:border-color .18s,background .18s;
}
.magnet-page .magnet-upload:hover {border-color:var(--gear-teal); background:rgba(0,206,168,.1)}
.magnet-page .magnet-upload:focus-within {outline:2px solid var(--gear-teal);outline-offset:3px}
.magnet-page .magnet-upload input[type=file] {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.magnet-page .magnet-upload-icon {display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(0,206,168,.12);color:var(--gear-teal);flex:none}
.magnet-page .magnet-upload-icon svg {width:25px;height:25px}
.magnet-page .magnet-upload-copy {display:grid;gap:6px;flex:1 1 160px;min-width:0}
.magnet-page .magnet-upload-copy strong {overflow-wrap:anywhere;font-size:.85rem}
.magnet-page .magnet-upload-action {padding:11px 15px;border-radius:8px;background:var(--gear-teal);color:#071217;font-size:.72rem;font-weight:700}
.magnet-page #magnet-file-feedback {margin:0;overflow-wrap:anywhere}
.magnet-page #magnet-file-feedback.is-error {color:#ffae98}
.magnet-page .magnet-formats {min-width:0;margin:18px 0 0;padding:0;border:0}
.magnet-page .magnet-formats legend {margin-bottom:10px;color:#dce5ee;font-size:.71rem;font-weight:700}
.magnet-page .magnet-format-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:700px) {
    .magnet-page .magnet-format-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
.magnet-page .magnet-format-grid button {display:grid;gap:5px;min-width:0;padding:12px;border:1px solid #2c3c4e;border-radius:10px;background:#0b151e;color:#dce5ee;text-align:left;font:inherit;cursor:pointer}
.magnet-page .magnet-format-grid button strong {font-size:.72rem}
.magnet-page .magnet-format-grid button span {color:#93a6b3;font-size:.65rem}
.magnet-page .magnet-format-grid button:hover {border-color:var(--gear-teal)}
.magnet-page .magnet-format-grid button[aria-pressed=true] {border-color:var(--gear-teal);background:rgba(0,206,168,.12)}
.magnet-page .magnet-format-grid button:focus-visible {outline:2px solid var(--gear-teal);outline-offset:2px}
.magnet-page .magnet-size-controls {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px;margin-top:14px}
.magnet-page .magnet-size-controls .gear-fields--two {grid-template-columns:repeat(2,minmax(0,1fr))}
.magnet-page .magnet-free-toggle {min-width:0;margin:0}
@media (max-width:700px) {
    .magnet-page .magnet-size-controls {grid-template-columns:minmax(0,1fr);gap:14px}
    .magnet-page .magnet-size-controls .gear-fields--two {grid-template-columns:minmax(0,1fr)}
}
.magnet-page .magnet-free-toggle input {accent-color:var(--gear-teal)}

.magnet-page .gear-result-actions {grid-template-columns:minmax(0,1fr)}

.magnet-page .magnet-detail-warning {padding:16px;margin:0 0 16px;border:1px solid #d4a94c;border-left:4px solid #eabb55;border-radius:10px;background:#30291b;color:#fff1d3}
.magnet-page .magnet-detail-warning[hidden] {display:none}
.magnet-page .magnet-detail-warning strong {display:block;font-size:.85rem;line-height:1.4}
.magnet-page .magnet-detail-warning p {margin:8px 0;font-size:.75rem;line-height:1.6;color:#fff1d3}
.magnet-page .magnet-detail-warning small {display:block;font-size:.65rem;line-height:1.5;color:#d7c7a8}
.magnet-page .magnet-detail-warning button {margin-top:12px;padding:10px 16px;border:1px solid #eabb55;border-radius:8px;background:#eabb55;color:#17130b;font-family:inherit;font-size:.75rem;font-weight:700;line-height:1.4;cursor:pointer}
.magnet-page .magnet-detail-warning button:focus-visible {outline:2px solid white;outline-offset:3px}

.magnet-page .magnet-size-recommendation {margin:0 0 14px;padding:14px 16px;border:1px solid var(--gear-teal);border-radius:10px;background:rgba(0,206,168,.08);color:#dce5ee}
.magnet-page .magnet-size-recommendation[hidden] {display:none}
.magnet-page .magnet-size-recommendation strong {font-size:.85rem}
.magnet-page .magnet-size-recommendation p {margin:8px 0;font-size:.75rem;line-height:1.5}
.magnet-page .magnet-size-recommendation button {padding:10px 14px;border:0;border-radius:8px;background:var(--gear-teal);color:#071217;font-size:.75rem;font-weight:700;cursor:pointer}
.magnet-page .magnet-size-recommendation button:disabled {opacity:.65;cursor:default}
.magnet-page .magnet-size-recommendation button:focus-visible {outline:2px solid white;outline-offset:3px}

.magnet-page .magnet-motif-editor {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden;display:none}
.magnet-page .magnet-motif-editor polygon {fill:rgba(0,206,168,.08);stroke:#00ceb0;stroke-width:2;vector-effect:non-scaling-stroke}
.magnet-page .magnet-motif-editor circle {fill:#fff;stroke:#00a88f;stroke-width:2;pointer-events:all;cursor:nwse-resize;touch-action:none}
.magnet-page #magnet-motif-reset {justify-self:start;padding:9px 12px;border:1px solid #34746f;border-radius:8px;background:transparent;color:#dce5ee;font-size:.72rem;cursor:pointer}

.magnet-placement{margin:18px 0;padding:16px;border:1px solid #2b414d;border-radius:14px;background:#0d1a23}.magnet-placement input[type=range]{width:100%;min-height:44px;padding:0;accent-color:#00c8af}.magnet-placement-actions{display:flex;gap:8px;flex-wrap:wrap}.magnet-placement-actions button{min-height:44px;padding:10px 14px;border:1px solid #31515b;border-radius:9px;background:#123039;color:#e6f1f5;font-weight:600}.magnet-placement output{color:#65ded0}

.magnet-page .magnet-nfc-settings {margin:18px 0;padding:16px;border:1px solid #2b414d;border-radius:12px;background:#0d1a23}
.magnet-page .magnet-nfc-settings .gear-toggle {margin:0}
.magnet-page #magnet-nfc-fields {margin-top:14px}
.magnet-page #magnet-nfc-fields[hidden],.magnet-page .magnet-nfc-badge[hidden] {display:none}
.magnet-page .magnet-nfc-badge {position:absolute;display:flex;align-items:center;gap:6px;pointer-events:none;z-index:2;padding:7px 10px;border:1px solid #65ded0;border-radius:20px;background:#103c38;color:#c7fff5;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 2px 10px #0004}
.magnet-page .magnet-nfc-badge svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}