a {color: red;text-decoration: none !important;cursor: pointer;transition: 0.3s;}a:hover {color: gold;text-decoration: none;}h1, h2, h3, h4, h5, h6 {font-family: var(--font-primary);}.scroll-top {position: fixed;visibility: hidden;opacity: 0;right: 15px;bottom: 15px;z-index: 99999;background-color: gold;width: 40px;height: 40px;border-radius: 4px;transition: all 0.4s;}.scroll-top i {font-size: 24px;color: #fff;line-height: 0;}.scroll-top:hover {background-color: red;color: #fff;}.scroll-top.active {visibility: visible;opacity: 1;}@media (min-width: 1280px) {.navbar {padding: 0;}.navbar ul {margin: 0;padding: 0;display: flex;list-style: none;align-items: center;}.navbar li {position: relative;}.navbar a, .navbar a:focus {display: flex;align-items: center;justify-content: space-between;padding: 6px 12px 9px 21px;font-family: var(--font-default);font-size: 15px;font-weight: bold; white-space: nowrap;transition: 0.3s;}.navbar a {color:white;}.navbar a i, .navbar a:focus i {font-size: 15px;line-height: 0;margin-left: 5px;}.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {color: gold;}.navbar .active:focus, .navbar li:hover > a {background: gold;border-radius:21px;color: #FF4040;}.navbar .dropdown ul {display: block;position: absolute;left: 14px;top: calc(100% + 30px);margin: 0;padding: 10px 0;z-index: 99;opacity: 0;visibility: hidden;background: #fff;box-shadow: 3px 3px 9px gold;transition: 0.2s;border-radius:30px;}.navbar .dropdown ul li {min-width: 200px;}.navbar .dropdown ul a {padding: 10px 20px;font-size: 14px;text-transform: none;color:#FF4040;}.navbar .dropdown ul a i {font-size: 12px;}.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {color: darkviolet;}.navbar .dropdown:hover>ul {opacity: 1;top: 100%;visibility: visible;}.navbar .dropdown .dropdown ul {top: 0;left: calc(100% - 30px);visibility: hidden;}.navbar .dropdown .dropdown:hover>ul {opacity: 1;top: 0;left: 100%;visibility: visible;}}@media (min-width: 1280px) and (max-width: 1366px) {.navbar .dropdown .dropdown ul {left: -90%;}.navbar .dropdown .dropdown:hover>ul {left: -100%;}}@media (min-width: 1280px) {.mobile-nav-show, .mobile-nav-hide {display: none;}}@media (max-width: 1279px) {.navbar {position: fixed;top: 0;right: -100%;width: 100%;max-width: 400px;bottom: 0;transition: 0.3s;z-index: 9997;}.navbar ul {position: absolute;inset: 0;padding: 50px 0 10px 0;margin: 0;background-color: #fc0;overflow-y: auto;transition: 0.3s;z-index: 9998;}.navbar a, .navbar a:focus {display: flex;align-items: center;justify-content: space-between;padding: 10px 20px;font-family: var(--font-default);font-size: 14px;font-weight: 600;color: green;white-space: nowrap;transition: 0.3s;box-shadow: 3px 3px 9px gold;border-radius: 30px;}.navbar a i, .navbar a:focus i {font-size: 12px;line-height: 0;margin-left: 5px;}.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {color: blueviolet;background: gold;}.navbar a:hover, .navbar .active:focus, .navbar li:hover > a {background: gold;border-radius: 30px;}.navbar .dropdown ul, .navbar .dropdown .dropdown ul {position: static;display: none;padding: 10px 0;margin: 10px 20px;background-color:#fff;}.navbar .dropdown ul:focus, .navbar .dropdown .dropdown ul:focus {position: static;display: none;padding: 10px 0;margin: 10px 20px;background-color: gold;}.navbar .dropdown>.dropdown-active, .navbar .dropdown .dropdown>.dropdown-active {display: block;border-radius: 15px;}.mobile-nav-show {color: rgba(255, 255, 255, 0.9);font-size: 28px;cursor: pointer;line-height: 0;transition: 0.5s;}
    .mobile-nav-hide {
        background-color: #fff;
        font-size: 32px;
        cursor: pointer;
        line-height: 0;
        position: fixed;
        left: 1px;
        top: 15px;
        z-index: 9999;
    }.mobile-nav-active {overflow: hidden;}.mobile-nav-active .navbar {left: 0; width: 75%; }.mobile-nav-active .navbar:before {content: "";position: fixed;inset: 0;background: rgba(27, 47, 69, 0.7);z-index: 9996;}}
