/**
 * unlock-frontend.css
 * Version: 2.1.1
 * Part:    5 — Frontend Renderer
 * * Changelog 2.1.1:
 *   - .unlock-archive-lock-icon--open: สีดำสำหรับ unlock icon บน archive
 *   - .unlock-lightbox__lock-icon: lock/unlock icon ใน lightbox bar สีดำ

 * Changelog 2.1.0:
 *   - Lightbox close button: outline:none (focus ring แสดงเป็นวงกลมตอน auto-focus)
 *   - Lightbox overlay/inner: เปลี่ยนจาก solid black → backdrop-filter blur + animation in
 *   - .unlock-lightbox__lock-icon: lock/unlock icon ใน lightbox bar
 *   - .unlock-card__name-row: title ซ้าย + share button ขวา ใต้ thumb
 *   - .unlock-archive-lock-icon--open: สีเขียวสำหรับ unlock icon บน archive
 *
 * Changelog 2.0.0:
 *   - revert: ลบ ::before pseudo-elements ออก กลับใช้ <i> tag + font-size
 *   - .unlock-archive-lock-icon/.unlock-gallery-lock-icon: คืน font-size
 *   - ลบ Elementor icon show/hide logic (woocommerce .fa-solid.fa-lock)
 *     ใช้ unlock-is-locked/unlock-user-unlocked class แทน
 *   - เพิ่ม .unlock-archive-lock-icon สำหรับ archive/shop page
 *     style เดียวกับ .unlock-gallery-lock-icon แต่ขนาดเล็กกว่า
 *   - เพิ่ม Swiper navigation arrow styles (.swiper-button-prev/next)
 *     ซ่อนบน mobile (<768px)
 *   - lock icon position: right → left (มุมซ้ายล่าง)
 *   - .unlock-gallery-lock-icon position: right → left
 *
 * Changelog 1.7.0:
 *   - Card layout: title ย้ายมาอยู่ใต้รูป (ไม่ overlay)
 *     .unlock-card__name เป็น element ปกติใต้ .unlock-card
 *   - ลบ .unlock-locked blur effect ทั้งหมด
 *   - .unlock-card__lock-icon: ย้ายจากล่างซ้าย → ล่างขวา
 *   - เพิ่ม styles สำหรับ single product:
 *     .unlock-gallery-lock-icon, .unlock-locked-btn, .unlock-condition-section
 *
 * Changelog 1.6.0:
 *   - .unlock-card__condition: เพิ่ม style ใต้ card สำหรับ condition text
 *   - [data-section="unlocks"] .swiper-slide: ยกเลิก aspect-ratio
 *     ให้ slide สูงกว่า card ได้เพื่อรองรับ condition text ใต้รูป
 *   - [data-section="unlocks"] .unlock-card: กำหนด aspect-ratio: 1/1 แทน
 *   - .unlock-card__lock-icon--locked / --unlocked: icon states
 *
 * Changelog 1.5.0:
 *   - .unlock-locked ย้ายจาก .unlock-card → .unlock-card__thumb
 *     opacity + blur apply เฉพาะรูปเท่านั้น
 *     lock icon ไม่ได้รับผลกระทบ — แสดงคมชัดเสมอ
 *
 * Changelog 1.4.0:
 *   - .unlock-card: เพิ่ม position: relative (explicit) สำหรับ absolute children
 *   - .unlock-card__thumb: เปลี่ยนเป็น position: absolute inset: 0
 *     ให้รูปเต็ม card จริง ไม่ถูก name แย่งพื้นที่ใน flex
 *   - .unlock-card__name: เปลี่ยนเป็น position: absolute bottom: 0
 *     overlay บนรูปด้านล่าง พร้อม semi-transparent background
 *   - .unlock-card__lock-icon bottom คำนวณถูกต้องแล้ว
 *     เพราะ name เป็น overlay ไม่ดันกุญแจออกนอกรูปอีก
 *
 * Changelog 1.3.0:
 *   - .unlock-locked: opacity 0.3 → 0.75, blur 2px → 0.8px
 *   - .unlock-card__lock-icon: ย้ายจากมุมบนขวา → มุมล่างซ้าย
 *
 * Changelog 1.2.0:
 *   - .unlock-swiper-wrap overflow: visible + .swiper overflow: hidden
 *   - Swiper navigation arrow styles, hidden on mobile
 *
 * Changelog 1.1.0:
 *   - .empty-state__message, .empty-state__link, .unlock-empty__message
 *
 * @package Unlock_System
 */

