@import url('./iconography-stage11.css');
@import url('./design-tokens-stage11.css');

/* Stage 11: canonical dismiss-X geometry and focus contract.
   This layer changes only real corner close controls; it does not own Bottom Sheet lifecycle. */

:root {
    --close-control-size: 44px;
    --close-control-inset: 16px;
}

/*
 * Corner X controls are identified by an actual X icon (SVG / fa-xmark), a
 * dedicated close class, or a known close control outside Bottom Sheets. A
 * plain text action such as the bottom `Zamknij` button may still dismiss a
 * sheet, but is NOT a corner X.
 */
.bottom-sheet [data-bottom-sheet-close]:has(.c-icon),
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark),
.bottom-sheet .bottom-sheet-close,
.p-schedule-activity-detail-close,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"],
.p-modal-meet-detail__close,
.c-media-viewer__close,
[data-recommendation-dismiss] {
    position: absolute !important;
    top: var(--close-control-inset) !important;
    right: var(--close-control-inset) !important;
    width: var(--close-control-size) !important;
    height: var(--close-control-size) !important;
    min-width: var(--close-control-size) !important;
    min-height: var(--close-control-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 20 !important;
    -webkit-tap-highlight-color: transparent;
}

/* Home recommendation cards are only 190px wide. Keep the 44px touch target,
   but anchor it to the actual card corner so the optical X does not drift
   toward the middle of the card. */
[data-recommendation-dismiss] {
    top: 0 !important;
    right: 0 !important;
}

/* White-surface X uses the neutral icon color. Colored/media surfaces retain
 * their feature-owned icon color for contrast, but never receive a carrier. */
.bottom-sheet:not(#bottom_sheet_activity_detail):not(#bottom_sheet_absence_makeup) [data-bottom-sheet-close]:has(.c-icon),
.bottom-sheet:not(#bottom_sheet_activity_detail):not(#bottom_sheet_absence_makeup) [data-bottom-sheet-close]:has(i.fa-xmark),
.bottom-sheet:not(#bottom_sheet_activity_detail):not(#bottom_sheet_absence_makeup) .bottom-sheet-close,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"],
.p-modal-meet-detail__close,
[data-recommendation-dismiss] {
    color: var(--ui-text-secondary, #636363) !important;
}

/* No close-X interaction state may reintroduce a circle, frame or background. */
.bottom-sheet [data-bottom-sheet-close]:has(.c-icon):hover,
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark):hover,
.bottom-sheet .bottom-sheet-close:hover,
.p-schedule-activity-detail-close:hover,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"]:hover,
.p-modal-meet-detail__close:hover,
.c-media-viewer__close:hover,
[data-recommendation-dismiss]:hover,
.bottom-sheet [data-bottom-sheet-close]:has(.c-icon):active,
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark):active,
.bottom-sheet .bottom-sheet-close:active,
.p-schedule-activity-detail-close:active,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"]:active,
.p-modal-meet-detail__close:active,
.c-media-viewer__close:active,
[data-recommendation-dismiss]:active {
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The close control is removed from header flex flow, so reserve its corner. */
.bottom-sheet-header > .px-6 {
    padding-right: calc(var(--close-control-inset) + var(--close-control-size) + 8px) !important;
}

/* Pointer focus must not leave a browser/brand ring behind. */
.bottom-sheet [data-bottom-sheet-close]:has(.c-icon):focus,
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark):focus,
.bottom-sheet .bottom-sheet-close:focus,
.p-schedule-activity-detail-close:focus,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"]:focus,
.p-modal-meet-detail__close:focus,
.c-media-viewer__close:focus,
[data-recommendation-dismiss]:focus {
    outline: none !important;
}

/* Keyboard focus remains icon-only. The X grows slightly instead of receiving a frame. */
.bottom-sheet [data-bottom-sheet-close]:has(.c-icon):focus-visible,
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark):focus-visible,
.bottom-sheet .bottom-sheet-close:focus-visible,
.p-schedule-activity-detail-close:focus-visible,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"]:focus-visible,
.p-modal-meet-detail__close:focus-visible,
.c-media-viewer__close:focus-visible,
[data-recommendation-dismiss]:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(1.08) !important;
}

/* Keep one optical X size for real SVG controls. */
.bottom-sheet [data-bottom-sheet-close] .c-icon,
.bottom-sheet .bottom-sheet-close .c-icon,
.p-schedule-activity-detail-form-header > button[aria-label="Zamknij"] svg {
    width: 18px !important;
    height: 18px !important;
}

/* Legacy Font Awesome X markup is rendered through the same SVG-mask shape. */
.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark) > i.fa-xmark,
.p-schedule-activity-detail-close > i.fa-xmark,
.c-media-viewer__close > i.fa-xmark,
[data-recommendation-dismiss] > i.fa-xmark {
    display: none !important;
}

.bottom-sheet [data-bottom-sheet-close]:has(i.fa-xmark)::before,
.p-schedule-activity-detail-close::before,
.c-media-viewer__close::before,
[data-recommendation-dismiss]::before {
    content: '';
    width: 18px;
    height: 18px;
    display: block;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}