/**
 * Discover / Project modal (#myModal)
 * Literal specs from _project_modal_markup.blade.php
 */

#myModal .modal-content,
#myModal .modal-body {
    background: #fafafa;
}

#myModal .modal-body {
    position: relative;
    overflow-x: hidden;
}

#myModal .p-relative {
    position: relative;
}

#myModal .p-absolute {
    position: absolute;
    inset: 0;
}

/* Main carousel — 1000px inner, slides 320×760 */
#myModal #dmCarouselInner {
    width: 1000px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#myModal #dmCarouselInner .carousel-item {
    justify-content: center;
    align-items: flex-start;
}

#myModal #dmCarouselInner .card,
#myModal #dmCarouselInner .card-img {
    background: transparent;
    border: 0;
}

#myModal #dmCarouselInner img,
#myModal #dmCarouselInner video {
    width: 320px;
    height: 760px;
    max-width: 100%;
    display: block;
}

/* Side rail — 70px column, always clickable (above details backdrop) */
#myModal .dm-side-rail {
    z-index: 115;
    width: 70px !important;
    max-width: 70px;
    flex: 0 0 70px;
    padding: 0;
    pointer-events: auto;
}

#myModal #recipeCarousel2 .carousel-control-prev,
#myModal #recipeCarousel2 .carousel-control-next {
    width: 70px;
    max-width: 70px;
    z-index: 2;
}

#myModal .dm-side-rail > a,
#myModal .dm-side-rail > button,
#myModal .dm-rail-follow-btn {
    display: block;
    width: 70px;
    min-height: 100px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

#myModal .dm-action-btn {
    position: relative;
    z-index: 2;
}

#myModal .dm-side-rail-btn svg,
#myModal .dm-rail-follow-btn svg {
    pointer-events: none;
    display: block;
}

#myModal .dm-side-rail-btn:hover,
#myModal .dm-rail-follow-btn:hover {
    opacity: 0.88;
}

#myModal .dm-side-rail-btn:active,
#myModal .dm-rail-follow-btn:active {
    transform: scale(0.96);
}

#myModal .dm-side-rail-btn:focus-visible,
#myModal .dm-rail-follow-btn:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
    border-radius: 10px;
}

#myModal .dm-side-rail-btn.is-active [id^="Rectangle"] {
    stroke: #dac8fa;
}

#myModal .dm-side-rail-btn.is-active text {
    fill: #7c3aed;
}

#myModal .dm-rail-follow-btn.is-following #Ellipse_8887 {
    fill: #5b21b6;
}

#myModal .dm-rail-follow-btn.is-hidden {
    display: none !important;
}

#myModal #dmRailAvatar {
    cursor: pointer;
}

#myModal .discover-save-btn.is-saved #Rectangle_12413 {
    stroke: #dac8fa;
}

#myModal .discover-save-btn.is-saved #Save {
    fill: #7c3aed;
}

#myModal .discover-save-btn.is-saved #bookmark-solid {
    fill: #7c3aed;
}

#myModal .dm-action-btn.is-just-used #Rectangle_12409,
#myModal .dm-action-btn.is-just-used #Rectangle_12413,
#myModal .dm-action-btn.is-just-used #dmSideLikeRect {
    stroke: #dac8fa;
}

#myModal .dm-action-btn.is-just-used #Share,
#myModal .dm-action-btn.is-just-used #Save,
#myModal .dm-action-btn.is-just-used #dmSideLikeLabel {
    fill: #7c3aed;
}

#myModal .dm-action-btn.is-just-used #Icon_ionic-ios-share-alt,
#myModal .dm-action-btn.is-just-used #bookmark-solid,
#myModal .dm-action-btn.is-just-used #dmSideLikeHeart {
    fill: #7c3aed;
}

#myModal .dm-section-highlight {
    animation: dmSectionPulse 1.2s ease;
}

@keyframes dmSectionPulse {
    0%, 100% { box-shadow: none; }
    25%, 75% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }
}

#myModal .dm-side-rail-btn.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Multi-slide carousels inside modal */
#myModal .carousel-inner .carousel-item.active,
#myModal .carousel-inner .carousel-item-next,
#myModal .carousel-inner .carousel-item-prev {
    display: flex;
}

