/* =========================================
   PRICING MODAL BADGE
========================================= */

.pricing-modal-badge {
    height: 40px;
    margin: 0;
    padding: 0 19px;
    border-radius: 50px;
    white-space: nowrap;
    max-width: calc(100% - 55px);
}

/* =========================================
   CYAN PULSING DOT
========================================= */

.pricing-modal-badge > span:first-child {
    display: inline-block;
    min-width: 11px;
}

/* Expanding pulse ring */

/* =========================================
   DOT PULSE ANIMATION
========================================= */

.pricing-modal-header .pricing-modal-close {
    transition: background 0.3s ease, border-color 0.3s ease;
}





.pricing-card-modal table {
  margin-bottom: 0 !important;
}

/* =========================
   PRICING TABLE
========================= */
/* The visible frame of the pricing table section sits on
   the .pricing-card-modal wrapper, exactly as before.
   Inside it, every service row is its OWN table, so each
   row's column widths and paddings are fully independent
   of every other row - on desktop, tablet and mobile. */
.pricing-modal .pricing-card-modal {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 4px;
  overflow: hidden;
}

.pricing-modal .pricing-card-modal:hover {
  background: rgba(38, 198, 249, 0.01);
  border: 1px solid rgba(38, 198, 249, 0.55);
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.25);
}

.pricing-modal table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  overflow: visible;
}

/* Only the overlay itself keeps overscroll contain.
   .pricing-card-modal must NOT have it: the table frame
   sits on it with overflow hidden, which makes it a
   scroll container, and "contain" then traps the mouse
   wheel over the table - the scroll never reaches the
   modal box. Without it, wheel scroll over the table
   chains up to the modal and scrolls from anywhere. */
.pricing-modal [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.pricing-modal th {
  padding: 1px;
  text-align: left;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box;
  background: transparent;
  overflow-wrap: anywhere;
}


.pricing-modal th:hover,
.pricing-modal td:hover {
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
}

.pricing-modal td {
  padding: 1px;
  text-align: left;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box;
  background: transparent;
  overflow-wrap: anywhere;
  height: 48px;
  vertical-align: middle;
}

.pricing-modal tr {
  display: table-row;
}

/* Center regular service checkboxes */
.pricing-modal tr:not(.random-row) > td:first-child {
  vertical-align: middle !important;
  text-align: center !important;
}

.pricing-modal tr:not(.random-row) > td:first-child input[type="checkbox"] {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 0;
}



/* =========================================
   PER-ROW COLUMN CONTROL - DESKTOP / DEFAULT
   Every service row has its own block below, and
   inside each block every column has its own rule:
   set that column's width and padding there.
   Every row is its own table, so no row depends on
   any other row: a width or padding written here
   changes only this row. Keep each row's five
   widths totalling 100%.
========================================= */
/* --- Figma row --- */
.pricing-modal tr.figma-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.figma-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.figma-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.figma-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.figma-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Logo row --- */
.pricing-modal tr.logo-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.logo-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.logo-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.logo-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.logo-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- WordPress row --- */
.pricing-modal tr.wordpress-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.wordpress-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.wordpress-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.wordpress-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.wordpress-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Lottie row --- */
.pricing-modal tr.lottie-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.lottie-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.lottie-row > td:nth-child(3) {
  width: 57%;
  padding: 1px;
}

.pricing-modal tr.lottie-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Signature row --- */
.pricing-modal tr.signature-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.signature-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.signature-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.signature-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.signature-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Brand video row --- */
.pricing-modal tr.brand-video-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.brand-video-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.brand-video-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.brand-video-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.brand-video-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Motion row --- */
.pricing-modal tr.motion-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.motion-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.motion-row > td:nth-child(3) {
  width: 31%;
  padding: 1px;
}

.pricing-modal tr.motion-row > td:nth-child(4) {
  width: 26%;
  padding: 1px;
}

.pricing-modal tr.motion-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}


