/* Styles for the Picture Frame Configurator */

/*
 * Colour palette inspired by the pictureframesexpress.co.uk frame designer.
 * These CSS custom properties define subtle pastel tones and muted greys
 * reminiscent of the reference site. Adjust these values to fine‑tune
 * the appearance without touching the underlying HTML structure.
 */
:root {
  /* Updated colour palette inspired by the eFrame design.  The primary
     tones are softer blues and greys; panels are white with light
     borders and the overall background is a very pale grey. */
  --pfc-primary-color: #233a5e; /* main deep blue */
  --pfc-primary-hover: #1a2f4c; /* darker hover for buttons */
  --pfc-secondary-color: #eef4fb; /* soft blue background for controls */
  --pfc-accent-color: #cfdff4; /* pale blue used for highlights */

  --pfc-bg-color: #f9fbfd; /* background of configurator */
  --pfc-panel-bg: #ffffff; /* card/panel background */
  --pfc-border-color: #d9e3f2; /* light border colour */
  --pfc-text-color: #061444; /* primary text */
  --pfc-muted-text: #5a6e8c; /* muted text for hints */
  --pfc-heading-color: #11287b; /* heading text */
}
#pfc_configurator_container
  > div.pfc-wrapper
  > div.pfc-left
  > div.pfc-navigation
  > button.pfc-next.button.button-primary {
  background-color: var(--pfc-primary-color);
  color: var(--pfc-secondary-color);
}
#pfc_configurator_container
  > div.pfc-wrapper
  > div.pfc-left
  > div.pfc-navigation
  > button.pfc-next.button.button-primary:hover {
  background-color: var(--pfc-secondary-color);
  color: var(--pfc-primary-color);
}
/* Root element styling */
#pfc_configurator_container {
  border: 1px solid var(--pfc-border-color);
  padding: 1rem;
  min-height: 400px;
  background-color: var(--pfc-bg-color);
  color: var(--pfc-text-color);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Layout wrapper */
#pfc_configurator_container .pfc-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#pfc_configurator_container .pfc-left {
  /* Each side of the configurator should take roughly half of the available width.  */
  flex: 1 1 49%;
  max-width: 49%;
}
#pfc_configurator_container .pfc-right {
  flex: 1 1 49%;
  max-width: 49%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Make the right panel sticky so it stays visible on scroll.  The
       sticky positioning is disabled by toggling the .pfc-no-sticky
       class when cropping is active. */
  position: sticky;
  top: 1rem;
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
}

/* Disable sticky positioning on the right panel when cropping is active. */
#pfc_configurator_container .pfc-right.pfc-no-sticky {
  position: static;
}
#pfc_configurator_container .pfc-left,
#pfc_configurator_container .pfc-right {
  background-color: var(--pfc-panel-bg);
  border: 1px solid var(--pfc-border-color);
  border-radius: 4px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
#pfc_preview canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Step tabs - stepper style */
#pfc_configurator_container .pfc-tabs {
  display: flex;
  list-style: none;
  padding: 16px 0;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid #e8ecf1;
  overflow-x: auto;
  background: #fff;
  gap: 0;
}
#pfc_configurator_container .pfc-tabs li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  color: #666;
  transition: color 0.2s;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
#pfc_configurator_container .pfc-tabs li:not(:last-child)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%23d0d8e4' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-left: 4px;
}
#pfc_configurator_container .pfc-tabs li:hover {
  color: #333;
}
#pfc_configurator_container .pfc-tabs li:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pfc-tab-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #d0d8e4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s;
}
.pfc-tab-num {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  transition: color 0.2s;
}
.pfc-tab-label {
  font-weight: 400;
  transition: font-weight 0.2s;
}
/* Completed state */
#pfc_configurator_container .pfc-tabs li[data-status="completed"] {
  color: #22c55e;
  cursor: pointer;
}
#pfc_configurator_container
  .pfc-tabs
  li[data-status="completed"]
  .pfc-tab-circle {
  border-color: #22c55e;
  background: #22c55e;
}
#pfc_configurator_container .pfc-tabs li[data-status="completed"] .pfc-tab-num {
  display: none;
}
#pfc_configurator_container
  .pfc-tabs
  li[data-status="completed"]
  .pfc-tab-circle::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
#pfc_configurator_container .pfc-tabs li[data-status="completed"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%2322c55e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Active state */
#pfc_configurator_container .pfc-tabs li[data-status="active"] {
  color: #0a2540;
  cursor: pointer;
}
#pfc_configurator_container .pfc-tabs li[data-status="active"] .pfc-tab-circle {
  border-color: #0a2540;
  background: #0a2540;
}
#pfc_configurator_container .pfc-tabs li[data-status="active"] .pfc-tab-num {
  color: #fff;
}
#pfc_configurator_container .pfc-tabs li[data-status="active"] .pfc-tab-label {
  font-weight: 600;
}
#pfc_configurator_container .pfc-tabs li[data-status="active"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%230a2540' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#pfc_configurator_container .pfc-tabs li[data-status="active"]::before {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  height: 3px;
  background: #0a2540;
  border-radius: 2px 2px 0 0;
}
/* Upcoming state */
#pfc_configurator_container .pfc-tabs li[data-status="upcoming"] {
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
}
#pfc_configurator_container
  .pfc-tabs
  li[data-status="upcoming"]
  .pfc-tab-circle {
  border-color: #d0d8e4;
  background: #fff;
}
#pfc_configurator_container .pfc-tabs li[data-status="upcoming"] .pfc-tab-num {
  color: #999;
}
#pfc_configurator_container .pfc-tabs li[data-status="upcoming"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M7 4l6 6-6 6' stroke='%23d0d8e4' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
  #pfc_frames {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
    height: 400px !important;
    overflow: scroll !important;
}
  #pfc_configurator_container .pfc-tabs {
    padding: 10px 0;
    justify-content: center;
  }
  #pfc_configurator_container .pfc-tabs li {
    flex: 0 0 auto;
    gap: 0;
    padding: 6px 2px;
  }
  #pfc_configurator_container .pfc-tabs li:not(:last-child)::after {
    width: 14px;
    height: 14px;
    margin-left: 2px;
  }
  .pfc-tab-label {
    display: none;
  }
  .pfc-tab-circle {
    width: 30px;
    height: 30px;
  }
  .pfc-tab-num {
    font-size: 13px;
  }
  #pfc_configurator_container .pfc-tabs li[data-status="active"]::before {
    bottom: -11px;
  }
  #pfc_configurator_container .pfc-left,
  #pfc_configurator_container .pfc-right {
    flex: 1 1 100%;
    max-width: 100% !important;
  }
  #pfc_configurator_container .pfc-right {
    position: static;
    height: auto;
    max-height: none;
    min-height: 400px;
  }
  #pfc_preview {
    min-height: 350px;
  }
  #pfc_preview canvas {
    max-height: 350px;
  }
  #pfc_frames {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #pfc_frames .pfc-option {
    padding: 0px !important;
    margin: 0 !important;
  }
  #pfc_frames .pfc-option img.pfc-frame-thumb {
    margin-bottom: 0.4rem;
  }
}

