/* ========================================
   Brand Collaboration Modal
   ======================================== */

#brandModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#brandModal.active {
    display: flex;
}

/* Backdrop */
#brandModalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* Modal Box */
#brandModalContent {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 1.5rem;
    background: #ffffff;
    padding: 1.5rem;

    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(236, 72, 153, 0.25);
}

/* Dark Mode */
html.dark #brandModalContent {
    background: #18181b;
}

/* Header */
#brandModalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* Title */
#brandModalTitle {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #18181b;
}

html.dark #brandModalTitle {
    color: #ffffff;
}

/* Description */
#brandModalDescription {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #71717a;
}

html.dark #brandModalDescription {
    color: #a1a1aa;
}

/* Close Button */
#brandModalClose {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #71717a;
    font-size: 1.5rem;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#brandModalClose:hover {
    background: #f4f4f5;
    color: #18181b;
}

html.dark #brandModalClose:hover {
    background: #27272a;
    color: #ffffff;
}

/* Brand Grid */
#brandModalGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Brand Item */
.brand-modal-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    padding: 1.25rem;
    border-radius: 1rem;

    background: #fafafa;

    border: 1px solid transparent;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.brand-modal-item:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(250, 245, 255, 0.95),
            rgba(253, 242, 248, 0.95)
        );

    border-color: rgba(236, 72, 153, 0.25);

    box-shadow:
        0 10px 25px rgba(168, 85, 247, 0.12),
        0 6px 18px rgba(236, 72, 153, 0.10);
}

html.dark .brand-modal-item {
    background: #27272a;
}

/* Brand Image */
.brand-modal-item img {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

/* Tablet */
@media (min-width: 640px) {
    #brandModalGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Desktop */
@media (min-width: 768px) {
    #brandModalGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #brandModalContent {
        padding: 2rem;
    }
}

/* Mobile */
@media (max-width: 639px) {
    #brandModal {
        padding: 0.75rem;
    }

    #brandModalContent {
        max-height: 92vh;
        padding: 1.25rem;
    }

    #brandModalTitle {
        font-size: 1.25rem;
    }
}



/* ========================================
   Achievement Modal
   ======================================== */

#achievementModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#achievementModal.active {
    display: flex;
}

/* Backdrop */
#achievementModal > .project-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

/* Modal Box */
#achievementModal .project-modal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 1.5rem;
    background: #ffffff;
    padding: 1.5rem;

    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(236, 72, 153, 0.25);
}

/* Dark Mode */
html.dark #achievementModal .project-modal-container {
    background: #18181b;
}

/* Header */
.project-modal-header {
    margin-bottom: 1.5rem;
}

.project-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #18181b;
}

html.dark .project-modal-header h2 {
    color: #ffffff;
}

.project-modal-header p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #71717a;
}

html.dark .project-modal-header p {
    color: #a1a1aa;
}

/* Close Button */
#achievementModal .project-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    border: 0;
    border-radius: 9999px;

    background: transparent;
    color: #71717a;

    font-size: 1.5rem;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#achievementModal .project-modal-close:hover {
    background: #f4f4f5;
    color: #18181b;
}

html.dark #achievementModal .project-modal-close:hover {
    background: #27272a;
    color: #ffffff;
}

/* Achievement Grid */
.achievement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Achievement Card */
.achievement-card {
    overflow: hidden;
}

/* Image Button */
.achievement-image-button {
    display: block;
    width: 100%;
    padding: 0;

    border: 0;
    border-radius: 1rem;

    background: #fafafa;

    cursor: pointer;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.achievement-image-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(168, 85, 247, 0.14),
        0 8px 20px rgba(236, 72, 153, 0.12);
}

.achievement-image-button img {
    display: block;

    width: 100%;
    height: 260px;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.achievement-image-button:hover img {
    transform: scale(1.03);
}

/* Achievement Title */
.achievement-card h3 {
    margin-top: 0.75rem;

    font-size: 1rem;
    font-weight: 600;

    color: #18181b;
}

html.dark .achievement-card h3 {
    color: #ffffff;
}

.achievement-card p {
    margin-top: 0.15rem;

    font-size: 0.875rem;

    color: #71717a;
}

html.dark .achievement-card p {
    color: #a1a1aa;
}

/* ========================================
   Achievement Lightbox
   ======================================== */

#achievementLightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 1rem;
}