/* --- Random row --- */
.pricing-modal tr.random-row > td:nth-child(1) {
  width: 8%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.random-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(3) {
  width: 47%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(4) {
  width: 10%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(5) {
  width: 10%;
  padding: 1px;
  white-space: nowrap;
}




/* =========================
   CHECKBOXES
========================= */
.pricing-modal input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border:1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  transition: 0.3s ease;
}

.pricing-modal input[type="checkbox"]:hover {
  background: rgba(38, 198, 249, 0.18) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
  transform: scale(1.12);
}

/* WebLodge logo checkmark */
.pricing-modal input[type="checkbox"]:checked {
  background: rgba(38, 198, 249, 0.18) !important;
  background-image: url("https://www.weblodge.agency/wp-content/uploads/2026/10/Use-as-check-box.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border-color: rgba(38, 198, 249, 0.55) !important;
}

.pricing-modal input[type="checkbox"]:checked::after {
  content: none !important;
  display: none !important;
}






















/* =========================================
   WEBLODGE CUSTOM PRICING DROPDOWNS
========================================= */

.wla-custom-dropdown {
    position: relative;
    width: 100%;
    min-width: 0;
    font-family: inherit;
}

.pricing-modal tr.lottie-row > td:nth-child(3) .wla-custom-dropdown {
  width: 50%;
  margin: 0 auto;
}

/* Visible dropdown button */
.wla-custom-dropdown__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 0 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.wla-custom-dropdown__trigger:hover,
.wla-custom-dropdown__trigger[aria-expanded="true"] {
    border-color: rgba(38, 198, 249, 0.65);
    background: rgba(38, 198, 249, 0.08);
    box-shadow: 0 0 15px rgba(38, 198, 249, 0.12);
}

.wla-custom-dropdown__trigger:focus-visible {
    outline: 2px solid #26c6f9;
    outline-offset: 2px;
}

.wla-custom-dropdown__trigger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.wla-custom-dropdown__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Custom arrow */
.wla-custom-dropdown__arrow {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 1.5px solid #26c6f9;
    border-bottom: 1.5px solid #26c6f9;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s ease;
}

.wla-custom-dropdown__trigger[aria-expanded="true"]
.wla-custom-dropdown__arrow {
    transform: translateY(2px) rotate(225deg);
}

/* Keep original select in the DOM for your existing pricing JS */
.wla-native-select-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}

/* Dropdown menu is placed outside the modal to avoid clipping */
.wla-custom-dropdown-menu {
    position: fixed;
    /* v50 (2026-11-12): the script sets the menu's width to the
       trigger's exact width; with border-box the padding and border
       stay INSIDE that width, so the menu is exactly as wide as the
       trigger — as on WordPress, where the theme's global border-box
       did this. Before, the menu rendered 12px wider (5px padding
       on both sides + 1px borders added outside the set width). */
    box-sizing: border-box;
    z-index: 2147483000;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 300px;
    padding: 5px;
    border: 1px solid rgba(38, 198, 249, 0.55);
    border-radius: 1px;
    background: #170154;
    box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    scrollbar-width: thin;
    scrollbar-color: rgba(38, 198, 249, 0.6) transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.wla-custom-dropdown-menu[hidden] {
    display: none !important;
}

/* Individual options */
.wla-custom-dropdown__option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 8px 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

/* The custom hover color */
.wla-custom-dropdown__option:hover,
.wla-custom-dropdown__option:focus-visible {
    background: rgba(38, 198, 249, 0.18);
    color: #26c6f9;
    outline: none;
}

/* Currently selected option */
.wla-custom-dropdown__option[aria-selected="true"] {
    background: rgba(38, 198, 249, 0.12);
    color: #26c6f9;
}

/* Disabled options */
.wla-custom-dropdown__option:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .wla-custom-dropdown__trigger,
    .wla-custom-dropdown__arrow,
    .wla-custom-dropdown__option {
        transition: none;
    }
}








/* Reset the trigger appearance immediately after selection */
.wla-custom-dropdown__trigger.wla-dropdown-reset,
.wla-custom-dropdown__trigger.wla-dropdown-reset:hover,
.wla-custom-dropdown__trigger.wla-dropdown-reset:focus,
.wla-custom-dropdown__trigger.wla-dropdown-reset:focus-visible {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    outline: none !important;
}



/* =========================================
   KEEP MODAL AND TABLE HOVER WHILE DROPDOWN
   MENU IS OPEN
========================================= */

.pricing-modal-content.wla-dropdown-hover {
    border-color: rgba(38, 198, 249, 0.65) !important;
    box-shadow: 0 0 15px rgba(38, 198, 249, 0.12) !important;
}

.pricing-modal table.wla-dropdown-hover {
    border-color: rgba(38, 198, 249, 0.65) !important;
    box-shadow: 0 0 15px rgba(38, 198, 249, 0.12) !important;
}

.pricing-modal table td.wla-dropdown-hover {
    border-color: rgba(38, 198, 249, 0.65) !important;
}

/* Keep disabled custom dropdowns blurred with their service row. */
.wla-custom-dropdown.inactive {
    filter: blur(3px);
    opacity: 0.5;
}























/* =========================================
   RANDOM SERVICE - DESKTOP / DEFAULT
   The random row is now a normal tr with five td
   cells, exactly like the other service rows - no
   container cell, no grid. Its column widths and
   cell paddings are in the per-row control section
   above (Random row block) and in the mobile block.
========================================= */



.pricing-modal tr.random-row input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  flex-shrink: 1;
}

/* Random Service field appearance */
.random-tittle,
.random-details,
.random-days,
.random-price {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.pricing-modal .random-row textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
  margin: 0 !important;
  font-size: 16px;
  color: #fff !important;
  min-height: 48px;
  max-height: 250px;
  padding: 0 3px !important;
  resize: none;
  overflow-y: hidden;
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 1.4;
  transition: none;
  vertical-align: middle;
  /* v58 (2026-11-12): every random-row field — title, details,
     days, price — aligns LEFT, and vertical centring is not
     left to align-content (Chromium-only for textareas); the
     pricing script centres each field's text block with
     measured top padding instead (see the v58 note below). */
  text-align: left;
  align-content: start;
}

/* v52–v57 history: the Service title (then worded "Custom
   service title") was centred, then
   (at Mezbah's word) set to horizontal LEFT with the measured
   VERTICAL centring kept.
   v58 (2026-11-12, at Mezbah's word): the same treatment now
   covers ALL FOUR random-row fields — title, details, days
   and price: text and placeholder align left on every device,
   and the pricing script centres each empty field's text
   block vertically with measured top padding, which every
   browser honours. */

/* v59 (2026-11-12, at Mezbah's word): the v58 script centring
   above reached the live site for the Service title only —
   Details / Notes, Days and Price were still sitting at the
   top of their boxes. Those three are single-line fields in a
   fixed 48px box (46px inside the borders), so CSS now centres
   them exactly the way the title is centred: half the leftover
   space — (46px − one line at 1.4 × the field's own font size)
   — as top padding. The calc tracks every breakpoint's font
   size on its own (16px desktop, 15px tablet, 14px mobile),
   and text stays LEFT, same as the title. The Service title
   itself is not in this rule: the script keeps centring it by
   measurement, because its placeholder can wrap to two lines
   on small screens. */
.pricing-modal .random-row textarea.random-details,
.pricing-modal .random-row textarea.random-days,
.pricing-modal .random-row textarea.random-price {
  padding-top: calc((46px - 1.4em) / 2) !important;
}
.pricing-modal .random-row textarea::placeholder {
  text-align: left;
}

.pricing-modal .random-row textarea::-webkit-input-placeholder {
  text-align: left;
}

.pricing-modal .random-row textarea::-moz-placeholder {
  text-align: left;
}


.random-row input[type="text"],
.random-row input[type="number"],
.random-row textarea {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #fff !important;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.pricing-modal .random-row input:not([type="checkbox"]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block;
  box-sizing: border-box;
  padding: 0 3px !important;
  margin: 0 !important;
  font-size: 16px;
  color: #fff !important;
  line-height: normal;
}

.random-row input[type="text"]:focus,
.random-row input[type="number"]:focus,
.random-row textarea:focus {
  background: rgba(38, 198, 249, 0.18) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
  color: #ffffff !important;
}



/* =========================
   GENERAL STATES
========================= */
.inactive {
  filter: blur(3px);
  opacity: 0.5;
}

/* =========================
   MODAL INSTRUCTION
========================= */
/* Box layout only - instruction text style from global
   .wla-card-description-text. The span rule below keeps the
   cyan bold highlights ("Pay to proceed", "Transaction ID"). */
.pricing-modal-instruction {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 20px;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
  backdrop-filter: blur(10px);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 20px;
}

.pricing-modal-instruction:hover {
  background: rgba(38, 198, 249, 0.01) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.25);
}

