/* Plugin-only tweaks. Designer layout/CSS lives in designer.css. */

/* Wax Paper Store brand colours: navy #11202a + green #429256 / #4dae63. */
:root {
  --wax-page: 234 244 237;
  --wax-heading: 17 32 42;
  --wax-tab-active: 66 146 86;
  --wax-btn: 66 146 86;
  --wax-btn-dark: 66 146 86;
  --wax-btn-hover: 234 244 237;
  --wax-footer: 247 249 248;
}

#design-online-main,
#share-3d-main,
#wppd-thankyou {
  font-family: inherit;
}

/* designer.css overrides Bootstrap .container on this page (header + footer too).
   Restore the theme widths so header, designer, and footer share one column. */
body .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5) !important;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  body .container { max-width: 540px !important; }
}

@media (min-width: 768px) {
  body .container { max-width: 720px !important; }
}

@media (min-width: 992px) {
  body .container { max-width: 960px !important; }
}

@media (min-width: 1200px) {
  body .container { max-width: 1140px !important; }
}

@media (min-width: 1400px) {
  body .container { max-width: 1320px !important; }
}

.main-nav > .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wppd-designer img {
  max-width: 100%;
  height: auto;
}

/* Template thumbs are full mockup photos — don't stretch the grid row
   or let height:auto blow the card up with empty white space. */
.wppd-designer .templates-box {
  align-items: start;
  align-content: start;
}

.wppd-designer .template-img {
  height: auto;
  justify-content: flex-start;
}

.wppd-designer .template-img__media {
  height: auto !important;
  aspect-ratio: 1 / 1;
}

.wppd-designer .template-img__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Primary CTAs: navy fill, green hover with navy text (matches theme buttons). */
.wppd-designer .bg-btn:hover,
.wppd-designer .hover\:bg-btn-dark:hover,
.wppd-designer a.waxpapersco-btn-primary:hover,
.wppd-designer .ready-design-cta:hover {
  background-color: #4dae63 !important;
  color: #11202a !important;
}

.wppd-designer .bg-btn:focus-visible,
.wppd-designer a.waxpapersco-btn-primary:focus-visible {
  outline: 2px solid #429256;
  outline-offset: 2px;
}

/* Disabled features — keep hidden even if markup is cached. */
.wppd-designer.is-no-dropbox [data-upload-source="dropbox"],
.wppd-designer.is-no-dropbox [data-compare-source="dropbox"],
.wppd-designer.is-no-compare #designCompareStartBtn,
.wppd-designer.is-no-compare #designCompareHelp,
.wppd-designer.is-no-share-3d #design3dShareBtn {
  display: none !important;
}

.wppd-designer.is-no-autodesign .upload-help,
.wppd-designer.is-no-autodesign .upload-autodesign,
.wppd-designer.is-no-3d [data-design-view-tabs],
.wppd-designer.is-no-3d #tab-design-3d,
.wppd-designer.is-no-3d #panel-design-3d,
.wppd-designer.is-no-second-logo #toolbarSecondLogoBtn {
  display: none !important;
}

/* Desktop: templates left, paper canvas center, quote form right. */
@media (min-width: 1024px) {
  .wppd-designer .design-workspace {
    display: grid !important;
    grid-template-columns: minmax(240px, 0.95fr) minmax(340px, 1.2fr) minmax(280px, 0.95fr) !important;
    align-items: start;
    gap: 1.5rem;
  }

  .wppd-designer .design-tools {
    order: 1 !important;
    grid-column: 1;
  }

  .wppd-designer .design-canvas-col {
    order: 2 !important;
    grid-column: 2;
    position: sticky;
    top: 6rem;
  }

  .wppd-designer .design-form-col {
    order: 3 !important;
    grid-column: 3;
  }
}

/* Upload card: wider and in two columns from 768px (upload zone left, other options right),
   so the whole card sits above the fold. */
@media (min-width: 768px) {
  .upload-card { max-width: 900px !important; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-items: center; align-content: center; }
  .upload-card > * { grid-column: 1 / -1; }
  .upload-card > .upload-zone { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .upload-card > .upload-sources,
  .upload-card > .upload-help,
  .upload-card > .wps-name-design { grid-column: 2; margin: 0; }
  .upload-card > .upload-sources { grid-row: 1; align-self: end; }
  .upload-card > .upload-help { grid-row: 2; }
  .upload-card > .wps-name-design { grid-row: 3; align-self: start; }
}

/* "Create a design from your business name" (assets/js/name-design.js). */
.wps-name-design { text-align: center; margin-top: .5rem; }
.wps-name-design[hidden], .wps-nd-row[hidden], .wps-nd-link[hidden] { display: none !important; }
.wps-nd-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: #6c7a86; text-decoration: underline; cursor: pointer; }
.wps-nd-link:hover { color: #429256; }
.wps-nd-row { display: flex; gap: 8px; max-width: 420px; margin: .6rem auto 0; }
.wps-nd-row input { flex: 1; min-width: 0; padding: .55rem .9rem; border: 1px solid #dfe5e1; border-radius: 9999px; font: inherit; font-size: 14px; background: #fff; }
.wps-nd-row input:focus { outline: none; border-color: #429256; }
.wps-nd-go { padding: .55rem 1.1rem; border: 0; border-radius: 9999px; background: #429256; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wps-nd-msg { font-size: 12px; color: #6c7a86; margin: .35rem 0 0; }
.wps-nd-msg:empty { display: none; }

/* Page content below the tool: cream section with a white 670px scroll box
   (same look as the Wax Paper Store product Details tab). */
.wps-design-content { background: #fff8e7; padding: 40px 0 48px; }
.wps-dc-card { position: relative; background: #fff; border: 1px solid #e6e9ec; border-radius: 1rem; padding: 1.15rem 1rem; box-shadow: 0 14px 34px rgba(17, 32, 42, .05); overflow: hidden; }
.wps-dc-inner.wps-scrollpane { max-height: var(--wps-pane-height, 670px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #429256 transparent; }
.wps-design-content .wps-dc-card::after { background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); border-radius: 0 0 1rem 1rem; bottom: 1px; left: 1px; right: 1px; height: 42px; }
.wps-design-content .wps-dc-inner h2 { font-size: clamp(1.2rem, 4vw, 1.45rem); font-weight: 800; margin: 1.5rem 0 .7rem; }
.wps-design-content .wps-dc-inner h2:first-child { margin-top: 0; }
.wps-design-content .wps-dc-inner h3 { font-size: clamp(1.05rem, 3.5vw, 1.15rem); font-weight: 700; margin: 1.2rem 0 .5rem; }
.wps-design-content .wps-dc-inner p { margin-bottom: .9rem; overflow-wrap: anywhere; }
.wps-design-content .wps-dc-inner ul { padding-left: 1.2rem; }
.wps-design-content .wps-dc-inner li { margin-bottom: .4rem; }
@media (min-width: 768px) { .wps-dc-card { padding: 1.5rem; } }
@media (min-width: 992px) { .wps-dc-card { padding: 1.85rem 2rem; } .wps-dc-inner.wps-scrollpane { scrollbar-gutter: stable; } }
@media (max-width: 991.98px) { .wps-design-content .wps-dc-card::after { display: none; } }
/* designer.css (Tailwind preflight) sets a { color: inherit }, which hid the content links.
   Match the product Details tab: green, semi-bold, no underline (underline on hover). */
.wps-design-content .wps-dc-inner a { color: #4dae63; font-weight: 600; text-decoration: none; }
.wps-design-content .wps-dc-inner a:hover,
.wps-design-content .wps-dc-inner a:focus-visible { color: #429256; text-decoration: underline; }