/* ============================================================
   equipment.css — Equipment page styles
   Version: 3.1.4 (Fixed RTL alignment for comment meta and actions)
   What changed vs 3.1.3:
   - Changed comment-meta back to flex-column for consistency with screenshot (date under author).
   - Set align-items: flex-start universally (no RTL override) so meta aligns to start: left in LTR, right in RTL.
   - Set comment-actions to inset-inline-end universally (no RTL override) so menu on end: right in LTR, left in RTL.
   - Ensured author-group flex order works naturally in RTL (name on right, badge on left without extra rules).
   ============================================================ */

/* ===== Secondary background contrast safeguards ===== */
.bg-accent,
.bg-secondary,
.accent-bg {
  background-color: var(--color-secondary) !important;
  color: #fff !important;
}

/* Any inline/explicit #ff4d00 background => force white text */
*:where(
  [style*="background:#ff4d00" i],
  [style*="background-color:#ff4d00" i]
) {
  color: #fff !important;
}

/* Common component states that switch to secondary bg */
.dropdown-menu .dropdown-item:is(:hover, :focus, .active),
.card .btn-primary:hover,
.circle-icon,
.btn-custom-secondary {
  color: #fff !important;
}

/* ===== Base page ===== */
.equipment-page {
  background: #fff;
  color: var(--color-text, #333);
}

/* === Equipment Page Header (legacy) === */
.equipment-header {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--color-muted, #f4f4f4) 0%, #e9ecef 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.equipment-breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  color: #6c757d;
}

.equipment-breadcrumb a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.3s;
}

.equipment-breadcrumb a:hover {
  color: var(--color-secondary);
}

