/**
 * Glozin Refurb Suite — Condition Cards
 * CSS prefix: .grs-cc-
 */

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

/* Hide the native attribute row once JS has replaced it with cards. */
body.grs-has-condition-cards .grs-cc-hide-original {
  display: none !important;
}

/* Keep the <select> in the DOM (WooCommerce needs it) but push it offscreen. */
body.grs-has-condition-cards select.grs-cc-hidden-select {
  position: absolute !important;
  left:     -9999px !important;
  width:    1px !important;
  height:   1px !important;
  overflow: hidden !important;
  clip:     rect( 1px, 1px, 1px, 1px );
}

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

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

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

.grs-cc-title {
  font-weight: 700;
  font-size:   16px;
}

/* Help / status text below the cards. */
.grs-cc-help {
  margin-top: 8px;
  font-size:  13px;
  color:      #666;
}

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

.grs-cc-row {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

/* =========================================================================
   Individual card
   ========================================================================= */

.grs-cc-card {
  position:        relative;
  min-width:       170px;
  flex:            1 1 170px;
  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;
}

.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 );
}

/* Accessibility: visible focus ring. */
.grs-cc-card:focus {
  outline: 3px solid rgba( 0, 0, 0, 0.06 );
}

/* =========================================================================
   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;
}

/* Price area — custom class prevents theme .price styles overwriting it. */
.grs-cc-price,
.grs-cc-price .grs-cc-price-html {
  font-weight:    800;
  font-size:      18px;
  letter-spacing: -0.3px;
}

/* =========================================================================
   Sale price styling
   ========================================================================= */

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

/* Remove WooCommerce's default underline on <ins>. */
.grs-cc-price ins {
  text-decoration: none;
}

/* New sale price colour. */
.grs-cc-price ins .grs-cc-price-html,
.grs-cc-price ins {
  color:       #e60023;
  font-weight: 800;
}

/* Subtle highlight background on the active card's sale price. */
.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-card.is-oos .grs-cc-oos-text {
  font-weight:  600;
  color:        #b00;
  margin-left:  6px;
  font-size:    12px;
}

/* Diagonal line overlay (pointer-events: none so 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;
}

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

@media ( max-width: 640px ) {
  .grs-cc-row {
    flex-direction: column;
    flex-wrap:      nowrap;
    gap:            12px;
  }

  .grs-cc-card {
    width:    100%;
    min-width: 0;
    flex:     0 0 auto;
    padding:  12px;

    /* Two-column grid: label/stars left, price/badge right. */
    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 flow 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;
  }
}