/**
 * File:    sarea-favorites-2026.css
 * Path:    sarea-favorites-2026/assets/css/sarea-favorites-2026.css
 * Purpose: Styles لـ Heart Icon، Shortcode List، Toast، Admin Dashboard.
 *
 * @package Sarea_Favorites_2026
 * @since   1.0.0
 */

/* ════════════════════════════════════════════════════════════════
   VARIABLES
   ════════════════════════════════════════════════════════════════ */
:root {
	--sarea-fav-color-primary    : #e53935;
	--sarea-fav-color-inactive   : #9e9e9e;
	--sarea-fav-color-bg         : #ffffff;
	--sarea-fav-color-bg-hover   : #fce4ec;
	--sarea-fav-color-border     : #e0e0e0;
	--sarea-fav-color-text       : #212121;
	--sarea-fav-color-text-muted : #757575;
	--sarea-fav-color-success    : #2e7d32;
	--sarea-fav-color-error      : #c62828;
	--sarea-fav-color-info       : #1565c0;
	--sarea-fav-radius-card      : 12px;
	--sarea-fav-radius-btn       : 8px;
	--sarea-fav-shadow-card      : 0 2px 8px rgba(0, 0, 0, .08);
	--sarea-fav-transition       : 220ms ease;
}

/* ════════════════════════════════════════════════════════════════
   HEART BUTTON
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-btn {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : 40px;
	height          : 40px;
	padding         : 0;
	border          : 2px solid var(--sarea-fav-color-border);
	border-radius   : 50%;
	background      : var(--sarea-fav-color-bg);
	cursor          : pointer;
	transition      : border-color var(--sarea-fav-transition),
	                  background   var(--sarea-fav-transition),
	                  transform    var(--sarea-fav-transition);
	position        : relative;
	outline-offset  : 3px;
}

.sarea-fav-2026-btn:hover {
	border-color : var(--sarea-fav-color-primary);
	background   : var(--sarea-fav-color-bg-hover);
}

.sarea-fav-2026-btn:focus-visible {
	outline : 2px solid var(--sarea-fav-color-primary);
}

/* ── Icon ── */
.sarea-fav-2026-btn__icon {
	width      : 18px;
	height     : 18px;
	fill       : var(--sarea-fav-color-inactive);
	transition : fill      var(--sarea-fav-transition),
	             transform var(--sarea-fav-transition);
}

/* ── Active state ── */
.sarea-fav-2026-btn.is-active {
	border-color : var(--sarea-fav-color-primary);
	background   : var(--sarea-fav-color-bg-hover);
}

.sarea-fav-2026-btn.is-active .sarea-fav-2026-btn__icon {
	fill      : var(--sarea-fav-color-primary);
	transform : scale(1.15);
}

/* ── Loading state ── */
.sarea-fav-2026-btn.is-loading {
	opacity        : 0.6;
	pointer-events : none;
}

/* ── Pop animation ── */
@keyframes sarea-fav-pop {
	0%   { transform: scale(1);    }
	40%  { transform: scale(1.35); }
	70%  { transform: scale(0.9);  }
	100% { transform: scale(1);    }
}

.sarea-fav-2026-btn.is-active .sarea-fav-2026-btn__icon {
	animation: sarea-fav-pop 350ms ease forwards;
}

/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-toast {
	position        : fixed;
	bottom          : 24px;
	inset-inline-end: 24px;
	min-width       : 220px;
	max-width       : 360px;
	padding         : 12px 20px;
	border-radius   : var(--sarea-fav-radius-btn);
	background      : var(--sarea-fav-color-text);
	color           : #fff;
	font-size       : 14px;
	line-height     : 1.5;
	box-shadow      : 0 4px 16px rgba(0, 0, 0, .2);
	z-index         : 99999;
	opacity         : 0;
	transform       : translateY(12px);
	transition      : opacity     300ms ease,
	                  transform   300ms ease;
}

.sarea-fav-2026-toast.is-visible {
	opacity   : 1;
	transform : translateY(0);
}

.sarea-fav-2026-toast--success { background: var(--sarea-fav-color-success); }
.sarea-fav-2026-toast--error   { background: var(--sarea-fav-color-error);   }
.sarea-fav-2026-toast--info    { background: var(--sarea-fav-color-info);    }

