/* Source: guests/attraction_show.blade.php */
.detail-hero-location {
        color: var(--gold-2);
        font-size: 14px
}

.detail-hero-actions {
        position: absolute;
        right: 20px;
        bottom: 58px;
        display: flex;
        gap: 9px
}

.detail-hero-action {
        padding: 11px 15px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 10px;
        background: rgba(7, 28, 37, .35);
        backdrop-filter: blur(8px);
        color: #fff
}

.detail-hero-action:hover,
.detail-hero-action.active {
        background: var(--terracotta);
        border-color: var(--terracotta)
}

.detail-tab-section {
        position: sticky;
        top: 72px;
        z-index: 50;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 253, 250, .96);
        backdrop-filter: blur(10px)
}

.detail-tabs {
        display: flex;
        gap: 32px;
        overflow-x: auto
}

.detail-tabs button {
        flex: 0 0 auto;
        padding: 18px 2px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--muted);
        font-weight: 600
}

.detail-tabs button.active,
.detail-tabs button:hover {
        border-color: var(--terracotta);
        color: var(--terracotta)
}

.detail-main-section {
        padding: 62px 0 90px;
        background: #fffdfa
}

.detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 34px
}

.detail-main-column {
        min-width: 0;
        display: grid;
        gap: 28px
}

.detail-content-card {
        padding: 34px;
        border: 1px solid #eee7dd;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 9px 28px rgba(25, 40, 30, .05)
}

.detail-section-title>span,
.detail-nearby-heading span {
        color: var(--gold);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em
}

.detail-section-title h2,
.detail-nearby-heading h2 {
        margin: 5px 0 25px;
        font-size: clamp(24px, 2vw, 30px);
        line-height: 1.3
}

.detail-description {
        color: #4f5751;
        line-height: 1.9
}

.detail-description img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 12px
}

.detail-gallery-main {
        position: relative;
        height: 540px;
        overflow: hidden;
        border-radius: 22px;
        background: var(--navy)
}

.detail-gallery-lightbox {
        display: block;
        width: 100%;
        height: 100%;
        cursor: zoom-in
}

.detail-gallery-lightbox img {
        width: 100%;
        height: 100%;
        object-fit: cover
}

.detail-gallery-lightbox>span {
        position: absolute;
        left: 18px;
        bottom: 17px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(7, 27, 35, .7);
        color: #fff;
        font-size: 11px;
        opacity: 0;
        transform: translateY(5px);
        transition: .2s
}

.detail-gallery-lightbox:hover>span,
.detail-gallery-lightbox:focus-visible>span {
        opacity: 1;
        transform: none
}

.detail-gallery-nav {
        z-index: 2;
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .9);
        color: var(--navy);
        transform: translateY(-50%)
}

.detail-gallery-nav.prev {
        left: 18px
}

.detail-gallery-nav.next {
        right: 18px
}

.detail-gallery-counter {
        z-index: 2;
        position: absolute;
        right: 18px;
        bottom: 17px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(7, 27, 35, .7);
        color: #fff;
        font-size: 10px
}

.detail-gallery-thumbs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-top: 10px
}

.detail-gallery-thumb {
        height: 92px;
        padding: 0;
        overflow: hidden;
        border: 2px solid transparent;
        border-radius: 12px;
        background: #eee
}

.detail-gallery-thumb.active {
        border-color: var(--gold)
}

.detail-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover
}

.detail-info-feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 28px
}

.detail-info-feature {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 17px;
        border-radius: 14px;
        background: var(--cream)
}

.detail-info-feature>i {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--terracotta)
}

.detail-info-feature span,
.detail-info-feature strong {
        display: block
}

.detail-info-feature span {
        color: var(--muted);
        font-size: 10px
}

.detail-info-feature strong {
        font-size: 12px
}

.detail-video-grid {
        display: grid;
        gap: 15px;
        margin-top: 25px
}

.detail-video-grid video {
        width: 100%;
        border-radius: 15px;
        background: #111
}

.detail-travel-grid {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 22px
}

.detail-travel-copy {
        display: grid;
        align-content: start;
        gap: 18px
}

.detail-travel-copy>div {
        display: flex;
        gap: 13px
}