/* Frame option images squared */
#pfc_configurator_container .pfc-option img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 0.5rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 3px;
}

/* Steps */
#pfc_configurator_container .pfc-step {
  margin-bottom: 1rem;
}

/* Option labels */
#pfc_configurator_container .pfc-option {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
#pfc_configurator_container .pfc-option img {
  margin-right: 0.5rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 3px;
}

/* When frames are disabled due to size constraints, gray them out and disable pointer events */
.pfc-frame-disabled {
  position: relative;
  pointer-events: none;
}
.pfc-frame-disabled > img,
.pfc-frame-disabled > .pfc-frame-name {
  opacity: 0.35;
}
.pfc-frame-disabled::after {
  content: "Ei vasta parameetritele";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: #b71c1c;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

/* Navigation */
#pfc_configurator_container .pfc-navigation {
  margin-top: 1rem;
  text-align: right;
}
#pfc_configurator_container .pfc-navigation .button {
  margin-left: 0.5rem;
  padding: 0.5rem 1.2rem;
  border-radius: 3px;
  border: 1px solid var(--pfc-border-color);
  background-color: var(--pfc-primary-color);
  color: var(--pfc-button-text);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  display: inline-block;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Style first navigation button (typically Previous) as secondary */
#pfc_configurator_container .pfc-navigation .button:first-child {
  background-color: var(--pfc-secondary-color);
  color: var(--pfc-button-text);
}

/* Hover states for navigation buttons */
#pfc_configurator_container .pfc-navigation .button:hover {
  background-color: var(--pfc-primary-color);
  color: #fff;
  border-color: var(--pfc-primary-color);
}

/* Ratio selection buttons in the cropping step */
.pfc-ratio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pfc-ratio-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--pfc-border-color);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--pfc-panel-bg);
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}
.pfc-ratio-button:hover {
  background-color: var(--pfc-secondary-color);
}
.pfc-ratio-button.is-selected {
  border-color: var(--pfc-primary-color);
  background-color: var(--pfc-secondary-color);
}
.pfc-ratio-button svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Form inputs and selects */
#pfc_configurator_container input[type="text"],
#pfc_configurator_container input[type="number"],
#pfc_configurator_container input[type="email"],
#pfc_configurator_container input[type="url"],
#pfc_configurator_container select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 3px;
  background-color: var(--pfc-panel-bg);
  color: var(--pfc-text-color);
  font-size: 0.875rem;
}

/* Radio buttons and checkboxes */
#pfc_configurator_container input[type="radio"],
#pfc_configurator_container input[type="checkbox"] {
  accent-color: var(--pfc-primary-color);
}

/*
 * Mat selection redesign
 * The mat categories are displayed as a row of buttons.  When a
 * category is selected its background changes to the primary colour
 * and the text becomes white.  Swatches are displayed as circles
 * within a flex container.  Selecting a swatch will add a coloured
 * border to indicate it has been chosen.  These styles are
 * intentionally minimal to allow the images/patterns to take centre
 * stage.
 */
.pfc-mat-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.pfc-mat-category {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pfc-border-color);
  background-color: var(--pfc-secondary-color);
  border-radius: 3px;
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
  color: var(--pfc-text-color);
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}
.pfc-mat-category.active,
.pfc-mat-category:hover {
  background-color: var(--pfc-primary-color);
  color: #fff;
  border-color: var(--pfc-primary-color);
}
.pfc-mat-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.pfc-mat-swatch {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.pfc-mat-swatch input[type="radio"] {
  display: none;
}
.pfc-mat-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: block;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.pfc-mat-swatch:hover .pfc-mat-circle {
  border-color: var(--pfc-border-color);
}
.pfc-mat-swatch input[type="radio"]:checked + .pfc-mat-circle {
  border-color: #00b29a;
  box-shadow: 0 0 0 1px #00b29a;
  border-width: 2px;
}

/* Mat type filter dropdown styling */
.pfc-mat-filter-group {
  margin-bottom: 1rem;
}
.pfc-mat-filter-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  margin-bottom: 0.5rem;
}
#pfc_mat_type_filter {
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 0.75rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  background: var(--pfc-panel-bg);
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
#pfc_mat_type_filter:focus {
  outline: none;
  border-color: var(--pfc-primary-color);
}

.pfc-mat-tone-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  margin-bottom: 0.5rem;
}

/* Mat width styling */
.pfc-mat-width-section {
  margin-top: 1rem;
}

.pfc-mat-width-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin-top: 5px;
}

.pfc-mat-width-input-row input[type="number"] {
  flex: 1;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  background: var(--pfc-panel-bg);
  font-size: 0.9375rem;
  color: var(--pfc-text-color);
  min-width: 0;
}

.pfc-mat-width-input-row input[type="number"]:focus {
  outline: none;
  border-color: var(--pfc-primary-color);
}

.pfc-mat-width-btn {
  padding: 0.625rem 1rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  background: var(--pfc-panel-bg);
  font-size: 0.8125rem;
  color: var(--pfc-text-color);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.pfc-mat-width-btn:hover {
  border-color: var(--pfc-primary-color);
  background: var(--pfc-secondary-color);
}

.pfc-mat-width-btn.is-active {
  border-color: var(--pfc-primary-color);
  background: var(--pfc-secondary-color);
  color: var(--pfc-primary-color);
}

.pfc-mat-width-info {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
  line-height: 1.4;
}

.pfc-mat-width-info svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--pfc-muted-text);
}

.pfc-mat-width-sides {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.pfc-mat-width-side-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}
.pfc-mat-width-side-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #555;
}
.pfc-mat-width-input-unit {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pfc-mat-width-input-unit input[type="number"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 0;
}

.pfc-mat-width-sides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.pfc-mat-width-sides-grid div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pfc-mat-width-sides-grid label {
  font-size: 0.75rem;
  color: var(--pfc-muted-text);
}

.pfc-mat-width-sides-grid input {
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 6px;
  background: var(--pfc-panel-bg);
  font-size: 0.8125rem;
  color: var(--pfc-text-color);
  width: 100%;
}

.pfc-mat-width-sides-grid input:focus {
  outline: none;
  border-color: var(--pfc-primary-color);
}

/* Headings */
#pfc_configurator_container h1,
#pfc_configurator_container h2,
#pfc_configurator_container h3,
#pfc_configurator_container h4,
#pfc_configurator_container h5,
#pfc_configurator_container h6 {
  color: var(--pfc-heading-color);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

#pfc_configurator_container .pfc-left,
#pfc_configurator_container .pfc-right {
  box-sizing: border-box;
}

main,
main div.wp-block-group.alignfull.is-layout-flow.wp-block-group-is-layout-flow {
  margin-top: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

footer
  div.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
  margin-top: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* -------------------------------------------------
   Make FRAME option tiles match MAT option tiles
-------------------------------------------------- */

/* Any option “tile” gets the same base look */
#pfc_configurator_container .pfc-option,
#pfc_configurator_container .pfc-step-frame .pfc-option,
#pfc_configurator_container .pfc-step-frame label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

/* Hover/focus like mats */
#pfc_configurator_container .pfc-option:hover,
#pfc_configurator_container .pfc-step-frame .pfc-option:hover,
#pfc_configurator_container .pfc-step-frame label:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 6px 18px rgba(0, 43, 90, 0.08);
}