/* ════════════════════════════════════════════════════════════════
   SHORTCODE — FAVORITES LIST (PATCHED)
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-list {
    display               : grid;
    grid-template-columns : repeat( auto-fill, minmax( 240px, 1fr ) );
    gap                   : 24px;
    padding               : 0;
    list-style            : none;
    width                 : 100%;
}

.sarea-fav-2026-list__empty {
    grid-column : 1 / -1;
    text-align  : center;
    color       : var(--sarea-fav-color-text-muted);
    padding     : 40px 0;
    font-size   : 15px;
}

/* ── Product Card ── */
.sarea-fav-2026-card {
    display        : flex;
    flex-direction : column;
    border         : 1px solid var(--sarea-fav-color-border);
    border-radius  : var(--sarea-fav-radius-card);
    background     : var(--sarea-fav-color-bg);
    box-shadow     : var(--sarea-fav-shadow-card);
    overflow       : hidden;
    transition     : box-shadow var(--sarea-fav-transition),
                     transform  var(--sarea-fav-transition);
    min-width      : 0; /* يمنع overflow في الـ Grid */
}

.sarea-fav-2026-card:hover {
    box-shadow : 0 8px 24px rgba(0, 0, 0, .13);
    transform  : translateY(-3px);
}

/* ── Thumbnail — نسبة ثابتة 4:3 ── */
.sarea-fav-2026-card__thumb-link {
    display      : block;
    overflow     : hidden;
    aspect-ratio : 4 / 3;
}

.sarea-fav-2026-card__thumb {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform 400ms ease;
}

.sarea-fav-2026-card__thumb-link:hover .sarea-fav-2026-card__thumb {
    transform : scale(1.06);
}

.sarea-fav-2026-card__thumb--placeholder {
    background      : #f5f5f5;
    display         : flex;
    align-items     : center;
    justify-content : center;
    aspect-ratio    : 4 / 3;
}

/* ── Body ── */
.sarea-fav-2026-card__body {
    padding : 14px 16px 8px;
    flex    : 1;
}

.sarea-fav-2026-card__name {
    font-size     : 14px;
    font-weight   : 600;
    margin        : 0 0 8px;
    line-height   : 1.45;
    display       : -webkit-box;
    -webkit-line-clamp  : 2;
    -webkit-box-orient  : vertical;
    overflow      : hidden; /* قطع الأسماء الطويلة */
}

.sarea-fav-2026-card__name a {
    color           : var(--sarea-fav-color-text);
    text-decoration : none;
}

.sarea-fav-2026-card__name a:hover { color: var(--sarea-fav-color-primary); }

.sarea-fav-2026-card__price {
    font-size   : 15px;
    font-weight : 700;
    color       : var(--sarea-fav-color-primary);
}

/* ── Actions ── */
.sarea-fav-2026-card__actions {
    display        : grid;
    grid-template-columns: 1fr 1fr;
    gap            : 8px;
    padding        : 12px 16px 16px;
    border-top     : 1px solid var(--sarea-fav-color-border);
    margin-top     : auto;
}

/* زر Add to Cart يأخذ العرض كاملاً */
.sarea-fav-2026-card__btn--cart {
    grid-column : 1 / -1;
}

.sarea-fav-2026-card__btn {
    padding         : 9px 10px;
    border-radius   : var(--sarea-fav-radius-btn);
    font-size       : 12px;
    font-weight     : 600;
    text-align      : center;
    text-decoration : none;
    cursor          : pointer;
    border          : 2px solid transparent;
    transition      : background var(--sarea-fav-transition),
                      color      var(--sarea-fav-transition),
                      border-color var(--sarea-fav-transition);
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}

.sarea-fav-2026-card__btn--cart {
    background   : var(--sarea-fav-color-primary);
    color        : #fff;
    border-color : var(--sarea-fav-color-primary);
}

.sarea-fav-2026-card__btn--cart:hover {
    background   : #b71c1c;
    border-color : #b71c1c;
    color        : #fff;
}

.sarea-fav-2026-card__btn--view {
    background   : transparent;
    color        : var(--sarea-fav-color-text);
    border-color : var(--sarea-fav-color-border);
}

.sarea-fav-2026-card__btn--view:hover {
    border-color : var(--sarea-fav-color-text);
    background   : #f5f5f5;
}

.sarea-fav-2026-card__btn--remove {
    background   : transparent;
    color        : var(--sarea-fav-color-error);
    border-color : #ffcdd2;
}

.sarea-fav-2026-card__btn--remove:hover {
    background   : var(--sarea-fav-color-error);
    border-color : var(--sarea-fav-color-error);
    color        : #fff;
}

.sarea-fav-2026-card__btn--remove.is-loading {
    opacity        : 0.55;
    pointer-events : none;
}