#achievementLightbox.active {
    display: flex;
}

#achievementLightbox > .project-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(10px);
}

/* Detail */
.achievement-detail {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    width: 100%;
    max-width: 1100px;
    max-height: 90vh;

    overflow-y: auto;

    padding: 2rem;

    border-radius: 1.5rem;

    background: #ffffff;

    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(236, 72, 153, 0.25);
}

html.dark .achievement-detail {
    background: #18181b;
}

/* Detail Image */
.achievement-detail-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-detail-image img {
    display: block;
    width: 100%;
    max-height: 70vh;

    object-fit: contain;
}

/* Detail Content */
.achievement-detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.achievement-detail-content h2 {
    margin: 0;

    font-size: 1.75rem;
    font-weight: 600;

    color: #18181b;
}

html.dark .achievement-detail-content h2 {
    color: #ffffff;
}

.achievement-detail-year {
    margin-top: 0.5rem;

    font-size: 1rem;
    font-weight: 500;

    color: #a855f7;
}

.achievement-detail-content > p:last-child {
    margin-top: 1rem;

    font-size: 1rem;
    line-height: 1.7;

    color: #52525b;
}

html.dark .achievement-detail-content > p:last-child {
    color: #d4d4d8;
}

/* Detail Close */
.achievement-detail .project-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    border: 0;
    border-radius: 9999px;

    background: rgba(244, 244, 245, 0.9);
    color: #52525b;

    font-size: 1.5rem;

    cursor: pointer;
}

.achievement-detail .project-modal-close:hover {
    background: #e4e4e7;
    color: #18181b;
}

html.dark .achievement-detail .project-modal-close {
    background: rgba(39, 39, 42, 0.9);
    color: #d4d4d8;
}

/* ========================================
   Achievement Responsive
   ======================================== */

@media (min-width: 640px) {
    .achievement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .achievement-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #achievementModal {
        padding: 0.75rem;
    }

    #achievementModal .project-modal-container {
        max-height: 92vh;
        padding: 1.25rem;
    }

    .achievement-detail {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .achievement-detail-image img {
        max-height: 50vh;
    }

    .achievement-detail-content h2 {
        font-size: 1.4rem;
    }
}

.achievement-description {
    display: none;
}

/* ========================================
   Product Recommendation Modal
   ======================================== */

#productModal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 1rem;
}

#productModal.active {
    display: flex;
}


/* ========================================
   Backdrop
   ======================================== */

#productModalBackdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(8px);
}


/* ========================================
   Modal Content
   ======================================== */

#productModalContent {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1200px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 1.5rem;

    border-radius: 1.5rem;

    background: #ffffff;

    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 25px rgba(236, 72, 153, 0.25);
}

html.dark #productModalContent {
    background: #18181b;
}


/* ========================================
   Header
   ======================================== */

#productModalHeader {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.5rem;
}


/* ========================================
   Title
   ======================================== */

#productModalTitle {
    margin: 0;

    font-size: 1.5rem;
    font-weight: 600;

    color: #18181b;
}

html.dark #productModalTitle {
    color: #ffffff;
}


/* ========================================
   Description
   ======================================== */

#productModalDescription {
    margin-top: 0.25rem;

    font-size: 0.875rem;

    color: #71717a;
}

html.dark #productModalDescription {
    color: #a1a1aa;
}


/* ========================================
   Search + Close
   ======================================== */

.product-modal-actions {
    display: flex;

    align-items: center;

    gap: 0.75rem;
}


/* ========================================
   Search
   ======================================== */

.product-search {
    position: relative;

    width: 20rem;
}

