/* Shared design system — Quinta do Lago captive portal */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

:root {
   --green-deep: #1d2e1f;
   --green-mid: #2e4a2f;
   --green-pale: #d4e6d5;
   --cream: #faf8f4;
   --ivory: #f3efe8;
   --gold: #b8965a;
   --gold-text: #6f571f;
   --charcoal: #1a1a1a;
   --muted: #686868;
   --border: #d2cdc6;
   --danger: #c0392b;
   --radius: 2px;
}

body {
   font-family: 'Jost', sans-serif;
   font-weight: 300;
   background: var(--cream);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   padding: 40px 20px 30px;
}

main {
   flex: 1 0 0%;
}

nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   background: white;
   border-bottom: 1px solid var(--border);
   padding: 14px 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.nav-logo {
   display: flex;
   align-items: center;
}

/* full horizontal wordmark on desktop; compact circular mark on mobile (swapped below) */
.nav-logo-full,
.nav-logo-mark {
   width: auto;
}

.nav-logo-full {
   height: 38px;
   display: block;
}

.nav-logo-mark {
   height: 34px;
   display: none;
   color: var(--green-deep);
}

.nav-right {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 10px 20px;
}

.btn-nav {
   width: auto;
   padding: 10px 18px;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--charcoal);
   background: white;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all 0.18s;
}

.btn-nav:hover {
   border-color: var(--green-mid);
   color: var(--green-mid);
}

.lang-selector {
   display: flex;
   align-items: center;
   gap: 4px;
   background: var(--ivory);
   border: 1px solid var(--border);
   border-radius: 3px;
   padding: 4px;
}

.lang-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 14px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-family: 'Jost', sans-serif;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   border-radius: 2px;
   transition: all 0.18s;
}

.lang-btn.active {
   background: white;
   color: var(--green-deep);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.lang-btn:hover:not(.active) {
   color: var(--charcoal);
}

/* same faded, inert state as a disabled dialog button */
.lang-btn:disabled {
   opacity: 0.5;
   pointer-events: none;
}

.user-menu {
   position: relative;
}

.avatar-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: none;
   cursor: pointer;
   background: var(--green-deep);
   color: white;
   font-family: 'Jost', sans-serif;
   font-size: 14px;
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: box-shadow 0.18s;
   margin-left: 10px;
}

.avatar-btn:hover,
.avatar-btn[aria-expanded="true"] {
   box-shadow: 0 0 0 3px var(--green-pale);
}

.user-dropdown {
   position: absolute;
   top: calc(100% + 20px);
   right: 0;
   min-width: 220px;
   background: white;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
   padding: 14px;
   z-index: 200;
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.2s ease, transform 0.2s ease;
}

/* visual closed state, toggled by JS; kept separate from [hidden] so the fade
   has a rendered starting frame to transition from (display:none can't animate) */
.user-dropdown.is-closed {
   opacity: 0;
   transform: translateY(-8px);
   pointer-events: none;
}

/* JS only sets [hidden] once .is-closed has finished fading out */
.user-dropdown[hidden] {
   display: none;
}
.user-email {
   font-size: 14px;
   color: var(--charcoal);
   word-break: break-all;
   padding: 2px 4px 10px;
}

.dropdown-divider {
   height: 1px;
   background: var(--border);
   margin: 0 -4px 10px;
}

.dropdown-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 4px;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   text-decoration: none;
   border-radius: 2px;
   transition: color 0.18s;
}

.dropdown-item:hover {
   color: var(--danger);
}

.dropdown-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
}

.btn {
   width: 100%;
   padding: 16px;
   border: none;
   cursor: pointer;
   font-family: 'Jost', sans-serif;
   font-size: 13px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 500;
   transition: all 0.2s;
   border-radius: var(--radius);
}

/* Table-row scale — used by the desk actions and the agreement buttons on both pages */
.btn-sm {
   width: auto;
   padding: 8px 14px;
   font-size: 12px;
   letter-spacing: 0.1em;
}

/* Neutral outline button — distinct from the red/green capture/release actions */
.btn-ghost {
   width: auto;
   background: white;
   border: 1px solid var(--border);
   color: var(--muted);
   text-decoration: none;
   display: inline-block;
}

.btn-ghost:hover {
   border-color: var(--green-mid);
   color: var(--green-mid);
}