/* ── Remove animation ── */
@keyframes sarea-fav-remove {
    0%   { opacity: 1; transform: scale(1);    }
    100% { opacity: 0; transform: scale(0.88); }
}

.sarea-fav-2026-card.is-removing {
    animation           : sarea-fav-remove 300ms ease forwards;
    pointer-events      : none;
}

/* ════════════════════════════════════════════════════════════════
   NOTICES (Login / Empty)
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-notice {
	padding       : 20px 24px;
	border-radius : var(--sarea-fav-radius-card);
	text-align    : center;
}

.sarea-fav-2026-notice--info  { background: #e3f2fd; color: #0d47a1; }
.sarea-fav-2026-notice--empty { background: #f5f5f5; color: var(--sarea-fav-color-text-muted); }

.sarea-fav-2026-notice__link {
	display         : inline-block;
	margin-top      : 8px;
	color           : var(--sarea-fav-color-primary);
	text-decoration : none;
	font-weight     : 600;
}

/* ════════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-admin__title {
	display     : flex;
	align-items : center;
	gap         : 8px;
	font-size   : 22px;
}

.sarea-fav-2026-admin__subtitle {
	color     : var(--sarea-fav-color-text-muted);
	font-size : 13px;
}

.sarea-fav-2026-admin__section {
	margin-top    : 24px;
	background    : var(--sarea-fav-color-bg);
	border        : 1px solid var(--sarea-fav-color-border);
	border-radius : var(--sarea-fav-radius-card);
	padding       : 20px 24px;
}

.sarea-fav-2026-admin__table {
	margin-top : 12px;
}

.sarea-fav-2026-admin__badge {
	display         : inline-block;
	background      : var(--sarea-fav-color-primary);
	color           : #fff;
	border-radius   : 20px;
	padding         : 2px 10px;
	font-size       : 12px;
	font-weight     : 700;
}

.sarea-fav-2026-admin__product-id {
	font-size : 11px;
	color     : var(--sarea-fav-color-text-muted);
	margin-top: 2px;
}

.sarea-fav-2026-admin__empty {
	display         : flex;
	align-items     : center;
	gap             : 8px;
	color           : var(--sarea-fav-color-text-muted);
	padding         : 16px 0;
}

.column-rank    { width: 50px; }
.column-count   { width: 140px; }
.column-actions { width: 120px; }

/* ════════════════════════════════════════════════════════════════
   PAGINATION — Shortcode Frontend
   ════════════════════════════════════════════════════════════════ */
.sarea-fav-2026-pagination {
    margin    : 32px 0 8px;
    width     : 100%;
}

.sarea-fav-2026-pagination__list {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    list-style      : none;
    margin          : 0;
    padding         : 0;
}

.sarea-fav-2026-pagination__btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 40px;
    height          : 40px;
    padding         : 0 12px;
    border          : 1.5px solid var(--sarea-fav-color-border);
    border-radius   : 10px;
    background      : var(--sarea-fav-color-bg);
    color           : var(--sarea-fav-color-text);
    font-size       : 14px;
    font-weight     : 500;
    text-decoration : none;
    transition      : background      var(--sarea-fav-transition),
                      border-color    var(--sarea-fav-transition),
                      color           var(--sarea-fav-transition),
                      transform       var(--sarea-fav-transition);
    cursor          : pointer;
}

.sarea-fav-2026-pagination__btn:hover {
    border-color : var(--sarea-fav-color-primary);
    color        : var(--sarea-fav-color-primary);
    transform    : translateY(-1px);
}

.sarea-fav-2026-pagination__btn.is-active {
    background   : var(--sarea-fav-color-primary);
    border-color : var(--sarea-fav-color-primary);
    color        : #fff;
    font-weight  : 700;
    cursor       : default;
    pointer-events: none;
}

.sarea-fav-2026-pagination__btn svg {
    fill: currentColor;
}

.sarea-fav-2026-pagination__ellipsis {
    display     : flex;
    align-items : center;
    color       : var(--sarea-fav-color-text-muted);
    font-size   : 14px;
    padding     : 0 4px;
    user-select : none;
}

.sarea-fav-2026-pagination__info {
    width      : 100%;
    text-align : center;
    font-size  : 12px;
    color      : var(--sarea-fav-color-text-muted);
    margin-top : 8px;
}

@media (max-width: 480px) {
    .sarea-fav-2026-pagination__btn {
        min-width : 36px;
        height    : 36px;
        font-size : 13px;
    }
}