/* “Selected” look when input is checked */
#pfc_configurator_container .pfc-option:has(input:checked),
#pfc_configurator_container .pfc-step-frame label:has(input:checked) {
  border-color: var(--pfc-primary-color);
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
}

/* Thumbnails: make them consistent and clean */
#pfc_configurator_container .pfc-step-frame img,
#pfc_configurator_container .pfc-option img {
  width: 46px;
  height: 26px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--pfc-border-color);
  background: #fff;
}

/* Tooltip for frame details.  This tooltip is positioned absolutely near the cursor.  The inner container
   has white background, border and shadow defined inline in JS for easier tuning.  Here we add a high z-index
   to ensure it appears above the configurator and other content. */
#pfc_frame_tooltip {
  z-index: 10001;
  pointer-events: none;
}

/* Ensure tooltip images fill their allocated space and preserve aspect ratio */
#pfc_frame_tooltip img {
  display: block;
  width: 100%;
  height: auto;
}

/* Text styling (works for both mats and frames) */
#pfc_configurator_container .pfc-option .label,
#pfc_configurator_container .pfc-step-frame label span,
#pfc_configurator_container .pfc-option span {
  color: var(--pfc-text-color);
  font-weight: 600;
}

/* Radio/checkbox accent */
#pfc_configurator_container input[type="radio"],
#pfc_configurator_container input[type="checkbox"] {
  accent-color: var(--pfc-primary-color);
}

/* Remove the outline from selected radio buttons */
#pfc_configurator_container input[type="radio"]:focus,
#pfc_configurator_container input[type="radio"]:checked,
#pfc_configurator_container input[type="checkbox"]:focus,
#pfc_configurator_container input[type="checkbox"]:checked {
  outline: none;
}

/* Optional: add custom focus effect if you want (e.g. a subtle glow) */
#pfc_configurator_container input[type="radio"]:focus,
#pfc_configurator_container input[type="checkbox"]:focus {
  box-shadow: 0 0 4px 2px rgba(0, 43, 90, 0.3);
}

/* -------------------------------------------------
   Scrollable option lists (mat / frame / glass)
-------------------------------------------------- */

/* Generic option list container */
#pfc_configurator_container .pfc-options,
#pfc_configurator_container .pfc-step-frame,
#pfc_configurator_container .pfc-step-mat,
#pfc_configurator_container .pfc-step-glass,
#pfc_configurator_container #pfc_mats_double_group #pfc_mats_outer.pfc-options,
#pfc_configurator_container
  #pfc_mats_single_group
  #pfc_mats_single.pfc-options {
  max-height: calc(460px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px; /* space for scrollbar */
  box-sizing: border-box;
}

/* Remove scrollbar from glass step */
#pfc_configurator_container .pfc-step-glass {
  overflow-y: visible;
  max-height: none;
}

#pfc_configurator_container
  > div.pfc-wrapper
  > div.pfc-left
  > div.pfc-steps
  > div:nth-child(4)
  > div.pfc-frame-filters
  > label {
  font-size: 15px;
}

/* --------------------------------------------------------------------
   Custom frame selector layout

   The frame selection step should display frames as a scrollable grid of
   square tiles, with two frames per row. Each tile contains a custom
   thumbnail (taken from the _pfc_image_1_id meta field if available),
   stacked above the frame name and optional size/price info. The grid
   container scrolls when there are more than a few frames. These rules
   override the default inline layout for .pfc-option within the
   #pfc_frames container.
--------------------------------------------------------------------- */

/* Apply a two‑column grid layout to the frames container. The gap
   defines spacing between tiles. */
#pfc_frames {
  display: grid;
  /* Display three frames per row instead of two */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Stack the contents of each frame option vertically and center them. */
#pfc_frames .pfc-option {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Hide the radio input so that only the frame tile is visible. The input
   remains in the DOM for accessibility and selection logic. */
#pfc_frames .pfc-option input[type="radio"] {
  display: none;
}

/* Style the frame thumbnail to fill the width of the tile. Use the
   aspect‑ratio property to enforce square dimensions. When aspect‑ratio
   is not supported, the height will adjust automatically based on the
   intrinsic image ratio. */
#pfc_frames .pfc-option img.pfc-frame-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  margin: 0;
  margin-bottom: 0.5rem;
}

/* Ensure the frame name and details wrap nicely below the image. */
#pfc_frames .pfc-option .pfc-frame-name {
  display: block;
  line-height: 1.3;
}

/* Style disabled mat swatches (due to sheet size limitations) by
   reducing opacity and preventing pointer events. */
.pfc-mat-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Style disabled glass items (due to sheet size limitations) by
   reducing opacity and preventing pointer events. */
.pfc-glass-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pfc-back-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --------------------------------------------------------------------
   Print/paper card selector layout
--------------------------------------------------------------------- */

.pfc-print-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pfc-print-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.pfc-print-card:hover {
  border-color: #b0b0b0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pfc-print-card input[type="radio"] {
  display: none;
}

.pfc-print-card:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-print-card-thumb-wrap {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.pfc-print-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pfc-print-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: #e8e8e8;
}

.pfc-print-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pfc-print-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pfc-print-card-name {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}

.pfc-print-card-badge {
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: #2563eb;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.pfc-print-card-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}

.pfc-print-card-specs {
  font-size: 12px;
  color: #777;
}

.pfc-print-card-radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s;
}

.pfc-print-card:has(input:checked) .pfc-print-card-radio {
  border-color: #233a5e;
}

.pfc-print-card:has(input:checked) .pfc-print-card-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #233a5e;
}

.pfc-print-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
  margin-top: 16px;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 8px;
}

.pfc-note-icon {
  font-size: 16px;
  color: #2563eb;
  font-style: normal;
}

/* Legacy print option styles - override for card layout */
#pfc_print_options .pfc-option {
  display: none;
}

/* --------------------------------------------------------------------
   Backing selector layout - replaced by .pfc-back-grid
--------------------------------------------------------------------- */

/* Frameless mirror: edge finishing option tiles */
.pfc-edge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0.8rem;
}

.pfc-edge-tile {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  background: #fff;
}

.pfc-edge-tile input[type="radio"] {
  display: none;
}

.pfc-edge-tile.is-selected {
  outline: 2px solid #111;
  outline-offset: 1px;
}

.pfc-edge-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-bottom: 6px;
}

.pfc-edge-label {
  display: block;
  font-size: 0.95em;
  line-height: 1.2;
}

/* -------------------------------------------------
   Summary/Review Step
   Full-width layout in .pfc-left (preview in .pfc-right)
-------------------------------------------------- */

.pfc-step-review {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.pfc-review-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pfc-heading-color);
  margin: 0 0 0.25rem 0;
}

