/* Panel grid */
.poster-sizes-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

/* Card */
.poster-size-card {
  display: flex;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.poster-size-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.poster-size-card.active {
  background-color: #f3f3f3;
  outline: none;
  box-shadow: none;
}


.poster-size-card.is-disabled {
  pointer-events: none;
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Image */
.poster-size-image {
  width: 40%;
}

.poster-size-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info */
.poster-size-info {
  width: 60%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.poster-size-title {
  font-size: 14px;
  font-weight: 600;
}

.poster-size-price {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.price-from {
  font-size: 13px;
}

.price-amount {
  font-size: 16px;
  font-weight: 600;
  color: #3583c1;
}

.poster-size-vat {
  font-size: 11px;
  color: #666;
  margin-top: -6px;   /* pulls it closer to the price */
  line-height: 1.2;
}


.poster-size-unavailable {
  font-size: 12px;
  color: #777;
  margin-top: 6px;
}

/* Remove underline from clickable cards */
.poster-size-card,
.poster-size-card * {
  text-decoration: none !important;
}

/* Active card tick — bottom right */
.poster-size-card.active {
  position: relative; /* required for ::after positioning */
}

.poster-size-card.active::after {
  content: "";
  position: absolute;

  top: auto !important;     /* ← THIS IS THE KEY */
  bottom: 8px;
  right: 8px;

  width: 28px;
  height: 28px;

  background-color: #28a745;

  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='black' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}



#certificate-product .certificate-heading{font-size:30px!important;font-weight:700;color:#3583c1;margin-bottom:25px}
#certificate-product .product-description{font-size:14px;line-height:1.8}
#certificate-product .certificate-info{display:inline;padding:0;margin:0 0 0 4px;border:0;background:transparent;box-shadow:none;vertical-align:middle}
#certificate-product .certificate-info img{width:32px;height:32px}
#certificate-product .dropdown_wrapper label{white-space:normal}
#certificate-product .certificate-versions{display:flex;align-items:stretch;flex:1;min-width:0;border:1px solid #d1d5db;border-radius:6px;overflow:hidden;background:#fff}
#certificate-product .certificate-versions button{width:42px;flex-shrink:0;font-size:24px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:#000;box-shadow:none;line-height:36px}
#certificate-product .certificate-versions input{width:100%;min-width:0;border:0;text-align:center;padding:10px 0;font:inherit;appearance:textfield;-moz-appearance:textfield}
#certificate-product .certificate-versions input::-webkit-inner-spin-button,#certificate-product .certificate-versions input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#certificate-product .table_content table{width:100%}
#certificate-product .price-cell{display:block;width:calc(100% + 16px);margin:-8px;padding:8px;cursor:pointer;text-decoration:none;color:inherit;user-select:none}
#certificate-product .price-cell:focus-visible{outline:2px solid #173b52!important;outline-offset:-3px}
#certificate-product .certificate-vat{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;font-size:14px}
#certificate-product .certificate-vat-description{text-align:right;color:#666;font-size:11px;margin-top:4px}
/* Match the reference's tab buttons; the shared footer adds a 15px button margin. */
.full-width-bar .tab-bar button{margin-top:0}
#certificate-product .certificate-basket-actions{display:flex;align-items:stretch;margin-top:20px}
#certificate-product .certificate-basket{flex:2;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding:10px;background:#28a745;color:#fff;border:0;border-radius:5px 0 0 5px;text-align:center;cursor:pointer;font:16px/24px 'Lato',Arial,sans-serif;min-height:59px}
#certificate-product .certificate-basket[aria-disabled=true]{background:#ccc;cursor:default;pointer-events:none}
#certificate-product .certificate-basket-line{display:flex;align-items:center;justify-content:center}
#certificate-product #certificate-basket-price{font-size:24px;font-weight:700;line-height:24px;margin-right:10px}
#certificate-product #certificate-basket-label{font-size:16px;font-weight:400;line-height:24px}
#certificate-product .certificate-basket small{font-size:10px;line-height:15px}
#certificate-product .certificate-save-quote{flex:1;margin:0;padding:10px;background:#3583c1;color:#fff;border:0;border-radius:0 5px 5px 0;cursor:pointer;font:16px/24px 'Lato',Arial,sans-serif}
#certificate-info-modal,#certificate-quote-modal{z-index:30000}
#certificate-quote-modal .close{background:none;border:0;box-shadow:none;padding:0 5px}
#certificate-quote-form label{display:block;margin:12px 0 4px}
#certificate-quote-form textarea{width:100%;min-height:80px;padding:8px;border:1px solid #ddd;border-radius:5px}
#certificate-quote-form .certificate-quote-submit{width:100%;margin-top:15px;padding:10px;border:0;background:#28a745;color:white;cursor:pointer;font:16px/24px 'Lato',Arial,sans-serif}
#certificate-info-modal .close{background:none;border:0;box-shadow:none;padding:0 5px}

#certificate-product .certificate-basket,#certificate-product .certificate-basket:hover,#certificate-product .certificate-basket:focus{text-decoration:none}

#certificate-product .certificate-vat{justify-content:space-between}
#certificate-product .certificate-vat-toggle{display:flex;align-items:center;gap:10px}
#certificate-product .bespoke-scroll-btn{background:#3583c1;color:white;border:0;box-shadow:none;padding:4px 8px;font-size:12px;font-weight:600;line-height:1.2;border-radius:3px;cursor:pointer;margin:0}
#certificate-product #certificate-bespoke-quantity{width:70px;max-width:100%;font-size:13px;text-align:center;border:1px solid #ddd;border-radius:3px}
#certificate-product #certificate-bespoke-error{font-size:12px;color:#b45309}

/* Keep the orientation help icon beside a label that can wrap between words. */
#certificate-product label[for="certificate-orientation"]{display:flex;align-items:center;gap:4px}
#certificate-product .certificate-orientation-label{flex:1;min-width:0;white-space:normal}
#certificate-product label[for="certificate-orientation"] .certificate-info{flex-shrink:0;margin-left:0}