.detail-travel-copy i {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        background: var(--cream);
        color: var(--terracotta)
}

.detail-travel-copy span,
.detail-travel-copy small,
.detail-travel-copy strong {
        display: block
}

.detail-travel-copy small {
        color: var(--muted)
}

.detail-map,
.detail-map-placeholder {
        width: 100%;
        height: 330px;
        border: 0;
        border-radius: 16px
}

.detail-map-placeholder {
        display: grid;
        place-items: center;
        align-content: center;
        gap: 8px;
        background: var(--cream);
        color: var(--muted)
}

.detail-map-placeholder i {
        font-size: 35px;
        color: var(--gold)
}

.detail-review-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px
}

.detail-review-head>strong {
        margin-bottom: 28px;
        color: var(--terracotta)
}

.detail-review-list {
        display: grid
}

.detail-review-item {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 15px;
        padding: 23px 0;
        border-top: 1px solid var(--line)
}

.detail-review-avatar {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--cream);
        color: var(--gold)
}

.detail-review-meta {
        display: flex;
        justify-content: space-between;
        gap: 15px
}

.detail-review-meta strong,
.detail-review-meta span {
        display: block
}

.detail-review-meta span {
        color: var(--muted);
        font-size: 10px
}

.detail-review-stars {
        color: var(--gold)
}

.detail-review-body p {
        margin: 9px 0 0
}

.detail-review-empty {
        text-align: center;
        padding: 35px;
        color: var(--muted)
}

.detail-review-empty i {
        font-size: 32px;
        color: var(--gold)
}

.detail-pagination {
        margin-top: 18px
}

.detail-review-form {
        margin-top: 30px;
        padding-top: 28px;
        border-top: 1px solid var(--line)
}

.detail-review-form textarea {
        width: 100%;
        min-height: 130px;
        margin: 12px 0;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 13px;
        resize: vertical
}

.detail-review-submit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px
}

.detail-review-submit button {
        padding: 12px 18px;
        border: 0;
        border-radius: 10px;
        background: var(--terracotta);
        color: #fff;
        font-weight: 700
}

.detail-login-review {
        margin-top: 25px
}

.detail-sidebar {
        display: grid;
        align-content: start;
        gap: 20px
}

.detail-sidebar-card {
        padding: 24px;
        border: 1px solid #eee7dd;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(25, 40, 30, .05)
}

.detail-sidebar-card h3 {
        margin: 0 0 18px;
        font-size: 19px
}

.detail-info-row {
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 11px;
        padding: 14px 0;
        border-top: 1px solid var(--line)
}

.detail-info-row>i {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--cream);
        color: var(--gold)
}

.detail-info-row span,
.detail-info-row strong,
.detail-info-row small {
        display: block
}

.detail-info-row span,
.detail-info-row small {
        color: var(--muted);
        font-size: 10px
}

.detail-info-row strong {
        font-size: 12px
}

.detail-related-list {
        display: grid;
        gap: 13px
}

.detail-related-item {
        display: grid;
        grid-template-columns: 78px 1fr;
        gap: 11px;
        align-items: center
}

.detail-related-item img {
        width: 78px;
        height: 68px;
        object-fit: cover;
        border-radius: 10px
}

.detail-related-item span,
.detail-related-item strong,
.detail-related-item small {
        display: block
}

.detail-related-item strong {
        font-size: 12px;
        line-height: 1.4
}

.detail-related-item small {
        margin-top: 3px;
        color: var(--muted)
}

.detail-related-item small i {
        color: var(--gold)
}

.detail-related-more {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin-top: 20px;
        padding: 11px;
        border: 1px solid var(--green);
        border-radius: 10px;
        color: var(--green);
        font-size: 11px;
        font-weight: 700
}

.detail-nearby-section {
        padding: 80px 0;
        background: var(--cream)
}

.detail-nearby-heading {
        text-align: center
}

.detail-nearby-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px
}

.detail-nearby-card {
        overflow: hidden;
        border-radius: 17px;
        background: #fff;
        box-shadow: var(--shadow)
}

.detail-nearby-card>a {
        display: block
}

.detail-nearby-image {
        position: relative;
        height: 190px;
        overflow: hidden
}