.pricing-modal-instruction span {
  color: #26c6f9;
  font-weight: 700;
}

.pricing-modal-instruction a {
  color: #26c6f9;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Direction text and pay button - side by side on
   desktop and tablet, stacked on mobile (see the
   mobile media block). Spans inside keep the cyan
   colour from the .pricing-modal-instruction span
   rule above. */
.pricing-modal-instruction .to-user-direction {
  flex: 6 1 0;
  min-width: 0;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}

.pricing-modal-instruction .for-payment-button {
  flex: 4 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.pricing-hidden-field {
  display: none !important;
}







/* =========================================
   CLIENT INFORMATION BACKGROUND WRAPPER
========================================= */

.pricing-client-information-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 20px;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pricing-client-information-wrapper:hover {
  background: rgba(38, 198, 249, 0.01) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.25);
}


/* =========================================
   CLIENT INFORMATION GRID
========================================= */

.pricing-weblodge-clients-information {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-areas:
    "name email"
    "mobile address";
  gap: 10px !important;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}


/* Each field owns its own textarea and error */

.pricing-weblodge-clients-information .pricing-client-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Desktop and tablet field positions */

.pricing-weblodge-clients-information
.pricing-client-field--name {
  grid-area: name;
}

.pricing-weblodge-clients-information
.pricing-client-field--email {
  grid-area: email;
}

.pricing-weblodge-clients-information
.pricing-client-field--whatsapp {
  grid-area: mobile;
}

.pricing-weblodge-clients-information
.pricing-client-field--address {
  grid-area: address;
}


/* =========================================
   CUSTOMER TEXTAREAS
========================================= */

.pricing-weblodge-clients-information
textarea.client-auto-grow {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  max-height: 250px;
  height: 52px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  outline: none;
  resize: none;
  overflow-y: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}


/* Focus */

.pricing-weblodge-clients-information
textarea.client-auto-grow:focus {
  background: rgba(38, 198, 249, 0.18) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
  color: #ffffff !important;
}


/* Text selection */

.pricing-weblodge-clients-information
textarea.client-auto-grow::selection,
.pricing-weblodge-clients-information
textarea.client-auto-grow *::selection {
  background: #ffffff !important;
  color: #170154 !important;
}


/* =========================================
   CUSTOMER VALIDATION ERROR MESSAGES
========================================= */

.pricing-weblodge-clients-information .error-message {
  display: none;
  width: 100%;
  margin: 6px 0 0;
  padding: 0 18px;
  box-sizing: border-box;
  color: #ff0000;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1;
  overflow-wrap: anywhere;
}

.pricing-payment-summary {
  justify-content: center;
  align-items: center;
  gap: 50px;
  width: 100%;
  text-align: center;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.pricing-payment-details {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 50px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.pricing-payment-summary > *,
.pricing-payment-details > * {
  min-width: 0;
}

/* Layout only - label text style from global .wla-card-description-text.
   The amount inputs inside keep their own rules below. */
.pricing-payment-label {
  align-items: center;
  gap: 5px;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.pricing-payment-label input {
  width: 100px;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 8px;
  border-radius: 10px;
  outline: none;
}

#advance-amount {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  min-height: 42px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #fff !important;
  caret-color: #ffffff;
}

#advance-amount:focus {
  background: rgba(38, 198, 249, 0.18) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
  outline: none;
}

#due-amount {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  min-height: 42px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #ffffff !important;
  cursor: not-allowed;
}

label[for="advance-amount"],
label[for="due-amount"] {
  flex-wrap: nowrap;
}


/* Global placeholders */
::placeholder {
  font-size: 16px !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out 0s;
}

textarea:focus,
input:focus {
  outline: none;
}

textarea::selection,
input::selection {
  background: #fff;
  color: #170154;
}

textarea::-moz-selection,
input::-moz-selection {
  background: #fff;
  color: #170154;
}

.pricing-modal input[type="number"] {
  width: 50px;
  padding: 3px;
  border-radius: 4px;
  border: 1px solid #ccc;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pricing-modal input[type="number"]::-webkit-outer-spin-button,
.pricing-modal input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =========================
   PAY BUTTON
========================= */
#pay-btn {
  max-width: 100%;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50px;
  outline: none;
  padding: 0 19px;
  background: rgba(38, 198, 249, 0.12) !important;
  border:1px solid rgba(38, 198, 249, 0.40) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #26c6f9 !important;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

#pay-btn span {
  height: 100%;
  width: 100%;

  font-size: 18px;
  font-weight: 400;
  font-family: "Plus Jakarta Sans", sans-serif;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap !important;
  will-change: transform;
  animation: wla-button-text-slide 6s linear infinite;
}

#pay-btn:hover {
  background: rgba(38, 198, 249, 0.18) !important;
  border: 1px solid rgba(38, 198, 249, 0.55) !important;
  box-shadow: 0 0 25px rgba(38, 198, 249, 0.35);
  color: #ffffff !important;
}

