/* ================================================================
   ویجت‌های مشترک فروشگاه خَط‌وخال: کارت هدیه، کد تخفیف، بلیط رسید،
   و نشان قیمت روی کارت محصول.
   این فایل در هر صفحه‌ای که این عناصر را نمایش می‌دهد لود می‌شود تا
   ظاهر همه‌جا یکسان باشد.
   ================================================================ */

/* ---------- ۱) کارت هدیه (الهام از کارت‌های هدیه فروشگاهی) ---------- */
.hk-giftcard {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 28px;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 100% 0%, #2a2a2a 0%, #0a0a0a 60%);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    color: #fff;
    text-align: right;
    direction: rtl;
}
.hk-giftcard::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(241, 191, 10, 0.16) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.5;
    pointer-events: none;
}
.hk-giftcard .hk-gc-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #F1BF0A;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}
.hk-giftcard .hk-gc-title {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 2px;
}
.hk-giftcard .hk-gc-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 18px;
    line-height: 1.8;
}
.hk-giftcard .hk-gc-amount {
    position: absolute;
    left: 20px;
    top: 14px;
    font-size: 96px;
    font-weight: 900;
    color: rgba(241, 191, 10, 0.14);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.hk-giftcard .hk-gc-code {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px dashed rgba(241, 191, 10, 0.55);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: monospace;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #F1BF0A;
    direction: ltr;
    cursor: pointer;
    transition: 0.2s;
}
.hk-giftcard .hk-gc-code:hover { background: rgba(241, 191, 10, 0.1); }
.hk-giftcard .hk-gc-copied {
    display: none;
    font-size: 11.5px;
    color: #4ade80;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

/* ---------- ۲) بلیط کد تخفیف (کوپن با بریدگی گرد دو طرف) ---------- */
.hk-coupon {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    direction: rtl;
}
.hk-coupon::before,
.hk-coupon::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background: var(--hk-coupon-bg, #f4f1ff);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.hk-coupon::before { right: -13px; }
.hk-coupon::after { left: -13px; }
.hk-coupon .hk-coupon-badge {
    flex: 0 0 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: linear-gradient(160deg, var(--hk-coupon-accent, #8b5cf6), var(--hk-coupon-accent-dark, #6d28d9));
    color: #fff;
    padding: 14px 8px;
}
.hk-coupon .hk-coupon-badge .ic { font-size: 26px; }
.hk-coupon .hk-coupon-badge .pct { font-size: 12px; font-weight: 800; }
.hk-coupon .hk-coupon-body {
    flex: 1;
    padding: 16px 18px;
    position: relative;
}
.hk-coupon .hk-coupon-body::before {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    border-right: 2px dotted #e5e0f5;
}
.hk-coupon .hk-coupon-title {
    font-size: 14px;
    font-weight: 800;
    color: #3f2e5c;
    margin-bottom: 2px;
}
.hk-coupon .hk-coupon-desc {
    font-size: 12px;
    color: #8a84a0;
    margin-bottom: 10px;
}
.hk-coupon .hk-coupon-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hk-coupon .hk-coupon-code {
    flex: 1;
    font-family: monospace;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #3f2e5c;
    background: #f4f1ff;
    border-radius: 8px;
    padding: 7px 12px;
    direction: ltr;
    text-align: center;
}
.hk-coupon .hk-coupon-copy {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    background: var(--hk-coupon-accent, #8b5cf6);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}
.hk-coupon .hk-coupon-copy:hover { background: var(--hk-coupon-accent-dark, #6d28d9); }
.hk-coupon .hk-coupon-copied {
    display: none;
    font-size: 11px;
    color: #16A34A;
    margin-top: 6px;
}
/* رنگ‌بندی کارت هدیه وقتی داخل بلیط کوپن نمایش داده می‌شود (مثلاً در تسویه‌حساب) */
.hk-coupon.hk-coupon--gift {
    --hk-coupon-accent: #1E40AF;
    --hk-coupon-accent-dark: #1e3a8a;
    --hk-coupon-bg: #eef2ff;
}

/* ---------- ۳) نشان قیمت روی گوشه‌ی تصویر محصول ---------- */
.hk-price-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #6D3FE0 0%, #F41860 100%);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    pointer-events: none;
}
.hk-price-chip .hk-price-now { color: #fff; }
.hk-price-chip .hk-price-old {
    color: rgba(255,255,255,0.7);
    text-decoration: line-through;
    font-weight: 600;
    font-size: 11.5px;
}

@media (max-width: 480px) {
    .hk-giftcard { padding: 22px 18px; }
    .hk-giftcard .hk-gc-amount { font-size: 64px; }
    .hk-coupon .hk-coupon-badge { flex-basis: 64px; }
}

/* ---------- ۴) رسید بلیطی صفحه‌ی تسویه/بازگشت از درگاه ---------- */
.hk-ticket-wrap {
    position: relative;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
}
.hk-ticket-slot {
    height: 100px;
    background: #232326;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 1px 0 #000, 0 5px 15px 0 rgba(0, 0, 0, 0.4);
    position: relative;
}
.hk-ticket-slot::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    height: 22px;
    background: #000;
    border-radius: 999px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.hk-ticket-body {
    position: relative;
    margin-top: -46px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 34px 26px 26px;
    text-align: center;
}
.hk-ticket-body::before,
.hk-ticket-body::after {
    content: '';
    position: absolute;
    top: 46px;
    width: 30px;
    height: 30px;
    background: #f0f0f1;
    border-radius: 50%;
}
.hk-ticket-body::before { right: -15px; }
.hk-ticket-body::after { left: -15px; }
.hk-ticket-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: -60px auto 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    border: 4px solid #fff;
}
.hk-ticket-status-icon.success { background: #22C55E; color: #fff; }
.hk-ticket-status-icon.fail { background: #EF4444; color: #fff; }
.hk-ticket-title { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.hk-ticket-sub { font-size: 13px; color: #81858b; margin-bottom: 18px; line-height: 1.8; }
.hk-ticket-divider {
    position: relative;
    height: 1px;
    margin: 16px 0;
    background-image: repeating-linear-gradient(90deg, #e2e2e5, #e2e2e5 8px, transparent 8px, transparent 16px);
}

/* ==============================================================
   ۵) کارت محصول — طرح اصلاح‌شده مطابق ماکاپ: کارت شکل نامنظم (نه
   مستطیل ساده) دارد. یک شکل بنفشِ گرد (نه چندضلعی تیز) از بالای
   کارت بیرون می‌زند («خم» بالایی)، و یک دنباله‌ی گرد و کوچک هم از
   پایین-چپ کارت بیرون می‌زند («خم» پایینی) — دقیقاً مطابق تصویر
   مرجع. تصویر محصول داخل یک قاب سفیدِ گردشده (mounted photo) قرار
   می‌گیرد تا اطراف تصویر گرد باشد. مبلغ به‌صورت متن سفید روی همان
   بخش بنفش، بالای تصویر محصول قرار دارد. این ساختار flow-based است
   (نه ارتفاع ثابت) تا با طول متغیر عنوان/توضیح در همه‌ی کارت‌های
   شبکه هم‌تراز و بدون برخورد با کارت‌های مجاور کار کند. استفاده‌ی
   مشترک در صفحه‌ی اصلی و صفحه‌ی فروشگاه.
   ============================================================== */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 20px; /* فضای رزرو برای خمِ بالایی شکل بنفش */
    transition: var(--transition);
    cursor: pointer;
}
.product-card:hover {
    transform: translateY(-6px);
}

/* ناحیه‌ی بالایی: زمینه‌ی روشن با بافت + شکل بنفشِ گرد */
.pc-visual {
    position: relative;
    z-index: 0;
    min-height: 208px;
}
.pc-pattern-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 26px 26px 0 0;
    overflow: hidden;
    background: #F5F2FC;
}
.pc-pattern-bg::before {
    content: '';
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(45deg, rgba(124, 58, 237, 0.18) 1.5px, transparent 1.5px),
        linear-gradient(-45deg, rgba(124, 58, 237, 0.18) 1.5px, transparent 1.5px);
    background-size: 13px 13px;
}

/* شکلِ اصلی بنفش: مستطیل با گوشه‌های بسیار گرد (نه چندضلعی) که از
   بالای pc-visual بیرون می‌زند. برای جلوگیری از سرریز به کارتِ
   مجاور در چیدمان شبکه، هیچ rotate یا clip-path تیزی روی آن اعمال
   نمی‌شود — فقط border-radius نامتقارن (شعاعِ بزرگ در گوشه‌ی
   پایین-چپ) حس ارگانیک/خمیده به آن می‌دهد. */
.pc-purple-shape {
    position: absolute;
    top: -20px;
    right: -2px;
    width: 70%;
    height: 130%;
    z-index: 1;
    border-radius: 34px 34px 34px 92px;
    background: linear-gradient(150deg, #9B6BFB 0%, #7C3AED 48%, #5B21B6 100%);
    box-shadow: 0 16px 30px rgba(76, 29, 149, 0.28);
}

/* دنباله‌ی کوچکِ بنفش که از پایین-چپِ کل کارت بیرون می‌زند. به
   product-card متصل است (نه pc-visual) و با bottom:-Npx نسبت به کف
   کارت موضع‌گیری می‌شود، بنابراین صرف‌نظر از تغییر ارتفاع pc-panel
   (به‌خاطر طول متغیر عنوان/توضیح) همیشه در جای درست باقی می‌ماند. */
.pc-purple-tail {
    position: absolute;
    left: 3%;
    bottom: -14px;
    width: 28%;
    height: 56px;
    z-index: 1;
    border-radius: 0 0 0 56px;
    background: linear-gradient(150deg, #9B6BFB 0%, #7C3AED 60%, #5B21B6 100%);
    pointer-events: none;
}

.pc-discount-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: #fff;
    color: var(--accent, #F41860);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* مبلغ نهایی: یک برچسبِ (chip) مستقل با پس‌زمینه‌ی بنفشِ خودش —
   نه صرفاً متنِ سفید روی شکلِ بنفشِ زیرین. این باعث می‌شود صرف‌نظر
   از طول عدد یا عرض شکلِ بنفش، کل مبلغ همیشه کاملاً روی زمینه‌ی
   بنفش دیده شود و هرگز نیمی از آن روی زمینه‌ی روشن نیفتد. عرض آن
   به‌اندازه‌ی محتوا (شرینک‌شده) است، نه کشیده تا لبه‌ی دیگرِ کارت. */
.pc-price-badge-wrap {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    max-width: calc(100% - 60px);
}
/* قیمت قبل از تخفیف: حالا بالای همان جعبه‌ی بنفشِ قیمت، با خط‌خوردگی -
   قبلاً پایین عنوان محصول در باکس سفید نمایش داده می‌شد که گمراه‌کننده بود
   (انگار قیمتِ فعلی همانجاست)؛ حالا مستقیماً کنار قیمتِ نهایی و بالای آن دیده می‌شود. */
.pc-price-old-badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(24, 18, 43, 0.55);
    text-decoration: line-through;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.pc-price-badge {
    position: relative;
    z-index: 6;
    display: inline-flex;
    max-width: 100%;
    background: linear-gradient(150deg, #9B6BFB 0%, #7C3AED 55%, #5B21B6 100%);
    border-radius: 999px;
    padding: 7px 14px;
    box-shadow: 0 8px 18px rgba(76, 29, 149, 0.35);
}
.pc-price-value {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card .btn-wish {
    position: absolute;
    bottom: 12px;
    right: 14px;
    z-index: 6;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(4px);
    color: #52525B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
    box-shadow: 0 6px 14px rgba(35,20,80,0.18);
}
.product-card .btn-wish:hover { color: #EF4444; }
.product-card .btn-wish.active { background: #EF4444; color: #fff; }
/* آیکون قلب داخل دکمه: قبلاً خیلی کوچک (۱۴px) و کم‌رنگ (opacity .35) بود،
   طوری که در نگاه اول فقط یک دایره‌ی خالی و نامشخص به‌نظر می‌رسید. حالا در
   حالت "لایک‌نشده" با کانتراست کافی (opacity بالاتر) دیده می‌شود و در حالت
   "لایک‌شده" با رنگ صورتی/قرمز پر می‌شود؛ در هر دو حالت فرم قلب کاملاً واضح است. */
.product-card .btn-wish .hk-icon.hk-i-heart.is-inactive { opacity: .55; filter: none; }
.product-card .btn-wish .hk-icon.hk-i-heart.is-active { color: #fff; opacity: 1; }

/* قابِ سفیدِ گردشده‌ی تصویر («mounted photo») — همان چیزی که باعث
   می‌شود دورِ تصویر محصول گرد باشد. عرض آن کوچک‌تر از کارت و
   وسط‌چین است تا بافت/بنفشِ اطرافش دیده شود، درست مثل تصویر مرجع. */
.product-card .product-image {
    position: relative;
    z-index: 4;
    width: 78%;
    aspect-ratio: 1;
    margin: 46px auto 0;
    border-radius: 20px;
    background: #fff;
    padding: 5px;
    box-shadow: 0 16px 26px rgba(20, 10, 50, 0.3);
    cursor: pointer;
}
.product-card .product-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
    transition: var(--transition);
}
.product-card:hover .product-image img {
    transform: scale(1.04);
}

/* ناحیه‌ی پایینی سفید: عنوان، توضیح کوتاه و اکشن‌ها */
.pc-panel {
    position: relative;
    z-index: 3;
    background: var(--surface, #fff);
    border-radius: 20px 20px 26px 26px;
    margin-top: -8px;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    box-shadow: 0 10px 22px rgba(35, 20, 80, 0.1);
}
.pc-category {
    font-size: 11px;
    font-weight: 700;
    color: #7C3AED;
}
.pc-title {
    font-size: 15.5px;
    font-weight: 900;
    color: #18122B;
    line-height: 1.4;
}

.pc-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}
.product-card .btn-buy {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #211A38 0%, #0F0B1F 100%);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15,11,31,0.35);
    transition: var(--transition);
}
.product-card .btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15,11,31,0.42);
    filter: brightness(1.15);
}
.product-card .btn-buy.added { background: #22C55E; box-shadow: 0 6px 18px rgba(34,197,94,0.35); }
.btn-buy-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px;
    flex-shrink: 0;
}
.btn-buy-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .pc-title { font-size: 14px; }
    .btn-buy-label { font-size: 12px; }
    .pc-price-value { font-size: 12px; }
    .pc-price-badge { padding: 6px 12px; }
    .pc-price-badge-wrap { top: 12px; right: 12px; }
    .pc-price-old-badge { font-size: 10px; }
}