.detail-nearby-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .4s
}

.detail-nearby-card:hover img {
        transform: scale(1.04)
}

.detail-nearby-image span {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 5px 8px;
        border-radius: 999px;
        background: var(--terracotta);
        color: #fff;
        font-size: 9px
}

.detail-nearby-body {
        padding: 17px
}

.detail-nearby-body h3 {
        margin: 0;
        font-size: 16px
}

.detail-nearby-body p {
        height: 42px;
        overflow: hidden;
        margin: 6px 0;
        color: var(--muted);
        font-size: 11px
}

.detail-nearby-body strong {
        color: var(--terracotta);
        font-size: 10px
}

.detail-nearby-empty {
        grid-column: 1/-1;
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 45px;
        color: var(--muted)
}

.detail-trip-cta {
        padding: 70px 0;
        background: var(--navy);
        color: #fff
}

.detail-trip-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px
}

.detail-trip-inner span {
        color: var(--gold-2);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em
}

.detail-trip-inner h2 {
        margin: 7px 0;
        font-size: 36px;
        line-height: 1.25
}

.detail-trip-inner p {
        margin: 0;
        color: rgba(255, 255, 255, .68)
}

.detail-trip-inner>a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 14px 20px;
        border-radius: 11px;
        background: var(--gold);
        color: #fff;
        font-weight: 700
}

.detail-share-modal {
        position: fixed;
        inset: 0;
        z-index: 3000;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(5, 22, 29, .82);
        opacity: 0;
        visibility: hidden;
        transition: .2s
}

.detail-share-modal.show {
        opacity: 1;
        visibility: visible
}

.detail-share-box {
        position: relative;
        width: min(390px, 100%);
        padding: 30px;
        border-radius: 20px;
        background: #fff;
        text-align: center
}

.detail-share-box>button {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: var(--cream)
}

.detail-share-box>div {
        display: flex;
        justify-content: center;
        gap: 10px
}

.detail-share-box>div a,
.detail-share-box>div button {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--navy);
        color: #fff
}

.detail-share-box small {
        display: block;
        min-height: 20px;
        margin-top: 10px;
        color: var(--green)
}

@media(max-width:1100px) {
        .detail-layout {
                grid-template-columns: minmax(0, 1fr) 300px
        }

        .detail-nearby-grid {
                grid-template-columns: repeat(3, 1fr)
        }
}

@media(max-width:900px) {
        .detail-hero-actions {
                position: static;
                margin-top: 25px
        }

        .detail-layout {
                grid-template-columns: 1fr
        }

        .detail-sidebar {
                grid-template-columns: 1fr 1fr
        }

        .detail-nearby-grid {
                grid-template-columns: repeat(2, 1fr)
        }
}

@media(max-width:650px) {
        .detail-hero-actions {
                flex-direction: column
        }

        .detail-hero-action {
                width: 100%
        }

        .detail-tab-section {
                top: 70px
        }

        .detail-tabs {
                gap: 22px
        }

        .detail-content-card {
                padding: 23px 18px
        }

        .detail-gallery-main {
                height: 360px
        }

        .detail-gallery-thumbs {
                grid-template-columns: repeat(4, 1fr)
        }

        .detail-gallery-thumb {
                height: 70px
        }

        .detail-info-feature-grid {
                grid-template-columns: 1fr
        }

        .detail-travel-grid {
                grid-template-columns: 1fr
        }

        .detail-review-head {
                align-items: flex-start;
                flex-direction: column
        }

        .detail-review-head>strong {
                margin: 0 0 18px
        }

        .detail-review-meta {
                flex-direction: column
        }

        .detail-review-submit {
                align-items: flex-start;
                flex-direction: column
        }

        .detail-sidebar {
                grid-template-columns: 1fr
        }

        .detail-nearby-grid {
                grid-template-columns: 1fr
        }

        .detail-nearby-card>a {
                display: grid;
                grid-template-columns: 42% 58%
        }

        .detail-nearby-image {
                height: 100%;
                min-height: 190px
        }

        .detail-trip-inner {
                align-items: flex-start;
                flex-direction: column
        }

        .detail-trip-inner h2 {
                font-size: 29px
        }
}