/*
 * Accessibility fixes and enhancements
 * This file contains CSS overrides for accessibility improvements
 */

/* Score/Reviews button - Color contrast fix */
.score-tp__btn {
	background-color: #007a52 !important;
	color: #ffffff !important;
}

.score-tp__btn:hover {
	background-color: #005c3f !important;
	border-color: #005c3f !important;
}

/* Testimonials component - Low contrast fix */
.comp-41__carousel h3 {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 10px 15px;
	border-radius: 4px;
}

.comp-41__carousel p {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 8px 12px;
	border-radius: 4px;
	width: fit-content;
	margin: 0 auto;
}

/* Currency selector - Label and select element contrast */
.changeCurrency label {
	color: #1a3a35 !important;
	font-weight: 600 !important;
}

.changeCurrency select.currency {
	color: #1a3a35 !important;
	background-color: #ffffff !important;
	border: 1px solid #999999 !important;
	font-weight: 600 !important;
}

/* Carousel Accessibility - Flickity aria-selected cleanup
   JavaScript removes invalid aria-selected attributes from carousel elements.
   See js/accessibility-fixes.js for details. */

/* =========================================
   Modal / popup close buttons — reliable click target
   Clarity UX review: X icons registered as decorative due to
   tiny hit area (SVG fill="none" + padding:0) and inner <img>/<svg>
   absorbing event.target. Fix: 44x44 minimum target, and inner
   icons forward clicks to the <button>.
   ========================================= */
.modal .close,
.modal .btn-close,
.floating-notification__close,
.hp-close,
.close-call-back,
.comp-45__close-btn {
    min-width: 44px;
    min-height: 44px;
    top: -5px !important;
    right: -5px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.modal .close > *,
.modal .btn-close > *,
.floating-notification__close > *,
.hp-close > *,
.close-call-back > *,
.comp-45__close-btn > * {
    pointer-events: none;
}

/* Newsletter modal: its generic `button` rule was leaking onto the
   close <button>, giving it a green background + border. Reset it. */
.modal-newsletter .close {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* Keyboard focus ring for close buttons */
.modal .close:focus-visible,
.modal .btn-close:focus-visible,
.floating-notification__close:focus-visible,
.hp-close:focus-visible,
.close-call-back:focus-visible,
.comp-45__close-btn:focus-visible {
    outline: 2px solid #2d564c;
    outline-offset: 2px;
}

/* =========================================
   Accommodation type cards — clickable enquiry shortcut
   Cards on tour detail pages now route to the Enquiry tab and
   pre-tick the matching accommodation type.
   ========================================= */
a.comp-16__item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.comp-16__item:hover,
a.comp-16__item:focus {
    text-decoration: none;
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

a.comp-16__item:focus-visible {
    outline: 2px solid #2d564c;
    outline-offset: 2px;
}