/* ── Hide WooCommerce Downloads tab ─────────────────────────────────────────── */
.woocommerce-MyAccount-navigation-link--downloads {
    display: none !important;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
.my-collection-wrapper {
    padding: 40px;
}

/* ── Section headings ────────────────────────────────────────────────────────── */
#collection-section,
#unlock-section {
    margin-bottom: 48px;
}

#collection-section h3,
#unlock-section h3 {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
}

/* ── Swiper wrapper ──────────────────────────────────────────────────────────── */
.unlock-swiper-wrap {
    width: 100%;
    overflow: visible;
    position: relative;
}

.unlock-swiper-wrap .swiper {
    overflow: hidden;
}

/* ── Swiper navigation arrows (desktop + tablet only) ───────────────────────── */
.unlock-swiper-wrap .swiper-button-prev,
.unlock-swiper-wrap .swiper-button-next {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    color: #333;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
    transition: background 0.2s, box-shadow 0.2s;
    top: 40%;
}

.unlock-swiper-wrap .swiper-button-prev:hover,
.unlock-swiper-wrap .swiper-button-next:hover {
    background: #f5f5f5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.unlock-swiper-wrap .swiper-button-prev::after,
.unlock-swiper-wrap .swiper-button-next::after {
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .unlock-swiper-wrap .swiper-button-prev,
    .unlock-swiper-wrap .swiper-button-next {
        display: none !important;
    }
}

/* ── Swiper slide — flex column สำหรับทุก section ───────────────────────────── */
.unlock-swiper-wrap .swiper-slide {
    display: flex;
    flex-direction: column;
}

/* Condition text ใต้ card */
.unlock-card__condition {
    padding: 4px 4px 0;
    font-size: 10px;
    line-height: 1.4;
    color: #999;
    text-align: left;
    font-style: italic;
}

/* ── Locked state — no blur (removed) ───────────────────────────────────────── */
/* blur effect ถูกเอาออกแล้ว รูปแสดงชัดเสมอ icon บอก state แทน */

/* ── Product card ────────────────────────────────────────────────────────────── */
.unlock-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.unlock-card:hover {
    transform: scale(1.02);
}

/* Thumbnail เต็ม card */
.unlock-card__thumb {
    position: absolute;
    inset: 0;
    background: #f3f3f3;
}

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

/* Title + Share row ใต้รูป — wrapper controls top spacing from image */
.unlock-card__name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
}

/* Title ใต้รูป — ไม่ overlay */
.unlock-card__name {
    padding: 0 4px 4px 0;
    font-size: 11px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Fragment Mono', monospace;
    color: #333;
}

/* Title เป็น link สำหรับ unlocked items */
.unlock-card__name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.unlock-card__name-link:hover {
    border-bottom-color: currentColor;
}

.unlock-card__share {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 0;
    align-self: flex-start;
}
.unlock-card__share:hover {
    opacity: 1;
}

/* My Collections (inside swiper) — ปุ่ม Share อยู่กึ่งกลาง + opacity เต็ม */
.unlock-swiper-wrap .unlock-card__name-row .wwc-share-btn {
    align-self: center !important;
    opacity: 1 !important;
    margin-top: 0 !important;
}

