/*
 * Sticker Configurator — "allowed upload formats" tooltip.
 * Companion stylesheet (NOT part of the compiled React bundle in build/).
 * Attaches a small "?" help badge to the upload dropzone (.adtisk-upload-dropzone).
 */

.scw-help {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1677ff; /* Ant Design primary */
    color: #fff;
    font: 600 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: center;
    cursor: help;
    z-index: 10;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.scw-help:hover,
.scw-help:focus {
    background: #0958d9;
    outline: none;
}

.scw-help-bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    max-width: 280px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font: 400 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
    white-space: normal;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 11;
    pointer-events: none;
}

/* little arrow pointing up at the badge */
.scw-help-bubble::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 6px;
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.85);
}

.scw-help:hover .scw-help-bubble,
.scw-help:focus .scw-help-bubble,
.scw-help.scw-open .scw-help-bubble {
    display: block;
}

/* Inline variant — badge sits next to a label (e.g. the "Proportional" checkbox)
   instead of in a corner; the bubble drops straight down, centered under it. */
.scw-help.scw-help-inline {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
}
.scw-help-inline .scw-help-bubble {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.scw-help-inline .scw-help-bubble::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/*
 * Modal sizing — the enlarged Shape Preview (400x340) made the right column
 * taller than the modal, pushing the confirm checkbox + "Add to cart" off the
 * bottom. Give the modal more vertical room (smaller top/bottom margin) and let
 * it scroll if it still doesn't fit, so the button is always reachable.
 */
.adtisk-modal .modal-dialog {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
}

.adtisk-modal .modal-content {
    min-height: 0 !important;                      /* cancel the theme's min-height:100vh */
    max-height: calc(100vh - 0.8rem) !important;
    overflow-y: auto !important;
}

/*
 * THE ACTUAL HEIGHT LEVER: the body row carries an inline `height:70vh`.
 * Inline styles only lose to a stylesheet rule marked !important, so override
 * it here. This makes the whole modal taller and gives the right column enough
 * room that the confirm box + "Add to cart" aren't cut off at the bottom.
 */
.adtisk-modal .modal-body > .d-flex.align-items-stretch {
    height: 80vh !important;
}

/*
 * Locked steps — steps whose prerequisites aren't met used to be hidden
 * entirely. Now they always render but get .scw-locked: dimmed + non-interactive,
 * so the user can see there are further steps still to complete.
 */
.scw-locked {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * Size (Width/Height) number inputs — now ~half width with a "cm" label after
 * them. Hide the spinner arrows and tighten padding so the max value "12.7"
 * still fits in the narrower field, and center the number.
 */
.adtisk-modal input[type="number"]::-webkit-inner-spin-button,
.adtisk-modal input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.adtisk-modal input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    max-width: 56px !important;   /* bumped up from the 42px that was too small */
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}

/* Tighten the gap between each step's title and its content by ~4px (8px -> 4px). */
.adtisk-modal .adtisk-section-title {
    margin-bottom: 4px !important;
}

/*
 * No hover "pop": the theme thickens the card border 1px -> 2px on hover, which
 * shifts the content. Keep the border 1px on hover (color/shadow still change),
 * so nothing moves. (Leave the .selected 2px highlight as-is.)
 */
.adtisk-modal .adtisk-card:hover:not(.selected) {
    border-width: 1px !important;
}

/*
 * Steps 1 & 2 are taller than their content (extra white space). Trim the
 * min-height of the equal-height cards / upload dropzone by ~12px (6.5rem -> 5.75rem)
 * so the modal fits the screen better.
 */
.adtisk-modal .adtisk-card.equal-height > div,
.adtisk-modal .adtisk-card.equal-height .adtisk-upload-dropzone {
    min-height: 5.75rem !important;
}

/* Replace the light gray (#f8fafc) on the header (top row) and right column with dark #212529. */
.adtisk-modal .adtisk-modal-header {
    background: #2c3034 !important;
}
.adtisk-modal .flex-shrink-0.bg-light {
    background: #2c3034 !important;
}

/* Light text so content on the dark header + right column is legible. */
.adtisk-modal .adtisk-modal-header,
.adtisk-modal .adtisk-modal-header *,
.adtisk-modal .flex-shrink-0.bg-light,
.adtisk-modal .flex-shrink-0.bg-light * {
    color: #f1f3f5 !important;
}

/* "Total:" / "Skupaj:" in the brand blue (overrides the light-text rule above). */
.adtisk-modal .flex-shrink-0.bg-light .scw-total {
    color: #005daa !important;
}

/* Wrap the Total + per-sticker summary in a step-card-style dark panel so the
   blue "Skupaj:" stands out against a darker background. */
.adtisk-modal .price-summary {
    background: #212529;
    border: 1px solid #495057;
    border-radius: 14px;
    padding: 12px 16px;
}

/* The configurator wrapper only holds the trigger button now; index.css gives it a
   #f8fafc background that showed as a white box behind the button's rounded corners.
   Make it transparent so the button sits flush on the page. */
.adtisk-configurator {
    background: transparent !important;
}

/* Darker-gray borders (columns + modal outline) to suit the dark theme. */
.adtisk-modal .modal-content {
    border-color: #495057 !important;
}
.adtisk-modal .adtisk-modal-header {
    border-bottom-color: #495057 !important;
}
.adtisk-modal .flex-shrink-0.bg-light {
    border-left-color: #495057 !important;
}

/* Dark modal body + left (steps) column. */
.adtisk-modal .modal-content {
    background: #2c3034 !important;
}
.adtisk-modal .flex-fill.h-100 {
    background: #2c3034 !important;
}

/*
 * Step cards: slightly brighter than the #212529 body (#2c3034) so they stand
 * out, with inverted (light) text. Blue section titles are left as-is, and the
 * input fields keep dark text since they sit on white backgrounds.
 */
.adtisk-modal .adtisk-card {
    background: #212529 !important;
    border-color: #495057 !important;
}
.adtisk-modal .adtisk-card,
.adtisk-modal .adtisk-card * {
    color: #f1f3f5 !important;
}
.adtisk-modal .adtisk-card .adtisk-section-title {
    color: #005daa !important;            /* leave blue titles alone */
}
.adtisk-modal .adtisk-card input,
.adtisk-modal .adtisk-card .form-control {
    color: #212529 !important;            /* dark text on the white input fields */
}

/* Upload drop area: darker than the card (#212529) for an inset look. */
.adtisk-modal .adtisk-upload-dropzone {
    background: #2c3034 !important;
}

/* Modal close (×) — white normally, red on hover, in the top-right corner. */
.adtisk-modal .modal-body {
    position: relative;
}
.adtisk-modal .scw-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 20;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.adtisk-modal .scw-modal-close:hover,
.adtisk-modal .scw-modal-close:focus-visible {
    color: #ff3b30; /* red on hover */
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

/* Step 2 (size) layout:
   - "Proportional" + its "?" badge get their OWN row above the inputs
     (side-by-side crowded the badge into the Width/Side label),
   - number inputs kept at a firm, readable width,
   - Width/Side/Height labels trimmed down. */
.adtisk-modal .d-flex.flex-row.align-items-center:has(#square-checkbox-inline) {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important; /* top-aligned: constant gap below the title */
    gap: 16px; /* space between the Proportional row and the inputs row */
    margin-top: 4px; /* a little breathing room under the title */
}
.adtisk-modal .me-4:has(#square-checkbox-inline) {
    height: auto !important;
    min-width: 0 !important;
}
.adtisk-modal .d-flex.flex-row.align-items-center:has(#square-checkbox-inline) > .flex-grow-1 {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}
/* Width + Height (or just Side) share ONE row, so step 2 is the same height
   whether "Proportional" is on or off. (As a column, the two-row unchecked state
   was taller and forced step 1 to grow with it.) Right-aligned to the edge. */
.adtisk-modal .d-flex.flex-row.align-items-center:has(#square-checkbox-inline) > .flex-grow-1 > div {
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important; /* right-aligned to the container edge */
    gap: 14px !important;
}
.adtisk-modal .d-flex.flex-row.align-items-center:has(#square-checkbox-inline) > .flex-grow-1 > div > div {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important; /* tighter label<->input<->cm spacing so both groups fit */
}
.adtisk-modal .form-check:has(#square-checkbox-inline) {
    white-space: nowrap;
}
.adtisk-modal input[type="number"] {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    flex: 0 0 58px !important;
}
.adtisk-modal label.mb-0.me-2 {
    font-size: 0.9em !important;
    min-width: 0 !important;
}

/* Make the Upload (step 1) and Size (step 2) cards equal height. Their inline
   height:100% defeated the row's align-items:stretch, so they sized to their own
   content; height:auto + stretch lets the shorter one grow to match the taller. */
.adtisk-modal .adtisk-card.equal-height {
    height: auto !important;
    align-self: stretch !important;
}

/* +4px between the "1. Upload" title and the dropzone (matches step 2's spacing). */
.adtisk-modal .adtisk-card.equal-height:has(.adtisk-upload-dropzone) > div {
    margin-top: 4px;
}