.pfc-review-subtitle {
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
  margin: 0 0 0.75rem 0;
}

.pfc-review-section {
  background: var(--pfc-panel-bg);
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.pfc-review-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-heading-color);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pfc-border-color);
}

.pfc-review-section-header svg {
  color: var(--pfc-primary-color);
  flex-shrink: 0;
}

/* Dimensions grid */
.pfc-review-dims-grid {
  display: flex;
  gap: 1rem;
}

.pfc-review-dims-main {
  flex: 1;
  min-width: 0;
}

.pfc-review-dims-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 110px;
}

.pfc-review-dim-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.pfc-review-dim-label {
  color: var(--pfc-muted-text);
  white-space: nowrap;
}

.pfc-review-dim-value {
  font-weight: 600;
  color: var(--pfc-text-color);
  text-align: right;
}

.pfc-review-quality-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--pfc-secondary-color);
  border-radius: 6px;
  font-size: 0.75rem;
}

.pfc-review-quality-box svg {
  color: var(--pfc-primary-color);
  flex-shrink: 0;
}

.pfc-review-quality-label {
  color: var(--pfc-muted-text);
  font-size: 0.6875rem;
}

.pfc-review-quality-value {
  font-weight: 600;
  color: var(--pfc-text-color);
}

/* Materials list */
.pfc-review-materials-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.pfc-review-material-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}

.pfc-review-material-icon {
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pfc-muted-text);
  flex-shrink: 0;
}

.pfc-review-material-label {
  color: var(--pfc-muted-text);
  min-width: 110px;
  flex-shrink: 0;
}

.pfc-review-material-value {
  color: var(--pfc-text-color);
  font-weight: 500;
}

/* Price section */
.pfc-review-price {
  background: var(--pfc-secondary-color);
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.pfc-review-total {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.pfc-review-total-label {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pfc-heading-color);
}

.pfc-review-total-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pfc-primary-color);
}

.pfc-review-price-loading {
  text-align: center;
  padding: 0.75rem;
  color: var(--pfc-muted-text);
  font-size: 0.875rem;
}

.pfc-review-price-error {
  text-align: center;
  padding: 0.75rem;
  color: #dc3545;
  font-size: 0.875rem;
}

/* Action buttons */
.pfc-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.pfc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5625rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid var(--pfc-border-color);
  background: var(--pfc-panel-bg);
  color: var(--pfc-text-color);
  white-space: nowrap;
}

.pfc-btn:hover {
  border-color: var(--pfc-primary-color);
  color: var(--pfc-primary-color);
}

.pfc-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pfc-btn-primary {
  background: var(--pfc-primary-color);
  color: #fff;
  border-color: var(--pfc-primary-color);
}

.pfc-btn-primary:hover {
  background: var(--pfc-primary-hover);
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .pfc-review-dims-grid {
    flex-direction: column;
  }

  .pfc-review-dims-side {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .pfc-review-actions {
    flex-direction: column;
  }

  .pfc-btn {
    width: 100%;
  }
}

/* Quality indicator colors */
.pfc-quality-excellent .pfc-review-quality-value,
.pfc-quality-excellent svg {
  color: #059669;
}
.pfc-quality-good .pfc-review-quality-value,
.pfc-quality-good svg {
  color: #0891b2;
}
.pfc-quality-average .pfc-review-quality-value,
.pfc-quality-average svg {
  color: #d97706;
}
.pfc-quality-low .pfc-review-quality-value,
.pfc-quality-low svg {
  color: #dc2626;
}

/* -------------------------------------------------
   Extras Step - Horizontal list layout
-------------------------------------------------- */

#pfc_extras {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

.pfc-extra-row input[type="checkbox"] {
  display: none;
}

.pfc-extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  margin-bottom: 0;
  background: var(--pfc-panel-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.pfc-extra-row:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-extra-row:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-extra-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  margin: 0;
}

.pfc-extra-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--pfc-secondary-color);
}

.pfc-extra-thumb-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--pfc-secondary-color);
  border: 1px dashed var(--pfc-border-color);
}

.pfc-extra-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.pfc-extra-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-text-color);
  line-height: 1.3;
}

.pfc-extra-desc {
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
  line-height: 1.4;
}

.pfc-extra-price {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-primary-color);
  white-space: nowrap;
  margin-right: 1rem;
  flex-shrink: 0;
}

.pfc-extra-check {
  width: 22px;
  height: 22px;
  border: 2px solid var(--pfc-border-color);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  background: var(--pfc-panel-bg);
  flex-shrink: 0;
  position: relative;
}

.pfc-extra-row:has(input:checked) .pfc-extra-check {
  background: var(--pfc-primary-color);
  border-color: var(--pfc-primary-color);
}

.pfc-extra-row:has(input:checked) .pfc-extra-check::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.pfc-step-extras .pfc-extras-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pfc-heading-color);
  margin: 0 0 0.25rem 0;
}

.pfc-step-extras .pfc-extras-desc {
  font-size: 0.875rem;
  color: var(--pfc-muted-text);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

/* -------------------------------------------------
   Glass Step - List Style with Expandable Descriptions
-------------------------------------------------- */

.pfc-glass-step-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--pfc-heading-color);
  margin: 0 0 0.25rem 0;
}

.pfc-glass-step-desc {
  font-size: 0.875rem;
  color: var(--pfc-muted-text);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

.pfc-glass-section {
  margin-bottom: 1.5rem;
}

.pfc-glass-section-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-text-color);
  margin-bottom: 0.75rem;
}

.pfc-glass-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pfc-glass-item {
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  background: var(--pfc-panel-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  overflow: hidden;
}

.pfc-glass-item:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-glass-item:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-glass-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  margin: 0;
}

.pfc-glass-label input[type="radio"] {
  accent-color: var(--pfc-primary-color);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.pfc-glass-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.pfc-glass-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-text-color);
  line-height: 1.3;
}

.pfc-glass-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
}

.pfc-glass-toggle:hover {
  color: var(--pfc-primary-color);
}

.pfc-glass-toggle svg {
  flex-shrink: 0;
}

.pfc-glass-price {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--pfc-primary-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.pfc-glass-desc {
  display: none;
  padding: 0 1rem 1rem 2.75rem;
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
  line-height: 1.6;
}

.pfc-glass-desc-open {
  display: block;
}

/* -------------------------------------------------
   Tagapapp - 3-column card grid
-------------------------------------------------- */

.pfc-back-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.pfc-back-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  background: var(--pfc-panel-bg);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.pfc-back-card:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-back-card:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-back-card input[type="radio"] {
  accent-color: var(--pfc-primary-color);
  flex-shrink: 0;
  margin: 0;
  width: 18px;
  height: 18px;
}

.pfc-back-card-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--pfc-secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pfc-back-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pfc-back-card-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--pfc-secondary-color);
  border: 1px dashed var(--pfc-border-color);
}

.pfc-back-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.pfc-back-card-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  line-height: 1.3;
}

.pfc-back-card-thickness {
  font-size: 0.8125rem;
  color: var(--pfc-muted-text);
}

