/**
 * Glozin Refurb Suite — Condition Cards  v2.0.0
 * CSS prefix: .grs-cc-
 *
 * Changes from v1:
 * - Added missing top-margin for the badge so it doesn't overlap the card above.
 * - Improved focus-visible ring (uses :focus-visible instead of :focus).
 * - Added explicit aria-live polite container styling.
 */

/* =========================================================================
   Wrapper + header
   ========================================================================= */

.grs-cc-wrap {
  margin-top: 20px;
}

.grs-cc-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   20px;
  width:           100%;
}

.grs-cc-header-main {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   nowrap;
  width:       auto;
}

.grs-cc-title {
  font-weight:  700;
  font-size:    16px;
  margin:       0;
  white-space:  nowrap;
  flex:         0 0 auto;
}

.grs-cc-wrap .grs-cc-info-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  white-space: nowrap;
  margin:      0;
  flex:        0 0 auto;
}

.grs-cc-wrap .grs-po-heading-link {
  white-space: nowrap;
}

/* Help / status text */
.grs-cc-help {
  margin-top: 8px;
  font-size:  13px;
  color:      #666;
  min-height: 1.3em; /* Reserve space so layout doesn't jump */
}

/* =========================================================================
   Card row
   ========================================================================= */

.grs-cc-row {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   12px;
  /* FIX: top margin so the Most Chosen badge has room */
  margin-top:            22px;
}

/* =========================================================================
   Individual card (button)
   ========================================================================= */

.grs-cc-card {
  position:        relative;
  text-align:      left;
  border:          1px solid rgba( 0, 0, 0, 0.12 );
  background:      #fff;
  padding:         12px;
  border-radius:   8px;
  cursor:          pointer;
  transition:      transform 0.08s ease,
                   box-shadow 0.12s ease,
                   border-color 0.12s ease;
  display:         block;
  text-decoration: none;
  color:           inherit;
  /* FIX: Reset browser button styles */
  font-family:     inherit;
  font-size:       inherit;
}

.grs-cc-card:hover {
  transform: translateY( -2px );
}

.grs-cc-card.is-active {
  border-color: rgba( 0, 0, 0, 0.6 );
  border-width: 2px;
  box-shadow:   0 8px 20px rgba( 0, 0, 0, 0.06 );
}

/* FIX: Use :focus-visible for keyboard accessibility without mouse jank */
.grs-cc-card:focus {
  outline: none;
}
.grs-cc-card:focus-visible {
  outline:        3px solid rgba( 0, 0, 0, 0.4 );
  outline-offset: 2px;
}

/* =========================================================================
   Card internals
   ========================================================================= */

.grs-cc-label {
  font-weight:   700;
  font-size:     14px;
  margin-bottom: 6px;
}

.grs-cc-stars {
  font-size:      14px;
  letter-spacing: 1px;
  margin-bottom:  8px;
  opacity:        0.9;
  color:          #ffc40d;
}

.grs-cc-price,
.grs-cc-price .grs-cc-price-html {
  font-weight:    800;
  font-size:      18px;
  letter-spacing: -0.3px;
}

/* Sale price */
.grs-cc-price del {
  font-size:    14px;
  font-weight:  500;
  color:        #888;
  opacity:      0.8;
  margin-right: 6px;
}

.grs-cc-price ins {
  text-decoration: none;
}

.grs-cc-price ins .grs-cc-price-html,
.grs-cc-price ins {
  color:       #e60023;
  font-weight: 800;
}

.grs-cc-card.is-active .grs-cc-price ins {
  background:    rgba( 230, 0, 35, 0.08 );
  padding:       2px 6px;
  border-radius: 4px;
}

/* =========================================================================
   Out-of-stock state
   ========================================================================= */

.grs-cc-card.is-oos {
  opacity: 0.6;
}

.grs-cc-card.is-oos .grs-cc-price {
  opacity: 0.85;
}

.grs-cc-oos-text {
  font-weight: 600;
  color:       #b00;
  margin-left: 6px;
  font-size:   12px;
}

/* Diagonal line — pointer-events: none so the card remains clickable */
.grs-cc-diagonal {
  pointer-events: none;
  position:       absolute;
  inset:          0;
  border-radius:  8px;
  overflow:       hidden;
}

.grs-cc-diagonal::before {
  content:    '';
  position:   absolute;
  left:       -20%;
  top:        50%;
  width:      140%;
  height:     2px;
  background: rgba( 0, 0, 0, 0.15 );
  transform:  rotate( -12deg );
  opacity:    0.9;
}

/* =========================================================================
   "Most chosen" badge
   ========================================================================= */

.grs-cc-badge {
  position:      absolute;
  top:           -18px;
  left:          50%;
  transform:     translateX( -50% );
  z-index:       3;

  font-size:     11px;
  font-weight:   700;
  padding:       5px 14px;
  border-radius: 999px;

  background:    #ffe66a;
  color:         #111;
  border:        2px solid #fff;
  box-shadow:    0 2px 6px rgba( 0, 0, 0, 0.08 );
  white-space:   nowrap;
}

/* =========================================================================
   Original UI suppression
   ========================================================================= */

/* Visually hide WC/theme condition <select> but keep in DOM for variation JS */
.grs-has-condition-cards select.grs-cc-hidden-select {
  position:       absolute !important;
  left:           -9999px !important;
  width:          1px !important;
  height:         1px !important;
  opacity:        0 !important;
  pointer-events: none !important;
}

/* Hide the surrounding row / wrapper */
.grs-has-condition-cards .grs-cc-hide-original {
  display: none !important;
}

/* Extra specificity for common theme/plugin structures */
.grs-has-condition-cards table.variations tr.grs-cc-hide-original,
.grs-has-condition-cards .variations__row.grs-cc-hide-original,
.grs-has-condition-cards .variation.grs-cc-hide-original,
.grs-has-condition-cards .value.grs-cc-hide-original,
.grs-has-condition-cards .swatch-wrapper.grs-cc-hide-original,
.grs-has-condition-cards .attribute.grs-cc-hide-original,
.grs-has-condition-cards .attr.grs-cc-hide-original,
.grs-has-condition-cards .wcboost-variation-swatches__wrapper.grs-cc-hide-original {
  display: none !important;
}

/* =========================================================================
   Responsive — small screens
   ========================================================================= */

@media ( max-width: 640px ) {

  .grs-cc-row {
    grid-template-columns: 1fr;
    gap:                   12px;
    margin-top:            22px;
  }

  .grs-cc-card {
    width:     100%;
    padding:   12px;

    /* Two-column grid on mobile for label/price layout */
    display:               grid;
    grid-template-columns: 1fr auto;
    grid-template-rows:    auto auto;
    column-gap:            12px;
    row-gap:               8px;
    align-items:           center;
  }

  .grs-cc-label {
    grid-column: 1 / 2;
    grid-row:    1 / 2;
    margin:      0;
  }

  .grs-cc-price {
    grid-column:  2 / 3;
    grid-row:     1 / 2;
    justify-self: end;
    text-align:   right;
    white-space:  nowrap;
  }

  .grs-cc-stars {
    grid-column: 1 / 2;
    grid-row:    2 / 3;
    margin:      0;
  }

  /* Badge moves from absolute to grid on mobile */
  .grs-cc-badge {
    position:     static;
    transform:    none;
    grid-column:  2 / 3;
    grid-row:     2 / 3;
    justify-self: end;
    align-self:   center;
    padding:      4px 10px;
    font-size:    11px;
    border:       none;
    box-shadow:   none;
  }

  .grs-cc-diagonal {
    border-radius: 8px;
  }
}