.error-message {
    color: red;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    align-items: center;
    max-width: 100%;
    margin: 10px 0;
   
}
/* =========================
   Horoscope Widget Wrapper
========================= */
.horoscope-widget {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* =========================
   Zodiac Icons Row (Desktop)
========================= */
.zodiac-row {
    display: flex;
    justify-content: space-between; /* spread evenly */
    align-items: center;
    flex-wrap: nowrap; /* IMPORTANT: no wrapping */
    gap: 8px;
    margin-bottom: 15px;
}

/* Each item */
.zodiac-item {
    flex: 1;
    max-width: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* FIX alignment */
}

/* Icon */
.zodiac-icon {
    width: 42px;
    height: 42px;
    opacity: 0.7;
    transition: all 0.25s ease;
    border-radius: 50%;
}

    .zodiac-icon:hover {
        opacity: 1;
        transform: scale(1.1);
    }

.zodiac-item.active {
    border: 2px solid orange;
    border-radius: 10px;
    padding: 6px;
    background: #fff8ef;
}

    .zodiac-item.active .zodiac-icon {
        transform: scale(1.1);
    }

    .zodiac-item.active .zodiac-label {
        color: orange;
        font-weight: 600;
    }
/* Label */
.zodiac-label {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.2; /* FIX uneven height */
    height: 16px; /* FIX alignment across all */
    display: flex;
    align-items: center;
    justify-content: center;
    color: orange;
    font-weight: 600;
}

.zodiac-click-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; /* makes whole block clickable */
}
/* =========================
   Tabs Section
========================= */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Tabs */
.tab {
    flex: 1;
    padding: 10px 10px;
    border: none;
    background: #f2f2f2;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    color: orange;
}

    .tab:hover {
        background: #e6e6e6;
    }

    .tab.active {
        background: #fc0;
        color: #fff;
    }

/* =========================
   Tab Content
========================= */
.tab-content {
    position: relative;
    width: 100%;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.25s ease-in-out;
}

    .tab-pane.active {
        display: block;
    }

/* =========================
   Preview Text (Clamped)
========================= */
.preview-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================
   More Link
========================= */
.more-link {
    display: inline-block;
    margin-top: 6px;
    color: orange;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

    .more-link:hover {
        text-decoration: underline;
    }

/* =========================
   Animation
========================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   📱 Tablet & Mobile
========================= */
@media (max-width: 768px) {

    .horoscope-widget {
        padding: 2px;
    }

    .zodiac-row {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 6 per row */
        gap: 10px;
        justify-items: center;
    }

    .zodiac-item {
        width: auto;
    }

    .zodiac-icon {
        width: 36px;
        height: 36px;
    }

    .zodiac-label {
        font-size: 11px;
    }

    /* Tabs scroll (IMPORTANT FIX) */
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

        .tabs::-webkit-scrollbar {
            display: none;
        }

    .tab {
        flex: 0 0 auto;
        min-width: 95px;
        font-size: 13px;
        padding: 8px 10px;
    }

    .preview-text {
        font-size: 13.5px;
        line-height: 1.5;
    }
}

/* =========================
   📱 Small Mobile
========================= */
@media (max-width: 480px) {

    .zodiac-icon {
        width: 30px;
        height: 30px;
    }

    .tab {
        min-width: 85px;
        font-size: 12.5px;
    }

    .preview-text {
        -webkit-line-clamp: 2;
    }
}
.selected-sign-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: gray;
}