/* -------------------------------------------------
   Riputus - 2-column card grid
-------------------------------------------------- */

.pfc-riputus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.pfc-riputus-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  background: var(--pfc-panel-bg);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.pfc-riputus-card:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-riputus-card:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-riputus-card input[type="checkbox"] {
  accent-color: var(--pfc-primary-color);
  flex-shrink: 0;
  margin: 0;
  width: 18px;
  height: 18px;
}

.pfc-riputus-card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--pfc-muted-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pfc-riputus-card:has(input:checked) .pfc-riputus-card-icon,
.pfc-riputus-card.is-selected .pfc-riputus-card-icon {
  color: var(--pfc-primary-color);
}

.pfc-riputus-card-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
}

/* -------------------------------------------------
   Alusraam (base frame) selection cards
-------------------------------------------------- */

.pfc-base-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.pfc-base-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 10px;
  background: var(--pfc-panel-bg);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.pfc-base-row:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-base-row:has(input:checked) {
  box-shadow: 0 8px 22px rgba(0, 43, 90, 0.14);
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px;
}

.pfc-base-row input[type="radio"] {
  accent-color: var(--pfc-primary-color);
  flex-shrink: 0;
  margin: 0;
  width: 18px;
  height: 18px;
}

.pfc-base-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  object-fit: contain;
  background: var(--pfc-secondary-color);
  border: 1px solid var(--pfc-border-color);
}

.pfc-base-thumb-placeholder {
  display: block;
  background: var(--pfc-secondary-color);
  border: 1px dashed var(--pfc-border-color);
}

.pfc-base-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.pfc-base-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  line-height: 1.3;
}

.pfc-base-price {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--pfc-primary-color);
}

@media (max-width: 600px) {
  .pfc-base-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .pfc-base-row {
    padding: 0.75rem;
  }

  .pfc-base-thumb {
    width: 44px;
    height: 44px;
  }
}

/* Mobile optimizations for glass, back, and riputus options */
@media (max-width: 600px) {
  .pfc-back-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .pfc-back-card {
    padding: 0.625rem;
    gap: 0.5rem;
  }
  
  .pfc-back-card-thumb {
    width: 40px;
    height: 40px;
  }
  
  .pfc-back-card-name {
    font-size: 0.8125rem;
  }
  
  .pfc-back-card-thickness {
    font-size: 0.75rem;
  }
  
  .pfc-riputus-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .pfc-riputus-card {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .pfc-riputus-card-icon {
    width: 20px;
    height: 20px;
  }
  
  .pfc-riputus-card-label {
    font-size: 0.8125rem;
  }
  
  .pfc-glass-label {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .pfc-glass-name {
    font-size: 0.875rem;
  }
  
  .pfc-glass-price {
    font-size: 0.875rem;
  }
  
  /* Extras step - vertical layout */
  .pfc-extra-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .pfc-extra-thumb,
  .pfc-extra-thumb-placeholder {
    width: 48px;
    height: 48px;
  }
  
  .pfc-extra-row {
    padding: 0.75rem;
  }
  
  .pfc-extra-name {
    font-size: 0.875rem;
  }
  
  .pfc-extra-desc {
    font-size: 0.75rem;
  }
  
  .pfc-extra-price {
    font-size: 0.875rem;
    margin-right: 0.5rem;
  }
}

/* Hide mat category navigation buttons */
.pfc-mat-categories {
  display: none !important;
}

/* Hide image shape selection in mat step */
.pfc-step p:has(input[name="pfc_image_shape"]) {
  display: none !important;
}

/* -------------------------------------------------
   Paspartuu / Mat Type Cards
-------------------------------------------------- */

.pfc-mat-type-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--pfc-text-color);
  margin-bottom: 0.75rem;
}

.pfc-mat-type-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.pfc-mat-type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  flex: 3;
}

.pfc-mat-full-toggle {
  flex: 1;
}

.pfc-mat-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border: 1px solid var(--pfc-border-color);
  border-radius: 8px;
  background: var(--pfc-panel-bg);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
  text-align: center;
}

.pfc-mat-type-card:hover {
  border-color: color-mix(
    in srgb,
    var(--pfc-primary-color) 35%,
    var(--pfc-border-color)
  );
  box-shadow: 0 2px 8px rgba(0, 43, 90, 0.06);
}

.pfc-mat-type-card:has(input:checked),
.pfc-mat-type-card.is-selected,
.pfc-mat-full-toggle.is-selected {
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  box-shadow: 0 2px 10px rgba(0, 43, 90, 0.1);
  border-width: 2px;
}

.pfc-mat-type-card input[type="radio"] {
  display: none;
}

.pfc-mat-full-toggle input[type="checkbox"] {
  display: none;
}

.pfc-mat-type-icon {
  width: 48px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pfc-muted-text);
}

.pfc-mat-type-card:has(input:checked) .pfc-mat-type-icon,
.pfc-mat-type-card.is-selected .pfc-mat-type-icon {
  color: var(--pfc-primary-color);
}

.pfc-mat-type-icon svg {
  width: 100%;
  height: 100%;
}

.pfc-mat-type-name {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--pfc-text-color);
  line-height: 1.3;
}

/* Mobile: shrink the mat type selection cards so all three fit inside
   the step content area (e.g. 375px wide screens). */
@media (max-width: 600px) {
  .pfc-mat-type-row {
    gap: 0.375rem;
    margin-bottom: 1rem;
  }

  .pfc-mat-type-cards {
    gap: 0.375rem;
    min-width: 0;
  }

  .pfc-mat-type-card {
    padding: 0.5rem 0.25rem;
    gap: 0.25rem;
    min-width: 0;
  }

  .pfc-mat-type-icon {
    width: 34px;
    height: 45px;
  }

  .pfc-mat-type-name {
    font-size: 0.6875rem;
    overflow-wrap: break-word;
  }
}

