.fleury-custom-size {
    --custom-size-blue: #36f;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 480px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #fff;
    color: #172b4d;
    font: 16px/1.5 Arial, Helvetica, sans-serif;
    text-align: left;
    box-shadow: 0 18px 60px #0f172a40;
}
.fleury-custom-size:not([open]) { display: none; }
.fleury-custom-size::backdrop { background: #0f172a80; }
.fleury-custom-size *, .fleury-custom-size *::before, .fleury-custom-size *::after { box-sizing: border-box; }
.fleury-custom-size .fleury-custom-size-heading { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.fleury-custom-size h2 { flex: 1; margin: 7px 0 0; padding: 0; color: inherit; font: bold 24px/1.25 Arial, Helvetica, sans-serif; }
.fleury-custom-size p { margin: 0 0 20px; padding: 0; color: inherit; font: inherit; }
.fleury-custom-size button { cursor: pointer; font: bold 16px/1.4 Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; }
.fleury-custom-size .fleury-custom-size-close { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid #cbd5e1; border-radius: 8px; background: #f1f5f9; color: #172b4d; font-size: 28px; line-height: 1; }
.fleury-custom-size form { margin: 0; padding: 0; }
.fleury-custom-size fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.fleury-custom-size legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font: bold 16px/1.5 Arial, Helvetica, sans-serif; color: inherit; }
.fleury-custom-size .fleury-custom-size-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fleury-custom-size .fleury-custom-size-depth-button { min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #b5c8ff; border-radius: 10px; background: #f3f6ff; color: #172b4d; }
.fleury-custom-size .fleury-custom-size-depth-button:hover { border-color: var(--custom-size-blue); background: #e7eeff; }
.fleury-custom-size .fleury-custom-size-depth-button[aria-pressed="true"] { border-color: var(--custom-size-blue); background: var(--custom-size-blue); color: #fff; box-shadow: 0 2px 6px #3366ff30; }
.fleury-custom-size .fleury-custom-size-error { margin: 8px 0 0; color: #b42318; font-size: 14px; }
.fleury-custom-size [hidden] { display: none; }
.fleury-custom-size .fleury-custom-size-dimensions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.fleury-custom-size .fleury-custom-size-dimensions label { display: block; margin: 0; color: inherit; font-weight: bold; }
.fleury-custom-size .fleury-custom-size-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin-top: 6px; border: 1px solid #b5c8ff; border-radius: 10px; background: #f3f6ff; }
.fleury-custom-size .fleury-custom-size-stepper button { width: 44px; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--custom-size-blue); font-size: 24px; line-height: 1; }
.fleury-custom-size .fleury-custom-size-stepper button:hover:not(:disabled) { background: #e7eeff; }
.fleury-custom-size .fleury-custom-size-stepper button:disabled { color: #94a3b8; cursor: default; }
.fleury-custom-size input[type="text"] { display: block; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 10px 4px; border: 0; border-left: 1px solid #dce5ff; border-right: 1px solid #dce5ff; border-radius: 0; background: #fff; color: #172b4d; font: 20px/1.4 Arial, Helvetica, sans-serif; text-align: center; box-shadow: none; }
.fleury-custom-size input[type="text"]:focus-visible { outline-offset: -3px; }
.fleury-custom-size input::placeholder { color: #64748b; opacity: 1; }
.fleury-custom-size .fleury-custom-size-help { margin: 10px 0 20px; color: #475569; font-size: 14px; }
.fleury-custom-size .fleury-custom-size-submit { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 16px; border: 1px solid var(--custom-size-blue); border-radius: 10px; background: var(--custom-size-blue); color: #fff; white-space: normal; }
.fleury-custom-size .fleury-custom-size-submit:hover { background: #244ed6; }
.fleury-custom-size .fleury-custom-size-destination { margin: 10px 0 0; color: #475569; font-size: 13px; }
.fleury-custom-size :focus-visible { outline: 3px solid #d97706; outline-offset: 3px; }
@media (max-width: 400px) {
    .fleury-custom-size .fleury-custom-size-dimensions { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 360px) {
    .fleury-custom-size { padding: 18px; }
    .fleury-custom-size h2 { font-size: 22px; }
    .fleury-custom-size .fleury-custom-size-dimensions { gap: 10px; }
}