#pay-btn.inactive {
  pointer-events: none !important;
  opacity: 0.6 !important;
  filter: blur(3px);
  cursor: not-allowed !important;
}

.pricing-modal-note {
  text-align: center;
  font-size: 16px;
  color: #26c6f9;
  margin-top: 15px;
  font-style: italic;
}






/* =========================
   RESPONSIVE: TABLET / DESKTOP
========================= */

@media (max-width: 1024px) {

.pricing-modal .random-row textarea {
  font-size: 15px;
}

  .pricing-modal-content {
    width: 85% !important;
}

.pricing-modal-badge {
    padding: 0 18px;
}

.pricing-modal-badge > span:first-child {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    min-width: 10px;
    box-shadow: 0 0 9px rgba(38, 198, 249, 0.7);
  }

.pricing-modal table th,
  .pricing-modal table td {
    font-size: 15px;
  }

.wla-custom-dropdown__trigger {
    font-size: 15px;
}

.wla-custom-dropdown__option {
    font-size: 15px;
}

.pricing-modal-instruction {
    border-radius: 21px;
  }

.pricing-modal-instruction .to-user-direction {
    font-size: 15px;
}

.pricing-client-information-wrapper {
    border-radius: 21px;
  }

.pricing-weblodge-clients-information
textarea.client-auto-grow {
  font-size: 15px;
}

  .pricing-weblodge-clients-information .error-message {
  font-size: 13px !important;
}

.pricing-payment-summary,
  .pricing-payment-details {
    font-size: 15px;
    gap: 40px;
  }

.pricing-payment-label {
  font-size: 15px;
}

#advance-amount,
#due-amount {
  font-size: 15px;
}