/* Summary step */
.pfc-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pfc-summary-section {
  border: 1px solid var(--pfc-border-color, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  background: var(--pfc-panel-bg, #fff);
}

.pfc-summary-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pfc-text-color, #1a1a2e);
  margin-bottom: 1rem;
}

.pfc-summary-section-title svg {
  color: var(--pfc-primary-color, #002b5a);
  flex-shrink: 0;
}

.pfc-summary-grid {
  display: flex;
  gap: 1.5rem;
}

.pfc-summary-grid-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pfc-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.pfc-summary-label {
  color: var(--pfc-text-color, #1a1a2e);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.pfc-summary-help {
  font-size: 0.75rem;
  color: var(--pfc-muted-text, #999);
  cursor: help;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pfc-summary-help:hover::after {
  content: attr(data-tooltip);
  font-family: "Open Sans", sans-serif !important;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: var(--pfc-primary-color, #233a5e);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  line-height: 1.4;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pfc-summary-value {
  color: var(--pfc-text-color, #1a1a2e);
  font-weight: 500;
  text-align: right;
}

.pfc-summary-grid-badges {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 160px;
}

.pfc-summary-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--pfc-border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--pfc-secondary-color, #f8f9fa);
}

.pfc-summary-badge svg {
  color: var(--pfc-primary-color, #002b5a);
  flex-shrink: 0;
}

.pfc-summary-badge-label {
  font-size: 0.75rem;
  color: var(--pfc-muted-text, #666);
  font-weight: 500;
}

.pfc-summary-badge-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pfc-text-color, #1a1a2e);
}

.pfc-quality-excellent {
  color: #00b29a !important;
}
.pfc-quality-good {
  color: #28a745 !important;
}
.pfc-quality-medium {
  color: #ff8c00 !important;
}
.pfc-quality-bad {
  color: #dc3545 !important;
}

/* Materials list */
.pfc-summary-materials {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.pfc-summary-material-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
}

.pfc-summary-material-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pfc-primary-color, #002b5a);
  flex-shrink: 0;
}

.pfc-summary-material-label {
  width: 140px;
  flex-shrink: 0;
  color: var(--pfc-muted-text, #666);
  font-weight: 400;
}

.pfc-summary-material-value {
  flex: 1;
  color: var(--pfc-text-color, #1a1a2e);
  font-weight: 500;
}

/* Total */
.pfc-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pfc-border-color, #e0e0e0);
  border-radius: 12px;
  background: var(--pfc-secondary-color, #f8f9fa);
}

.pfc-summary-total-label {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pfc-text-color, #1a1a2e);
}

.pfc-summary-total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pfc-primary-color, #002b5a);
}

/* Action buttons */
.pfc-summary-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.pfc-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--pfc-border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--pfc-panel-bg, #fff);
  color: var(--pfc-text-color, #1a1a2e);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pfc-summary-btn:hover {
  border-color: var(--pfc-primary-color, #002b5a);
  background: var(--pfc-secondary-color, #f8f9fa);
}

.pfc-summary-btn svg {
  flex-shrink: 0;
}

.pfc-summary-btn-primary {
  background: var(--pfc-primary-color, #002b5a);
  border-color: var(--pfc-primary-color, #002b5a);
  color: #fff;
}

#pfc_download_vxml {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Extras list container */
.pfc-extra-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Type selection step */
#pfc_type_title {
  margin-top: 0;
  margin-bottom: 1rem;
}
.pfc-type-group p {
  margin: 0 0 6px;
}
.pfc-type-group hr {
  margin: 12px 0;
}

/* Upload step */
.pfc-upload-dropzone {
  border: 2px dashed #c5d5e8;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: #f9fbfd;
  transition:
    border-color 0.2s,
    background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pfc-upload-dropzone:hover,
.pfc-upload-dropzone.dragover {
  border-color: #2563eb;
  background: #eef4fb;
}
.pfc-upload-cloud-icon {
  font-size: 48px;
  color: var(--pfc-primary-color);
  margin-bottom: 12px;
}
.pfc-upload-dropzone-text {
  font-size: 14px;
  color: #555;
}
.pfc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #0a2540;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.pfc-upload-btn:hover {
  background: #1a3a5c;
}
.pfc-upload-btn svg {
  flex-shrink: 0;
}
#pfc_image {
  display: none;
}
#pfc_image_preview {
  max-width: 160px;
  max-height: 120px;
  display: none;
  margin-top: 8px;
  border-radius: 8px;
  object-fit: contain;
}
.pfc-upload-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.pfc-upload-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid #d0d8e4;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #0a2540;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.pfc-upload-action-btn:hover {
  border-color: #2563eb;
  background: #f0f5fb;
}
.pfc-upload-action-btn svg {
  flex-shrink: 0;
}
.pfc-upload-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  margin-top: 12px;
}
.pfc-upload-note .pfc-note-icon {
  font-size: 16px;
  color: #2563eb;
  font-style: normal;
}

/* Crop step */
#pfc_ratio_options {
  margin-bottom: 10px;
}
#pfc_launch_crop {
  margin-right: 8px;
}

/* Dimensions step */
.pfc-dim-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.pfc-dim-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pfc-dim-field label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.pfc-dim-field input {
  padding: 10px 12px;
  border: 1px solid #d0d8e4;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}
.pfc-dim-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.pfc-lock-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}
.pfc-lock-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pfc-lock-label {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}
.pfc-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.pfc-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.pfc-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}
.pfc-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.pfc-toggle-switch input:checked + .pfc-toggle-slider {
  background: #2563eb;
}
.pfc-toggle-switch input:checked + .pfc-toggle-slider::before {
  transform: translateX(20px);
}
.pfc-lock-icon {
  opacity: 0.6;
}
.pfc-dim-standard {
  margin-bottom: 20px;
}
.pfc-dim-standard > label {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}
.pfc-select-wrap {
  position: relative;
}
.pfc-select-wrap select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #d0d8e4;
  border-radius: 8px;
  font-size: 14px;
  color: #2563eb;
  appearance: none;
  background: #fff;
  cursor: pointer;
}
.pfc-select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #666;
  pointer-events: none;
}
.pfc-quality-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8ecf1;
}
.pfc-quality-section h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}
.pfc-quality-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pfc-quality-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f0f4f0;
  flex: 1;
  min-width: 180px;
}
.pfc-quality-badge.quality-bad {
  background: #fef2f2;
}
.pfc-quality-badge.quality-bad .pfc-quality-check circle,
.pfc-quality-badge.quality-bad .pfc-quality-check path {
  stroke: #ef4444;
}
.pfc-quality-badge.quality-medium {
  background: #fffbeb;
}
.pfc-quality-badge.quality-medium .pfc-quality-check circle,
.pfc-quality-badge.quality-medium .pfc-quality-check path {
  stroke: #f59e0b;
}
.pfc-quality-badge.quality-good {
  background: #f0fdf4;
}
.pfc-quality-badge.quality-good .pfc-quality-check circle,
.pfc-quality-badge.quality-good .pfc-quality-check path {
  stroke: #22c55e;
}
.pfc-quality-badge.quality-very-good {
  background: #f0fdf4;
}
.pfc-quality-badge.quality-very-good .pfc-quality-check circle,
.pfc-quality-badge.quality-very-good .pfc-quality-check path {
  stroke: #22c55e;
}
.pfc-quality-badge.quality-excellent {
  background: #f0fdf4;
}
.pfc-quality-badge.quality-excellent .pfc-quality-check circle,
.pfc-quality-badge.quality-excellent .pfc-quality-check path {
  stroke: #16a34a;
}
.pfc-quality-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.pfc-quality-ppi {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}
.pfc-ppi-label {
  font-size: 12px;
  color: #666;
}
.pfc-ppi-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}
.pfc-ppi-unit {
  font-size: 13px;
  color: #666;
}
.pfc-quality-meter {
  margin-bottom: 16px;
}
.pfc-meter-track {
  position: relative;
  height: 6px;
  background: linear-gradient(
    to right,
    #ef4444 0%,
    #f59e0b 30%,
    #eab308 50%,
    #22c55e 75%,
    #16a34a 100%
  );
  border-radius: 3px;
  margin-bottom: 8px;
}
.pfc-meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  transition: width 0.3s;
}
.pfc-meter-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition:
    left 0.3s,
    background 0.3s;
}
.pfc-meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}
.pfc-quality-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f7fde8;
  border-radius: 8px;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}
