/* Stage 11 pre-publish conformance hotfix.
   Scope: routes shipping now. Sukcesy / myapplications.php is intentionally excluded
   by backend/runtime_features.php until that surface is scheduled for migration. */

/* Global header controls use the shared icon-button hit area. */
#header-profile-avatar,
[data-global-modal-actions] > button,
[data-global-modal-actions] > a {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
}

#main-badge {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    top: 0 !important;
    right: 0 !important;
    background: var(--ui-brand-action, #d7181c) !important;
    font-size: var(--type-micro-status-size, 10px) !important;
    font-weight: var(--type-micro-status-weight, 700) !important;
    line-height: 16px !important;
    box-shadow: none !important;
}

/* Normal readable text must never fall back to 8/9px legacy utilities. */
p.text-\[8px\],
span.text-\[8px\],
div.text-\[8px\],
button.text-\[8px\],
a.text-\[8px\],
p.text-\[9px\],
span.text-\[9px\],
div.text-\[9px\],
button.text-\[9px\],
a.text-\[9px\] {
    font-size: var(--type-micro-status-size, 10px) !important;
    line-height: var(--type-micro-status-line-height, 1.2) !important;
}

/* Plus Jakarta Sans stops at 800 in the approved typography contract. */
.font-black:not(i),
.font-black:not(i)::before,
.font-black:not(i)::after {
    font-weight: 800 !important;
}

/* slate-400 is too light for normal copy on white. */
p.text-slate-400,
span.text-slate-400,
div.text-slate-400,
button.text-slate-400,
a.text-slate-400 {
    color: var(--color-text-subtle, #707070) !important;
}

/* One Bottom Sheet overlay contract across all shipping routes. */
.bottom-sheet-overlay,
.bottom-sheet-overlay.active {
    background: rgba(51, 51, 51, 0.4) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* Shared media-viewer and Home card controls match the icon-button hit target. */
.c-media-viewer__close,
.c-media-viewer__nav,
[data-recommendation-dismiss],
[data-favorite-remove] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
}

/* Activity-detail pending-rating CTA follows the canonical primary-button contract. */
.details-rating-cta {
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: var(--radius-control, 12px) !important;
    background: var(--ui-brand-action, #d7181c) !important;
    font-size: var(--type-button-size, 16px) !important;
    font-weight: var(--type-button-weight, 700) !important;
    line-height: var(--type-button-line-height, 1.2) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    flex-direction: row !important;
    box-shadow: none !important;
    transition:
        transform var(--motion-micro, 180ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        background-color var(--motion-micro, 180ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

.details-rating-cta:hover {
    background: var(--ui-brand-action-hover, #b31216) !important;
}

/* Rating tags use the system radius and component-motion timing. */
.bottom-sheet-meet-rating-tag-btn {
    border-radius: var(--radius-compact, 8px) !important;
    transition:
        background-color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        border-color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        transform var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

.bottom-sheet-meet-rating-stars i {
    transition:
        color var(--motion-micro, 180ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        transform var(--motion-micro, 180ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Current/future timeline marker must not reintroduce indigo + local elevation. */
.details-timeline-dot.border-indigo-500,
.details-timeline-dot.text-indigo-500 {
    border-color: #d9d9d9 !important;
    color: var(--ui-text-secondary, #636363) !important;
    box-shadow: none !important;
}

/* Shared toast uses canonical motion instead of inline transition:all + bespoke shadow. */
.toast {
    transition:
        opacity var(--motion-standard, 280ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        transform var(--motion-standard, 280ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
    box-shadow: none !important;
}

/* Legacy generic transitions still used by these active controls get canonical timing. */
.chip {
    transition:
        background-color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        border-color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        color var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
        transform var(--motion-small, 240ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)) !important;
}

/* Final publication QA: activity detail icons. The heart carries the state,
   not a pink/red tile behind it. */
.p-schedule-activity-detail-favorite,
.p-schedule-activity-detail-favorite:hover,
.p-schedule-activity-detail-favorite.is-active {
    background: transparent !important;
    color: var(--ui-brand-action, #d7181c) !important;
    box-shadow: none !important;
}

.p-schedule-activity-detail-favorite i {
    color: currentColor !important;
}

/* Type 1 replaces Font Awesome with a mask. The active mask must be a filled
   heart as well; otherwise JS state is correct but the icon still looks empty. */
#bottom_sheet_activity_detail .p-schedule-activity-detail-favorite.is-active::before,
#bottom_sheet_activity_detail .p-schedule-activity-detail-favorite[aria-pressed="true"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.8 4.6a5.4 5.4 0 0 0-7.6 0L12 5.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 21l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z'/%3E%3C/svg%3E") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.8 4.6a5.4 5.4 0 0 0-7.6 0L12 5.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 21l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z'/%3E%3C/svg%3E") !important;
}

/* Schedule activity detail is a transparent shell around its own card. A later
   conformance rule had restored white on the shell, exposing white corner
   wedges between the shell and the rounded activity card. Keep one radius and
   clip every detail view to it. */
#bottom_sheet_activity_detail {
    background: transparent !important;
    border-radius: var(--radius-card, 16px) !important;
    overflow: hidden !important;
}

#bottom_sheet_activity_detail > .bottom-sheet-content {
    border-radius: inherit !important;
    overflow: hidden !important;
}

#bottom_sheet_activity_detail .p-schedule-activity-detail,
#bottom_sheet_activity_detail .p-schedule-activity-detail-view,
#bottom_sheet_activity_detail .p-schedule-activity-detail-card {
    border-radius: var(--radius-card, 16px) !important;
}

/* Detail X sits directly on the hero with canonical close geometry. */
.p-schedule-activity-detail-close {
    width: 44px !important;
    height: 44px !important;
    top: var(--close-control-inset, 8px) !important;
    right: var(--close-control-inset, 8px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .details-rating-cta,
    .bottom-sheet-meet-rating-tag-btn,
    .bottom-sheet-meet-rating-stars i,
    .toast,
    .chip {
        transition: none !important;
    }
}