.uhp-hotel-listing-container {max-width: 1200px;margin: 0 auto;padding: 20px}.uhp-hotel-filters {background: #f8f9fa;padding: 20px;border-radius: 8px;margin-bottom: 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.05)}.uhp-search-box {display: flex;margin-bottom: 15px}.uhp-search-box input {flex: 1;padding: 10px 15px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;font-size: 16px}.uhp-search-box button {padding: 0 15px;background: #2563eb;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer}.uhp-star-filter {display: flex;align-items: center;flex-wrap: wrap;gap: 10px;margin-bottom: 15px}.filter-label {font-weight: 600;margin-right: 5px}.star-checkbox {display: flex;align-items: center;cursor: pointer}.star-checkbox input {margin-right: 5px}.star-rating {color: #ffb900}.uhp-city-filter {display: flex;align-items: center;gap: 10px}.uhp-city-filter select {padding: 8px 12px;border-radius: 4px;border: 1px solid #ddd}.uhp-hotel-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 20px;margin-bottom: 30px}.uhp-hotel-card {background: white;border-radius: 8px;overflow: hidden;box-shadow: 0 3px 10px rgba(0,0,0,0.1);transition: transform 0.3s ease, box-shadow 0.3s ease}.uhp-hotel-card:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0,0,0,0.15)}.uhp-hotel-image {position: relative;height: 200px;overflow: hidden}.uhp-hotel-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease}.uhp-hotel-card:hover .uhp-hotel-image img {transform: scale(1.05)}.uhp-hotel-rating {position: absolute;bottom: 10px;left: 10px;background: rgba(0,0,0,0.7);color: #ffb900;padding: 5px 10px;border-radius: 20px;font-size: 14px}.uhp-hotel-info {padding: 15px}.uhp-hotel-info h3 {margin: 0 0 10px;font-size: 18px;color: #333}.uhp-hotel-location {color: #666;font-size: 14px;margin-bottom: 10px;display: flex;align-items: center;gap: 5px}.uhp-hotel-map-link {margin-bottom: 15px}.uhp-hotel-map-link a {color: #2563eb;text-decoration: none;font-size: 14px;display: flex;align-items: center;gap: 5px}.uhp-hotel-map-link a:hover {text-decoration: underline}.uhp-view-detail-btn {width: 100%;padding: 10px;background: #2563eb;color: white;border: none;border-radius: 4px;cursor: pointer;font-weight: 600;transition: background 0.3s ease}.uhp-view-detail-btn:hover {background: #1d4ed8}.uhp-load-more-container {text-align: center;margin: 30px 0}.uhp-load-more-btn {padding: 12px 25px;background: #2563eb;color: white;border: none;border-radius: 4px;cursor: pointer;font-weight: 600;transition: all 0.3s ease}.uhp-load-more-btn:hover {background: #1d4ed8;transform: translateY(-2px)}.uhp-load-more-btn:disabled {background: #ccc;cursor: not-allowed;transform: none}.uhp-no-results {text-align: center;grid-column: 1 / -1;padding: 40px;color: #666;font-size: 18px}.uhp-modal {display: none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);overflow-y: auto}.uhp-modal-content {background-color: #fff;margin: 50px auto;padding: 30px;border-radius: 8px;max-width: 900px;width: 90%;position: relative;box-shadow: 0 5px 30px rgba(0,0,0,0.3)}.uhp-close-modal {position: absolute;top: 15px;right: 20px;font-size: 28px;font-weight: bold;color: #aaa;cursor: pointer;transition: color 0.3s}.uhp-close-modal:hover {color: #333}.uhp-hotel-detail {color: #333}.uhp-detail-header h2 {margin: 0 0 10px;color: #222}.uhp-hotel-meta {display: flex;align-items: center;gap: 15px;margin-bottom: 20px}.uhp-hotel-meta .uhp-hotel-rating {color: #ffb900;font-size: 16px}.uhp-hotel-meta .uhp-hotel-location {color: #666;font-size: 15px}.uhp-detail-gallery {margin-bottom: 30px}.uhp-main-photo {height: 400px;margin-bottom: 10px;overflow: hidden;border-radius: 6px}.uhp-main-photo img {width: 100%;height: 100%;object-fit: cover}.uhp-thumbnails {display: flex;gap: 10px;overflow-x: auto;padding-bottom: 10px}.uhp-thumbnail {width: 80px;height: 60px;object-fit: cover;border-radius: 4px;cursor: pointer;opacity: 0.7;transition: all 0.3s ease;border: 2px solid transparent}.uhp-thumbnail:hover, .uhp-thumbnail.active {opacity: 1;border-color: #2563eb}.uhp-detail-section {margin-bottom: 25px;border-bottom: 1px solid #eee;padding-bottom: 20px}.uhp-detail-section:last-child {border-bottom: none}.uhp-detail-section h3 {margin: 0 0 15px;font-size: 18px;display: flex;align-items: center;gap: 8px;color: #444}.uhp-detail-content p {margin: 0 0 15px;line-height: 1.6;color: #555}.uhp-map-container {margin-bottom: 15px;border-radius: 6px;overflow: hidden}.uhp-map-link {display: inline-flex;align-items: center;gap: 5px;color: #2563eb;text-decoration: none}.uhp-map-link:hover {text-decoration: underline}@media (max-width: 768px) {.uhp-hotel-grid {grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))}.uhp-modal-content {padding: 20px;margin: 20px auto}.uhp-main-photo {height: 250px}}body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;color: #333;line-height: 1.5;background-color: #f5f7fa}.container {width: 100%;max-width: 1280px;margin: 0 auto;padding: 2rem 1rem}.breadcrumb {display: flex;flex-wrap: wrap;gap: 0.5rem;font-size: 0.875rem;color: #6b7280;margin-bottom: 1.5rem}.breadcrumb a {color: #3b82f6;text-decoration: none;transition: color 0.2s}.breadcrumb a:hover {color: #2563eb;text-decoration: underline}.card {background-color: white;border-radius: 1rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);overflow: hidden;margin-bottom: 1.5rem;transition: box-shadow 0.3s ease}.card:hover {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.package-header {position: relative}.package-header img {width: 100%;height: 300px;object-fit: cover}@media (min-width: 768px) {.package-header img {height: 400px}}.package-badge {position: absolute;top: 1rem;left: 1rem;display: flex;flex-direction: column;gap: 0.5rem}.badge {display: inline-block;padding: 0.25rem 0.75rem;border-radius: 9999px;font-size: 0.75rem;font-weight: 600;color: white;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)}.badge-umroh {background-color: #10b981}.badge-haji {background-color: #ef4444}.badge-promo {background-color: #d3a641}.package-content {padding: 1.5rem}.package-title {font-size: 1.5rem;font-weight: 700;color: #1f2937;margin-bottom: 1rem}@media (min-width: 768px) {.package-title {font-size: 1.875rem}}.package-info {display: flex;flex-wrap: wrap;gap: 1.5rem;margin-bottom: 1.5rem}.info-item {display: flex;align-items: center;gap: 0.5rem}.info-icon {width: 2.5rem;height: 2.5rem;border-radius: 9999px;background-color: #dbeafe;display: flex;align-items: center;justify-content: center;color: #2563eb}.info-text {display: flex;flex-direction: column}.info-label {font-size: 0.875rem;color: #6b7280}.info-value {font-weight: 600}.section {margin-bottom: 1.5rem}.section-title {font-size: 1.25rem;font-weight: 700;color: #1f2937;margin-bottom: 1rem;display: flex;align-items: center;gap: 0.5rem}.section-title i {color: #2563eb}.hotel-swiper {margin-bottom: 1.5rem}.hotel-card {background-color: #f9fafb;border-radius: 0.75rem;overflow: hidden}.hotel-card img {width: 100%;height: 12rem;object-fit: cover}.hotel-card-content {padding: 1rem}.hotel-name {font-weight: 600;font-size: 1.125rem;margin-bottom: 0.5rem}.hotel-stars {display: flex;gap: 0.25rem;color: #d3a641;margin-bottom: 0.5rem}.hotel-city {color: #6b7280}.airline-info {display: flex;align-items: center;gap: 1rem;background-color: #f9fafb;padding: 1rem;border-radius: 0.75rem}.airline-logo {width: 4rem;height: 4rem;object-fit: contain}.airline-icon {width: 4rem;height: 4rem;border-radius: 9999px;background-color: #dbeafe;display: flex;align-items: center;justify-content: center;color: #2563eb;font-size: 1.5rem}.airline-name {font-weight: 600;font-size: 1.125rem}.airline-type {color: #6b7280}.calculator-header {background: linear-gradient(to right, #2563eb, #1d4ed8);color: white;padding: 1.25rem}.calculator-title {font-size: 1.25rem;font-weight: 700;margin-bottom: 0.25rem}.calculator-subtitle {font-size: 0.875rem;color: #bfdbfe;opacity: 0.9}.calculator-content {padding: 1.25rem}.room-option {border: 1px solid #e5e7eb;border-radius: 0.75rem;overflow: hidden;margin-bottom: 0.75rem;transition: all 0.2s}.room-option.active {border-color: #3b82f6;box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06)}.room-option-header {width: 100%;text-align: left;padding: 0.75rem 1rem;display: flex;justify-content: space-between;align-items: center;transition: all 0.2s}.room-option.active .room-option-header {background-color: #eff6ff}.room-option-content {padding: 0 1rem 1rem}.toggle-icon {transition: transform 0.2s}.room-option.active .toggle-icon {transform: rotate(180deg)}.qty-control {margin-bottom: 0.75rem}.qty-label {display: block;font-size: 0.875rem;font-weight: 500;color: #4b5563;margin-bottom: 0.25rem}.qty-buttons {display: flex;align-items: center}.qty-btn {display: flex;align-items: center;justify-content: center;width: 2rem;height: 2rem;border-radius: 9999px;transition: all 0.2s}.qty-btn.minus {background-color: #f3f4f6;color: #4b5563}.qty-btn.minus:hover {background-color: #e5e7eb}.qty-btn.plus {background-color: #dbeafe;color: #2563eb}.qty-btn.plus:hover {background-color: #bfdbfe}.qty-input {border: 0;background-color: transparent;text-align: center;width: 3rem;font-weight: 500}.qty-input:focus {outline: none;box-shadow: none}.child-age-inputs {margin-top: 0.75rem;padding: 0.75rem;background-color: #eff6ff;border-radius: 0.5rem;display: flex;flex-direction: column;gap: 0.5rem}.child-age-input {display: flex;justify-content: space-between;align-items: center}.child-age-input label {font-size: 0.875rem}.child-age-input input {width: 3.75rem;text-align: center;border: 1px solid #d1d5db;border-radius: 0.375rem;padding: 0.25rem 0.5rem}.child-age-input input:focus {outline: none;border-color: #3b82f6;box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)}.discount-control {margin-bottom: 0.75rem}.discount-label {display: block;font-size: 0.875rem;font-weight: 500;color: #4b5563;margin-bottom: 0.25rem}.discount-select {width: 100%;border: 1px solid #d1d5db;border-radius: 0.375rem;padding: 0.5rem 0.75rem;font-size: 0.875rem;color: #1f2937}.discount-select:focus {outline: none;border-color: #3b82f6;box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3)}.price-total-section {margin-top: 1rem;padding: 0.75rem;background-color: #eff6ff;border-radius: 0.5rem;border: 1px solid #dbeafe}.price-total-label {font-weight: 600;color: #1e40af}.price-total {font-size: 1.125rem;font-weight: 700;color: #1e40af}.grand-total-section {padding: 1.25rem;border-top: 1px solid #e5e7eb;background-color: #f9fafb}.grand-total-box {padding: 0.75rem;background-color: #dbeafe;border-radius: 0.5rem;margin-bottom: 1rem}.grand-total-label {font-weight: 600;color: #1e40af}.grand-total {font-size: 1.25rem;font-weight: 700;color: #1e40af}.cta-section {padding: 1.25rem}.cta-button {display: flex;align-items: center;justify-content: center;gap: 0.5rem;width: 100%;padding: 0.75rem 1rem;border-radius: 0.75rem;font-weight: 500;transition: all 0.2s;margin-bottom: 0.75rem;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.cta-button:hover {transform: translateY(-2px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)}.cta-whatsapp {background-color: #25D366;color: white}.cta-whatsapp:hover {background-color: #20BD5A}.cta-booking {background-color: #2563eb;color: white}.cta-booking:hover {background-color: #1d4ed8}.cta-help {text-align: center;font-size: 0.875rem;color: #6b7280;margin-top: 1rem}.cta-phone {color: #2563eb;font-weight: 600;text-decoration: none}.cta-phone:hover {text-decoration: underline}@media (min-width: 1024px) {.content-layout {display: flex;gap: 2rem}.content-main {width: 66.666667%}.content-sidebar {width: 33.333333%}.sidebar-sticky {position: sticky;top: 1.5rem}}.custom-scrollbar {scrollbar-width: thin;scrollbar-color: rgba(59, 130, 246, 0.5) rgba(229, 231, 235, 0.5)}.custom-scrollbar::-webkit-scrollbar {width: 6px}.custom-scrollbar::-webkit-scrollbar-track {background: rgba(229, 231, 235, 0.5);border-radius: 10px}.custom-scrollbar::-webkit-scrollbar-thumb {background-color: rgba(59, 130, 246, 0.5);border-radius: 10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover {background-color: rgba(59, 130, 246, 0.7)}.swiper-pagination-bullet {width: 8px;height: 8px;background-color: #d1d5db;opacity: 1}.swiper-pagination-bullet-active {background-color: #3b82f6}.prose {color: #374151;max-width: 65ch}.prose p {margin-top: 1.25em;margin-bottom: 1.25em}.prose strong {font-weight: 600;color: #111827}.prose a {color: #2563eb;text-decoration: underline;font-weight: 500}.prose h2 {color: #111827;font-weight: 700;font-size: 1.5em;margin-top: 2em;margin-bottom: 1em;line-height: 1.3333333}.prose h3 {color: #111827;font-weight: 600;font-size: 1.25em;margin-top: 1.6em;margin-bottom: 0.6em;line-height: 1.6}.prose ul {margin-top: 1.25em;margin-bottom: 1.25em;padding-left: 1.625em}.prose li {margin-top: 0.5em;margin-bottom: 0.5em}.prose > ul > li p {margin-top: 0.75em;margin-bottom: 0.75em}.prose img {margin-top: 2em;margin-bottom: 2em}.prose hr {border-color: #e5e7eb;margin-top: 3em;margin-bottom: 3em}@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }}.animate-fade-in {animation: fadeIn 0.5s ease-out}@keyframes slideUp {from { transform: translateY(20px); opacity: 0; }to { transform: translateY(0); opacity: 1; }}.animate-slide-up {animation: slideUp 0.5s ease-out}@media (max-width: 640px) {.package-info {gap: 1rem}.info-icon {width: 2rem;height: 2rem}.package-content {padding: 1rem}.calculator-header, .calculator-content, .grand-total-section, .cta-section {padding: 1rem}}