.pfc-quality-tip svg {
  flex-shrink: 0;
  margin-top: 1px;
}
#pfc_canvas_depth_container {
  display: none;
  margin-top: 16px;
}
#pfc_canvas_depth_container label {
  font-size: 13px;
  color: #555;
}
#pfc_canvas_depth_container input {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #d0d8e4;
  border-radius: 6px;
  margin-left: 8px;
}
#pfc_canvas_depth_container input.pfc-input-error {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
  outline: none;
}
.pfc-required {
  color: #dc3545;
  font-weight: 700;
}
#pfc_canvas_roll_options {
  display: none;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
}
#pfc_canvas_roll_options > div {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
#pfc_canvas_thickness {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid #d0d8e4;
  border-radius: 6px;
  margin-left: 8px;
}

/* Mirror options */
#pfc_mirror_container {
  display: none;
  margin-top: 0.75rem;
}
#pfc_mirror_framed_options,
#pfc_mirror_frameless_options {
  display: none;
}

/* Mirror shape selector */
.pfc-mirror-shape-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pfc-mirror-shape-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.pfc-mirror-shape-card:hover {
  border-color: #b0b0b0;
}
.pfc-mirror-shape-card input[type="radio"] {
  display: none;
}
.pfc-mirror-shape-card:has(input:checked),
.pfc-mirror-shape-card.is-selected {
  border-color: #00b29a;
  background: #eef7f6;
  box-shadow: 0 2px 8px rgba(0, 178, 154, 0.15);
  border-width: 2px;
}
.pfc-mirror-shape-icon {
  width: 48px;
  height: 64px;
}
.pfc-mirror-shape-rect {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  border: 1px solid #ccc;
}
.pfc-mirror-shape-circle {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.pfc-mirror-shape-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

#pfc_mirror_list {
  display: none;
  margin-top: 0.75rem;
}

/* Mirror product list - card style */
.pfc-mirror-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
}
.pfc-mirror-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  min-width: 0;
  position: relative;
}
.pfc-mirror-row:hover {
  border-color: #b0b0b0;
}
.pfc-mirror-row input[type="radio"] {
  display: none;
}
.pfc-mirror-row:has(input:checked),
.pfc-mirror-row.is-selected {
  border-color: #00b29a;
  background: #eef7f6;
  box-shadow: 0 2px 8px rgba(0, 178, 154, 0.15);
  border-width: 2px;
}
.pfc-mirror-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  background: #f0f0f0;
      margin-left: auto;
    margin-right: auto;
        margin-bottom: 5px;
}
.pfc-mirror-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
.pfc-mirror-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}
.pfc-mirror-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: #00b29a;
  text-align: center;
}
.pfc-mirror-row:has(input:checked)::after,
.pfc-mirror-row.is-selected::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #00b29a;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Service cards (mirror edge treatments) */
.pfc-service-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.pfc-service-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s;
}
.pfc-service-card:hover {
  border-color: #cbd5e1;
}
.pfc-service-card.is-active {
  border-color: #00b29a;
  background: #f0fdf9;
  border-width: 2px;
}
.pfc-service-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f5f9;
}
.pfc-service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pfc-service-name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}
.pfc-service-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.pfc-service-price {
  font-size: 13px;
  font-weight: 600;
  color: #00b29a;
}
.pfc-service-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.pfc-service-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.pfc-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 12px;
  transition: background 0.2s;
}
.pfc-toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pfc-service-toggle input:checked + .pfc-toggle-slider {
  background: #00b29a;
}
.pfc-service-toggle input:checked + .pfc-toggle-slider::before {
  transform: translateX(20px);
}

/* Popular presets tab */
#pfc_tab_popular {
  display: none;
}

/* Print step */
#pfc_base_options {
  display: none;
}

.pfc-step-desc {
  font-size: 0.875rem;
  color: var(--pfc-muted-text);
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}
/* Frame step */
.pfc-frame-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 8px;
}
.pfc-filter-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #d0d8e4;
  border-radius: 6px;
  background: #fff;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.pfc-filter-card:hover {
  border-color: #b0b0b0;
}
.pfc-filter-card:focus-within {
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.15);
}
.pfc-filter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-icon::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}
.search-icon::before {
  content: "🔍";
  font-size: 11px;
}
.sort-icon::before {
  content: "↕";
  font-size: 14px;
  font-weight: bold;
  color: #666;
}
.more-icon::before {
  content: "⋮";
  font-size: 18px;
  font-weight: bold;
  color: #666;
}
.pfc-filter-card.pfc-filter-more i {
  font-size: 16px;
  color: #666;
}
.pfc-filter-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.pfc-filter-label {
  font-size: 10px;
  color: #888;
  line-height: 1;
  margin-bottom: 1px;
}
.pfc-filter-card select,
.pfc-filter-card input {
  border: none !important;
  background: transparent;
  font-size: 12px !important;
  color: #333 !important;
  width: 100%;
  padding: 0;
  outline: none;
  line-height: 1.3;
}
.pfc-filter-card input::placeholder {
  color: #999 !important;
  font-size: 12px !important;
}
.pfc-filter-card select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 14px;
}
.pfc-filter-card.pfc-filter-more {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #d0d8e4;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pfc-filter-card.pfc-filter-more:hover {
  background: #f0f2f5;
}
.pfc-frame-filters-expanded {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pfc-frame-filters-expanded .pfc-filter-card {
  flex: 1;
  min-width: 140px;
}

/* Mobile: arrange the four frame filters in two rows (2 + 2) so they
   stay readable on smaller screens instead of wrapping unevenly. */
@media (max-width: 600px) {
  .pfc-frame-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .pfc-frame-filters .pfc-filter-card {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pfc-frame-filters-expanded {
    gap: 8px;
  }
}

/* Mat step */
#pfc_mat_type_filter_group,
#pfc_mat_type_filter_outer_group,
#pfc_mat_type_filter_inner_group {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#pfc_mats_double_group > div.pfc-mat-block.pfc-mat-block-outer > p:nth-child(2),
p#pfc_mat_inner_label,
#pfc_mats_single_group > p {
  margin-bottom: 5px !important;
}

#pfc_mat_type_filter_group strong,
#pfc_mat_type_filter_outer_group strong,
#pfc_mat_type_filter_inner_group strong,
#pfc_mat_shape_group > strong,
#pfc_mats_double_group > div.pfc-mat-block.pfc-mat-block-outer > p > strong,
#pfc_mat_inner_label > strong,
#pfc_mats_single_group > p > strong,
#pfc_configurator_container input[type="text"],
#pfc_configurator_container input[type="number"],
#pfc_configurator_container input[type="email"],
#pfc_configurator_container input[type="url"],
#pfc_configurator_container select,
.pfc-mat-width-label,
#pfc_mat_shape_group > label,
#pfc_mat_overlap_group > label,
#pfc_mat_custom_sides_outer_btn,
.pfc-mat-width-btn,
#pfc_mat_width_sides_outer,
#pfc_mat_width_sides_inner,
#pfc_mat_width_sides_inner > div > label,
#pfc_mat_width_sides_outer > div > label,
#pfc_mat_width_sides_single > div > label,
#pfc_mat_width_sides_outer > div > div > span,
.pfc-mat-width-unit,
.pfc-filter-card select,
.pfc-filter-card input,
.pfc-filter-content,
.pfc-dim-field > label,
div.pfc-lock-toggle > span {
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px !important;
  color: var(--pfc-text-color) !important;
  letter-spacing: -0.5px !important;
  font-family: "Open Sans", sans-serif !important;
}

#pfc_filter_search {
  white-space: nowrap !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--pfc-text-color) !important;
  letter-spacing: -0.5px !important;
  font-family: "Open Sans", sans-serif !important;
}