@media (min-width: 768px) {
    #myModal .carousel-inner .carousel-item-end.active,
    #myModal .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    #myModal .carousel-inner .carousel-item-start.active,
    #myModal .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

#myModal .carousel-inner .carousel-item-end,
#myModal .carousel-inner .carousel-item-start {
    transform: translateX(0);
}

@media (max-width: 767.98px) {
    #myModal #meny2 .carousel-inner .carousel-item > div {
        display: none;
    }

    #myModal #meny2 .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

/* Related projects — 150px track, 220×150 images */
#myModal #recipeCarousel {
    height: 150px;
}

#myModal #dmRelatedCarouselInner .carousel-item {
    justify-content: center;
}

#myModal #dmRelatedCarouselInner img {
    width: 220px;
    height: 150px;
    object-fit: cover;
}

/* Avatars */
#myModal #dmSidebarAvatar,
#myModal #dmHeaderAvatar,
#myModal #dmPurpleAvatar,
#myModal #dmRailAvatar,
#myModal #dmCommentUserAvatar,
#myModal #dmCommentsList img {
    object-fit: cover;
}

/* Tools / creative fields — 43px pills */
#myModal .discover-field-pill {
    height: 43px;
    background-size: cover;
    background-position: center;
}

#myModal .discover-field-pill .tols {
    min-height: 43px;
}

/* Comments */
#myModal #dmCommentsList h2 {
    font-size: inherit;
    margin-bottom: 0;
}

#myModal #dmCommentsList .dropdown-toggle::after {
    display: none;
}

#myModal #dmColorPalette .rounded-circle {
    flex-shrink: 0;
}

/* Like states */
#myModal .discover-like-btn.is-liked #dmSideLikeRect {
    stroke: #dac8fa;
}

#myModal .discover-like-btn.is-liked #dmSideLikeLabel {
    fill: #7c3aed;
}

#myModal .discover-like-btn.is-liked #dmSideLikeHeart {
    fill: #7c3aed;
}

#myModal #dmBlackLikeBtn {
    line-height: 0;
    cursor: pointer;
}

#myModal #dmBlackLikeBtn.is-liked #dmBlackHeartPath {
    fill: #7c3aed;
}

/* Details popup — centered modal over project viewer */
#myModal .dm-details-backdrop {
    position: fixed;
    inset: 0;
    z-index: 105;
    background: rgba(0, 0, 0, 0.45);
}

#myModal .dm-details-popup {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#myModal .dm-details-popup.is-visible {
    opacity: 1;
    pointer-events: auto;
}

#myModal .dm-details-popup-card {
    position: relative;
    width: min(680px, 100%);
    padding: 32px 36px 36px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

#myModal .dm-details-popup-close {
    position: absolute;
    top: 22px;
    right: 22px;
    opacity: 0.55;
}

#myModal .dm-details-title {
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 6px;
    padding-right: 28px;
}

#myModal .dm-details-published {
    font-size: 14px;
    font-weight: 400;
    color: #9c9c9c;
    margin-bottom: 32px !important;
}

#myModal .dm-details-stats {
    margin-bottom: 32px;
}

#myModal .dm-details-stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #212121;
    margin-bottom: 10px;
}

#myModal .dm-details-stat-value {
    font-size: 32px;
    font-weight: 600;
    color: #212121;
    line-height: 1;
    letter-spacing: -0.02em;
}

#myModal .dm-details-tags-heading {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 16px;
}

#myModal .dm-details-tags {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 10px;
}

#myModal .dm-details-tags .dm-details-tag {
    display: block;
    margin: 0;
    padding: 9px 10px;
    border: 1px solid #dedede;
    border-radius: 999px;
    background: #fff;
    color: #212121;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#myModal .dm-details-tags-empty {
    font-size: 14px;
    color: #9c9c9c;
}

#myModal #dmSideDetailsBtn.is-active #Rectangle_12411 {
    stroke: #dac8fa;
}

#myModal #dmSideDetailsBtn.is-active #Details {
    fill: #7c3aed;
}

#myModal #dmSideDetailsBtn.is-active #Icon_ionic-md-eye {
    fill: #7c3aed;
}

@media (max-width: 991.98px) {
    #myModal #dmCarouselInner img,
    #myModal #dmCarouselInner video {
        width: 100%;
        height: auto;
        max-height: 520px;
    }

    #myModal .dm-side-rail {
        top: 100px !important;
        transform: none !important;
    }
}