.product-search input {
    width: 100%;
    height: 2.5rem;

    padding: 0 0.9rem 0 2.5rem;

    border: 1px solid #e4e4e7;

    border-radius: 0.75rem;

    outline: none;

    background: #ffffff;

    color: #18181b;

    font-size: 0.875rem;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.product-search input:focus {
    border-color: rgba(168, 85, 247, 0.5);

    box-shadow:
        0 0 0 3px rgba(168, 85, 247, 0.1);
}

.product-search-icon {
    position: absolute;

    left: 0.85rem;
    top: 50%;

    transform: translateY(-50%);

    color: #71717a;

    pointer-events: none;
}

html.dark .product-search input {
    border-color: #3f3f46;

    background: #27272a;

    color: #ffffff;
}


/* ========================================
   Close Button
   ======================================== */

#productModalClose {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 2.5rem;
    height: 2.5rem;

    border: 0;

    border-radius: 9999px;

    background: transparent;

    color: #71717a;

    font-size: 1.5rem;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#productModalClose:hover {
    background: #f4f4f5;

    color: #18181b;
}

html.dark #productModalClose:hover {
    background: #27272a;

    color: #ffffff;
}


/* ========================================
   Product Grid
   ======================================== */

#productModalGrid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;
}


/* ========================================
   Product Card
   ======================================== */

.product-modal-item {
    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 1rem;

    background: #fafafa;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.product-modal-item:hover {
    transform: translateY(-4px);

    background:
        linear-gradient(
            135deg,
            rgba(250, 245, 255, 0.95),
            rgba(253, 242, 248, 0.95)
        );

    box-shadow:
        0 10px 25px rgba(168, 85, 247, 0.12),
        0 6px 18px rgba(236, 72, 153, 0.10);
}

html.dark .product-modal-item {
    background: #27272a;
}


/* ========================================
   Product Number
   ======================================== */

.product-modal-number {
    position: absolute;

    top: 0.75rem;
    right: 0.75rem;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 2rem;
    height: 2rem;

    padding: 0 0.5rem;

    border-radius: 9999px;

    background: rgba(24, 24, 27, 0.75);

    color: #ffffff;

    font-size: 0.75rem;
    font-weight: 600;

    opacity: 0;

    transform: translateY(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    pointer-events: none;
}

.product-modal-item:hover
.product-modal-number {
    opacity: 1;

    transform: translateY(0);
}


/* ========================================
   Product Image
   ======================================== */

.product-modal-image {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 180px;

    overflow: hidden;

    background: #ffffff;
}

html.dark .product-modal-image {
    background: #18181b;
}

.product-modal-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ========================================
   Empty Image
   ======================================== */

.product-modal-image-empty {
    background: #ffffff;
}

html.dark .product-modal-image-empty {
    background: #27272a;
}


/* ========================================
   Product Name
   ======================================== */

.product-modal-item h3 {
    margin: 0;

    padding: 0.85rem 0.9rem 1rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    font-size: 0.9rem;
    line-height: 1.4;

    font-weight: 600;

    color: #18181b;
}

html.dark .product-modal-item h3 {
    color: #ffffff;
}


/* ========================================
   Search Empty
   ======================================== */

.product-search-empty {
    grid-column: 1 / -1;

    margin: 2rem 0;

    text-align: center;

    font-size: 0.9rem;

    color: #71717a;
}

html.dark .product-search-empty {
    color: #a1a1aa;
}


/* ========================================
   Tablet
   ======================================== */

@media (min-width: 640px) {
    #productModalGrid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* ========================================
   Desktop
   ======================================== */

@media (min-width: 1024px) {
    #productModalGrid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

    #productModalContent {
        padding: 2rem;
    }
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 767px) {

    #productModal {
        padding: 0.75rem;
    }

    #productModalContent {
        max-height: 92vh;

        padding: 1.25rem;
    }

    #productModalHeader {
        flex-direction: column;

        gap: 1rem;
    }

    .product-modal-actions {
        width: 100%;
    }

    .product-search {
        flex: 1;

        width: auto;
    }

    #productModalTitle {
        font-size: 1.25rem;
    }

    .product-modal-image {
        height: 150px;
    }
}