/**
 * Functional baseline styling for the Plate Configurator on a Hyvä theme.
 */

/* ── Duplicate description handling ─────────────────────────────────────
 *
 * Do not hide .page-title-wrapper children with CSS anymore. Some products only
 * have short_description and the original module briefly renders the correct
 * HTML there. JavaScript now copies/repairs the legitimate description output
 * first and then empties the true duplicate source instead of only hiding it. This avoids the
 * "content pops up and disappears" effect.
 */

/* ── Wrap the configurator in a proper card so it reads as one block ─────── */
.plate-configurator {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* Section heading at the top of the configurator card. */
.plate-configurator-heading {
    flex: 1 1 100%;
    margin: 0 0 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

/* Section dividers between dimensions / edge strips / notices. */
.plate-configurator .full-screen {
    flex: 1 1 100%;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.5rem;
}

.plate-configurator .full-screen p {
    margin: 1rem 0 0.5rem;
    font-weight: 600;
    color: #334155;
}

.plate-configurator .full-screen p:first-of-type {
    margin-top: 0;
}

.plate-configurator .left-column {
    flex: 1 1 280px;
    min-width: 260px;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */
.plate-configurator .plate-option-label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
}

.plate-configurator .plate-option-label .required {
    color: #dc2626;
}

.plate-configurator .plate-option-input,
.plate-configurator .plate-option-select {
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 0.625rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
}

.plate-configurator .dimensions-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.plate-configurator .dimensions-wrapper .unit {
    padding-bottom: 0.5rem;
}

.plate-configurator .dimension-header {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #475569;
}

/* ── Image preview ─────────────────────────────────────────────────────────── */
.plate-configurator .image {
    flex: 1 1 320px;
    min-width: 280px;
    position: relative;
}

.plate-configurator .image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #f1f5f9;
    overflow: hidden;
}

.plate-configurator .image-size-definer {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plate-configurator .image-holder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The JS overrides width/height/margin inline. The texture must fill the
   calculated plate ratio instead of preserving the source image ratio. */
.plate-configurator .plate-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    max-height: none;
}

/* ── Banding strips around the image ───────────────────────────────────────── */
.plate-configurator .over-image-container,
.plate-configurator .under-image-container {
    display: flex;
    width: 100%;
}

.plate-configurator #banding-rear,
.plate-configurator #banding-front,
.plate-configurator #banding-left,
.plate-configurator #banding-right {
    position: relative;
    background: transparent;
}

.plate-configurator #banding-rear,
.plate-configurator #banding-front {
    flex: 1 1 auto;
    height: 6px;
}

.plate-configurator #banding-left,
.plate-configurator #banding-right {
    width: 6px;
}

.plate-configurator .space-h {
    width: 6px;
}

/* Hover arrows toggled by the JS .show class. */
.plate-configurator #banding-left.show,
.plate-configurator #banding-right.show,
.plate-configurator #banding-rear.show,
.plate-configurator #banding-front.show {
    background: #2563eb;
}

/* ── Dimension guide lines ─────────────────────────────────────────────────── */
/*
 * Slim grey lines above (length) and to the left (width) of the preview image.
 * They appear when the matching input gets focus and fade out on blur.
 * The JS sets their width / height in percent, here we just provide the
 * positioning context and the visual look.
 */
.plate-configurator .image {
    position: relative;
}

.plate-configurator .over-image-container,
.plate-configurator .under-image-container {
    display: flex;
    width: 100%;
    height: 6px;
}

.plate-configurator #banding-left,
.plate-configurator #banding-right {
    width: 6px;
    position: relative;
}

.plate-configurator #banding-rear,
.plate-configurator #banding-front {
    flex: 1 1 auto;
}

.plate-configurator .space-h {
    width: 6px;
}

/* Legacy line elements remain in the DOM for compatibility, but they no longer
   reserve extra space or provide the visible guide. The absolute overlay guide
   below is used instead. */
.plate-configurator .dimension-line-h-start,
.plate-configurator .dimension-line-v-start {
    opacity: 0 !important;
    pointer-events: none;
}


/* Fixed overlay dimension guide lines shown while length/width fields are focused.
   They are appended to <body> by JavaScript and therefore never affect layout. */
body > .plate-dimension-guide {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    background: #374151;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
}

body > .plate-dimension-guide.is-active {
    opacity: 1;
}

body > .plate-dimension-guide--length {
    height: 2px;
}

body > .plate-dimension-guide--width {
    width: 2px;
}

body > .plate-dimension-guide--length::before,
body > .plate-dimension-guide--length::after {
    content: '';
    position: absolute;
    top: -7px;
    width: 1px;
    height: 14px;
    background: #374151;
}

body > .plate-dimension-guide--length::before {
    left: 0;
}

body > .plate-dimension-guide--length::after {
    right: 0;
}

body > .plate-dimension-guide--width::before,
body > .plate-dimension-guide--width::after {
    content: '';
    position: absolute;
    left: -7px;
    width: 14px;
    height: 1px;
    background: #374151;
}

body > .plate-dimension-guide--width::before {
    top: 0;
}

body > .plate-dimension-guide--width::after {
    bottom: 0;
}

/* ── Edge strip selectors (4-column grid like the original) ────────────────── */
.plate-configurator .edge-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 1rem;
}

@media (max-width: 800px) {
    .plate-configurator .edge-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

.plate-configurator .edge-strip-direction {
    display: flex;
    flex-direction: column;
}

/* ── Edge strip preview cubes (inline SVG) ─────────────────────────────────── */
/*
 * The cube SVG is rendered inline in options.phtml so JavaScript can fill
 * its .active-face polygon with a <pattern> containing the chosen surface
 * texture image. CSS only handles sizing here.
 */
.plate-configurator .edge-strip-image {
    margin-top: 0.5rem;
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plate-configurator .cube-svg {
    width: 100%;
    height: 100%;
    max-width: 90px;
}

/* ── "Select all matching edges" links (text links like the original) ─────── */
.plate-configurator #edge-strip-selector {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.5rem 0 1rem;
}

.plate-configurator .edge-strip-select-all {
    color: #2563eb;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
    width: max-content;
    user-select: none;
}

.plate-configurator .edge-strip-select-all:hover {
    color: #1d4ed8;
}

/* ── Notices / labelling fields (2-column grid on wider screens) ───────────── */
.plate-notices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

@media (max-width: 600px) {
    .plate-notices {
        grid-template-columns: 1fr;
    }
}

.plate-configurator .plate-notice-row {
    margin-bottom: 0;
}

/* ── Price ─────────────────────────────────────────────────────────────────── */
.plate-price {
    font-size: 1.5rem;
    font-weight: 700;
}

.plate-price .tax-details {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #64748b;
}

/* Product-card short description must stay visible on small screens as well.
   Hyvä can wrap the native overview with `hidden mb-6 md:block`; JS removes the
   hidden class from that wrapper, and this guards our synced target itself. */
[data-plate-card-short-description="1"] {
    display: block !important;
}


/* Only the page title rendered inside the plate configurator is hidden on
   small screens. The normal/global product page title remains untouched. */
#plate-configurator h1.page-title,
.plate-configurator h1.page-title,
#plate-configurator [data-ui-id="page-title-wrapper"].page-title,
.plate-configurator [data-ui-id="page-title-wrapper"].page-title {
    display: none !important;
}

@media (min-width: 768px) {
    #plate-configurator h1.page-title,
    .plate-configurator h1.page-title,
    #plate-configurator [data-ui-id="page-title-wrapper"].page-title,
    .plate-configurator [data-ui-id="page-title-wrapper"].page-title {
        display: block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 0 1.5rem !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }
}