.btn-confirm {
   background: var(--green-deep);
   color: white;
}

.btn-confirm:hover:not(:disabled) {
   background: var(--green-mid);
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(29, 46, 31, 0.25);
}

.btn-confirm:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.btn-capture {
   background: white;
   border: 1px solid var(--danger);
   color: var(--danger);
}

.btn-capture:hover {
   background: #fdf0ee;
}

.btn-release {
   background: white;
   border: 1px solid var(--green-mid);
   color: var(--green-mid);
}

.btn-release:hover {
   background: #f0f7f0;
}

/* Filled variants — dialog confirm buttons only (table row actions stay outlined above) */
.btn-dlg-danger {
   background: var(--danger);
   border: 1px solid var(--danger);
   color: white;
}

.btn-dlg-danger:hover {
   background: #a3301f;
   border-color: #a3301f;
}

.btn-dlg-primary {
   background: var(--green-mid);
   border: 1px solid var(--green-mid);
   color: white;
}

.btn-dlg-primary:hover {
   background: var(--green-deep);
   border-color: var(--green-deep);
}

/* e.g. the agreement's Print until the sheet has loaded; no hover response while waiting */
.btn-dlg:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

.spinner {
   display: inline-block;
   width: 12px;
   height: 12px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: white;
   border-radius: 50%;
   animation: spin 0.6s linear infinite;
   vertical-align: middle;
   margin-right: 8px;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

/* status chip — shared by the Pro Desk holds table and the checkout recent-holds list */
.chip {
   display: inline-block;
   padding: 3px 10px;
   font-size: 12px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   font-weight: 500;
   border: 1px solid;
   border-radius: 2px;
   min-width: 102px;
   text-align: center;
}
/* Held is the only FILLED chip — filled = still open and needs a decision, outlined = finished.
   The distinction is the fill, not the hue, so it survives Held and Released both being green. */
.chip.active     { color: #fff; border-color: var(--green-mid); background: var(--green-mid); }
.chip.captured   { color: var(--danger); border-color: #f5c6c0; background: #fdf0ee; }
.chip.released   { color: var(--green-mid); border-color: #c8e6c9; background: #f0f7f0; }
.chip.expired    { color: var(--muted); border-color: var(--border); background: var(--ivory); }
.chip.incomplete { color: var(--muted); border-color: var(--border); background: var(--ivory); }

/* Confirmation modal — plain overlay div (no native <dialog>), animated open/close via a JS-driven
   class; shared by every page (markup lives once in _footer.php, driver in modal.js) */
.modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(29,46,31,0.45);
   transition: background 0.22s ease;
}

/* visual closed state, toggled by JS; kept separate from [hidden] so the fade
   has a rendered starting frame to transition from (display:none can't animate) */
.modal-overlay.is-closed {
   background: rgba(29,46,31,0);
   pointer-events: none;
}

/* JS only sets [hidden] once .is-closed has finished fading out */
.modal-overlay[hidden] {
   display: none;
}

.modal {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: white;
   box-shadow: 0 30px 80px rgba(0,0,0,0.25);
   padding: 32px;
   width: min(440px, calc(100vw - 40px));
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.22s ease, transform 0.22s ease;
}

.modal-overlay.is-closed .modal {
   opacity: 0;
   transform: translateY(14px);
}

.dlg-title {
   font-family: 'Playfair Display', serif;
   font-size: 24px;
   color: var(--charcoal);
   margin-bottom: 10px;
}

.dlg-body {
   font-size: 16px;
   color: var(--muted);
   line-height: 1.5;
   margin-bottom: 26px;
}

/* document-viewer variant (agreement preview): wide enough for the A4 sheet, frame fills the
   height; the X sits alone in the top-right corner and Print at the bottom right — opposite ends */
/* fills the overlay's height (its 20px padding each side); the frame takes whatever the title and
   toolbar leave, so a wrapped title or toolbar on a phone never pushes the modal off-screen */
.modal.modal-doc {
   position: relative;
   width: min(900px, calc(100vw - 40px));
   height: calc(100vh - 40px);
   height: calc(100dvh - 40px);
   display: flex;
   flex-direction: column;
}

.modal-doc .dlg-title {
   margin-bottom: 16px;
   padding-right: 40px; /* clear of the X */
}

/* Print lives in the toolbar above the frame, so the actions row below holds only the absolute X */
.modal-doc .dlg-body {
   margin-bottom: 0;
   flex: 1;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

/* natural width in the toolbar, not the stretched bar button of the confirm dialogs */
.modal-doc .btn-dlg-primary {
   flex: none;
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.modal-doc .btn-dlg-primary svg {
   width: 16px;
   height: 16px;
}

.modal-doc .btn-dlg-cancel {
   position: absolute;
   top: 6px;
   right: 5px;
   width: 40px;
   height: 40px;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--muted);
   transition: background 0.15s ease, color 0.15s ease;
}

/* a visible hit area on hover, so it is clear what is about to be clicked */
.modal-doc .btn-dlg-cancel:hover {
   background: rgba(0, 0, 0, 0.06);
   color: var(--charcoal);
}

.modal-doc .btn-dlg-cancel svg {
   width: 30px;
   height: 30px;
}

/* document tabs (Agreement / Terms), the terms' EN/PT choice — same segmented control as the nav
   toggle — then Print at the far right, so it reads as the action, not a third toggle */
.doc-tools {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
}

.doc-tools .btn-dlg-primary {
   margin-left: auto; /* far right, apart from the two toggles */
   padding-block: 10px; /* 40px tall, level with the toggles */
}

.doc-frame {
   display: block;
   width: 100%;
   flex: 1;
   min-height: 0;
   border: 1px solid var(--border);
   background: var(--cream);
}

/* explicit display would otherwise defeat the hidden attribute */
.doc-frame[hidden] { display: none; }

/* any open dialog freezes the page behind it; the kept gutter stops the layout jumping sideways
   when the scrollbar disappears */
html.is-modal-open {
   overflow: hidden;
   scrollbar-gutter: stable;
}

.dlg-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
}

.dlg-actions .btn-dlg-danger,
.dlg-actions .btn-dlg-primary,
.dlg-actions .btn-confirm {
   flex: 1 0 0%;
}

.btn-dlg {
   width: auto;
   padding: 11px 22px;
   font-size: 12px;
}

.btn-dlg-cancel { background: white; border: 1px solid #c8c3bb; color: var(--charcoal); }
.btn-dlg-cancel:hover { border-color: var(--charcoal); }

footer {
   margin-top: 24px;
   text-align: center;
   max-width: 960px;
   width: 100%;
   padding: 0 20px 0px;
   margin-left: auto;
   margin-right: auto;
}

footer p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.9;
   font-weight: 300;
}

footer a {
   color: var(--muted);
   text-decoration: underline;
   text-underline-offset: 3px;
}

footer a:hover {
   color: var(--green-mid);
}

.footer-badges {
   margin-top: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
}

.footer-badge {
   font-size: 12px;
   color: var(--muted);
   letter-spacing: 0.1em;
   display: flex;
   align-items: center;
   gap: 5px;
}

@media (max-width: 680px) {
   nav {
      padding: 12px 20px;
   }

   /* swap the wide wordmark for the compact mark so the right-side controls fit on one row */
   .nav-logo-full {
      display: none;
   }

   .nav-logo-mark {
      display: block;
   }

   /* tighter gaps keep New Rental + language + avatar on a single line down to ~340px */
   .nav-right {
      gap: 8px 10px;
   }

   .avatar-btn {
      margin-left: 0;
   }

   /* the two toggles + Print no longer fit one row — Print takes its own full-width row */
   .doc-tools .btn-dlg-primary {
      flex-basis: 100%;
      justify-content: center;
      margin-left: 0;
   }
}

@media (max-width: 480px) {

   body {
      padding: 40px 16px 30px;
   }
   /* shrink the header controls on small phones to reclaim horizontal space */
   .btn-nav {
      padding: 8px 12px;
      font-size: 11px;
   }

   .lang-btn {
      padding: 5px 10px;
      font-size: 11px;
   }

   .avatar-btn {
      width: 32px;
      height: 32px;
      font-size: 13px;
   }

   .modal {
          padding: 22px;
   }

   /* long PT terms title would take 3 lines at 24px — room the document frame needs */
   .modal-doc .dlg-title {
      font-size: 20px;
      margin-bottom: 12px;
   }
}