:root {
--pqb-primary: #1e4b2f; --pqb-primary-hover: #163a24;
--pqb-primary-fg: #ffffff;
--pqb-bg: #ffffff;
--pqb-fg: #101828;
--pqb-muted: #667085;
--pqb-muted-bg: #f7f8f7;
--pqb-border: #e4e7e4;
--pqb-input: #d0d5d0;
--pqb-ring: rgba(30, 75, 47, .25);
--pqb-destructive: #b42318;
--pqb-destructive-bg: #fef3f2;
--pqb-success: #067647;
--pqb-radius: 12px;
--pqb-radius-sm: 8px;
--pqb-shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .25), 0 8px 16px -8px rgba(16, 24, 40, .12);
--pqb-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--pqb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
} .pqb-overlay [hidden],
.pqb-sticky[hidden],
.pqb-loading[hidden],
.pqb-tray[hidden],
.pqb-step[hidden],
.pqb-error[hidden],
.pqb-back[hidden] {
display: none !important;
} .pqb-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
padding: 16px;
background: rgba(16, 24, 40, .55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.pqb-overlay.is-open {
display: flex;
align-items: center; justify-content: center;
} .pqb-modal {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;  max-height: min(720px, calc(100dvh - 32px));
background: var(--pqb-bg);
border: 1px solid var(--pqb-border);
border-radius: var(--pqb-radius);
box-shadow: var(--pqb-shadow-lg);
overflow: hidden;
font-family: var(--pqb-font-body);
color: var(--pqb-fg);
animation: pqb-in .18s cubic-bezier(.16, 1, .3, 1);
} .pqb-modal.is-wide {
max-width: 860px;
}
@keyframes pqb-in {
from { transform: translateY(10px) scale(.98); opacity: 0; }
to   { transform: translateY(0)    scale(1);   opacity: 1; }
} @media (max-width: 640px) {
.pqb-overlay { padding: 0; }
.pqb-overlay.is-open { align-items: flex-end; }
.pqb-modal,
.pqb-modal.is-wide {
max-width: 100%;
max-height: 94dvh;
border-radius: var(--pqb-radius) var(--pqb-radius) 0 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
} .pqb-head {
display: flex;
flex: 0 0 auto; align-items: center;
gap: 10px;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--pqb-border);
background: var(--pqb-bg);
}
.pqb-head h2 {
flex: 1;
margin: 0;
font-family: var(--pqb-font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: .01em;
color: var(--pqb-primary);
line-height: 1.2;
}
.pqb-back,
.pqb-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: var(--pqb-radius-sm);
background: transparent;
color: var(--pqb-muted);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .15s, color .15s;
}
.pqb-back:hover,
.pqb-close:hover {
background: var(--pqb-muted-bg);
color: var(--pqb-fg);
} .pqb-body {
flex: 1 1 auto;  min-height: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
padding: 20px;
}
.pqb-overlay {
overscroll-behavior: contain;
}
body.pqb-locked {
overflow: hidden;
} .pqb-field {
display: block;
margin-bottom: 14px;
}
.pqb-field > span {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
color: var(--pqb-fg);
}
.pqb-field select,
.pqb-field input {
width: 100%;
height: 44px;
padding: 0 14px;
font-size: 15px;
font-family: var(--pqb-font-body);
color: var(--pqb-fg);
background: var(--pqb-bg);
border: 1px solid var(--pqb-input);
border-radius: var(--pqb-radius-sm);
transition: border-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
}
.pqb-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.pqb-field select:focus,
.pqb-field input:focus {
outline: none;
border-color: var(--pqb-primary);
box-shadow: 0 0 0 3px var(--pqb-ring);
} .pqb-guests {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 16px;
}
@media (min-width: 480px) {
.pqb-guests { grid-template-columns: repeat(3, 1fr); }
}
.pqb-stepper {
display: flex;
align-items: center;
gap: 6px;
height: 56px;
padding: 0 10px;
border: 1px solid var(--pqb-input);
border-radius: var(--pqb-radius-sm);
background: var(--pqb-bg);
}
.pqb-stepper > span {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 500;
color: var(--pqb-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pqb-stepper button {
flex: none;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--pqb-input);
border-radius: 50%;
background: var(--pqb-bg);
color: var(--pqb-fg);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.pqb-stepper button:hover {
border-color: var(--pqb-primary);
background: var(--pqb-muted-bg);
}
.pqb-stepper input {
flex: none;
width: 28px;
border: 0;
padding: 0;
text-align: center;
font-size: 15px;
font-weight: 600;
color: var(--pqb-fg);
background: transparent;
-moz-appearance: textfield;
}
.pqb-stepper input::-webkit-outer-spin-button,
.pqb-stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} .pqb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 20px;
font-size: 15px;
font-weight: 600;
font-family: var(--pqb-font-body);
border: 0;
border-radius: var(--pqb-radius-sm);
cursor: pointer;
transition: background .15s, box-shadow .15s, transform .05s;
white-space: nowrap;
}
.pqb-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--pqb-ring);
}
.pqb-btn:active {
transform: translateY(1px);
}
.pqb-primary {
width: 100%;
color: var(--pqb-primary-fg);
background: var(--pqb-primary);
}
.pqb-primary:hover {
background: var(--pqb-primary-hover);
}
.pqb-primary:disabled {
opacity: .55;
cursor: not-allowed;
}
.pqb-ghost {
width: 100%;
color: var(--pqb-fg);
background: var(--pqb-muted-bg);
border: 1px solid var(--pqb-border);
}
.pqb-ghost:hover {
background: #eef1ee;
} .pqb-error {
margin: 0 0 12px;
padding: 10px 12px;
font-size: 13px;
color: var(--pqb-destructive);
background: var(--pqb-destructive-bg);
border: 1px solid #fecdca;
border-radius: var(--pqb-radius-sm);
}
.pqb-empty {
padding: 32px 12px;
text-align: center;
font-size: 14px;
color: var(--pqb-muted);
}
.pqb-retry {
width: auto;
margin: 8px auto 0;
display: block;
} .pqb-hotel-card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin-bottom: 10px;
padding: 10px;
text-align: left;
font-family: var(--pqb-font-body);
background: var(--pqb-bg);
border: 1px solid var(--pqb-border);
border-radius: var(--pqb-radius);
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
}
.pqb-hotel-card:hover:not(.is-disabled) {
border-color: var(--pqb-primary);
box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.pqb-hotel-card.is-disabled {
opacity: .55;
cursor: not-allowed;
}
.pqb-hotel-card img {
width: 88px;
height: 66px;
object-fit: cover;
border-radius: var(--pqb-radius-sm);
flex: none;
}
.pqb-hotel-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pqb-hotel-info strong {
font-family: var(--pqb-font-display);
font-size: 16px;
font-weight: 600;
color: var(--pqb-fg);
line-height: 1.3;
}
.pqb-loc {
font-size: 13px;
color: var(--pqb-muted);
}
.pqb-price {
font-size: 13px;
font-weight: 600;
color: var(--pqb-primary);
}
.pqb-none {
font-size: 12px;
color: var(--pqb-destructive);
}  .pqb-rooms-meta {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 16px;
}
.pqb-rooms-meta span {
font-family: var(--pqb-font-display);
font-size: 18px;
font-weight: 600;
color: var(--pqb-primary);
line-height: 1.3;
}
.pqb-rooms-meta small {
font-size: 13px;
color: var(--pqb-muted);
}
.pqb-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 720px) {
.pqb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pqb-card {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--pqb-bg);
border: 1px solid var(--pqb-border);
border-radius: var(--pqb-radius);
box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
overflow: hidden;
transition: box-shadow .15s ease, border-color .15s ease;
}
.pqb-card:hover {
border-color: #cfd8d1;
box-shadow: 0 6px 16px -4px rgba(16, 24, 40, .10);
} .pqb-badge {
position: absolute;
top: 10px;
left: 10px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: #7a2e0e;
background: #fff6ed;
border: 1px solid #f9dbaf;
border-radius: 999px;
} .pqb-card-body {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 16px;
}
.pqb-card-title {
margin: 0;
font-family: var(--pqb-font-display);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--pqb-fg);
}
.pqb-card-cap {
margin: -4px 0 0;
font-size: 13px;
color: var(--pqb-muted);
}
.pqb-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.pqb-chips li {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
color: var(--pqb-muted);
background: var(--pqb-muted-bg);
border: 1px solid var(--pqb-border);
border-radius: 999px;
}
.pqb-card-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.pqb-card-field > span {
font-size: 12px;
font-weight: 600;
color: var(--pqb-fg);
}
.pqb-card select {
width: 100%;
height: 40px;
padding: 0 34px 0 12px;
font-size: 14px;
font-family: var(--pqb-font-body);
color: var(--pqb-fg);
background-color: var(--pqb-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid var(--pqb-input);
border-radius: var(--pqb-radius-sm);
appearance: none;
-webkit-appearance: none;
transition: border-color .15s, box-shadow .15s;
}
.pqb-card select:focus {
outline: none;
border-color: var(--pqb-primary);
box-shadow: 0 0 0 3px var(--pqb-ring);
} .pqb-card-foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding: 14px 16px 16px;
background: var(--pqb-muted-bg);
border-top: 1px solid var(--pqb-border);
}
.pqb-card-price {
display: flex;
align-items: baseline;
gap: 6px;
min-height: 22px;
}
.pqb-card-price strong {
font-family: var(--pqb-font-display);
font-size: 19px;
font-weight: 700;
color: var(--pqb-primary);
}
.pqb-card-price small {
font-size: 12px;
color: var(--pqb-muted);
}
.pqb-book.is-added {
background: var(--pqb-success);
border-color: var(--pqb-success);
}
.pqb-card-err {
margin: 0;
padding: 8px 10px;
font-size: 12px;
color: var(--pqb-destructive);
background: var(--pqb-destructive-bg);
border: 1px solid #fecdca;
border-radius: var(--pqb-radius-sm);
} .pqb-card-media {
position: relative;
height: 172px;
background: var(--pqb-muted-bg);
overflow: hidden;
}
.pqb-track {
display: flex;
height: 100%;
transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.pqb-track img {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
.pqb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--pqb-fg);
background: rgba(255, 255, 255, .9);
border: 1px solid var(--pqb-border);
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: opacity .15s;
}
.pqb-card:hover .pqb-nav,
.pqb-nav:focus-visible {
opacity: 1;
} @media (hover: none) {
.pqb-nav { opacity: 1; }
}
.pqb-prev { left: 8px; }
.pqb-next { right: 8px; }
.pqb-dots {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
}
.pqb-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
transition: background .15s, width .15s;
}
.pqb-dots span.is-on {
width: 16px;
border-radius: 999px;
background: #fff;
}
.pqb-tray-note {
margin: 0 0 8px;
padding: 8px 10px;
font-size: 12px;
color: #7a2e0e;
background: #fff6ed;
border: 1px solid #f9dbaf;
border-radius: var(--pqb-radius-sm);
} .pqb-modal :focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--pqb-ring);
border-radius: var(--pqb-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.pqb-modal, .pqb-track { animation: none !important; transition: none !important; }
} .pqb-tray {
flex: 0 0 auto; border-top: 1px solid var(--pqb-border);
padding: 14px 20px 18px;
background: var(--pqb-muted-bg);
}
.pqb-tray-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 13px;
border-bottom: 1px dashed var(--pqb-border);
}
.pqb-tray-name {
flex: 1;
min-width: 0;
font-weight: 600;
color: var(--pqb-fg);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pqb-tray-dates {
color: var(--pqb-muted);
white-space: nowrap;
}
.pqb-tray-price {
font-weight: 600;
color: var(--pqb-primary);
white-space: nowrap;
}
.pqb-tray-x {
flex: none;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--pqb-destructive);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.pqb-tray-x:hover {
background: var(--pqb-destructive-bg);
}
.pqb-tray-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 12px;
}
@media (min-width: 560px) {
.pqb-tray-actions { grid-template-columns: 1fr 1fr; }
}
.pqb-total {
font-weight: 700;
} .pqb-loading {
position: absolute;
inset: 0;
z-index: 5;
display: flex; align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .72);
}
.pqb-loading span {
width: 32px;
height: 32px;
border: 3px solid var(--pqb-border);
border-top-color: var(--pqb-primary);
border-radius: 50%;
animation: pqb-spin .7s linear infinite;
}
@keyframes pqb-spin {
to { transform: rotate(360deg); }
} .pqb-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
display: none;
align-items: center;
gap: 12px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
background: var(--pqb-bg);
border-top: 1px solid var(--pqb-border);
box-shadow: 0 -4px 18px rgba(16, 24, 40, .10);
font-family: var(--pqb-font-body);
}
.pqb-sticky-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--pqb-font-display);
font-size: 15px;
font-weight: 600;
color: var(--pqb-fg);
}
.pqb-sticky .pqb-btn {
width: auto;
flex: none;
padding: 0 22px;
}
@media (max-width: 991px) {
.pqb-sticky { display: flex; }
}