/* ========================================
   Base / Reset
   ======================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--off-white);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: color var(--ease); }
a:hover { color: var(--primary); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, select { font-family: var(--font); }

/* Root wrappers — block display (default) for proper sticky/layout behavior */

/* Container */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Section */
.section { padding: 48px 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.section-header h2 {
    font-family: var(--font);
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    position: relative;
}
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}
.view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
}
.view-all .arrow-circle {
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
    transition: transform var(--ease);
}
.view-all:hover .arrow-circle { transform: translateX(3px); }

/* Primary Button */
.btn-orange {
    background: var(--primary);
    color: var(--white);
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    transition: all var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-orange:hover { background: var(--primary-hover); color: var(--white); box-shadow: 0 4px 12px rgba(5,150,105,0.3); }

/* Phone Button */
.btn-phone {
    width: 42px;
    height: 42px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    transition: all var(--ease);
}
.btn-phone:hover { background: var(--primary); color: var(--white); }

/* Save Badge — defined in tours.css */

/* Trending Badge on tabs */
.trending-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--white);
    font-size: 8px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    letter-spacing: 0.3px;
}