| @@ -731,9 +731,9 @@ | ||
| 731 | 731 | .yatra-results-controls { |
| 732 | 732 | flex-direction: row; |
| 733 | 733 | flex-wrap: wrap; |
| 734 | 734 | align-items: center; |
| 735 | - justify-content: end | |
| 735 | + justify-content: flex-end; | |
| 736 | 736 | gap: 10px 12px; |
| 737 | 737 | } |
| 738 | 738 | |
| 739 | 739 | .yatra-sort-control { |
| @@ -956,11 +956,11 @@ | ||
| 956 | 956 | text-decoration: none; |
| 957 | 957 | } |
| 958 | 958 | |
| 959 | 959 | .yatra-filter-section { |
| 960 | - margin-bottom: 24px; | |
| 960 | + margin-bottom: 14px; | |
| 961 | 961 | border-bottom: 1px solid #f3f4f6; |
| 962 | - padding-bottom: 20px; | |
| 962 | + padding-bottom: 14px; | |
| 963 | 963 | /* visible: range slider thumbs must not clip at section edges */ |
| 964 | 964 | overflow: visible; |
| 965 | 965 | width: 100%; |
| 966 | 966 | box-sizing: border-box; |
| @@ -979,11 +979,11 @@ | ||
| 979 | 979 | cursor: pointer; |
| 980 | 980 | font-size: 15px; |
| 981 | 981 | font-weight: 600; |
| 982 | 982 | color: #111827; |
| 983 | - margin-bottom: 16px; | |
| 983 | + margin-bottom: 10px; | |
| 984 | 984 | user-select: none; |
| 985 | - padding: 4px 0; | |
| 985 | + padding: 2px 0; | |
| 986 | 986 | transition: color 0.2s; |
| 987 | 987 | } |
| 988 | 988 | |
| 989 | 989 | .yatra-filter-actions { |
| @@ -1625,10 +1625,10 @@ | ||
| 1625 | 1625 | .yatra-favorite-btn:hover { |
| 1626 | 1626 | background: #ffffff !important; |
| 1627 | 1627 | color: #ef4444 !important; |
| 1628 | 1628 | transform: scale(1.1) !important; |
| 1629 | - border-color: #ef4444 !important; | |
| 1630 | - box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important; | |
| 1629 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1630 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; | |
| 1631 | 1631 | } |
| 1632 | 1632 | |
| 1633 | 1633 | .yatra-favorite-btn svg { |
| 1634 | 1634 | width: 20px !important; |
| @@ -1636,28 +1636,51 @@ | ||
| 1636 | 1636 | stroke-width: 2 !important; |
| 1637 | 1637 | display: block !important; |
| 1638 | 1638 | } |
| 1639 | 1639 | |
| 1640 | +/* Saved state: keep the button neutral (no red ring on the button itself); | |
| 1641 | + * only the heart icon glyph turns red and gets filled. | |
| 1642 | + * | |
| 1643 | + * stroke is set to NONE (and stroke-width to 0) when filled — otherwise the | |
| 1644 | + * 2px outward stroke makes the filled heart look ~2px chunkier than the | |
| 1645 | + * outlined heart on neighboring cards, which reads as "different icon". */ | |
| 1640 | 1646 | .yatra-favorite-btn.saved, |
| 1641 | 1647 | .yatra-favorite-btn.is-saved { |
| 1642 | 1648 | background: #ffffff !important; |
| 1643 | 1649 | color: #ef4444 !important; |
| 1644 | - border-color: #ef4444 !important; | |
| 1650 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1645 | 1651 | } |
| 1646 | 1652 | |
| 1647 | 1653 | .yatra-favorite-btn.saved svg, |
| 1648 | 1654 | .yatra-favorite-btn.is-saved svg { |
| 1649 | 1655 | fill: #ef4444 !important; |
| 1650 | - stroke: #ef4444 !important; | |
| 1656 | + stroke: none !important; | |
| 1657 | + stroke-width: 0 !important; | |
| 1651 | 1658 | } |
| 1652 | 1659 | |
| 1660 | +.yatra-favorite-btn.saved svg path, | |
| 1661 | +.yatra-favorite-btn.is-saved svg path { | |
| 1662 | + fill: #ef4444 !important; | |
| 1663 | + stroke: none !important; | |
| 1664 | + stroke-width: 0 !important; | |
| 1665 | +} | |
| 1666 | + | |
| 1653 | 1667 | .yatra-favorite-btn.saved:hover, |
| 1654 | 1668 | .yatra-favorite-btn.is-saved:hover { |
| 1655 | - background: #fee2e2 !important; | |
| 1669 | + background: #ffffff !important; | |
| 1656 | 1670 | color: #dc2626 !important; |
| 1657 | - border-color: #dc2626 !important; | |
| 1671 | + border-color: rgba(0, 0, 0, 0.1) !important; | |
| 1658 | 1672 | } |
| 1659 | 1673 | |
| 1674 | +.yatra-favorite-btn.saved:hover svg, | |
| 1675 | +.yatra-favorite-btn.is-saved:hover svg, | |
| 1676 | +.yatra-favorite-btn.saved:hover svg path, | |
| 1677 | +.yatra-favorite-btn.is-saved:hover svg path { | |
| 1678 | + fill: #dc2626 !important; | |
| 1679 | + stroke: none !important; | |
| 1680 | + stroke-width: 0 !important; | |
| 1681 | +} | |
| 1682 | + | |
| 1660 | 1683 | .yatra-trip-content { |
| 1661 | 1684 | padding: 20px; |
| 1662 | 1685 | display: flex; |
| 1663 | 1686 | flex-direction: column; |
| @@ -3469,4 +3492,195 @@ | ||
| 3469 | 3492 | font-weight: 400; |
| 3470 | 3493 | line-height: 1.5; |
| 3471 | 3494 | } |
| 3472 | 3495 | |
| 3496 | + | |
| 3497 | +/* ============================================================ | |
| 3498 | + Trip listing — Compact card layout | |
| 3499 | + Settings → Frontend Theme → "Listing card layout". | |
| 3500 | + Opt-in; the default "standard" card is left untouched. | |
| 3501 | + .yatra-listing-compact → compact on mobile (both compact modes) | |
| 3502 | + .yatra-listing-compact--all → compact on desktop too (compact_all) | |
| 3503 | + The class is placed on the LISTING CONTAINER (.yatra-listing-page for the | |
| 3504 | + archive/taxonomy, .yatra-tour-shortcode / .yatra-discount-shortcode for the | |
| 3505 | + shortcode + Gutenberg block), NOT on <body>. That lets each listing resolve | |
| 3506 | + its own layout: the site-wide Design setting is the default, and an | |
| 3507 | + individual shortcode/block can override it (card_layout / cardLayout attr). | |
| 3508 | + The compact card intentionally shows only: image, title, price, | |
| 3509 | + and the "View Details" button — everything else is hidden for density. | |
| 3510 | + ============================================================ */ | |
| 3511 | + | |
| 3512 | +/* --- Compact on mobile (<=768px): compact_mobile AND compact_all --- */ | |
| 3513 | +@media (max-width: 768px) { | |
| 3514 | + /* Force a single column so each compact card becomes a full-width | |
| 3515 | + horizontal row — covers every trip-card grid wrapper: | |
| 3516 | + .yatra-trip-grid → archive / taxonomy | |
| 3517 | + .yatra-tour-grid → [yatra_trip]/[yatra_tour] shortcode + Tour block | |
| 3518 | + .yatra-discount-grid → discount-and-deals shortcode */ | |
| 3519 | + .yatra-listing-compact .yatra-trip-grid, | |
| 3520 | + .yatra-listing-compact .yatra-tour-grid, | |
| 3521 | + .yatra-listing-compact .yatra-discount-grid { | |
| 3522 | + grid-template-columns: 1fr !important; | |
| 3523 | + gap: 12px; | |
| 3524 | + } | |
| 3525 | + .yatra-listing-compact .yatra-trip-card { | |
| 3526 | + display: grid !important; | |
| 3527 | + grid-template-columns: 116px minmax(0, 1fr) !important; | |
| 3528 | + align-items: stretch; | |
| 3529 | + gap: 0; | |
| 3530 | + overflow: hidden; | |
| 3531 | + /* Neutralise the Grid/List view toggle so Compact stays compact whether | |
| 3532 | + the visitor is in grid OR list view (list-view forces min-height:240). */ | |
| 3533 | + min-height: 0 !important; | |
| 3534 | + max-height: none !important; | |
| 3535 | + flex-direction: initial !important; | |
| 3536 | + } | |
| 3537 | + .yatra-listing-compact .yatra-trip-card-image { | |
| 3538 | + height: 100% !important; | |
| 3539 | + min-height: 118px !important; | |
| 3540 | + width: auto !important; | |
| 3541 | + min-width: 0 !important; | |
| 3542 | + aspect-ratio: auto !important; | |
| 3543 | + border-radius: 0; | |
| 3544 | + align-self: stretch; | |
| 3545 | + } | |
| 3546 | + /* Keep the image overlays readable on the small thumbnail. */ | |
| 3547 | + .yatra-listing-compact .yatra-discount-badge { | |
| 3548 | + font-size: 0.65rem; | |
| 3549 | + padding: 2px 6px; | |
| 3550 | + } | |
| 3551 | + .yatra-listing-compact .yatra-favorite-btn { | |
| 3552 | + width: 26px; | |
| 3553 | + height: 26px; | |
| 3554 | + } | |
| 3555 | + .yatra-listing-compact .yatra-trip-card-image img { | |
| 3556 | + width: 100% !important; | |
| 3557 | + height: 100% !important; | |
| 3558 | + object-fit: cover; | |
| 3559 | + } | |
| 3560 | + .yatra-listing-compact .yatra-trip-content { | |
| 3561 | + padding: 10px 12px !important; | |
| 3562 | + display: flex; | |
| 3563 | + flex-direction: column; | |
| 3564 | + gap: 6px; | |
| 3565 | + min-width: 0; | |
| 3566 | + } | |
| 3567 | + .yatra-listing-compact .yatra-trip-title { | |
| 3568 | + font-size: 0.95rem; | |
| 3569 | + line-height: 1.3; | |
| 3570 | + margin: 0; | |
| 3571 | + display: -webkit-box; | |
| 3572 | + -webkit-line-clamp: 2; | |
| 3573 | + -webkit-box-orient: vertical; | |
| 3574 | + overflow: hidden; | |
| 3575 | + } | |
| 3576 | + .yatra-listing-compact .yatra-trip-destinations, | |
| 3577 | + .yatra-listing-compact .yatra-trip-card-meta, | |
| 3578 | + .yatra-listing-compact .yatra-trip-short-description, | |
| 3579 | + .yatra-listing-compact .yatra-trip-stats-row, | |
| 3580 | + .yatra-listing-compact .yatra-trip-traveler-types, | |
| 3581 | + .yatra-listing-compact .yatra-trip-activities, | |
| 3582 | + .yatra-listing-compact .yatra-trip-categories-compact, | |
| 3583 | + .yatra-listing-compact .yatra-difficulty-overlay, | |
| 3584 | + .yatra-listing-compact .yatra-group-discount-badge, | |
| 3585 | + .yatra-listing-compact .yatra-trip-listing-dp-urgency { | |
| 3586 | + display: none !important; | |
| 3587 | + } | |
| 3588 | + .yatra-listing-compact .yatra-trip-footer { | |
| 3589 | + margin-top: auto; | |
| 3590 | + display: flex; | |
| 3591 | + /* The base mobile footer is flex-direction:column — force a single row | |
| 3592 | + so price and the button sit side by side in the compact card. */ | |
| 3593 | + flex-direction: row !important; | |
| 3594 | + flex-wrap: nowrap; | |
| 3595 | + align-items: center; | |
| 3596 | + justify-content: space-between; | |
| 3597 | + align-self: stretch; | |
| 3598 | + gap: 8px; | |
| 3599 | + padding: 0 !important; | |
| 3600 | + border: 0 !important; | |
| 3601 | + } | |
| 3602 | + .yatra-listing-compact .yatra-trip-card-price { margin: 0 !important; width: auto !important; align-items: flex-start; } | |
| 3603 | + .yatra-listing-compact .yatra-card-view-btn { flex: 0 0 auto; } | |
| 3604 | + .yatra-listing-compact .yatra-trip-price { font-size: 1rem; } | |
| 3605 | + .yatra-listing-compact .yatra-card-view-btn { | |
| 3606 | + padding: 6px 10px !important; | |
| 3607 | + font-size: 0.8rem; | |
| 3608 | + white-space: nowrap; | |
| 3609 | + } | |
| 3610 | +} | |
| 3611 | + | |
| 3612 | +/* --- Compact on desktop too (>=769px): compact_all only. | |
| 3613 | + Respects the visitor's Grid/List view toggle: | |
| 3614 | + • Grid view → the multi-column grid is kept, cards are just shorter | |
| 3615 | + • List view → compact horizontal rows (list-view supplies the row) | |
| 3616 | + The density trimming (hiding the extra blocks) applies to both. --- */ | |
| 3617 | +@media (min-width: 769px) { | |
| 3618 | + /* Density — identical in grid and list. */ | |
| 3619 | + .yatra-listing-compact--all .yatra-trip-content { | |
| 3620 | + gap: 8px; | |
| 3621 | + min-width: 0; | |
| 3622 | + padding: 14px 16px !important; | |
| 3623 | + } | |
| 3624 | + .yatra-listing-compact--all .yatra-trip-title { | |
| 3625 | + font-size: 1.05rem; | |
| 3626 | + line-height: 1.3; | |
| 3627 | + margin: 0; | |
| 3628 | + display: -webkit-box; | |
| 3629 | + -webkit-line-clamp: 2; | |
| 3630 | + -webkit-box-orient: vertical; | |
| 3631 | + overflow: hidden; | |
| 3632 | + } | |
| 3633 | + .yatra-listing-compact--all .yatra-trip-destinations, | |
| 3634 | + .yatra-listing-compact--all .yatra-trip-card-meta, | |
| 3635 | + .yatra-listing-compact--all .yatra-trip-short-description, | |
| 3636 | + .yatra-listing-compact--all .yatra-trip-stats-row, | |
| 3637 | + .yatra-listing-compact--all .yatra-trip-traveler-types, | |
| 3638 | + .yatra-listing-compact--all .yatra-trip-activities, | |
| 3639 | + .yatra-listing-compact--all .yatra-trip-categories-compact, | |
| 3640 | + .yatra-listing-compact--all .yatra-difficulty-overlay, | |
| 3641 | + .yatra-listing-compact--all .yatra-group-discount-badge, | |
| 3642 | + .yatra-listing-compact--all .yatra-trip-listing-dp-urgency { | |
| 3643 | + display: none !important; | |
| 3644 | + } | |
| 3645 | + .yatra-listing-compact--all .yatra-trip-footer { | |
| 3646 | + margin-top: auto; | |
| 3647 | + display: flex; | |
| 3648 | + flex-direction: row !important; | |
| 3649 | + flex-wrap: nowrap; | |
| 3650 | + align-items: center; | |
| 3651 | + justify-content: space-between; | |
| 3652 | + gap: 12px; | |
| 3653 | + padding-top: 4px !important; | |
| 3654 | + border: 0 !important; | |
| 3655 | + } | |
| 3656 | + .yatra-listing-compact--all .yatra-trip-card-price { margin: 0 !important; width: auto !important; } | |
| 3657 | + .yatra-listing-compact--all .yatra-card-view-btn { flex: 0 0 auto; white-space: nowrap; } | |
| 3658 | + | |
| 3659 | + /* GRID view (DEFAULT) → a shorter vertical card. Grid-agnostic: applies to | |
| 3660 | + every wrapper (archive grid, shortcode/block .yatra-tour-grid, and | |
| 3661 | + .yatra-discount-grid) since none of them except the archive list-view | |
| 3662 | + needs the horizontal row. */ | |
| 3663 | + .yatra-listing-compact--all .yatra-trip-card-image { | |
| 3664 | + height: 160px !important; | |
| 3665 | + aspect-ratio: auto !important; | |
| 3666 | + } | |
| 3667 | + | |
| 3668 | + /* LIST view (archive only) → compact horizontal row overrides the vertical | |
| 3669 | + default. The Grid/List toggle exists only on .yatra-trip-grid, so the | |
| 3670 | + shortcode/block/discount grids always keep the compact vertical card. */ | |
| 3671 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card { | |
| 3672 | + min-height: 0 !important; | |
| 3673 | + max-height: none !important; | |
| 3674 | + } | |
| 3675 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-card-image { | |
| 3676 | + height: 160px !important; | |
| 3677 | + min-height: 0 !important; | |
| 3678 | + max-height: none !important; | |
| 3679 | + aspect-ratio: auto !important; | |
| 3680 | + align-self: stretch; | |
| 3681 | + } | |
| 3682 | + .yatra-listing-compact--all .yatra-trip-grid.list-view .yatra-trip-content { | |
| 3683 | + padding: 16px 18px !important; | |
| 3684 | + justify-content: flex-start; | |
| 3685 | + } | |
| 3686 | +} | |