/* Lock icon — มุมซ้ายล่าง overlay บนรูป */
.unlock-card__lock-icon {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.unlock-card__lock-icon--open {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Archive: แสดง/ซ่อน Elementor lock icon ตาม state ──────────────────────── */
/* .unlock-is-locked: JS inject → โชว์ icon สำหรับ locked products              */
/* .unlock-user-unlocked: JS inject → ซ่อน icon สำหรับ unlocked products        */
.unlock-is-locked .fa-solid.fa-lock {
    display: inline-block;
}

.unlock-user-unlocked .fa-lock,
.unlock-user-unlocked .fa-solid.fa-lock {
    display: none !important;
}

/* ── Archive / Shop — injected lock icon ────────────────────────────────────── */
.unlock-archive-lock-icon {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.unlock-archive-lock-icon--open {
    background: #000 !important;
}

/* ── Archive / Loop — "Read more" → magnifying glass icon (locked products) ──── */
.unlock-is-locked .button.product_type_simple,
.unlock-is-locked .button.product_type_variable {
    font-size: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.unlock-is-locked .button.product_type_simple:hover,
.unlock-is-locked .button.product_type_variable:hover {
    background: transparent !important;
    color: #000 !important;
    opacity: 1;
}

.unlock-is-locked .button.product_type_simple::before,
.unlock-is-locked .button.product_type_variable::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    display: block;
    color: #000;
}

/* ── Single product — lock overlay on gallery ────────────────────────────────── */
.unlock-gallery-lock-icon {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

/* ── Single product — Unlock to Access button ────────────────────────────────── */
.unlock-product-cta {
    margin: 16px 0;
}

.unlock-locked-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
    font-family: 'Fragment Mono', monospace;
    font-weight: 400;
}

.unlock-locked-btn::before {
    content: "\f023";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    align-self: center;
}

/* ── Single product — Condition section ─────────────────────────────────────── */
.unlock-condition-section {
    margin: 8px 0 16px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--sections-border-color, #d5d8dc);
    border-radius: 4px;
}

.unlock-condition-label {
    margin: 0;
    font-size: 12px;
    color: #666;
    font-style: normal;
}

/* ── Empty state — MY COLLECTION ─────────────────────────────────────────────── */
.empty-state {
    margin-top: 10px;
}

.empty-state__message {
    font-family: 'Fragment Mono', monospace;
    font-size: 13px;
    font-style: normal;
    color: #999;
    margin: 0 0 16px;
    line-height: 1.5;
    margin-bottom:20px !important;
}

.empty-state__link {
    display: inline-block;
    font-family: 'Fragment Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    color: #fff !important;
    background: #000 !important;
    border: 1px solid #000;
    border-radius: 3px;
    padding: 10px 22px;
    transition: color 0.18s, background 0.18s;
    text-decoration:none !important;
}

.empty-state__link:hover {
    color: #000 !important;
    background: #fff !important;
}

/* ── Empty state — UNLOCKS ───────────────────────────────────────────────────── */
.unlock-empty {
    margin-top: 10px;
}

.unlock-empty__message {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* ── Swiper pagination ───────────────────────────────────────────────────────── */
.unlock-swiper-wrap .swiper-pagination {
    position: relative;
    margin-top: 12px;
}

/* ── Lightbox overlay ────────────────────────────────────────────────────────── */
.unlock-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
    -webkit-transition: opacity 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.unlock-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.unlock-lightbox-inner {
    position: relative;
    max-width: min(90vw, 600px);
    width: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    /* animation in: scale up + slide up */
    transform: scale(0.94) translateY(12px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
}

.unlock-lightbox.is-open .unlock-lightbox-inner {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition-delay: 0.05s;
}

.unlock-lightbox-inner img {
    width: 100%;
    height: auto;
    display: block;
}

.unlock-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.unlock-lightbox__lock-icon {
    flex-shrink: 0;
    font-size: 13px;
    color: #666;
    line-height: 1;
}
.unlock-lightbox__lock-icon .fa-lock-open {
    color: #000 !important;
}

.unlock-lightbox__share:hover {
    opacity: 1 !important;
}

.unlock-lightbox__caption {
    font-size: 13px;
    color: #111;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unlock-lightbox__cta {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid #111;
    padding-bottom: 1px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.unlock-lightbox__cta:hover {
    opacity: 0.6;
}

.unlock-lightbox__counter {
    display: none !important;
}

.unlock-lightbox__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent !important;
    color: rgba(0, 0, 0, 0.55)  !important;
    border: 0px !important;
    outline: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.unlock-lightbox__prev,
.unlock-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 0;
    box-shadow: none;
    font-size: 0; /* ซ่อน ← → text */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0.75;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.unlock-lightbox__prev:hover,
.unlock-lightbox__next:hover,
.unlock-lightbox__prev:active,
.unlock-lightbox__next:active {
    background: transparent;
    opacity: 1;
}

/* Chevron SVG icons — white สำหรับ dark backdrop */
.unlock-lightbox__prev::before,
.unlock-lightbox__next::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.unlock-lightbox__prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5 8.25 12l7.5-7.5'/%3E%3C/svg%3E");
}

.unlock-lightbox__next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
}

.unlock-lightbox__prev { left: -50px; }
.unlock-lightbox__next { right: -50px; }

@media (max-width: 767px) {
    .unlock-lightbox__prev { left: 2px; }
    .unlock-lightbox__next { right: 2px; }
}

/* ── Legacy collection-grid ──────────────────────────────────────────────────── */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}