/* Simple, Elementor-friendly styles */
.ldw-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.ldw-search { padding:10px 12px; min-width:260px; border:1px solid #ddd; border-radius:8px; }
.ldw-letters { display:flex; flex-direction:column; gap:6px; }
.ldw-letters .ldw-group { display:flex; flex-wrap:wrap; gap:6px; }
.ldw-letters .ldw-group.rtl { direction:rtl; }
.ldw-letter, .ldw-clear { padding:6px 10px; border:1px solid #ddd; background:#fff; border-radius:6px; cursor:pointer; }
.ldw-letter.active { background:#222; color:#fff; }
.ldw-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.ldw-card { border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.ldw-card img { width:100%; height:100px; object-fit:cover; display:block; }
.ldw-card .ldw-title { padding:8px 10px; font-size:12px; text-align:center; min-height:42px; }

.ldw-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:9999; }
.ldw-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(920px,90vw); max-height:80vh; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.2); display:none; z-index:10000; }
.ldw-modal .ldw-header { padding:14px 16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.ldw-modal .ldw-body { padding:16px; overflow:auto; max-height:calc(80vh - 60px); }
.ldw-modal .ldw-close { background:none; border:none; font-size:22px; cursor:pointer; }
.ldw-trigger { margin-top:8px; }
/* WooCommerce product field spacing */
.ldw-field {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fafafa;
}

.ldw-field h4 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
}

.ldw-selected-preview {
	margin-top: 12px;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 10px;
	background: #fafafa;
}
.ldw-preview-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ldw-preview-img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ddd;
}
.ldw-preview-info {
	flex: 1;
	font-size: 13px;
	line-height: 1.4;
}
.ldw-change {
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 6px;
}


/* === Full Listing Directory Page === */
.ldw-browser {
	margin: 40px auto;
	max-width: 1100px;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.ldw-page-title {
	text-align: center;
	margin-bottom: 25px;
	font-size: 24px;
	font-weight: 700;
}

.ldw-toolbar {
	justify-content: center;
	margin-bottom: 20px;
}

.ldw-grid {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.ldw-card {
	cursor: default;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ldw-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}


.ldw-title {
	padding: 10px;
	text-align: center;
	line-height: 1.4;
}

/* Code row with copy icon */
.ldw-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #777;
  margin-top: 4px;
  font-family: "Courier New", monospace;
  cursor: pointer;
  transition: color .2s ease;
}
.ldw-code:hover { color: #000; text-decoration: none; }

.ldw-copy-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: currentColor;              /* icon follows text color */
  opacity: 0.85;
  transition: opacity .2s ease, transform .12s ease;
}
.ldw-code:hover .ldw-copy-icon { opacity: 1; transform: scale(1.05); }

.ldw-code-text { line-height: 1; }






/* Tiny copy confirmation toast */
.ldw-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #222;
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 13px;
	opacity: 0;
	transform: translateY(-10px);
	transition: all .3s ease;
	z-index: 99999;
	pointer-events: none;
}
.ldw-toast.show {
	opacity: 1;
	transform: translateY(0);
}


/* ----------------------------------
   Pagination Buttons Styling
---------------------------------- */
.ldw-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  direction: ltr; /* ensures logical button order even in RTL */
}

.ldw-pager button {
  background: #0073aa; /* WordPress blue */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: inherit;
}

.ldw-pager button:hover {
  background: #005f8d;
}

.ldw-pager button:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Arabic RTL Layout */
html[dir="rtl"] .ldw-pager {
  flex-direction: row-reverse;
}


.ldw-no-results {
  text-align: center;
  padding: 40px 0;
  color: #777;
  font-size: 15px;
  opacity: 0.8;
}