/* Global Work & Travel 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 {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
    stroke: var(--icon);
    flex-shrink: 0;
}

#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-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 .k {
    color: var(--muted);
}

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

#page-content .pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .9rem;
    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);
}

/* Clean list styles */
#page-content .clean-list li {
    margin-top: 10px;
}