/* Global placeholders */
::placeholder {
  font-size: 15px !important;
}

#pay-btn {
    width: 170px;
  }

  .pricing-modal-note {
  font-size: 15px;
}

}






/* =========================
   RESPONSIVE: MOBILE
========================= */

@media (max-width: 767px) {
  .wla-custom-dropdown__trigger {
    font-size: 14px;
}

.wla-custom-dropdown__option {
    font-size: 14px;
}




  .pricing-modal .random-row textarea,
  .pricing-modal .random-row input:not([type="checkbox"]) {
    padding-left: 2px !important;
    padding-right: 2px !important;
    font-size: 14px;
  }

  .pricing-modal tr.random-row input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
  }

  .pricing-modal {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pricing-modal::-webkit-scrollbar {
    display: none !important;
  }

.pricing-modal-content {
    max-height: calc(100vh - 10px);
    font-size: 14px;
    width: calc(100% - 10px) !important;
    padding: 12px 8px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pricing-modal-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

.pricing-modal-badge {
  padding: 0 17px;
  font-size: 16px;
}

.pricing-modal-badge > span:first-child {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  min-width: 9px;
  box-shadow: 0 0 8px rgba(38, 198, 249, 0.7);
}

.pricing-modal-close {
    top: 5px;
    right: 15px;
  }

.pricing-modal table th,
.pricing-modal table td {
  font-size: 14px;
}

/* Per-row column control - mobile: each row, each
   column, its own width and padding */

/* --- Figma row --- */
.pricing-modal tr.figma-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.figma-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.figma-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.figma-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.figma-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Logo row --- */
.pricing-modal tr.logo-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.logo-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.logo-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.logo-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.logo-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- WordPress row --- */
.pricing-modal tr.wordpress-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.wordpress-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.wordpress-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.wordpress-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.wordpress-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Lottie row --- */
.pricing-modal tr.lottie-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.lottie-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.lottie-row > td:nth-child(3) {
  width: 55%;
}

.pricing-modal tr.lottie-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Signature row --- */
.pricing-modal tr.signature-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.signature-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.signature-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.signature-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.signature-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Brand video row --- */
.pricing-modal tr.brand-video-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.brand-video-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.brand-video-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.brand-video-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.brand-video-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Motion row --- */
.pricing-modal tr.motion-row > td:nth-child(1) {
  width: 7%;
  padding: 1px 0;
  text-align: center;
}

.pricing-modal tr.motion-row > td:nth-child(2) {
  width: 25%;
}

.pricing-modal tr.motion-row > td:nth-child(3) {
  width: 24.5%;
}

.pricing-modal tr.motion-row > td:nth-child(4) {
  width: 30.5%;
}

.pricing-modal tr.motion-row > td:nth-child(5) {
  width: 13%;
  white-space: nowrap;
}

/* --- Random row --- */
.pricing-modal tr.random-row > td:nth-child(1) {
  width: 7%;
  padding: 1px;
  text-align: center;
}

.pricing-modal tr.random-row > td:nth-child(2) {
  width: 25%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(3) {
  width: 42%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(4) {
  width: 13%;
  padding: 1px;
}

.pricing-modal tr.random-row > td:nth-child(5) {
  width: 13%;
  padding: 1px;
  white-space: nowrap;
}



.pricing-dropdown {
    padding: 0 5px;
  }

.pricing-modal-instruction {
    margin-top: 15px;
    border-radius: 18px;
    flex-direction: column;
    gap: 10px;
  }

.pricing-modal-instruction .to-user-direction {
    font-size: 14px;
    text-align: center;
    flex: none;
}

.pricing-modal-instruction .for-payment-button {
    flex: none;
}

.pricing-client-information-wrapper {
    padding: 15px 10px;
    margin-top: 15px;
    border-radius: 18px;
  }

.pricing-weblodge-clients-information {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "name"
      "email"
      "mobile"
      "address" !important;
  }

.pricing-weblodge-clients-information textarea.client-auto-grow {
    padding: 15px 10px !important;
    font-size: 14px;
  }

.pricing-weblodge-clients-information input {
    height: 50px;
    font-size: 13px;
  }

  .pricing-weblodge-clients-information .error-message {
  padding: 0 10px;
  font-size: 12px !important;
}

label[for="advance-amount"],
  label[for="due-amount"] {
    gap: 4px !important;
  }

.pricing-payment-label {
  font-size: 14px;
  gap: 4px;
}

.pricing-payment-summary {
    font-size: 14px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px;
  }

.pricing-payment-details {
    font-size: 14px;
    align-items: center;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 30px;
  }

#advance-amount,
  #due-amount {
    width: 72px !important;
    min-width: 0;
    padding: 6px 2px !important;
    font-size: 14px !important;
  }

/* Global placeholders */
::placeholder {
  font-size: 14px !important;
}

#pay-btn {
    width: 160px;
  }

  .pricing-modal-note {
  font-size: 14px;
}

}

/* v50 (2026-11-12): the dropdown list slides up when it opens —
   the options rise one by one at the 5% panel stagger, the same
   as the site's submenu panels. The menu opens and closes with
   the [hidden] attribute, so this animation restarts every open. */
@keyframes wla-dropdown-option-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option {
    animation: wla-dropdown-option-in 0.8s ease both;
}

.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(2) { animation-delay: 40ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(3) { animation-delay: 80ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(4) { animation-delay: 120ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(5) { animation-delay: 160ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(6) { animation-delay: 200ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(7) { animation-delay: 240ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(8) { animation-delay: 280ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(9) { animation-delay: 320ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(10) { animation-delay: 360ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(11) { animation-delay: 400ms; }
.wla-custom-dropdown-menu:not([hidden]) .wla-custom-dropdown__option:nth-child(12) { animation-delay: 440ms; }