/* ==========================================================
   TOP ACTIVITIES
========================================================== */

.ua-activities-section {

    padding: 55px 0;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fafc 100%);

    overflow: hidden;

}

/* ==========================================================
   ACTIVITY CARD
========================================================== */

.ua-activity-card {

    position: relative;

    height: 100%;

    overflow: hidden;

    background: #fff;

    border-radius: 28px;

    border: 1px solid rgba(226, 232, 240, .9);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.ua-activity-card:hover {

    transform: translateY(-8px);

    border-color: rgba(244, 180, 0, .18);

    box-shadow:
        0 28px 60px rgba(15, 23, 42, .12);

}

.ua-activity-overlay {

    position: absolute;

    inset: 0;

    z-index: 20;

}

/* ==========================================================
   IMAGE
========================================================== */

.ua-activity-image {

    position: relative;

    overflow: hidden;

    aspect-ratio: 16/10;

    background: #f3f4f6;

}

.ua-activity-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease,
        filter .4s ease;

}

.ua-activity-card:hover .ua-activity-image img {

    transform: scale(1.08);

}

/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.ua-activity-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .28),
            rgba(0, 0, 0, .06),
            transparent);

}

.ua-image-shine {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;

}

.ua-image-shine::before {

    content: "";

    position: absolute;

    top: 0;

    left: -140%;

    width: 50%;

    height: 100%;

    transform: skewX(-20deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .28),

            transparent);

    transition: 1s;

}

.ua-activity-card:hover .ua-image-shine::before {

    left: 160%;

}

/* ==========================================================
   BADGE
========================================================== */

.ua-activity-badge {

    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    border-radius: 999px;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .28);

    color: #fff;

    font-size: .76rem;

    font-weight: 700;

    letter-spacing: .02em;

}

/* ==========================================================
   FAVORITE
========================================================== */

.ua-activity-favorite {

    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 5;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .28);

    color: #fff;

    transition:
        background .3s ease,
        transform .3s ease;

}

.ua-activity-favorite i {

    font-size: 1rem;

}

.ua-activity-card:hover .ua-activity-favorite {

    background: #fff;

    color: #ef4444;

    transform: scale(1.08);

}

/* ==========================================================
   CONTENT
========================================================== */

.ua-activity-content {

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding: 13px;

}

/* ==========================================================
   TITLE
========================================================== */

.ua-activity-title {

    margin: 0;

    color: #111827;

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -.02em;

    transition: color .3s ease;

}

.ua-activity-card:hover .ua-activity-title {

    color: var(--primary);

}

/* ==========================================
   LOCATION
========================================== */

.ua-activity-location {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 0;

    color: #6b7280;

    font-size: .92rem;

    font-weight: 500;

}

.ua-activity-location i {

    color: #d4a017;

}

/* ==========================================
   INFO
========================================== */

.ua-activity-info {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 0;

    color: #6b7280;

    font-size: .88rem;

    font-weight: 600;

}

.ua-activity-info span {

    display: flex;

    align-items: center;

    gap: 5px;

}

.ua-activity-info .bi-star-fill {

    color: #f4b400;

}

.ua-activity-info .bi-clock {

    color: #9ca3af;

}

.ua-dot {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #d1d5db;

}

/* ==========================================
   FOOTER
========================================== */

.ua-activity-footer {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-top: 8px;

    padding-top: 8px;

    border-top: 1px solid #eef2f7;

}

.ua-activity-price small {

    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

    font-size: .76rem;

    text-transform: uppercase;

    letter-spacing: .06em;

}

.ua-activity-price strong {

    color: #111827;

    font-size: 1.45rem;

    font-weight: 800;

}

.ua-activity-button {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #d4a017;

    font-weight: 700;

    text-decoration: none;

    transition: .3s;

}

.ua-activity-button i {

    transition: .3s;

}

.ua-activity-card:hover .ua-activity-button {

    color: #111827;

}

.ua-activity-card:hover .ua-activity-button i {

    transform: translateX(5px);

}

.ua-activity-info span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}

.ua-activity-info i {

    color: var(--primary);

    font-size: .9rem;

}

/* ==========================================================
   RATING
========================================================== */

.ua-activity-rating {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 16px;

    border-radius: 16px;

    background: #f8fafc;

    border: 1px solid #eef2f7;

}

.ua-activity-rating span {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #4b5563;

    font-size: .88rem;

    font-weight: 700;

}

.ua-activity-rating i {

    color: #f4b400;

    font-size: .95rem;

}

/* ==========================================================
   META
========================================================== */

.ua-activity-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}

.ua-activity-meta span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #6b7280;

    font-size: .88rem;

    font-weight: 600;

}

.ua-activity-meta i {

    color: var(--primary);

}

/* ==========================================================
   DIVIDER
========================================================== */

.ua-activity-divider {

    height: 1px;

    background: linear-gradient(90deg,

            transparent,

            #e5e7eb,

            transparent);

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.ua-activity-description {

    color: #6b7280;

    font-size: .92rem;

    line-height: 1.75;

}

/* ==========================================================
   SMALL LABEL
========================================================== */

.ua-activity-content small {

    display: block;

    margin-bottom: 4px;

    color: #9ca3af;

    font-size: .78rem;

    font-weight: 600;

    letter-spacing: .03em;

    text-transform: uppercase;

}

/* ==========================================================
   VIEW ALL
========================================================== */

.ua-view-all {

    margin-top: 56px;

    display: flex;

    justify-content: center;

}

.ua-view-all a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 30px;

    border-radius: 999px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    color: #111827;

    font-size: .95rem;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .06);

    transition:
        all .35s ease;

}

.ua-view-all a i {

    transition: transform .35s ease;

}

.ua-view-all a:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #111827;

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(244, 180, 0, .28);

}

.ua-view-all a:hover i {

    transform: translateX(5px);

}