/* Watch Widget Component Styles */
/* Uses design tokens from design-tokens.css */

/* Main Widget Container */
.watch-widget {
    padding: var(--spacing-xl) var(--spacing-md);
    width: 339px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: fixed;
    bottom: 0px;
    left: 30px;
    z-index: 100;

    border-radius: var(--border-radius-lg, 8px);
    border: 1px solid var(--border-neutral-medium, #C6C8CF);
    background: var(--surface-neutral-muted, #E6E9EB);
    box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.05);
}

.watch-widget.hidden {
    display: none;
}

/* Header Section */
.watch-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}



.watch-widget__header:hover {
    opacity: 0.9;
}

.watch-widget__header:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.watch-widget__header-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-right:12px;
}

.watch-widget__title {
    font-family: var(--font-family-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    color: var(--color-text-heading);
    margin: 0;
}

/* Close Button */
.watch-widget__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text-light);
    font-size: 24px;
    transition: color 0.2s ease;
}

.watch-widget__close-btn:hover {
    color: var(--color-text-heading);
}

.watch-widget__close-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Accordion Body */
.watch-widget-body {
    overflow: hidden;
    transition: height 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.watch-widget-body.collapsed {
    height: 0;
}

/* Content Section */
.watch-widget__content {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top:20px;
}

.watch-widget__detail {
    font-family: var(--font-family-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-body);
    width: 100%;
}

.watch-widget__detail span {
    display: block;
}

/* Links Section */
.watch-widget__links {
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.watch-widget__remove-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-primary);
    font-family: var(--font-family-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 26px;
    transition: opacity 0.2s ease;
}

.watch-widget__remove-btn:hover {
    opacity: 0.8;
}

.watch-widget__remove-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.watch-widget__remove-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .watch-widget {
        width: 100%;
        max-width: 339px;
    }
}


/* Status Tag Variants */

/* On Time */
.status-tag--on-time {
    background-color: var(--status-ontime-bg);
    border-color: var(--status-ontime-border);
    color: var(--status-ontime-text);
}

.status-tag--on-time .status-tag__icon {
    color: var(--status-ontime-icon);
}

/* Arrived */
.status-tag--arrived {
    background-color: var(--status-arrived-bg);
    border-color: var(--status-arrived-border);
    color: var(--status-arrived-text);
}

.status-tag--arrived .status-tag__icon {
    color: var(--status-arrived-icon);
}

/* Delayed */
.status-tag--delayed {
    background-color: var(--status-delayed-bg);
    border-color: var(--status-delayed-border);
    color: var(--status-delayed-text);
}

.status-tag--delayed .status-tag__icon {
    color: var(--status-delayed-icon);
}

/* On Ground */
.status-tag--on-ground {
    background-color: var(--status-onground-bg);
    border-color: var(--status-onground-border);
    color: var(--status-onground-text);
}

.status-tag--on-ground .status-tag__icon {
    color: var(--status-onground-icon);
}

/* Cancelled */
.status-tag--cancelled {
    background-color: var(--status-cancelled-bg);
    border-color: var(--status-cancelled-border);
    color: var(--status-cancelled-text);
}

.status-tag--cancelled .status-tag__icon {
    color: var(--status-cancelled-icon);
}

/* Compact Variant (for smaller tags) */
.status-tag--compact {
    padding: 2px 8px;
    font-size: 13px;
    gap: 6px;
}

.status-tag--compact .status-tag__icon {
    font-size: 14px;
}

/* Status Tag Responsive Adjustments */
@media (max-width: 767px) {
    .status-tag {
        font-size: 14px;
        padding: 4px 10px;
    }

    .status-tag__icon {
        font-size: 14px;
    }
}