.equipment-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.equipment-meta {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

/* === Main Equipment Image === */
.img-hero-large {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-badge {
  background: #fff;
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  display: inline-flex;
  align-items: center;
}

.brand-badge img {
  height: 30px;
  max-width: 120px;
  object-fit: contain;
}

.views-count {
  color: #6c757d;
  font-size: 0.9rem;
}

.equipment-short-desc {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #495057;
  margin-bottom: 2.5rem;
}

.equipment-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.equipment-main-image {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.equipment-main-image:hover {
  transform: translateY(-5px);
}

/* === Gallery Section === */
.equipment-gallery {
  background: #f8f9fa;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.gallery-item {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.3s;
  cursor: pointer;
  background: #fff;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Description Section === */
.section-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
  color: var(--color-primary);
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--color-secondary);
}

/* === Specifications Section === */
.equipment-specs {
  background: transparent;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.spec-item {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.3s;
}

.spec-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.spec-icon {
  width: 40px;
  height: 40px;
  background: var(--color-muted, #f4f4f4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spec-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.spec-content {
  flex-grow: 1;
  text-align: left; /* Default LTR */
}

.spec-content h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
}

.spec-content p {
  margin: 0;
  color: #6c757d;
}

/* === Video Section === */
.equipment-video {
  background: transparent;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Sidebar Section === */
.equipment-sidebar {
  border: none;
  border-radius: 0.75rem;
  overflow: hidden;
  top: 20px;
  background: #fff;
}

.equipment-sidebar .card-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

.equipment-sidebar .card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.price-item {
  margin-bottom: 1.25rem;
}

.price-item h4 {
  font-size: 0.95rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.price-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.2;
}

.price-value small {
  font-size: 1rem;
  font-weight: 400;
  color: #6c757d;
}

.stock-info {
  padding: 0.75rem;
  background: var(--color-muted, #f4f4f4);
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* === Action Buttons - Fixed for RTL === */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Action buttons base styles */
.action-buttons .btn,
.action-buttons .btn-custom-primary,
.action-buttons .btn-custom-secondary,
.action-buttons .btn-custom-whatsapp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 0.5rem;
}

/* RTL layout adjustments */
.rtl-layout .action-buttons .btn,
.rtl-layout .action-buttons .btn-custom-primary,
.rtl-layout .action-buttons .btn-custom-secondary,
.rtl-layout .action-buttons .btn-custom-whatsapp {
  flex-direction: row-reverse;
  text-align: right;
}

/* Button specific styles */
.btn-custom-secondary {
  background-color: var(--color-secondary);
  color: #fff;
}

.btn-custom-secondary:hover {
  background-color: #e04300;
  color: #fff;
}

.btn-custom-primary {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

.btn-custom-primary:hover {
  background-color: #031224;
  color: #ffffff;
}

.btn-custom-whatsapp {
  background-color: #47ab4f;
  color: #fff;
}

.btn-custom-whatsapp:hover {
  background-color: #3d9a45;
  color: #ffffff;
}

/* Icon adjustments for RTL */
.rtl-layout .action-buttons .btn iconify-icon,
.rtl-layout .action-buttons .btn .iconify {
  margin-left: 0.5rem;
  margin-right: 0;
}

.file-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.file-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  color: #495057;
  text-decoration: none;
  transition: color 0.3s;
}

.file-link:hover {
  color: var(--color-secondary);
}

.file-link i {
  margin-inline-end: 0.5rem;
  color: #dc3545;
}

/* === Related Equipment Cards === */
.equipment-card {
  border: none;
  border-radius: 0.75rem;
  transition: all 0.3s;
  overflow: hidden;
  background: #fff;
}

.equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.card-img-top {
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-muted, #f4f4f4);
}

.card-img-top img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.equipment-card:hover .card-img-top img {
  transform: scale(1.05);
}

.card-title {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

.card-text {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

/* === Sticky behavior === */
.equipment-sidebar.sticky-top {
  position: sticky;
  top: 20px;
  z-index: 100;
}

/* === Lightbox Preview === */
#lightbox { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; }

#jl-lightbox .jl-wrap{ max-width: min(92vw, 1200px); max-height: 82vh; padding: 0 16px 56px 16px; }

#jl-lightbox img{ max-width: 100%; max-height: calc(82vh - 56px); object-fit: contain; border-radius: .5rem; }

#jl-lightbox .jl-lightbox-caption{ position: absolute; left: 50%; bottom: clamp(8px, env(safe-area-inset-bottom, 8px), 24px); transform: translateX(-50%); max-width: 92vw; padding: .4rem .6rem; background: rgba(0,0,0,.55); color: #fff; border-radius: .375rem; font-size: .85rem; line-height: 1.2; text-align: center; backdrop-filter: blur(2px); }

#jl-lightbox .jl-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:999px; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; }

#jl-lightbox .jl-prev{ left: 12px; } #jl-lightbox .jl-next{ right:12px; }

@media (max-width: 576px){
  #jl-lightbox .jl-wrap{ max-width: 96vw; max-height: 78vh; padding-bottom: 52px; }
  #jl-lightbox img{ max-height: calc(78vh - 52px); }
  #jl-lightbox .jl-lightbox-caption{ font-size: .8rem; }
}

/* === New Hero Header (DB image + RTL flip; description-only overlay) === */
.equipment-hero-header { position: relative; background: none; background-color: #333; overflow: hidden; }

.equipment-hero-header .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transform: scaleX(1); }

.rtl-layout .equipment-hero-header .hero-bg { transform: scaleX(-1); }

.equipment-hero-header .overlay { position: absolute; inset: 0; background: none; z-index: 1; pointer-events: none; }

.equipment-hero-header .content-wrapper { position: relative; z-index: 2; }

/* Breadcrumbs */
.equipment-hero-header .breadcrumb { color: #ccc; font-size: 0.85rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; }

.equipment-hero-header .breadcrumb a { color: #ddd; text-decoration: none; transition: color 0.3s; }

.equipment-hero-header .breadcrumb a:hover { color: var(--color-secondary) !important; text-decoration: underline; }

.equipment-hero-header .breadcrumb .active { color: #ddd !important; opacity: 0.9; }

.equipment-hero-header .breadcrumb .breadcrumb-separator { margin: 0 0.5rem; color: rgba(255, 255, 255, 0.6); }

/* Description chip */
.equipment-hero-header .hero-desc { display: inline-block; background: rgba(5, 25, 57, 0.85); color: #fff; padding: .75rem 1rem; border-radius: .375rem; line-height: 1.7; max-width: 70ch; }

@media (max-width: 576px) { .equipment-hero-header .hero-desc { max-width: 100%; } }

/* === Buttons (brand-consistent) === */
.btn-custom-secondary {
  background-color: var(--color-secondary);
  color: #fff;
  border: none;
  border-radius: var(--btn-radius, 8px);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
}

.btn-custom-secondary iconify-icon,
.btn-custom-secondary .iconify {
  color: #fff;
  transition: color 0.3s;
}

.btn-custom-secondary:hover {
  background-color: #e04300;
  color: #fff;
}

.btn-custom-secondary:hover iconify-icon,
.btn-custom-secondary:hover .iconify {
  color: #fff;
}

.btn-custom-primary {
  background-color: var(--color-primary);
  color: var(--color-secondary);
  border: none;
  border-radius: var(--btn-radius, 8px);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
}

.btn-custom-primary iconify-icon,
.btn-custom-primary .iconify {
  color: var(--color-secondary);
  transition: color 0.3s;
}

.btn-custom-primary:hover {
  background-color: #031224;
  color: #ffffff;
}

.btn-custom-primary:hover iconify-icon,
.btn-custom-primary:hover .iconify {
  color: #ffffff;
}

.btn-custom-whatsapp {
  background-color: #47ab4f;
  color: #fff;
  border: none;
  border-radius: var(--btn-radius, 8px);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.3s, color 0.3s;
}

.btn-custom-whatsapp:hover {
  background-color: #3d9a45;
  color: #ffffff;
}

/* === Icon Utilities === */
.iconify-primary { color: var(--color-primary); }

.iconify-secondary { color: var(--color-secondary); }

.iconify-muted { color: var(--color-muted, #f4f4f4); }

.iconify-white { color: #fff; }

/* ===== RTL Support ===== */
.rtl-layout {
  direction: rtl;
  text-align: right;
}

.rtl-layout .equipment-meta { flex-direction: row-reverse; }

.rtl-layout .equipment-hero-header .breadcrumb { text-align: right; }

.rtl-layout .equipment-hero-header .breadcrumb a { margin-inline-start: 0.5rem; }

.rtl-layout .section-title::after { left: auto; right: 0; }

.rtl-layout .equipment-sidebar { text-align: right; }

.rtl-layout .spec-item { flex-direction: row-reverse; }

.rtl-layout .spec-content { text-align: right; }

.rtl-layout .file-link i { margin-inline-start: 0.5rem; margin-inline-end: 0; }

/* ===== video.js (theme) ===== */
.video-js .vjs-control-bar { height: 48px !important; align-items: center !important; padding: 0 !important; }

.video-js .vjs-progress-control { flex: 1 !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; }

.video-js .vjs-progress-holder { height: 100% !important; background-color: #e0e0e0 !important; border-radius: 0 !important; }

.video-js .vjs-play-progress { background-color: var(--color-secondary) !important; height: 100% !important; border-radius: 0 !important; }

.video-js .vjs-play-progress::before { display: none !important; }

.video-js .vjs-control:hover { color: var(--color-secondary) !important; }

.video-js { width: 100% !important; height: 400px !important; max-height: 500px; margin: 0 auto; display: block; background-color: #000; border-radius: 8px; overflow: hidden; }

.video-js video { object-fit: cover !important; width: 100% !important; height: 100% !important; }

.video-js.vjs-fullscreen video { object-fit: cover !important; }

/* === Compare bar tweak === */
#compareBar a.btn { font-size: 0.9rem; }

/* ================== RATINGS SECTION ================== */
/* BiDi helpers */
.bidi-auto{ unicode-bidi: isolate; }

.bidi-ltr{ direction: ltr; unicode-bidi: isolate; }

/* Ratings: keep stars and numeric summary in same order in all languages */
.equipment-ratings .rating-bar{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  direction: ltr;
  unicode-bidi: isolate;
  margin-bottom: 1rem;
}

.equipment-ratings .rating-summary{
  font-size: .95rem;
  color: #6c757d;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Rating stars styling */
.equipment-ratings .rating-stars { display: flex; gap: 0.1rem; }

.equipment-ratings .rating-stars button.star{
  background: none;
  border: 0;
  padding: 0 .15rem;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: #c7cbd1;
  transition: transform .08s ease, color .12s ease;
}

.equipment-ratings .rating-stars button.star.preview{ color: #f59e0b; }

.equipment-ratings .rating-stars button.star.active { color: #f59e0b; }

.equipment-ratings .rating-stars button.star:hover,
.equipment-ratings .rating-stars button.star:focus{
  outline: none;
  transform: translateY(-1px);
}

/* RTL ratings adjustment */
.rtl-layout .equipment-ratings .rating-bar { justify-content: flex-start; }

/* ================== COMMENTS SECTION (Unified, single card) ================== */
/* Comments list container */
.equipment-comments .comments-list { margin: 0; padding: 0; }

/* Neutralize the <li> so there is no card-inside-card and no divider line */
.equipment-comments .comment-item{
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important; /* ensure block flow */
}

/* The REAL card wrapper inside each <li> */
.equipment-reviews .comment-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--rev-border, #e8edf3);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(3,23,52,.06);
  padding: 14px 16px;
  display: block; /* full-width block */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important; /* kill stray floats from global CSS */
  box-sizing: border-box;
}

/* Corner actions: always on logical end side (LTR: right, RTL: left) */
.equipment-reviews .comment-actions{
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 6;
}

.equipment-reviews .comment-actions .btn{
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 12px rgba(3,23,52,.18);
}

/* Dropdown should align to the trigger side in both directions */
.equipment-reviews .comment-actions .dropdown-menu{
  z-index: 4000 !important;
  margin-top: 8px;
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
}

.rtl-layout .equipment-reviews .comment-actions .dropdown-menu{
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
  text-align: right;
}

/* Meta column: author-group over date, aligned to start (LTR: left, RTL: right) */
.equipment-reviews .comment-meta{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-start;
  margin-bottom: .35rem;
}

.equipment-reviews .author-group{
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Author name */
.equipment-reviews .comment-author{
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-primary);
}

/* Status badge next to the author */
.equipment-reviews .js-status-badge.badge{
  position: static !important;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: .125rem .55rem;
  margin: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

/* Date stays on the opposite side; keep digits LTR */
.equipment-reviews .comment-date{
  font-size: .85rem;
  color: #6b7280;
  min-width: 0;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Soft badge colors */
.equipment-reviews .badge.bg-success{ background: #d8f3e7 !important; color: #0e6b47 !important; }

.equipment-reviews .badge.bg-warning{ background: #ffe59c !important; color: #6b4e00 !important; }

.equipment-reviews .badge.bg-danger { background: #ffd3d3 !important; color: #7a1111 !important; }

/* Body text */
.equipment-reviews .comment-body{
  margin-top: .35rem;
  line-height: 1.7;
  font-size: 1rem;
  color: #495057;
  word-wrap: break-word;
}

/* Alerts (login prompt) keep their look */
.equipment-reviews .alert{
  border-radius: 12px;
  border-color: #cfe8ff;
}

/* Mobile wrapping: name+badge can stay together, date can wrap below */
@media (max-width: 480px){
  .equipment-reviews .comment-meta{
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .rtl-layout .equipment-reviews .comment-meta{
    justify-content: flex-end;
  }

  .equipment-reviews .comment-date{
    order: 1;
    flex-basis: 100%;
  }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .equipment-header { padding: 3rem 0; }
  .equipment-title { font-size: 2rem; }
  .equipment-sidebar { margin-top: 3rem; position: static; }
}

@media (max-width: 768px) {
  .equipment-actions { flex-direction: column; }
  .specs-grid { grid-template-columns: 1fr; }
  .related-equipment .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .action-buttons .btn,
  .action-buttons .btn-custom-primary,
  .action-buttons .btn-custom-secondary,
  .action-buttons .btn-custom-whatsapp { padding: 0.85rem 1rem; font-size: 0.95rem; }
  .equipment-ratings .rating-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .equipment-ratings .rating-stars button.star { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .equipment-title { font-size: 1.75rem; }
  .related-equipment .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .equipment-hero-header .breadcrumb { font-size: 0.8rem; }
  .equipment-comments .comment-item { margin-bottom: 10px !important; }
  .equipment-comments .comment-author { font-size: 0.95rem; }
  .equipment-comments .comment-date { font-size: 0.8rem; }
  .equipment-comments .comment-body { font-size: 0.9rem; margin-top: 0.5rem; }
  .equipment-ratings .rating-stars button.star { font-size: 1.3rem; }
}

/* Additional RTL fixes for overall layout */
.rtl-layout .equipment-actions { flex-direction: row-reverse; }

.rtl-layout .gallery-grid { direction: rtl; }

.rtl-layout .specs-grid { direction: rtl; }

/* Ensure proper text alignment in RTL for all sections */
.rtl-layout .equipment-full-desc .content,
.rtl-layout .equipment-short-desc,
.rtl-layout .stock-info,
.rtl-layout .price-item { text-align: right; }

/* Fix for RTL in related equipment cards */
.rtl-layout .equipment-card .card-body,
.rtl-layout .equipment-card .card-footer { text-align: right; direction: rtl; }
/* Equipment card — optional polish (English comments only) */
.equipment-card {
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.equipment-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}
.equipment-card .card-body {
  padding: .75rem .9rem 1rem;
}
.equipment-card .card-title {
  margin: 0 0 .25rem;
  font-size: .95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;           /* clamp to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Make images fill Bootstrap .ratio nicely */
.ratio > img,
.equipment-card .card-img-top {
  position: absolute;              /* required by .ratio */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readonly star rating (move from inline <style> to CSS file if you prefer) */
.ec-stars { 
  position: relative; 
  display: inline-block; 
  line-height: 1; 
  direction: ltr; 
}
.ec-stars .ec-base,
.ec-stars .ec-fill { font-size: 0; }
.ec-stars .ec-base::before,
.ec-stars .ec-fill::before {
  content: "★★★★★";
  letter-spacing: 2px;
  font-size: 14px;                 /* adjust star size here */
}
.ec-stars .ec-base { color: #d9d9d9; }
.ec-stars .ec-fill {
  color: #f5a623;                  /* star color */
  position: absolute; 
  top: 0; 
  left: 0; 
  white-space: nowrap; 
  overflow: hidden;
}

/* Optional grid for listing multiple cards */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

/* Comments action menu — readable hover, brand accent text */
.equipment-reviews .comment-actions .dropdown-menu{
  /* override Bootstrap hover/active variables only inside this menu */
  --bs-dropdown-link-hover-color: var(--color-secondary);
  --bs-dropdown-link-hover-bg: transparent;   /* keep background as is */
  --bs-dropdown-link-active-color: var(--color-secondary);
  --bs-dropdown-link-active-bg: transparent;
}

/* Safety if your build doesn't use the BS vars */
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item:hover,
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item:focus{
  color: var(--color-secondary) !important;
  background-color: transparent !important;   /* do not flip bg */
}

/* Keep "Delete" red on hover */
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item.text-danger:hover,
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item.text-danger:focus{
  color: #c70808 !important;
  background-color: transparent !important;
}

/* Disabled item style (e.g., Approve when already approved) */
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item.disabled,
.equipment-reviews .comment-actions .dropdown-menu .dropdown-item:disabled{
  color: #9aa0a6 !important;
  opacity: .8;
  pointer-events: none;
  background-color: transparent !important;
}

  /* No brand changes: keep your theme intact */
  .equipment-reviews .comment-card{position:relative;background:var(--rev-card-bg,#fff);border:1px solid var(--rev-border,#e8edf3);box-shadow:var(--rev-shadow,0 6px 18px rgba(3,23,52,.06));border-radius:12px;padding:1.25rem 1.5rem}
  .equipment-reviews .comment-card .comment-content{padding-inline-end:3rem}
  .equipment-reviews .comment-meta{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
  .equipment-reviews .author-group{display:flex;align-items:center;gap:.4rem}
  .equipment-reviews .comment-actions{position:absolute;inset-block-start:.75rem;inset-inline-end:1rem;z-index:1}
  .equipment-reviews .dropdown-menu{min-width:11rem}
  :dir(rtl) .equipment-reviews .dropdown-menu{text-align:right}
  .equipment-reviews .comment-item + .comment-item{margin-top:1rem}
  .equipment-reviews .comment-body{margin-top:.75rem}
  .equipment-reviews .comment-body .edit-area{margin-top:.5rem}
  .equipment-reviews .comment-body .edit-controls{margin-top:.5rem;display:flex;gap:.5rem}
  .equipment-reviews .comment-item.flash-highlight .comment-card{animation:commentFlash 1800ms ease-in-out 0s 1 both;border-radius:12px}
  @keyframes commentFlash{0%{background-color:#fff3c6;box-shadow:0 0 0 0 rgba(255,196,0,.38),var(--rev-shadow,0 6px 18px rgba(3,23,52,.06))}35%{background-color:#ffe8a3;box-shadow:0 0 0 6px rgba(255,196,0,.18),var(--rev-shadow,0 6px 18px rgba(3,23,52,.06))}70%{background-color:#fff3c6;box-shadow:0 0 0 2px rgba(255,196,0,.12),var(--rev-shadow,0 6px 18px rgba(3,23,52,.06))}100%{background-color:#fff;box-shadow:var(--rev-shadow,0 6px 18px rgba(3,23,52,.06))}}
  @media (prefers-reduced-motion:reduce){.equipment-reviews .comment-item.flash-highlight .comment-card{animation:none;background-color:#fff7d6}}
  .equipment-reviews .comment-actions.is-open{z-index:3000}
  .equipment-reviews .comment-actions.is-open .dropdown-menu{z-index:2999}
  .equipment-reviews .load-more-wrap { text-align: center; margin-top: 1.5rem; }
  .equipment-reviews .comment-badges { display: inline-flex; gap: 0.5rem; margin-left: 0.5rem; }
  .equipment-reviews .comment-badge { display:inline-block; cursor:pointer; user-select:none; }
  .equipment-reviews .comment-badge.is-zero { display:none; }
  .equipment-reviews .comment-badge.is-active { outline: 2px solid rgba(0,0,0,.15); box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset; }