#pfc_filter_search::placeholder {
  white-space: nowrap !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--pfc-text-color) !important;
  letter-spacing: -0.5px !important;
  font-family: "Open Sans", sans-serif !important;
}

#pfc_mat_type_filter,
#pfc_mat_type_filter_outer,
#pfc_mat_type_filter_inner {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-left: 0;
}
#pfc_image_shape_group {
  margin-bottom: 0.5rem;
}
#pfc_image_shape_group label {
  margin-left: 5px;
}

#pfc_mats_single_group,
#pfc_mats_double_group {
  display: none;
}
#pfc_mat_color_picker_single,
#pfc_mat_color_picker_outer,
#pfc_mat_color_picker_inner {
  margin-top: 10px;
  display: none;
}
#pfc_mat_width_sides_single,
#pfc_mat_width_sides_outer,
#pfc_mat_width_sides_inner {
  margin-top: 10px;
}
#pfc_mat_width_sides_single input,
#pfc_mat_width_sides_outer input,
#pfc_mat_width_sides_inner input {
  width: 60px;
}
#pfc_mat_inner_label {
  margin-top: 1rem;
}

/* Glass step */
.pfc-section-label + .pfc-section-label {
  margin-top: 1rem;
}

/* Running total */
#pfc_running_total {
  display: none;
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1.1em;
}

/* Debug container */
#pfc_calc_debug {
  display: none;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  background: #fafafa;
  font-size: 0.9em;
  white-space: pre-wrap;
}

/* Preview area */
#pfc_preview {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
#pfc_preview_canvas {
  background-color: #fff;
  border: 1px solid #ccc;
}
#pfc_preview_meta {
  margin-top: 8px;
  font-size: 0.95em;
  color: #222;
}
#pfc_crop_container {
  display: none;
  margin-top: 8px;
  position: relative;
  max-width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
  background: #fff;
}
#pfc_crop_inline_image {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#pfc_enlarge_preview {
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Lightbox */
#pfc_lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#pfc_lightbox_close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 32px;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
}
#pfc_lightbox_canvas {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  border: 1px solid #fff;
}

/* Crop popup - fullscreen mode */
#pfc_crop_popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
}
.pfc-crop-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pfc-primary-color);
}
.pfc-crop-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pfc-primary-color);
  display: flex;
  flex-direction: column;
}
.pfc-crop-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--pfc-primary-hover);
  z-index: 10;
}
.pfc-crop-popup-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
.pfc-crop-popup-header #pfc_crop_popup_close {
  font-size: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: #fff;
  padding: 0 4px;
  line-height: 1;
}
#pfc_crop_popup #pfc_ratio_options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pfc-primary-hover);
  z-index: 10;
}
#pfc_crop_popup .pfc-ratio-button {
  cursor: pointer;
  border: 2px solid var(--pfc-border-color);
  border-radius: 6px;
  padding: 6px;
  transition: border-color 0.15s;
  background: transparent;
}
#pfc_crop_popup .pfc-ratio-button:hover,
#pfc_crop_popup .pfc-ratio-button.active {
  border-color: var(--pfc-accent-color);
}
#pfc_crop_popup .pfc-ratio-button svg {
  fill: #fff;
}
#pfc_crop_container {
  display: block;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative;
}
#pfc_crop_container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pfc-crop-popup-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  background: var(--pfc-primary-hover);
  z-index: 10;
}
.pfc-crop-popup-actions .button-primary {
  background: var(--pfc-primary-color);
  border-color: var(--pfc-primary-color);
  color: #fff;
  font-size: 14px;
  padding: 8px 20px;
}
.pfc-crop-popup-actions .button-primary:hover {
  background: var(--pfc-primary-hover);
  border-color: var(--pfc-primary-hover);
}

/* Cropro popup styling */
.__cropro_ {
  background: rgba(35, 58, 94, 0.85) !important;
}

.__cropro_ .cropro-toolbar {
  background: #1a2f4c !important;
}

.__cropro_ .cropro-toolbar button {
  background: #1a2f4c !important;
  color: #ffffff !important;
}

.__cropro_ .cropro-toolbar button:hover {
  background: #233a5e !important;
}

.__cropro_ .cropro-canvas {
  background: #233a5e !important;
}

.__cropro_ .cropro-crop-frame {
  border-color: #cfdff4 !important;
}

.__cropro_ .cropro-grip {
  background: #cfdff4 !important;
  border-color: #233a5e !important;
}

.material-template .material-help-text {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.pfc-mat-block-outer {
  margin-bottom: 20px;
}

#pfc_mat_options_row {
  margin-bottom: 20px;
}

#pfc_frames > label > span > strong {
  font-weight: 700;
  font-size: 17px;
}

#pfc_configurator_container .pfc-option:has(input:checked),
#pfc_configurator_container .pfc-step-frame label:has(input:checked) {
  border-color: #00b29a !important;
  background: #eef7f6 !important;
  border-width: 2px !important;
}

#pfc_running_total {
  display: none;
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pfc-border-color, #e0e0e0);
  border-radius: 12px;
  background: var(--pfc-secondary-color, #f8f9fa);
  font-weight: 600 !important;
}

.pfc-glass-price {
  display: none;
}

.pfc-glass-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.pfc-glass-badge-soodne {
  background: #e8f5e9;
  color: #2e7d32;
}

.pfc-glass-badge-lemmik {
  background: #e3f2fd;
  color: #1565c0;
}

.pfc-glass-badge-kaitse {
  background: #fff3e0;
  color: #e65100;
}

a.custom-logo-link > img {
    min-height: 50px;
}
/* Loading spinner used while calculating the price and during add-to-cart. */
.pfc-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pfc-spin 0.7s linear infinite;
  vertical-align: -0.15em;
  box-sizing: border-box;
  flex-shrink: 0;
}

.pfc-summary-btn .pfc-spinner {
  width: 1.1em;
  height: 1.1em;
  border-width: 2.5px;
}

#pfc_running_total .pfc-spinner {
  margin-right: 0.4rem;
}

.pfc-summary-total-value .pfc-spinner {
  margin-right: 0.4rem;
}

@keyframes pfc-spin {
  to {
    transform: rotate(360deg);
  }
}