/*───────────────────────────────────────────────────────────

  Mechawork – Premade Actions (Add / Customise / Stock badge)

  File: modules/custom/premade_page/css/premade_actions.css

───────────────────────────────────────────────────────────*/



/* Layout helpers for actions area */

.mw-actions {

  display: flex;

  gap: 10px;

  align-items: center;

  flex-wrap: wrap;

}



/* Generic button polish (kept light; theme may override) */

.mw-actions .mw-add-to-basket,

.mw-actions .mw-customize,

.btn-add,

.btn-cust {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 140px;

  height: var(--btn-h, 44px);

  padding: 0 14px;

  border-radius: 8px;

  border: 1px solid rgba(0,0,0,0.1);

  background: #f6f7f9;

  color: #222;

  font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  cursor: pointer;

  text-decoration: none;

  transition: transform .06s ease, filter .2s ease, opacity .2s ease;

}



.mw-actions .mw-add-to-basket:focus-visible,

.mw-actions .mw-customize:focus-visible,

.btn-add:focus-visible,

.btn-cust:focus-visible {

  outline: 2px solid #7aa7ff;

  outline-offset: 2px;

}



/* Disabled buttons (stock or loading) */

.is-disabled,

[aria-disabled="true"],

.mw-out-of-stock .mw-actions .mw-add-to-basket,

.mw-out-of-stock .mw-actions .mw-customize {

  opacity: .55;

  cursor: not-allowed;

  pointer-events: none;

}



/* Loading spinner */

.is-loading { pointer-events: none; }

.is-loading::after {

  content: "";

  position: absolute;

  right: 10px;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  border: 2px solid rgba(0,0,0,.15);

  border-top-color: rgba(0,0,0,.55);

  animation: mwspin .7s linear infinite;

}

@keyframes mwspin { to { transform: rotate(360deg); } }



/* Small "No stock" badge placed near buttons */

.mw-no-stock {

  display: inline-block;

  padding: 6px 10px;

  border-radius: 6px;

  font-size: 13px;

  line-height: 1;

  background: #eeeeee;

  color: #555555;

  border: 1px solid rgba(0,0,0,0.08);

  margin: 0 6px 8px 0;

}



/* Subtle dim on OOS cards */

.mw-out-of-stock { filter: grayscale(0.15); }



/* Price chip baseline (if theme hasn't styled it) */

.mw-price-chip {

  display: block;

  width: 100%;

  height: var(--btn-h, 44px);

  line-height: var(--btn-h, 44px);

  text-align: center;

  border-radius: 8px;

  background: #ffffff;

  color: #111111;

  border: 1px solid rgba(0,0,0,0.08);

  margin: 6px 0 10px 0;

}



/* Hover polish */

.btn-add, .btn-cust { background: #ffffff; }

.btn-add:hover, .btn-cust:hover,

.mw-actions .mw-add-to-basket:hover,

.mw-actions .mw-customize:hover {

  filter: brightness(0.98);

  transform: translateY(-1px);

}



/*───────────────────────────────────────────────────────────

  Centered OOS overlay for grid cards

  - No JS needed; triggered by .mw-out-of-stock on the card

  - Uses :lang() to localize the overlay text

───────────────────────────────────────────────────────────*/



/* Ensure typical card wrappers are positioned for overlay anchoring */

.premade-card,

.mw-card,

section.mw-right {

  position: relative;

}



/* Base overlay box (EN fallback) */

.premade-card.mw-out-of-stock::after,

.mw-card.mw-out-of-stock::after {

  content: "No stock";

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  z-index: 5;

  min-width: 160px;

  max-width: calc(100% - 24px);

  padding: 10px 14px;

  text-align: center;

  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  color: #444;

  background: rgba(245,245,245,0.96);

  border: 1px solid rgba(0,0,0,0.06);

  border-radius: 10px;

  box-shadow: 0 4px 12px rgba(0,0,0,.06);

}



/* Turkish localization via :lang() */

.premade-card.mw-out-of-stock:lang(tr)::after,

.mw-card.mw-out-of-stock:lang(tr)::after {

  content: "Stokta yok";

}



/* Optional: dim main visual area more strongly under the overlay */

.premade-card.mw-out-of-stock img,

.mw-card.mw-out-of-stock img {

  filter: grayscale(0.3) brightness(0.95);

}