/* Freetour Page Styles - Scoped to #page-content */

/* Theme/Design Tokens */
#page-content {
    --ink: #292a0f;
    --muted: #64748b;
    --line: rgba(15,23,42,.14);
    --radius: 18px;
    --content: 1000px;
    --tradel: #32a930;
    --tradel-10: rgba(50,169,48,.10);
    --tradel-14: rgba(50,169,48,.14);
    --tradel-20: rgba(50,169,48,.20);
    --amber: #f59e0b;
    --icon: var(--amber);
    --glass-bg: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.45));
    --glass-border: rgba(15,23,42,.16);
    --card-grad: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
    --ribbon-grad: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
}

#page-content .wrap {
    max-width: var(--content);
    margin-inline: auto;
}

#page-content .icon {
    stroke: var(--icon);
    filter: drop-shadow(0 0 6px rgba(245,158,11,.28));
}

#page-content .bg-dots {
    --dot-size: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%2332a930' fill-opacity='0.62'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: var(--dot-size) var(--dot-size);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.12));
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.12));
    pointer-events: none;
}

#page-content .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 24px rgba(0,0,0,.06);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#page-content .card {
    position: relative;
    border-radius: var(--radius);
    background: var(--card-grad);
    border: 1px solid rgba(15,23,42,.12);
    box-shadow: 0 12px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.30);
    overflow: hidden;
}

#page-content .card.v1 {
    box-shadow: 0 12px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.35);
}

#page-content .card.v1::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--tradel-14);
    pointer-events: none;
}

#page-content .card.v2 {
    background: linear-gradient(180deg, rgba(50,169,48,.06), rgba(50,169,48,.03)), var(--card-grad);
    border-color: rgba(50,169,48,.18);
    box-shadow: 0 12px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.32);
}

#page-content .card.v3 {
    background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02)), var(--card-grad);
    border-color: rgba(15,23,42,.12);
    box-shadow: 0 12px 28px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.28);
}

#page-content .ribbon {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--ribbon-grad);
    border: 1px solid rgba(27,31,35,.10);
    box-shadow: 0 14px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35);
}

#page-content .ribbon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(50,169,48,.45), transparent);
}

#page-content .badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: .78rem;
    padding: .42rem .78rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(50,169,48,.15), rgba(50,169,48,.08));
    border: 1px solid rgba(50,169,48,.28);
    color: #134e1f;
    letter-spacing: .01em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    text-transform: uppercase;
}

#page-content .chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .78rem;
    padding: .34rem .62rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.9));
    border: 1px solid rgba(15,23,42,.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

#page-content .logo-banner {
    width: 100%;
    height: 124px;
    border: 1px solid rgba(15,23,42,.14);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, rgba(255,255,255,.94));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

@media (min-width: 768px) {
    #page-content .logo-banner {
        height: 150px;
    }
}

#page-content .logo-banner img {
    max-width: 100%;
    max-height: 100%;
}

#page-content .k {
    color: var(--muted);
}

#page-content .title {
    font-family: 'Playfair Display', serif;
}

#page-content .pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.18);
    background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.88));
    font-weight: 800;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 20px rgba(0,0,0,.05);
}

#page-content .pill:hover {
    transform: translateY(-1px);
    border-color: var(--tradel-20);
    box-shadow: 0 12px 22px rgba(0,0,0,.06);
}

#page-content .hr-grad {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(50,169,48,.35), transparent);
}