/* PCP Portal WOW */ .pcp-wrap, .pcp-wrap *{box-sizing:border-box;} .pcp-wrap img{max-width:100%;height:auto;display:block;} .pcp-wrap{max-width:1920px;width:calc(100% - 40px);margin:0 auto;padding:20px;} .pcp-wrap *{box-sizing:border-box;} /* Portal base theme (isolated from site theme) */ .pcp-wrap{ --pcp-accent:#ff0000; --pcp-bg:#050506; --pcp-text:#f5f5f5; --pcp-muted:rgba(245,245,245,.72); color:var(--pcp-text) !important; } .pcp-wrap :where(p,span,div,small,strong,em,h1,h2,h3,h4,h5,h6,li,ul,ol,a,label,summary,button,input,textarea,select){ color:inherit; } .pcp-wrap a{color:inherit;text-decoration:none;} .pcp-wrap input,.pcp-wrap textarea,.pcp-wrap select{ color:var(--pcp-text); background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.14); } .pcp-wrap input::placeholder,.pcp-wrap textarea::placeholder{color:rgba(245,245,245,.55);} .pcp-muted{opacity:.55;font-size:12px;} .pcp-title{font-size:24px;font-weight:950;letter-spacing:-.35px;line-height:1.08;} .pcp-sub{margin-top:6px;opacity:.72;max-width:56ch;font-size:12px;} /* Phone optimizations for text */ @media (max-width: 480px) { .pcp-title { font-size: clamp(18px, 5vw, 24px); letter-spacing: -.25px; } .pcp-sub { font-size: clamp(10px, 2.5vw, 12px); margin-top: 4px; } .pcp-muted { font-size: clamp(10px, 2.5vw, 12px); } } /* Hero */ .pcp-hero{ display:flex;justify-content:space-between;gap:18px;align-items:center; padding:14px 16px;border-radius:26px; background: radial-gradient(900px 240px at 18% 0%, rgba(0,0,0,.05), transparent 55%), radial-gradient(780px 220px at 92% 100%, rgba(0,0,0,.04), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78)); border:1px solid rgba(0,0,0,.08); box-shadow: 0 12px 30px rgba(0,0,0,.08); } /* Phone optimizations for hero */ @media (max-width: 480px) { .pcp-hero { padding: 12px; gap: 12px; border-radius: 20px; } } /* Avatar (bulletproof circle even when theme overrides img styles) */ .pcp-avatar{ display:inline-block; border-radius:9999px !important; overflow:hidden; background:#fafafa; border:1px solid #e7e7e7; flex:0 0 auto; } .pcp-avatar--hero{width:56px;height:56px;} .pcp-avatar--heroMobile{width:40px;height:40px;display:none;} .pcp-avatar--profile{width:120px;height:120px;} .pcp-avatar__img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:0 !important; } /* Legacy support (if any old markup still uses these classes) */ .pcp-hero__avatar, .pcp-hero__stack{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center;} /* Better wrapping on very small phones */ @media (max-width: 380px) { .pcp-hero__stack { gap: 8px; } } .pcp-hero__right{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-end;} /* Big countdown (next service) */ .pcp-nextCard{ /* Tiny Elegant Counter */ position: relative; overflow: hidden; min-width: 240px; padding: 12px 18px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(155deg, rgba(28,28,36,0.8) 0%, rgba(18,18,24,0.9) 100%); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6), 0 5px 15px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); color: #ffffff; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Remove min-width on phones */ @media (max-width: 480px) { .pcp-nextCard { min-width: 0; padding: 10px 14px 12px; } } /* Desktop counter - hide on mobile */ .pcp-nextCard--desktop { display: block; } /* Mobile counter - hide on desktop */ .pcp-nextCard--mobile { display: none; margin-top: 14px; width: 100%; } /* Mobile fallback (when viewport meta is missing / in-app browsers): JS adds .pcp-is-mobile on when the *physical* screen is small. This guarantees the counter appears under the greeting on phones. */ html.pcp-is-mobile .pcp-nextCard--desktop{display:none !important;} html.pcp-is-mobile .pcp-nextCard--mobile{display:block !important;} /* Mobile: move avatar next to language chooser */ html.pcp-is-mobile .pcp-hero__tools{justify-content:space-between;} html.pcp-is-mobile .pcp-avatar--heroMobile{display:inline-block;} html.pcp-is-mobile .pcp-hero__right .pcp-avatar--hero{display:none !important;} /* Mobile: make the countdown always fit inside the hero card. - Remove the desktop min-width - Allow wrapping instead of horizontal scrolling - Use fluid digit sizing so it scales to the available width */ html.pcp-is-mobile .pcp-nextCard--mobile{ min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; padding: 10px 12px 12px !important; } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-countdown{ /* Mobile: keep it in ONE centered line */ display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center; gap: clamp(4px, 2vw, 10px); max-width: 100%; min-width: 0; overflow: hidden !important; /* Fluid sizing so it fits even on very small phones */ --pcp-digit-w: clamp(12px, 5.2vw, 26px); --pcp-digit-h: clamp(20px, 8vw, 38px); } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-unit{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; /* Unit width always equals exactly 2 digits + spacing */ width: calc(var(--pcp-digit-w) * 2 + 8px); min-width: 0; } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-separator{ display: inline-flex !important; align-items: center; justify-content: center; opacity: .55; width: 8px; /* reduced for tighter spacing */ flex-shrink: 0; } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-digit{ width: var(--pcp-digit-w); height: var(--pcp-digit-h); margin: 0 1px; flex-shrink: 0; } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-face{ font-size: clamp(12px, 4.2vw, 18px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } html.pcp-is-mobile .pcp-nextCard--mobile .pcp-flip-label{ font-size: clamp(5px, 2vw, 8px); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Mobile fallback for flip countdown (when viewport meta/class is not applied) */ @media (max-width: 480px){ .pcp-nextCard--mobile{ min-width:0 !important; max-width:100% !important; width:100% !important; padding: 10px 12px 12px !important; } .pcp-nextCard--mobile .pcp-flip-countdown{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap: clamp(4px, 2vw, 10px); max-width:100%; min-width:0; overflow:hidden; --pcp-digit-w: clamp(12px, 5.2vw, 26px); --pcp-digit-h: clamp(20px, 8vw, 38px); } .pcp-nextCard--mobile .pcp-flip-unit{ width: calc(var(--pcp-digit-w) * 2 + 8px); min-width: 0; } .pcp-nextCard--mobile .pcp-flip-digit{ width: var(--pcp-digit-w); height: var(--pcp-digit-h); margin:0 1px; flex-shrink: 0; } .pcp-nextCard--mobile .pcp-flip-face{ font-size: clamp(12px, 4.2vw, 18px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .pcp-nextCard--mobile .pcp-flip-separator{ width: 8px; flex-shrink: 0; } .pcp-nextCard--mobile .pcp-flip-label{ font-size: clamp(5px, 2vw, 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .pcp-nextCard:hover { transform: translateY(-2px); box-shadow: 0 15px 40px -12px rgba(0,0,0,.7), 0 8px 20px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .pcp-nextCard:before{ content:""; position:absolute; inset:-1px; border-radius: 18px; padding:1px; background: linear-gradient(135deg, rgba(168,85,247,.12) 0%, rgba(236,72,153,.08) 30%, transparent 60%, rgba(250,204,21,.06) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:0.5; } .pcp-nextCard:hover:before{ opacity:0.8; } .pcp-nextCard > *{position:relative; z-index:1;} .pcp-nextCard__k{ display:inline-flex; align-items:center; gap:6px; font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color: rgba(255,255,255,.4); margin-bottom: 10px; } .pcp-nextCard__v{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:10px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.04); background: linear-gradient(145deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.005) 100%), rgba(0,0,0,.3); font-size:32px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight:600; letter-spacing:-2px; line-height:1; font-variant-numeric: tabular-nums; color: #ffffff; box-shadow: 0 4px 16px -4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.02); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .pcp-nextCard:hover .pcp-nextCard__v { border-color: rgba(255,255,255,.08); background: linear-gradient(145deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%), rgba(0,0,0,.3); box-shadow: 0 6px 20px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04); } /* Counter inner layout - Days box */ .pcp-counter__days{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.05); background: linear-gradient(145deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.01) 100%), rgba(0,0,0,.35); min-width:70px; box-shadow: 0 4px 12px -3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .pcp-nextCard:hover .pcp-counter__days { border-color: rgba(255,255,255,.08); background: linear-gradient(145deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.015) 100%), rgba(0,0,0,.35); transform: translateY(-1px); box-shadow: 0 6px 16px -3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04); } .pcp-counter__num{ font-size:30px; font-weight:600; line-height:1; letter-spacing:-1.5px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; } .pcp-counter__lbl{ font-size:8px; font-weight:700; margin-top:4px; letter-spacing:1px; text-transform:lowercase; color: rgba(255,255,255,.4); } .pcp-counter__time{ font-size:32px; font-weight:600; line-height:1; letter-spacing:-2px; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; } @media (max-width: 520px){ .pcp-nextCard{padding:10px 16px 12px;} .pcp-nextCard__v{gap:10px; padding:8px 14px; font-size:28px; letter-spacing:-1.5px;} .pcp-counter__time{font-size:28px; letter-spacing:-1.5px;} .pcp-counter__days{min-width:60px; padding:6px 12px;} .pcp-counter__num{font-size:26px; letter-spacing:-1.2px;} } } } /* Hero breakpoint: We want the greeting + mobile countdown to stack earlier than 720px, because many devices / in-app browsers report widths in the 760–900px range. */ @media (max-width: 900px){ .pcp-hero{ flex-direction:column; align-items:stretch; gap:14px; } .pcp-hero__left{ width:100%; order:1; } .pcp-hero__right{ width:100%; order:2; flex-direction:column; align-items:center; gap:14px; } .pcp-hero__stack{ width:auto; justify-content:center; } /* Hide desktop counter on mobile */ .pcp-nextCard--desktop { display: none !important; } /* Show mobile counter on mobile */ .pcp-nextCard--mobile { display: block !important; } .pcp-nextCard{ width:100%; min-width:0; } } /* Extra phone optimization */ @media (max-width: 480px) { .pcp-hero { gap: 10px; } .pcp-hero__left, .pcp-hero__right { gap: 10px; } .pcp-hero__stack { gap: 8px; } } .pcp-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(255,255,255,.75);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);font-weight:900;font-size:11px;opacity:.78;} .pcp-badge svg{width:16px;height:16px;fill:currentColor;} /* Layout */ .pcp-shell{display:grid;grid-template-columns: 260px 1fr;gap:14px;margin-top:14px;} @media (max-width: 960px){.pcp-shell{grid-template-columns:1fr;}} /* Mobile hardening: Some themes (or global CSS) may override grid layouts on small screens. On phones we *always* want the nav to sit above the content. */ @media (max-width: 720px){ .pcp-shell{ display:flex !important; flex-direction:column !important; align-items:stretch !important; } .pcp-nav{width:100% !important;} .pcp-main{width:100% !important;} } .pcp-nav{ border:1px solid #e7e7e7;border-radius:22px;background:#fff; padding:10px;position:sticky;top:12px;height:fit-content; } /* Spacer between left group and (Gallery/Messages) on mobile */ .pcp-nav__spacer{display:none;} @media (max-width: 960px){ .pcp-nav{ position:relative;top:auto; display:flex; align-items:center; gap:6px; flex-wrap:nowrap; /* never drop to a new line */ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px; } .pcp-nav__spacer{ display:block; flex:1 1 auto; min-width:6px; } } .pcp-nav__item{ width:100%; display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:16px;border:1px solid transparent; background:transparent;cursor:pointer;font-weight:900; } @media (max-width: 960px){ /* Woodmart often forces buttons/links to full width; lock our nav items */ .pcp-wrap .pcp-nav .pcp-nav__item, .pcp-wrap .pcp-nav .pcp-nav__item.is-active{ width:auto !important; max-width:none !important; display:inline-flex !important; flex:0 0 auto !important; white-space:nowrap !important; box-sizing:border-box !important; padding:8px 10px !important; font-size:13px !important; gap:8px !important; } .pcp-wrap .pcp-nav .pcp-nav__item span{line-height:1;} .pcp-wrap .pcp-nav .pcp-nav__item svg{width:16px;height:16px;} .pcp-wrap .pcp-nav .pcp-nav__item i{font-size:16px;line-height:1;} } .pcp-nav__item svg{width:18px;height:18px;fill:currentColor;opacity:.9;} .pcp-nav__item i{font-size:18px;line-height:1;opacity:.9;} .pcp-nav__item.is-active{background:#111;color:#fff;} .pcp-nav__item.is-active svg{fill:#fff;} .pcp-nav__item.is-active i{opacity:1;} .pcp-nav__footer{margin-top:10px;padding-top:10px;border-top:1px solid #f1f1f1;} @media (max-width: 960px){.pcp-nav__footer{display:none;}} .pcp-nav__link{text-decoration:none;font-weight:900;opacity:.85;} .pcp-main{min-width:0;} .pcp-panel{display:none;} .pcp-panel.is-active{display:block;} .pcp-grid{display:grid;grid-template-columns: 1fr 1fr;gap:14px;} @media (max-width: 960px){.pcp-grid{grid-template-columns:1fr;}} /* Profile view - full width */ [data-tab-content="profile"] .pcp-grid > .pcp-card:first-child { grid-column: 1 / -1; } .pcp-card{ border:1px solid #e7e7e7;border-radius:22px;background:#fff;padding:16px; box-shadow: 0 1px 0 rgba(0,0,0,.03); } .pcp-card--glass{ background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0)) , #fff; } .pcp-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;} .pcp-card__title{font-size:16px;font-weight:950;letter-spacing:-.2px;} .pcp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 12px;border-radius:16px;border:1px solid #111; background:#111;color:#fff;font-weight:950;cursor:pointer;text-decoration:none; } .pcp-btn--ghost{background:#fff;color:#111;border-color:#e7e7e7;} .pcp-btn--soft{background:#111;color:#fff;border-color:#111;opacity:.92;} .pcp-btn--small{padding:8px 10px;border-radius:14px;font-size:12px;} .pcp-empty{padding:12px;border:1px dashed rgba(255,255,255,.14);border-radius:18px;opacity:.8;} /* Profile */ .pcp-profile{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;} .pcp-profile__avatar{ width:120px !important; height:120px !important; aspect-ratio:1/1; display:block; border-radius:999px !important; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); border:1px solid #e7e7e7; object-fit:cover; background:#fafafa; } .pcp-profile__meta{flex:1;min-width:240px;} .pcp-profile__name{font-size:22px;font-weight:950;letter-spacing:-.2px;} .pcp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;} .pcp-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid #e7e7e7;border-radius:999px;font-size:12px;opacity:.85;font-weight:800;} /* Profile facts row (matches the "—" style in the design) */ .pcp-facts{ margin-top:12px; padding:10px 12px; border-radius:16px; border:none !important; /* Hide the border line */ background: transparent !important; /* Hide the background box */ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .pcp-fact{display:flex;align-items:baseline;gap:8px;position:relative;padding-right:16px;} .pcp-fact:not(:last-child)::after{display:none !important;} /* Премахнати чертите */ .pcp-fact__k{font-size:11px;letter-spacing:.6px;text-transform:uppercase;opacity:.72;font-weight:950;} .pcp-fact__v{font-size:12px;font-weight:950;opacity:.78;} .pcp-kv{display:grid;grid-template-columns: 140px 1fr;gap:8px 14px;margin-top:12px;} .pcp-k{font-size:12px;opacity:.7;font-weight:900;text-transform:uppercase;letter-spacing:.5px;} .pcp-v{font-size:14px;font-weight:950;} /* Forms */ .pcp-form{margin-top:10px;} .pcp-form__row{display:grid;grid-template-columns: 1fr 1fr;gap:12px;} @media (max-width: 720px){.pcp-form__row{grid-template-columns:1fr;}} .pcp-field{margin:10px 0;} .pcp-field label{ /* Keep required star aligned with label text across browsers */ display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; font-weight:900; font-size:12px; opacity:.9; margin-bottom:6px; } .pcp-field input,.pcp-field textarea{ width:100%;border:1px solid #e7e7e7;border-radius:16px;padding:10px;background:#fff; } .pcp-field input:focus,.pcp-field textarea:focus{outline:none;border-color:#111;} .pcp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;} .pcp-preview img{width:64px;height:64px;border-radius:16px;border:1px solid #e7e7e7;object-fit:cover;background:#fafafa;} /* Slots */ .pcp-slots{display:grid;grid-template-columns: 1fr 1fr;gap:12px;margin-top:10px;} @media (max-width: 720px){.pcp-slots{grid-template-columns:1fr;}} .pcp-slot{border:1px solid #e7e7e7;border-radius:18px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:6px;} .pcp-slot__title{font-weight:950;} .pcp-slot__time{opacity:.8;font-size:12px;} .pcp-slot__tag{margin-top:2px;align-self:flex-start;font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.06);} /* Services */ .pcp-services{margin-top:10px;display:grid;grid-template-columns: 1fr 1fr;gap:12px;} @media (max-width: 720px){.pcp-services{grid-template-columns:1fr;}} .pcp-service{border:1px solid #e7e7e7;border-radius:18px;padding:12px;} .pcp-service__top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;} .pcp-service__name{font-weight:950;} .pcp-service__meta{font-size:12px;opacity:.8;font-weight:800;} .pcp-bar{height:10px;border-radius:999px;background:#efefef;margin-top:10px;overflow:hidden;} .pcp-bar__fill{height:100%;background:#111;border-radius:999px;} /* Gallery */ .pcp-gallery{margin-top:10px;display:flex;flex-direction:column;gap:10px;} .pcp-gitem{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #e7e7e7;border-radius:18px;padding:12px;} .pcp-gitem__title{font-weight:950;} .pcp-gitem__meta{font-size:12px;opacity:.85;word-break:break-all;} .pcp-gitem__meta a{text-decoration:none;font-weight:900;} /* Tickets */ .pcp-ticketlist{display:flex;flex-direction:column;gap:12px;} .pcp-ticket{position:relative;border:1px solid #e7e7e7;border-radius:18px;padding:12px;background:#fff;} .pcp-ticket__sum{list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer;} .pcp-ticket__sum::-webkit-details-marker{display:none;} .pcp-ticket__title{font-weight:950;} .pcp-ticket__pill{font-size:12px;font-weight:900;padding:4px 10px;border-radius:999px;border:1px solid #e7e7e7;opacity:.85;} .pcp-thread{margin-top:10px;display:flex;flex-direction:column;gap:10px;} /* Ensure thread background stays consistent and BLACK */ .pcp-thread, details[open] .pcp-thread{ background: transparent !important; } /* CRITICAL: Force SOLID BLACK background for opened tickets - blocks animation bleed */ .pcp-ticket[open], details.pcp-ticket[open], .pcp-ticket--waiting[open], .pcp-ticket--admin-replied[open]{ background: #0a0a0a !important; background-color: #0a0a0a !important; } /* Add a solid black inner wrapper to block all glow bleeding */ .pcp-ticket[open]::before, details.pcp-ticket[open]::before { content: "" !important; position: absolute !important; inset: 0 !important; background: #0a0a0a !important; z-index: 0 !important; pointer-events: none !important; border-radius: 18px !important; } /* Ensure all content sits ABOVE the black blocker */ .pcp-ticket[open] > *, details.pcp-ticket[open] > * { position: relative !important; z-index: 1 !important; } /* Ensure messages inside stay with solid dark backgrounds */ .pcp-thread .pcp-msg { background: #1a1a1a !important; background-color: #1a1a1a !important; } /* Client messages — red tint (клиент писа) */ .pcp-thread .pcp-msg.is-mine { background: #1a0f0f !important; background-color: #1a0f0f !important; border-color: rgba(220,38,38,.25) !important; } /* Admin messages — green tint (админ отговори) */ .pcp-thread .pcp-msg.is-admin { background: #0f1a0f !important; background-color: #0f1a0f !important; border-color: rgba(34,197,94,.25) !important; } .pcp-msg{border:1px solid #e7e7e7;border-radius:18px;padding:10px;background:#fff;max-width:92%;} .pcp-msg.is-mine{margin-left:auto;background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));} .pcp-msg__meta{display:flex;gap:10px;align-items:baseline;} .pcp-msg__body{margin-top:6px;} .pcp-form--reply{margin-top:12px;} /* Ticket status pill + collapsed default */ .pcp-ticket__pill--status{border-color:#111;opacity:1;} /* Red - Waiting for reply */ .pcp-ticket__pill--status.pcp-ticket__status--waiting{ background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: rgba(220,38,38,1); } /* Green - Admin replied */ .pcp-ticket__pill--status.pcp-ticket__status--admin-replied{ background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); color: rgba(34,197,94,1); } /* Yellow - Client responded (new message) */ .pcp-ticket__pill--status.pcp-ticket__status--client-responded{ background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.25); color: rgba(251,191,36,1); } /* Legacy closed state (if still needed) */ .pcp-ticket__pill--status.is-closed{background:#111;color:#fff;border-color:#111;} .pcp-ticket__sum{padding:6px 0;} .pcp-ticket summary:focus{outline:none;} .pcp-stack{display:flex;flex-direction:column;gap:12px;} .pcp-box{border:1px solid #e7e7e7;border-radius:18px;padding:14px;background:#fff;} .pcp-box__title{font-weight:950;margin-bottom:6px;} /* Better services card (front) */ .pcp-services .pcp-service{padding:14px 14px;border:1px solid rgba(0,0,0,.06);border-radius:14px;margin-bottom:12px;background:#fff} .pcp-services .pcp-service__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap} .pcp-services .pcp-service__name{font-weight:900;font-size:15px} .pcp-services .pcp-service__meta{opacity:.55;font-weight:700;font-size:12px} .pcp-services .pcp-bar{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;margin-top:10px} .pcp-services .pcp-bar__fill{height:100%;border-radius:999px} /* Services UI polish */ .pcp-svcCards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;} @media (max-width: 900px){.pcp-svcCards2{grid-template-columns:1fr;}} .pcp-svc2{border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff;padding:14px;} .pcp-svc2__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;} .pcp-svc2__title{font-weight:900;font-size:15px;} .pcp-svc2__badge{font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.03);} .pcp-svc2__badge--paid{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.12);} .pcp-svc2__badge--partial{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12);} .pcp-svc2__badge--unpaid{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.12);} .pcp-svc2__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .pcp-svc2__cell{border:1px solid rgba(0,0,0,.06);border-radius:12px;background:rgba(0,0,0,.02);padding:10px;} .pcp-sub{opacity:.7;font-weight:700;font-size:12px;margin-left:6px;} /* Services cards */ .pcp-svcGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media(max-width:980px){.pcp-svcGrid{grid-template-columns:1fr}} .pcp-svcCard{border:1px solid #eee;border-radius:14px;background:#fff;padding:14px} .pcp-svcTop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px} .pcp-svcTitle{font-weight:800} .pcp-svcStatus{font-size:12px;opacity:.55;font-weight:700} .pcp-svcCols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px} @media(max-width:980px){.pcp-svcCols{grid-template-columns:1fr}} .pcp-svcCol{border:1px solid #f0f0f0;border-radius:12px;padding:10px;background:#fafafa} .pcp-svcK{font-size:12px;font-weight:800;opacity:.7;margin-bottom:4px} .pcp-svcV{font-size:14px} .pcp-svcSub{font-size:12px;opacity:.7;margin-left:6px;font-weight:700} .pcp-svcKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px} @media(max-width:980px){.pcp-svcKpis{grid-template-columns:repeat(2,1fr)}} .pcp-kpi{border:1px solid #f0f0f0;border-radius:12px;padding:10px;background:#fff} .pcp-kpi__k{font-size:12px;opacity:.7;font-weight:800;margin-bottom:4px} .pcp-kpi__v{font-weight:900} /* Tickets list */ .pcp-ticket{border:1px solid #eee;border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden} .pcp-ticket summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;padding:12px} .pcp-ticket summary::-webkit-details-marker{display:none} .pcp-ticket__subj{font-weight:900} .pcp-ticket__meta{font-size:12px;opacity:.7;margin-top:2px} .pcp-ticket__right{display:flex;gap:8px;align-items:center} .pcp-pill{border:1px solid #eee;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;opacity:.85} .pcp-ticket__body{border-top:1px solid #f0f0f0;padding:12px} .pcp-chat{display:flex;flex-direction:column;gap:10px;margin-bottom:10px} .pcp-chat__msg{display:flex;flex-direction:column;max-width:85%} .pcp-chat__msg.is-admin{align-self:flex-end;text-align:right} .pcp-chat__bubble{border:1px solid #eee;border-radius:12px;padding:10px;background:#fafafa} .pcp-chat__msg.is-admin .pcp-chat__bubble{background:#f5f5ff} .pcp-chat__ts{font-size:11px;opacity:.6;margin-top:3px} /* Modal (reservation) */ .pcp-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;} .pcp-modal[hidden]{display:none;} .pcp-modal__backdrop{ position:absolute; inset:0; /* Premium blur backdrop (keep it lighter so blur stays visible) */ background:rgba(0,0,0,.38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .pcp-modal__panel{ position:relative; /* Wider panel so content (incl. images) feels premium */ width:min(1120px, 96vw); max-height:85vh; overflow:auto; border:1px solid #e7e7e7; border-radius:22px; background:#fff; padding:22px; box-shadow:0 20px 70px rgba(0,0,0,.25); color:#111; } .pcp-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;} .pcp-modal__title{font-size:18px;font-weight:950;letter-spacing:-.2px;} .pcp-modal__body{padding-top:2px;} /* When modal is open, blur the portal behind it (premium depth) */ body.pcp-modal-open{overflow:hidden;} body.pcp-modal-open .pcp-stage{filter:blur(14px) !important;transform:scale(.99);transition:filter .18s ease, transform .18s ease;will-change:filter,transform;} /* Modal form readability (Woodmart dark mode / global label colors) */ .pcp-modal .pcp-muted{color:rgba(17,17,17,.75) !important;} .pcp-modal [data-time]{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.06); font-weight:900; font-size:12px; margin-bottom:6px; } .pcp-modal .pcp-field label{color:#111 !important;opacity:1 !important;} .pcp-modal .pcp-field input, .pcp-modal .pcp-field textarea{ background:#fff !important; color:#111 !important; } .pcp-modal .pcp-field input::placeholder, .pcp-modal .pcp-field textarea::placeholder{color:rgba(17,17,17,.55) !important;} /* Reservations (frontend) */ .pcp-res__list{display:flex;flex-direction:column;gap:10px;margin-top:10px;} .pcp-resItem{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;background:#fff;} .pcp-resItem__title{font-weight:950;letter-spacing:-.2px;} .pcp-resItem__note{margin-top:6px;font-size:12px;opacity:.88;} .pcp-tag--status{white-space:nowrap;} .pcp-tag--new{background:#111;color:#fff;} .pcp-tag--confirmed{background:#0b57d0;color:#fff;} .pcp-tag--done{background:#137333;color:#fff;} .pcp-tag--cancelled{background:#b3261e;color:#fff;} /* Reservation create form */ .pcp-resFormWrap{margin-top:14px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:18px;background:rgba(255,255,255,.55);backdrop-filter:blur(var(--pcp-glass-blur));-webkit-backdrop-filter:blur(var(--pcp-glass-blur));} .pcp-req{ color:#b3261e; font-weight:950; margin-left:2px; display:inline-flex; align-items:center; line-height:1; } .pcp-resForm .pcp-field select{width:100%;} /* Auth (login/register) */ .pcp-authGrid{margin-top:14px;} .pcp-alert{padding:10px 12px;border-radius:16px;border:1px solid #e7e7e7;background:rgba(0,0,0,.03);font-weight:900;margin-top:12px;} .pcp-alert--err{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);} .pcp-alert--ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10);} /* ===== Glass design (Apple-ish) ===== */ .pcp-wrap{ --pcp-glass-bg: rgba(10,10,12,.72); --pcp-glass-bg-strong: rgba(10,10,12,.86); --pcp-glass-border: rgba(255,255,255,.12); --pcp-glass-shadow: 0 20px 60px rgba(0,0,0,.55); --pcp-glass-blur: 14px; } .pcp-hero, .pcp-nav, .pcp-card, .pcp-slot, .pcp-ticket, .pcp-msg, .pcp-box, .pcp-gitem, .pcp-service, .pcp-svc2, .pcp-svcCard, .pcp-kpi, .pcp-svcCol, .pcp-acc, .pcp-subcard{ background: var(--pcp-glass-bg); border-color: var(--pcp-glass-border); box-shadow: var(--pcp-glass-shadow); -webkit-backdrop-filter: blur(var(--pcp-glass-blur)); backdrop-filter: blur(var(--pcp-glass-blur)); } .pcp-hero{background: radial-gradient(900px 260px at 12% 0%, rgba(255,0,0,.18), transparent 55%), radial-gradient(900px 260px at 90% 100%, rgba(255,0,0,.10), transparent 60%), radial-gradient(1200px 360px at 30% 0%, rgba(255,255,255,.06), transparent 55%), var(--pcp-glass-bg-strong);} .pcp-field input, .pcp-field textarea, .pcp-field select{ background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Subtle "frosted" look for ghost buttons */ .pcp-btn--ghost{ background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Reservation form: media checkboxes + details modal kv grid */ .pcp-checkGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px;} @media (min-width:720px){.pcp-checkGrid{grid-template-columns:repeat(4,minmax(0,1fr));}} .pcp-check{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.18);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);font-weight:900;} .pcp-check input{width:auto;} .pcp-btn--xs{padding:8px 10px;font-size:12px;border-radius:12px;} .pcp-resItem{display:flex;justify-content:space-between;gap:14px;} .pcp-resItem__right{display:flex;flex-direction:column;gap:10px;align-items:flex-end;justify-content:flex-start;} .pcp-kvGrid{display:grid;gap:10px;} @media (min-width: 860px){ .pcp-kvGrid{grid-template-columns:repeat(2, minmax(0,1fr));} } .pcp-kv--full{grid-column: 1 / -1;} .pcp-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.65);} .pcp-kv__k{font-weight:950;opacity:.85;} .pcp-kv__v{font-weight:900;opacity:.78;text-align:right;} /* Footer note */ .pcp-footerNote{ margin-top:18px; padding:14px 12px; text-align:center; opacity:.8; font-size:12px; } .pcp-footerNote > div{ line-height:1.35; } /* Gallery actions */ .pcp-gitem__actions{ margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .pcp-iconBtn{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(120,170,255,.22); background: rgba(255,255,255,.08); color: inherit; cursor:pointer; font-weight:700; font-size:12.5px; } .pcp-badgeRed{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:#e11d48; color:#fff; font-size:12px; font-weight:800; } /* Red dot indicator (questions/messages) */ .pcp-dot{ display:inline-block; width:10px; height:10px; margin-left:10px; border-radius:999px; background: rgba(220,38,38,.95); box-shadow: 0 0 0 3px rgba(220,38,38,.20), 0 0 18px rgba(220,38,38,.38); vertical-align:middle; transform: translateY(-1px); animation: pcpDotPulse 1.6s ease-in-out infinite; } .pcp-dot--sm{ width:8px; height:8px; margin-left:8px; box-shadow: 0 0 0 3px rgba(220,38,38,.18), 0 0 14px rgba(220,38,38,.45); } @keyframes pcpDotPulse{ 0%, 100%{ transform: translateY(-1px) scale(1); opacity: .95; } 50%{ transform: translateY(-1px) scale(1.18); opacity: 1; } } /* Payment bar */ .pcp-payBar{ width:100%; height:10px; border-radius:999px; background: rgba(255,255,255,.10); border:1px solid rgba(120,170,255,.22); overflow:hidden; margin-top:10px; } .pcp-payFill{ height:100%; width:0%; border-radius:999px; background: rgba(255,255,255,.45); } .pcp-payFill.is-paid{ background: rgba(34,197,94,.85); } .pcp-payFill.is-partial{ background: rgba(245,158,11,.85); } .pcp-payFill.is-unpaid{ background: rgba(255,255,255,.45); } .pcp-payMeta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; opacity:.85; margin-top:8px; } /* Payments (bars) */ .pcp-payList{display:flex;flex-direction:column;gap:12px} .pcp-payRow{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(0,0,0,.08);border-radius:16px;background:rgba(255,255,255,.78)} .pcp-payRow__left{min-width:240px;flex:0 0 280px} .pcp-payTitle{font-weight:900;font-size:14px;line-height:1.2} .pcp-paySmall{margin-top:6px;font-size:12px;font-weight:700;opacity:.8} .pcp-payDot{opacity:.6;margin:0 6px} .pcp-payRow__right{flex:1;display:flex;flex-direction:column;gap:8px} .pcp-payRow__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .pcp-payAmount{font-size:12px;font-weight:900} .pcp-payBadge{font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.03);white-space:nowrap} /* Payment status colors (client portal): paid=green, partial=yellow, unpaid=white */ .pcp-payBadge--paid{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.14);color:rgba(167,243,208,.98)} .pcp-payBadge--partial{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.16);color:rgba(253,230,138,.98)} .pcp-payBadge--unpaid{border-color:rgba(120,170,255,.34);background:rgba(120,170,255,.10);color:rgba(255,255,255,.92)} @media(max-width:900px){ .pcp-payRow{flex-direction:column;align-items:stretch} .pcp-payRow__left{min-width:0;flex:unset} } /* ===== PCP Theme Override: Black + Red (Primary #FF0000) ===== */ .pcp-wrap{ --pcp-accent:#ff0000; --pcp-glass-bg: rgba(0,0,0,.52); --pcp-glass-bg-strong: rgba(0,0,0,.66); --pcp-glass-border: rgba(255,255,255,.14); --pcp-glass-shadow: 0 24px 70px rgba(0,0,0,.45); --pcp-glass-blur: 14px; color:#f5f5f5 !important; } .pcp-wrap a{color:inherit;} .pcp-wrap :where(p,span,div,small,strong,em,h1,h2,h3,h4,h5,h6,li,ol,a,label,summary,button,input,textarea,select){color:inherit;} .pcp-wrap input,.pcp-wrap textarea,.pcp-wrap select{ color:#f5f5f5 !important; background: rgba(0,0,0,.35) !important; border-color: rgba(255,255,255,.16) !important; } .pcp-wrap input::placeholder,.pcp-wrap textarea::placeholder{color:rgba(245,245,245,.6) !important;} /* Hero */ .pcp-hero{ background: radial-gradient(700px 240px at 10% 0%, rgba(255,0,0,.22), transparent 55%), radial-gradient(780px 260px at 95% 100%, rgba(255,0,0,.14), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.58)) !important; border-color: rgba(255,255,255,.14) !important; } /* Buttons */ .pcp-btn{ background: var(--pcp-accent) !important; border-color: rgba(255,0,0,.75) !important; color:#fff !important; } .pcp-btn:hover{filter:brightness(.95);} .pcp-btn--soft{ background:#0b0b0b !important; border-color: rgba(255,255,255,.14) !important; color:#fff !important; } .pcp-btn--ghost{ background: rgba(0,0,0,.20) !important; border-color: rgba(255,255,255,.14) !important; color:#fff !important; } .pcp-btn--ghost:hover{background: rgba(255,255,255,.06) !important;} /* Nav active */ .pcp-nav__item.is-active{ background: var(--pcp-accent) !important; color:#fff !important; border-color: rgba(255,0,0,.75) !important; } /* Chips / small badges */ .pcp-chip{background: rgba(255,255,255,.06) !important;border-color: rgba(255,255,255,.12) !important;color:#fff !important;} /* Payment bars (no white) */ .pcp-payBar{ background: rgba(255,0,0,.10) !important; border-color: rgba(255,0,0,.28) !important; } .pcp-payFill{ background: rgba(255,0,0,.88) !important; } .pcp-payBar.is-paid{ background: rgba(34,197,94,.12) !important; border-color: rgba(34,197,94,.32) !important; } .pcp-payBar.is-partial{ background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.32) !important; } .pcp-payBar.is-unpaid{ background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; } .pcp-payFill.is-paid{ background: rgba(34,197,94,.92) !important; } .pcp-payFill.is-partial{ background: rgba(245,158,11,.92) !important; } .pcp-payFill.is-unpaid{ background: rgba(255,255,255,.42) !important; } /* Status pills */ .pcp-status{background: rgba(255,255,255,.06) !important;border-color: rgba(255,255,255,.12) !important;color:#fff !important;} .pcp-status.is-new{background: rgba(255,0,0,.10) !important;border-color: rgba(255,0,0,.28) !important;} /* Dark surfaces for items not covered by the glass list */ .pcp-resItem, .pcp-resFormWrap, .pcp-ticket__body, .pcp-chat__bubble, .pcp-modal__panel{ background: var(--pcp-glass-bg) !important; border-color: var(--pcp-glass-border) !important; box-shadow: var(--pcp-glass-shadow); color: var(--pcp-text, #f5f5f5); -webkit-backdrop-filter: blur(var(--pcp-glass-blur)); backdrop-filter: blur(var(--pcp-glass-blur)); } .pcp-modal__panel{ border-color: rgba(255,255,255,.14) !important; } .pcp-modal .pcp-muted{color:rgba(245,245,245,.72) !important;} .pcp-modal [data-time]{background: rgba(255,255,255,.06) !important;} .pcp-modal .pcp-field label{color:var(--pcp-text, #f5f5f5) !important;opacity:1 !important;} .pcp-modal .pcp-field input, .pcp-modal .pcp-field textarea, .pcp-modal .pcp-field select{ background: rgba(0,0,0,.22) !important; color:var(--pcp-text, #f5f5f5) !important; border-color: rgba(255,255,255,.14) !important; } .pcp-modal .pcp-field input::placeholder, .pcp-modal .pcp-field textarea::placeholder{color:rgba(245,245,245,.55) !important;} /* Force dark cards/nav when theme CSS competes */ .pcp-nav{background: var(--pcp-glass-bg) !important; border-color: var(--pcp-glass-border) !important;} .pcp-card{background: var(--pcp-glass-bg) !important; border-color: var(--pcp-glass-border) !important;} .pcp-slot,.pcp-service,.pcp-ticket,.pcp-msg,.pcp-box,.pcp-gitem{border-color: var(--pcp-glass-border) !important;} /* ===== Layout + overflow FIX (messages/gallery) ===== */ .pcp-shell{grid-template-columns: 280px minmax(0,1fr);} .pcp-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} /* Tickets list: prevent overflow and keep pills aligned */ .pcp-ticket__sum{flex-wrap:wrap;} .pcp-ticket__sum > div{min-width:0;} .pcp-ticket__title{max-width:60ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} @media (max-width: 900px){ .pcp-ticket__title{max-width:unset;white-space:normal;} } /* Ticket actions (close + reply) */ .pcp-ticketActions{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px;margin-top:16px;} .pcp-ticketCloseForm{display:flex;justify-content:flex-end;} .pcp-ticketCloseForm .pcp-btn{ margin-top:8px; padding:10px 18px; } /* Client message in ticket — red accent (scoped to .pcp-thread) */ .pcp-thread .pcp-msg.is-mine{ background: rgba(220,38,38,.06) !important; border-color: rgba(220,38,38,.15) !important; } .pcp-thread .pcp-msg.is-mine .pcp-msg__meta strong{ color: rgba(255,100,100,1) !important; font-weight: 900; } /* Admin message in ticket — green accent (scoped to .pcp-thread) */ .pcp-thread .pcp-msg.is-admin{ background: rgba(34,197,94,.06) !important; border-color: rgba(34,197,94,.18) !important; } .pcp-thread .pcp-msg.is-admin .pcp-msg__meta strong{ color: rgba(80,220,130,1) !important; font-weight: 900; } /* Gallery item: stack content (no flex split) */ .pcp-gitem{display:block;} .pcp-gitem__left{min-width:0;} .pcp-gitem__meta{word-break:break-word;overflow-wrap:anywhere;} /* Payments rows: force dark surfaces (remove white bugs) */ .pcp-payRow{ background: var(--pcp-glass-bg) !important; border-color: var(--pcp-glass-border) !important; box-shadow: var(--pcp-glass-shadow); } /* Base badge (don’t clobber status colors below) */ .pcp-payBadge{border-color: rgba(255,255,255,.14) !important; background: rgba(255,255,255,.06) !important;} /* Status colors (must win over theme overrides) */ .pcp-payBadge--paid{border-color:rgba(16,185,129,.45) !important;background:rgba(16,185,129,.14) !important;color:rgba(167,243,208,.98) !important;} .pcp-payBadge--partial{border-color:rgba(245,158,11,.55) !important;background:rgba(245,158,11,.16) !important;color:rgba(253,230,138,.98) !important;} .pcp-payBadge--unpaid{border-color:rgba(255,255,255,.22) !important;background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.92) !important;} /* Details key-values: no white cards */ .pcp-kv{background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important;} /* Inputs inside cards: keep dark even if theme injects white backgrounds */ .pcp-card :where(input,textarea,select){background: rgba(0,0,0,.35) !important;} @media (max-width: 1200px){ .pcp-grid{grid-template-columns:1fr;} } /* Gallery: keep long URLs from breaking layout */ .pcp-link{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;} /* Remove accidental light backgrounds in reservation/detail chips */ .pcp-tag,.pcp-ticket__pill{background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important;} /* Dark theme status pills */ .pcp-ticket__pill--status.pcp-ticket__status--waiting{ background: rgba(220,38,38,.14) !important; border-color: rgba(220,38,38,.32) !important; color: rgba(255,100,100,1) !important; } .pcp-ticket__pill--status.pcp-ticket__status--admin-replied{ background: rgba(34,197,94,.14) !important; border-color: rgba(34,197,94,.32) !important; color: rgba(100,255,150,1) !important; } /* client-responded removed — frontend uses only waiting + admin-replied */ /* Legacy closed state */ .pcp-ticket__pill--status.is-closed{background: rgba(100,100,100,.14) !important; border-color: rgba(100,100,100,.28) !important;} /* Client messages in dark theme — red */ .pcp-thread .pcp-msg.is-mine { background: rgba(220,38,38,.10) !important; border-color: rgba(220,38,38,.28) !important; } .pcp-thread .pcp-msg.is-mine .pcp-msg__meta strong{ color: rgba(255,100,100,1) !important; font-weight: 900; } /* Admin messages in dark theme — green */ .pcp-thread .pcp-msg.is-admin { background: rgba(34,197,94,.10) !important; border-color: rgba(34,197,94,.28) !important; } .pcp-thread .pcp-msg.is-admin .pcp-msg__meta strong{ color: rgba(80,220,130,1) !important; font-weight: 900; } /* ================================ Premium Dark UI (v2) Goal: calmer, more expensive, easier on the eyes. Safe as overrides (keeps existing structure/JS intact). ================================ */ .pcp-wrap{ --pcp-accent:#ff2b2b; --pcp-accent-2:#ff5757; --pcp-text:#f6f7fb; --pcp-muted:rgba(246,247,251,.72); --pcp-surface: rgba(255,255,255,.055); --pcp-surface-2: rgba(255,255,255,.075); --pcp-border: rgba(255,255,255,.10); --pcp-border-2: rgba(255,255,255,.14); --pcp-shadow: 0 18px 64px rgba(0,0,0,.55); --pcp-shadow-soft: 0 12px 34px rgba(0,0,0,.38); --pcp-radius-xl: 26px; --pcp-radius-lg: 22px; --pcp-radius-md: 18px; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--pcp-text) !important; /* Gives the whole portal an "app" canvas feel without touching your theme */ border-radius: 28px; padding: 14px; background: radial-gradient(900px 360px at 8% 0%, rgba(255,43,43,.16), transparent 55%), radial-gradient(900px 360px at 92% 100%, rgba(255,43,43,.10), transparent 60%), linear-gradient(180deg, rgba(12,12,16,.88), rgba(7,7,10,.86)); border:1px solid rgba(255,255,255,.08); box-shadow: var(--pcp-shadow); } @media (max-width: 720px){ .pcp-wrap{width:calc(100% - 14px);padding:12px;border-radius:22px;} } .pcp-muted{color:var(--pcp-muted) !important; opacity:1;} .pcp-title{font-size:26px;letter-spacing:-.55px;} .pcp-sub{font-size:13.5px;opacity:1;color:var(--pcp-muted);} /* Google Maps picker (reservation form) */ .pcp-gmaps{margin-top:12px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .pcp-gmaps__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} .pcp-gmaps__map{height:280px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.20); } /* Google Maps InfoWindow (safe) */ .pcp-gmaps .gm-style .gm-style-iw-c { background: #ffffff !important; border-radius: 10px !important; } .pcp-gmaps .gm-style .gm-style-iw-d { color: #000000 !important; font-size: 14px !important; line-height: 1.35 !important; } @media (max-width: 720px){ .pcp-gmaps__row{flex-direction:column;align-items:flex-start;} .pcp-gmaps__map{height:240px;} } /* Hero */ .pcp-hero{ border-radius: var(--pcp-radius-xl) !important; border-color: rgba(255,255,255,.10) !important; background: radial-gradient(900px 260px at 12% 0%, rgba(255,43,43,.18), transparent 56%), radial-gradient(900px 260px at 88% 100%, rgba(255,43,43,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; box-shadow: var(--pcp-shadow-soft); } .pcp-badge{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; } .pcp-nextCard{ background: rgba(0,0,0,.22) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .pcp-nextCard__k{color:var(--pcp-muted);} /* Surfaces */ .pcp-card, .pcp-nav{ border-radius: var(--pcp-radius-lg) !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important; border-color: rgba(255,255,255,.10) !important; box-shadow: var(--pcp-shadow-soft); } .pcp-card{padding:18px !important;} .pcp-card__title{font-size:17px;letter-spacing:-.25px;} .pcp-card__head{margin-bottom:12px;} /* Nav */ .pcp-nav{padding:12px !important;} .pcp-nav__item{ border-radius: 16px !important; transition: transform .16s ease, background .16s ease, border-color .16s ease; position:relative; z-index:1; touch-action: manipulation; } .pcp-nav__item:hover{ background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.12) !important; transform: translateY(-1px); } .pcp-nav__item:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,43,43,.18); border-color: rgba(255,43,43,.45) !important; } .pcp-nav__item:active{transform: translateY(1px);} .pcp-nav__item.is-active{ background: linear-gradient(180deg, rgba(255,43,43,.98), rgba(255,0,0,.78)) !important; border-color: rgba(255,43,43,.55) !important; box-shadow: 0 10px 22px rgba(255,43,43,.12); } /* Buttons */ .pcp-btn{ border-radius: 16px !important; border-color: rgba(255,43,43,.55) !important; background: linear-gradient(180deg, var(--pcp-accent-2), var(--pcp-accent)) !important; box-shadow: 0 10px 20px rgba(255,43,43,.14); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; } .pcp-btn:hover{filter:brightness(.98);box-shadow: 0 14px 30px rgba(255,43,43,.16);} .pcp-btn:active{transform: translateY(1px);} .pcp-btn--soft{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; box-shadow: none; } .pcp-btn--ghost{ background: rgba(0,0,0,.18) !important; border-color: rgba(255,255,255,.14) !important; } /* Inputs */ .pcp-field input, .pcp-field textarea, .pcp-field select, .pcp-card :where(input,textarea,select){ background: rgba(0,0,0,.30) !important; border-color: rgba(255,255,255,.14) !important; } .pcp-field input:focus, .pcp-field textarea:focus, .pcp-field select:focus{ outline:none; border-color: rgba(255,43,43,.55) !important; box-shadow: 0 0 0 3px rgba(255,43,43,.18); } /* Lists: payments, gallery, tickets */ /* Payments legend */ .pcp-payLegend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;} .pcp-payLegend__item{display:inline-flex;align-items:center;} .pcp-payRow, .pcp-gitem, .pcp-ticket, .pcp-msg, .pcp-slot, .pcp-service{ background: #0a0a0a !important; border-color: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* FORCE BLACK - nothing can override this */ .pcp-ticket[open], details.pcp-ticket[open], .pcp-ticket--waiting[open], .pcp-ticket--admin-replied[open], details.pcp-ticket--waiting[open], details.pcp-ticket--admin-replied[open]{ background: #0a0a0a !important; background-color: #0a0a0a !important; } /* Block animations from bleeding into content */ .pcp-ticket[open]::before, .pcp-ticket[open]::after, details.pcp-ticket[open]::before, details.pcp-ticket[open]::after{ display: none !important; } .pcp-payBadge{background: rgba(255,255,255,.06) !important;} .pcp-payBar{background: rgba(255,255,255,.08) !important;} .pcp-payFill{background: rgba(255,255,255,.40) !important;} .pcp-iconBtn{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; transition: background .16s ease, transform .16s ease; } .pcp-iconBtn:hover{background: rgba(255,255,255,.10) !important;} .pcp-iconBtn:active{transform: translateY(1px);} /* Modal */ .pcp-modal__panel{ border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.55); } /* Subtle scrollbars */ .pcp-wrap *::-webkit-scrollbar{height:10px;width:10px;} .pcp-wrap *::-webkit-scrollbar-thumb{background: rgba(255,255,255,.16);border-radius:999px;} .pcp-wrap *::-webkit-scrollbar-track{background: rgba(255,255,255,.05);border-radius:999px;} @media (prefers-reduced-motion: reduce){ .pcp-nav__item,.pcp-btn,.pcp-iconBtn{transition:none !important;} } /* ================================ Full-page Dark Canvas (v3) Some site themes keep the page background white. This makes the portal feel "washed out". We draw a fixed dark canvas behind the portal only. ================================ */ .pcp-wrap{position:relative;} .pcp-wrap::before{ content:""; position:fixed; inset:0; z-index:-1; background: radial-gradient(1200px 460px at 12% 0%, rgba(255,43,43,.12), transparent 58%), radial-gradient(1200px 460px at 92% 100%, rgba(255,43,43,.08), transparent 62%), linear-gradient(180deg, #07070a, #050506); } /* ===================================================== Premium Beauty (v4) Small polish pass: a little more spacing, smoother cards, calmer hierarchy, and a more "premium" feel. ===================================================== */ .pcp-title{letter-spacing:-.65px;} .pcp-card{padding:20px !important;} .pcp-card, .pcp-nav{box-shadow: 0 14px 44px rgba(0,0,0,.40) !important;} .pcp-card, .pcp-nav, .pcp-hero{border-color: rgba(255,255,255,.11) !important;} .pcp-btn{font-weight:950;} .pcp-btn--ghost{background: rgba(0,0,0,.18) !important;} .pcp-btn--soft{background: rgba(255,255,255,.06) !important;} .pcp-gitem, .pcp-ticket, .pcp-payRow, .pcp-service, .pcp-slot, .pcp-msg{ border-radius: 18px !important; } @media (max-width: 720px){ .pcp-card{padding:16px !important;} } /* Language selector */ .pcp-hero__tools{margin-top:10px;display:flex;align-items:center;gap:10px;} .pcp-toolIcon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 28px rgba(0,0,0,.28);} .pcp-langSelect{appearance:none;-webkit-appearance:none;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));color:var(--pcp-text,#f5f5f5);border-radius:14px;padding:9px 40px 9px 14px;font-weight:950;letter-spacing:.3px;font-size:12px;outline:none;backdrop-filter:blur(var(--pcp-glass-blur));-webkit-backdrop-filter:blur(var(--pcp-glass-blur));box-shadow:0 12px 30px rgba(0,0,0,.28);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;} .pcp-langSelect:hover{border-color:rgba(255,255,255,.20);} .pcp-langSelect:focus{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.35);} /* Inline flag language bar */ .pcp-langBar{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(var(--pcp-glass-blur));-webkit-backdrop-filter:blur(var(--pcp-glass-blur));box-shadow:0 14px 36px rgba(0,0,0,.28);} /* Hide language chooser (flags) as requested */ .pcp-hero__tools .pcp-langBar{display:none !important;} .pcp-langBtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:28px;padding:0;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.20);overflow:hidden;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;} .pcp-langBtn img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05);} .pcp-langBtn:hover{transform:translateY(-1px);border-color:rgba(120,170,255,.34);box-shadow:0 10px 26px rgba(0,0,0,.35);} .pcp-langBtn:active{transform:translateY(0px) scale(.98);} .pcp-langBtn.is-active{border-color:rgba(255,255,255,.38);box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 14px 36px rgba(0,0,0,.35);} @media (max-width: 720px){ .pcp-langBar{gap:8px;padding:5px 6px;border-radius:16px;} .pcp-langBtn{width:34px;height:24px;border-radius:11px;} } /* Giveaway */ .pcp-banner{margin:0 0 16px 0;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 14px 40px rgba(0,0,0,.35);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;} .pcp-banner__k{font-weight:1000;letter-spacing:.2px;} .pcp-banner__v{opacity:.92;} .pcp-giveaway{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start;} @media (max-width: 980px){.pcp-giveaway{grid-template-columns:1fr;}} .pcp-giveaway__imgWrap{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 10px 35px rgba(0,0,0,.35);padding:0;height:280px;} .pcp-giveaway__img{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;} .pcp-giveaway__body{display:flex;flex-direction:column;gap:12px;min-width:0;} .pcp-giveaway__prize{font-size:14px;margin-bottom:10px;} .pcp-giveaway__status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px 0;} .pcp-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;font-weight:1000;font-size:12px;letter-spacing:.3px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);white-space:nowrap;} .pcp-pill.is-ok{border-color:rgba(72,255,145,.35);background:rgba(72,255,145,.10);} .pcp-pill.is-warn{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.10);} /* Giveaway CTA / hint */ .pcp-giveaway__cta{margin-top:18px;padding:14px 16px;border-radius:16px;background:rgba(120,170,255,.10);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.86);} .pcp-giveaway__cta:empty{display:none;} /* Giveaway "How to participate" - keep it close to the status */ .pcp-giveawayHow{margin-top:14px;} /* Hide any minus/collapse button before accordion - STRONG RULES */ .pcp-giveawayHow::before, .pcp-giveawayHow::after, .pcp-giveawayHow > button, .pcp-giveawayHow > .pcp-btn, .pcp-giveawayHow > [data-collapse], .pcp-acc--how::before, .pcp-acc--how::after, button[data-giveaway-collapse], [class*="collapse"][class*="button"], .pcp-giveaway__collapse { display: none !important; visibility: hidden !important; opacity: 0 !important; } .pcp-acc.pcp-acc--how{margin-top:2px;} .pcp-acc.pcp-acc--how .pcp-acc__sum{ padding:12px 14px; border-color:rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.20)); } .pcp-acc.pcp-acc--how .pcp-acc__sum:hover{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.24));} .pcp-acc.pcp-acc--how .pcp-acc__title{font-weight:1000;} /* Giveaway info / rules */ .pcp-giveawayInfo{ margin-top:16px; padding-top:10px; border-top:1px solid rgba(255,255,255,.10); } .pcp-acc{ margin:10px 0; border:none; background:transparent; border-radius:16px; overflow:visible; } .pcp-acc__sum{ list-style:none; cursor:pointer; /* Make the header feel like a real button */ padding:14px 16px; width:100%; display:flex; min-height:52px; align-items:center; justify-content:space-between; gap:12px; user-select:none; -webkit-tap-highlight-color: transparent; border:1px solid rgba(120,170,255,.22); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.26)); border-radius:16px; backdrop-filter: blur(var(--pcp-glass-blur)); -webkit-backdrop-filter: blur(var(--pcp-glass-blur)); box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08); transition: transform .10s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .pcp-acc__sum:hover{ border-color:rgba(255,255,255,.24); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.30)); box-shadow: 0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.10); } .pcp-acc__sum:active{transform:translateY(1px) scale(.99);} .pcp-acc__sum:focus{outline:none;} .pcp-acc__sum:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.06);} .pcp-acc__sum::-webkit-details-marker{display:none;} .pcp-acc__title{font-weight:1000; letter-spacing:-.2px;} /* Stronger button look for Giveaway accordions (high-specificity so it cannot be overridden) */ .pcp-giveawayInfo .pcp-acc__sum, .pcp-giveawayHow .pcp-acc__sum{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.14); box-shadow: 0 22px 54px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.55); } .pcp-giveawayInfo .pcp-acc__sum:hover, .pcp-giveawayHow .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-color:rgba(255,255,255,.14); box-shadow: 0 26px 64px rgba(0,0,0,.64), 0 0 0 4px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.58); } .pcp-giveawayInfo .pcp-acc__sum:before, .pcp-giveawayHow .pcp-acc__sum:before{ background:rgba(120,170,255,.10); border-color:rgba(255,255,255,.14); } /* Stronger button look for Giveaway accordions (high-specificity so it cannot be overridden) */ .pcp-giveawayInfo .pcp-acc__sum, .pcp-giveawayHow .pcp-acc__sum{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.14); box-shadow: 0 22px 54px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.55); } .pcp-giveawayInfo .pcp-acc__sum:hover, .pcp-giveawayHow .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.70)); border-color:rgba(255,255,255,.14); box-shadow: 0 26px 64px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.16); } .pcp-giveawayInfo .pcp-acc__sum:active, .pcp-giveawayHow .pcp-acc__sum:active{ transform:translateY(2px) scale(.99); } /* Left "plus" icon to make it obviously expandable */ .pcp-acc__sum:before{ content:'+'; display:none !important; /* Hide the plus/minus button */ align-items:center; justify-content:center; width:24px; height:24px; border-radius:10px; flex:0 0 auto; background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); opacity:.78; font-weight:1100; line-height:1; } .pcp-acc__sum:after{ content:'▸'; opacity:.85; font-size:18px; line-height:1; display:inline-block; transform:rotate(0deg); transition: transform .18s ease; } .pcp-acc[open] .pcp-acc__sum{ border-color:rgba(255,255,255,.30); background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.34)); box-shadow: 0 18px 46px rgba(0,0,0,.50), 0 0 0 4px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.10); } .pcp-acc[open] .pcp-acc__sum:before{content:'−';} .pcp-acc[open] .pcp-acc__sum:after{transform:rotate(90deg);} .pcp-acc__body{ margin-top:10px; padding:12px 14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:14px; } .pcp-acc__body p{max-width:72ch;} .pcp-giveawayInfo__title{ font-size:16px; font-weight:950; letter-spacing:-.2px; margin:14px 0 8px 0; } .pcp-giveawayInfo p{ margin:0 0 10px 0; line-height:1.55; opacity:1; color:rgba(220,235,255,.95); max-width:72ch; overflow-wrap:anywhere; } .pcp-giveawayInfo__divider{ height:1px; background:rgba(255,255,255,.10); margin:16px 0; border-radius:999px; } .pcp-giveawayInfo__list{ margin:10px 0 0 18px; padding:0; line-height:1.55; color:rgba(220,235,255,.95); max-width:72ch; overflow-wrap:anywhere; } .pcp-giveawayInfo__list li{margin:0 0 8px 0;} @media (max-width: 720px){ .pcp-nextCard--giveaway{width:100%;min-width:0;} } /* Giveaway countdown placement (inline, next to prize/status) */ .pcp-nextCard--giveawayInline{max-width:360px;margin-left:auto;} .pcp-nextCard--giveawayInline .pcp-nextCard__v{ /* Prevent layout jumps / clipping on different widths */ font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(20px, 5.8vw, 34px); letter-spacing: -0.6px; } .pcp-nextCard--giveawayInline .pcp-nextCard__k{white-space:nowrap;} @media (max-width: 980px){ .pcp-nextCard--giveawayInline{max-width:none;width:100%;margin-left:0;} } /* Make giveaway panel fully responsive (layout + typography) */ @media (max-width: 980px){ /* Center the image card when the layout stacks */ .pcp-giveaway__imgWrap{margin-left:auto;margin-right:auto;} } @media (max-width: 600px){ /* Prevent big countdown from overflowing on small screens */ .pcp-nextCard--giveawayInline .pcp-nextCard__v{font-size:clamp(20px, 7vw, 30px);letter-spacing:-.5px;} .pcp-nextCard{padding:10px 12px;border-radius:16px;} /* Better spacing and wrapping */ .pcp-giveaway{gap:18px;} .pcp-giveaway__body{gap:10px;} .pcp-giveaway__status{flex-wrap:wrap;} } @media (max-width: 420px){ .pcp-nextCard--giveawayInline .pcp-nextCard__v{font-size:clamp(18px, 8vw, 24px);letter-spacing:-.35px;} .pcp-giveaway__imgWrap{padding:0;border-radius:16px;height:240px;} } /* Global mobile polish (client portal) */ @media (max-width: 560px){ .pcp-card{padding:14px !important;} .pcp-card__head{flex-direction:column;align-items:flex-start;} .pcp-actionsRow{width:100%;} .pcp-btn{width:100%;} .pcp-btn--ghost,.pcp-btn--soft{width:100%;} } /* Make the big countdown read well on all sizes */ .pcp-nextCard__v{font-variant-numeric: tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media (max-width: 520px){ .pcp-giveawayInfo__title{font-size:15px;} } /* --- UI tweaks --- */ .pcp-nav__emoji{ display:inline-flex; align-items:center; justify-content:center; width:1.1em; margin-right:10px; font-size:16px; line-height:1; } .pcp-profile__edit{ margin-top:12px; } /* On small screens keep the edit button full width under the profile name */ @media (max-width: 600px){ .pcp-profile__edit{ width:100%; } } /* Payment status legend + bar colors (override theme) */ .pcp-payLegend{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px} .pcp-payLegend__item{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)} .pcp-payLegend__dot{width:10px;height:10px;border-radius:50%} .pcp-payLegend__dot.is-paid{background:rgba(0,255,160,.95)} .pcp-payLegend__dot.is-partial{background:rgba(255,200,0,.95)} .pcp-payLegend__dot.is-unpaid{background:rgba(255,255,255,.85)} .pcp-payLegend__label{font-size:12.5px;opacity:.9} /* Progress bar colors by status */ body .pcp-payRow .pcp-payBar{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important} body .pcp-payRow .pcp-payFill{background:rgba(255,255,255,.45) !important} /* Paid */ body .pcp-payRow .pcp-payBar.is-paid{background:rgba(0,255,160,.10) !important;border-color:rgba(0,255,160,.55) !important} body .pcp-payRow .pcp-payFill.is-paid{background:rgba(0,255,160,.90) !important} /* Partial */ body .pcp-payRow .pcp-payBar.is-partial{background:rgba(255,200,0,.10) !important;border-color:rgba(255,200,0,.55) !important} body .pcp-payRow .pcp-payFill.is-partial{background:rgba(255,200,0,.90) !important} /* Unpaid */ body .pcp-payRow .pcp-payBar.is-unpaid{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.28) !important} body .pcp-payRow .pcp-payFill.is-unpaid{background:rgba(255,255,255,.55) !important} /* ================================ Payments UI hard-fix Restores correct layout + ensures status colors apply consistently. ================================ */ /* Row layout */ body .pcp-payRow{ /* Override base stylesheet which sets .pcp-payRow as a horizontal flex row */ display:block !important; padding:16px !important; border-radius:18px !important; } body .pcp-payTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } body .pcp-payTitle{ font-weight:800; font-size:18px; line-height:1.15; flex:1 1 220px; min-width:160px; } body .pcp-payAmount{ white-space:nowrap; font-size:15px; opacity:.78; } body .pcp-payAmount .pcp-sub{opacity:.7;font-weight:500;} body .pcp-payBadge{ white-space:nowrap; padding:8px 12px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.18) !important; background:rgba(255,255,255,.06) !important; font-size:12px; font-weight:700; } /* Badge status colors (markup uses .is-paid/.is-partial/.is-unpaid) */ body .pcp-payBadge.is-paid{border-color:rgba(0,255,160,.55) !important;background:rgba(0,255,160,.14) !important;color:rgba(167,243,208,.98) !important;} body .pcp-payBadge.is-partial{border-color:rgba(255,200,0,.60) !important;background:rgba(255,200,0,.16) !important;color:rgba(253,230,138,.98) !important;} body .pcp-payBadge.is-unpaid{border-color:rgba(255,255,255,.28) !important;background:rgba(255,255,255,.06) !important;color:rgba(255,255,255,.92) !important;} body .pcp-payMeta{ margin-top:8px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; opacity:.88; } body .pcp-payDot{opacity:.45;} /* Progress bar */ body .pcp-payBar{ margin-top:12px; height:12px; border-radius:999px; overflow:hidden; } body .pcp-payFill{ height:100%; border-radius:999px; } /* Legend as pills (matches the rest of the portal) */ body .pcp-payLegend{gap:10px;margin:10px 0 14px;} body .pcp-payLegend__item{ gap:8px; padding:8px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.10) !important; } @media (max-width: 560px){ body .pcp-payTitle{font-size:16px;} body .pcp-payAmount{font-size:14px;} body .pcp-payBadge{font-size:12.5px;padding:7px 10px !important;} } /* === Giveaway accordion headers: make them unmistakably clickable buttons === */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.70)) !important; border: 1px solid rgba(255,255,255,.30) !important; box-shadow: 0 26px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.60) !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.76)) !important; border-color: rgba(255,255,255,.40) !important; } .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.82)) !important; border-color: rgba(255,255,255,.46) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Softer icon chips */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; } .pcp-giveawayHow details[open] > .pcp-acc__sum:before, .pcp-giveawayInfo details[open] > .pcp-acc__sum:before{ background:rgba(120,255,200,.08) !important; border-color:rgba(120,255,200,.20) !important; } /* Body panel slightly softer */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ background:rgba(0,0,0,.18) !important; border-color:rgba(255,255,255,.08) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; transition: transform .10s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow: 0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform: translateY(1px) scale(.995) !important; } /* Make the icons softer (still clear) */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; opacity:.9 !important; } /* Open state: a gentle highlight, not a harsh glow */ .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ border-color:rgba(255,255,255,.20) !important; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* Content panel: softer card */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.08) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; transform:none !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow: 0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ border-color:rgba(255,255,255,.18) !important; box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* Softer plus/minus icon chip */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; opacity:.95 !important; } /* Gentle chevron */ .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{ opacity:.75 !important; } /* =============================== jQuery UI Datepicker - dark portal styling (Used for the Reservations form calendar picker) =============================== */ .ui-datepicker{ padding:10px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.12) !important; background:rgba(12,12,14,.96) !important; box-shadow:0 18px 60px rgba(0,0,0,.55) !important; backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); z-index: 99999 !important; } .ui-datepicker .ui-datepicker-header{ border:0 !important; background:transparent !important; color:#fff !important; } .ui-datepicker .ui-datepicker-title{ font-weight:800 !important; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{ border-radius:12px !important; border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.04) !important; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.16) !important; } .ui-datepicker table{ margin:8px 0 0 0 !important; } .ui-datepicker th{ color:rgba(255,255,255,.70) !important; font-weight:700 !important; } .ui-datepicker td a, .ui-datepicker td span{ border-radius:12px !important; border:1px solid transparent !important; background:transparent !important; color:#fff !important; text-align:center !important; padding:8px 0 !important; } .ui-datepicker td a:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.14) !important; } .ui-datepicker .ui-state-active, .ui-datepicker .ui-state-active:hover{ background:rgba(255,73,73,.25) !important; border-color:rgba(255,73,73,.45) !important; } .ui-datepicker .ui-state-highlight{ background:rgba(255,255,255,.10) !important; border-color:rgba(255,255,255,.14) !important; } /* Content panel: a touch lighter */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 24px rgba(0,0,0,.18) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(calc(var(--pcp-glass-blur) * .75)) !important; -webkit-backdrop-filter: blur(calc(var(--pcp-glass-blur) * .75)) !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Softer icon chips */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; } /* Open state: gentle highlight */ .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ border-color:rgba(255,255,255,.22) !important; background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important; box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Softer left icon and chevron */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; color:rgba(255,255,255,.88) !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{ opacity:.65 !important; } /* Slightly softer content panel */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 10px 22px rgba(0,0,0,.18) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .10s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.16) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important; } .pcp-giveawayHow details[open] > .pcp-acc__sum, .pcp-giveawayInfo details[open] > .pcp-acc__sum{ border-color:rgba(255,255,255,.18) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Softer icon chips */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; color:rgba(255,255,255,.86) !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{ opacity:.70 !important; } /* Content panel slightly softer */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ background:rgba(255,255,255,.03) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 8px 18px rgba(0,0,0,.18) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Soften the plus/minus chip inside giveaway accordions */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; } /* Make the chevron calmer */ .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{ opacity:.65 !important; } /* Content panel slightly softer */ .pcp-giveawayHow .pcp-acc__body, .pcp-giveawayInfo .pcp-acc__body{ border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.03) !important; box-shadow:0 8px 18px rgba(0,0,0,.18) !important; } /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{transform:translateY(1px) scale(.995) !important;} /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{opacity:.75 !important;} /* =============================== Giveaway accordions - gentle button look (v6) Softer contrast, subtle depth, still clearly clickable. =============================== */ .pcp-giveawayHow .pcp-acc__sum, .pcp-giveawayInfo .pcp-acc__sum{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.12) !important; box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(10px) saturate(120%) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important; } .pcp-giveawayHow .pcp-acc__sum:hover, .pcp-giveawayInfo .pcp-acc__sum:hover{ background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 12px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.07) !important; } .pcp-giveawayHow .pcp-acc__sum:active, .pcp-giveawayInfo .pcp-acc__sum:active{ transform:translateY(1px) scale(.995) !important; } /* Soften the left icon and arrow for giveaway */ .pcp-giveawayHow .pcp-acc__sum:before, .pcp-giveawayInfo .pcp-acc__sum:before{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; opacity:.9 !important; } .pcp-giveawayHow .pcp-acc__sum:after, .pcp-giveawayInfo .pcp-acc__sum:after{ opacity:.75 !important; } /* Info tooltips (reservation media types) */ .pcp-info{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:10px; border-radius:999px; cursor:help; color:rgba(220,235,255,.95); background:rgba(120,170,255,.10); border:1px solid rgba(120,170,255,.22); box-shadow:0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); position:relative; flex:0 0 auto; transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .pcp-info i{ font-size:12px; line-height:1; transform:translateY(-.2px); opacity:.78; } .pcp-info:hover{ transform:translateY(-1px); background:rgba(120,170,255,.16); border-color:rgba(120,170,255,.34); box-shadow:0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10); } .pcp-info:active{ transform:translateY(0); } .pcp-info:focus{ outline:none; } .pcp-info:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10); } /* Tooltip bubble */ .pcp-info[data-tip]::after, .pcp-info[data-tip]::before{ opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease; } .pcp-info[data-tip]:hover::after, .pcp-info[data-tip]:focus-visible::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(2px); width:max-content; max-width:240px; white-space:normal; padding:16px 18px; border-radius:14px; background:rgba(14,14,16,.92); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 46px rgba(0,0,0,.46); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size:15px; line-height:1.5; z-index:82; opacity:1; } .pcp-info[data-tip]:hover::before, .pcp-info[data-tip]:focus-visible::before{ content:''; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%) translateY(2px); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid rgba(14,14,16,.92); z-index:81; opacity:1; } /* Make required star hint visible */ .pcp-req{cursor:help;} /* ====================================== DARK RESERVATION FORM STYLES ====================================== */ .pcp-resForm--dark { max-width: 900px; margin: 0 auto; background: transparent; } .pcp-resForm--dark .pcp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .pcp-resForm--dark .pcp-field { margin-bottom: 20px; } .pcp-resForm--dark .pcp-field--full { grid-column: 1 / -1; } .pcp-resForm--dark label { /* Keep required star aligned with label text */ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #ffffff; } .pcp-resForm--dark .pcp-req { color: #dc2626; font-weight: 700; } .pcp-resForm--dark input[type="text"], .pcp-resForm--dark input[type="email"], .pcp-resForm--dark input[type="tel"], .pcp-resForm--dark input[type="date"], .pcp-resForm--dark select, .pcp-resForm--dark textarea { width: 100%; padding: 15px 20px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; color: #ffffff; font-size: 15px; transition: all 0.3s; min-height: 54px; line-height: 1.5; box-sizing: border-box; } .pcp-resForm--dark input[type="date"] { cursor: pointer; color-scheme: dark; background: #1a1a1a !important; } .pcp-resForm--dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 1; } .pcp-resForm--dark input:focus, .pcp-resForm--dark select:focus, .pcp-resForm--dark textarea:focus { outline: none; border-color: #dc2626; background: #0f0f0f; } .pcp-resForm--dark input::placeholder, .pcp-resForm--dark textarea::placeholder { color: #666; } .pcp-resForm--dark .pcp-hint { font-size: 13px; color: #888; margin-top: 8px; } /* Checkbox Grid */ .pcp-resForm--dark .pcp-checkGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 10px; } .pcp-resForm--dark .pcp-checkbox-item { position: relative; } .pcp-resForm--dark .pcp-checkbox-item input[type="checkbox"] { position: absolute; opacity: 0; } .pcp-resForm--dark .pcp-checkbox-label { display: flex; align-items: center; gap: 10px; line-height: 1; padding: 15px 20px; background: #2a2a2a; border: 2px solid #3a3a3a; border-radius: 10px; cursor: pointer; transition: all 0.3s; min-height: 54px; } /* Keep star icon perfectly centered with the text */ .pcp-resForm--dark .pcp-checkbox-label > span{ display: inline-flex; align-items: center; line-height: 1; } .pcp-resForm--dark .pcp-checkbox-item input[type="checkbox"]:checked + .pcp-checkbox-label { background: #3a3a3a; border-color: #fbbf24; } .pcp-resForm--dark .pcp-checkbox-label::before { content: '☆'; width: 20px; height: 20px; border: none; border-radius: 4px; background: transparent; transition: all 0.3s; flex-shrink: 0; color: #666; font-size: 20px; display: flex; align-items: center; justify-content: center; line-height: 1; margin-top: 0; align-self: center; transform: translateY(1px); } .pcp-resForm--dark .pcp-checkbox-item input[type="checkbox"]:checked + .pcp-checkbox-label::before { content: '★'; background: transparent; border: none; color: #fbbf24; font-size: 20px; display: flex; align-items: center; justify-content: center; line-height: 1; } .pcp-resForm--dark .pcp-info-icon { width: 22px; height: 22px; background: #555; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #fff; cursor: help; margin-left: auto; flex-shrink: 0; transition: all 0.3s; font-style: normal; position: relative; z-index: 10; } .pcp-resForm--dark .pcp-info-icon:hover { background: #4A90E2; transform: scale(1.15); box-shadow: 0 2px 8px rgba(74, 144, 226, 0.4); } /* Tooltip on hover */ .pcp-resForm--dark .pcp-info-icon:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; padding: 8px 12px; background: rgba(0, 0, 0, 0.95); color: #fff; border-radius: 6px; font-size: 12px; font-weight: normal; white-space: nowrap; max-width: 250px; white-space: normal; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); z-index: 1000; pointer-events: none; } /* Tooltip arrow */ .pcp-resForm--dark .pcp-info-icon:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; border: 6px solid transparent; border-top-color: rgba(0, 0, 0, 0.95); z-index: 1001; pointer-events: none; } /* Guest reservation form: remove portal background/frame ornaments */ .pcp-wrap--guest, .pcp-wrap--guest .pcp-card, .pcp-wrap--guest .pcp-card--glass { background: transparent !important; border: none !important; box-shadow: none !important; } .pcp-wrap--guest::before, .pcp-wrap--guest::after { content: none !important; display: none !important; } /* Guest: hide Google Maps inline error hint under the mini-map */ .pcp-wrap--guest [data-pcp-gmaps-error]{ display:none !important; } .pcp-resFormWrap--guest { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Hide map geocoding error text on frontend (keeps UI clean) */ [data-pcp-gmaps-error] { display: none !important; } /* Submit Button */ .pcp-resForm--dark .pcp-btn--submit { background: #dc2626 !important; color: #ffffff !important; border: none !important; padding: 16px 40px !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; transition: all 0.3s !important; } .pcp-resForm--dark .pcp-btn--submit:hover { background: #b91c1c !important; transform: translateY(-2px); } .pcp-resForm--dark textarea { min-height: 120px; resize: vertical; } .pcp-resForm--dark select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 15px center; background-size: 20px; padding-right: 45px; } .pcp-resForm--dark select option { background: #1a1a1a; color: #ffffff; padding: 10px; } .pcp-resForm--dark .pcp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } /* Responsive */ @media (max-width: 768px) { .pcp-resForm--dark .pcp-form__row { grid-template-columns: 1fr; } .pcp-resForm--dark .pcp-checkGrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .pcp-resForm--dark .pcp-checkGrid { grid-template-columns: 1fr; } } /* ====================================== DUAL GIVEAWAY LAYOUT (Two Prizes Side by Side) ====================================== */ .pcp-giveaway--dual { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .pcp-giveaway__prize-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px; transition: all 0.3s; } .pcp-giveaway__prize-card:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } .pcp-giveaway--dual .pcp-giveaway__imgWrap { width: 100%; height: 200px; margin-bottom: 16px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.3); } .pcp-giveaway--dual .pcp-giveaway__img { width: 100%; height: 100%; object-fit: contain; padding: 16px; } /* Make photo-type prizes fill the image box (no padding, crop-to-cover) */ .pcp-giveaway--dual .pcp-giveaway__img--cover { object-fit: contain !important; /* Показва цялата снимка */ padding: 12px; /* Малко space около снимката */ background: rgba(0,0,0,.15); /* Тъмен фон зад снимката */ } .pcp-giveaway__prize-info { text-align: center; } .pcp-giveaway__prize-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.5); margin-bottom: 8px; } .pcp-giveaway__prize-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #fff; } .pcp-giveaway__prize-desc { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5; } .pcp-giveaway__status-section { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; margin-bottom: 20px; } .pcp-giveaway__status-section .pcp-nextCard { flex: 1; margin: 0; } .pcp-giveaway__status-section .pcp-giveaway__status { flex-shrink: 0; } /* Mobile responsive */ @media (max-width: 768px) { .pcp-giveaway--dual { grid-template-columns: 1fr; gap: 16px; } .pcp-giveaway--dual .pcp-giveaway__imgWrap { height: 180px; } .pcp-giveaway__status-section { flex-direction: column; text-align: center; } } /* ====================================== COMPACT COUNTDOWN AT TOP ====================================== */ /* ======================================== GIVEAWAY FLIP COUNTER Full width, red/black theme, soft & elegant ======================================== */ .pcp-giveaway__countdown-luxury { position: relative; overflow: visible; background: linear-gradient(155deg, rgba(25,25,30,0.88) 0%, rgba(18,18,22,0.94) 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 14px 18px 16px; margin-bottom: 18px; text-align: center; box-shadow: 0 6px 20px -6px rgba(0,0,0,.4), 0 3px 10px -2px rgba(220,38,38,.06), inset 0 1px 0 rgba(255,255,255,.03); width: 100%; max-width: none; } /* Subtle red/black border glow */ .pcp-giveaway__countdown-luxury::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: linear-gradient(135deg, rgba(220,38,38,.15) 0%, rgba(0,0,0,.25) 30%, rgba(220,38,38,.10) 50%, rgba(0,0,0,.25) 70%, rgba(220,38,38,.12) 100%); background-size: 200% 200%; animation: pcp-premium-glow 10s ease-in-out infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; } /* Very subtle outer shadow */ .pcp-giveaway__countdown-luxury::after { content: ""; position: absolute; inset: -8px; border-radius: 24px; background: radial-gradient( ellipse at center, rgba(220,38,38,.05) 0%, rgba(0,0,0,.1) 50%, transparent 80% ); pointer-events: none; z-index: -1; opacity: 0.4; } @keyframes pcp-premium-glow { 0%, 100% { background-position: 0% 50%; opacity: 0.4; } 50% { background-position: 100% 50%; opacity: 0.6; } } .pcp-countdown-label { position: relative; z-index: 1; font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; } /* Compact flip countdown */ .pcp-flip-countdown--giveaway { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; /* More breathing room between units (Days : Hours : Min : Sec) */ gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .pcp-flip-countdown--giveaway .pcp-flip-unit { display: flex; flex-direction: column; align-items: center; /* Override the global flip-clock rule that fixes unit width for 2 digits. Giveaway days use 3 digits (H/T/U), so we must allow natural width. */ width: auto; min-width: 0; gap: 6px; } .pcp-flip-countdown--giveaway .pcp-flip-digits { display: flex; gap: 4px; } /* Smaller, elegant flip digit */ .pcp-flip-countdown--giveaway .pcp-flip-digit { width: 32px; height: 42px; background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 50%, rgba(0,0,0,.06) 100%), rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -1px; box-shadow: 0 3px 10px -2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03); position: relative; overflow: hidden; /* The global flip-clock adds margins/perspective for animated cards. Giveaway uses static digits, so keep spacing controlled by flex gap. */ margin: 0; } /* Subtle top reflection */ .pcp-flip-countdown--giveaway .pcp-flip-digit::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%); border-radius: 9px 9px 0 0; pointer-events: none; } /* Center line */ .pcp-flip-countdown--giveaway .pcp-flip-digit::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.2); pointer-events: none; } /* Soft separator */ .pcp-flip-countdown--giveaway .pcp-flip-separator { font-size: 24px; font-weight: 300; color: rgba(255,255,255,.25); padding-top: 14px; align-self: flex-start; } /* Soft unit labels */ .pcp-flip-countdown--giveaway .pcp-flip-label { font-size: 7px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.25); /* Keep labels readable and not "stuck" to the digits */ margin-top: 2px; line-height: 1.15; height: auto; min-height: 10px; } .pcp-countdown-date { position: relative; z-index: 1; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.3); letter-spacing: 0.5px; } .pcp-giveaway__status-only { display: none !important; /* Скрит минус бутона */ text-align: center; margin: 16px 0; } /* Tablet responsive */ @media (max-width: 768px) { .pcp-giveaway__countdown-luxury { padding: 14px 18px 16px; border-radius: 16px; } .pcp-flip-countdown--giveaway { gap: 8px; } .pcp-flip-countdown--giveaway .pcp-flip-digit { width: 28px; height: 38px; font-size: 20px; border-radius: 8px; } .pcp-flip-countdown--giveaway .pcp-flip-digits { gap: 3px; } .pcp-flip-countdown--giveaway .pcp-flip-separator { font-size: 20px; padding-top: 12px; } .pcp-flip-countdown--giveaway .pcp-flip-label { font-size: 6px; } .pcp-countdown-label { font-size: 7px; margin-bottom: 10px; } .pcp-countdown-date { font-size: 9px; } } /* Mobile responsive */ @media (max-width: 480px) { .pcp-giveaway__countdown-luxury { padding: 12px 16px 14px; border-radius: 14px; } .pcp-flip-countdown--giveaway { gap: 6px; } .pcp-flip-countdown--giveaway .pcp-flip-digit { width: 26px; height: 36px; font-size: 18px; border-radius: 7px; } .pcp-flip-countdown--giveaway .pcp-flip-separator { font-size: 18px; padding-top: 10px; } .pcp-flip-countdown--giveaway .pcp-flip-label { font-size: 6px; } } /* Extra small phones */ @media (max-width: 380px) { .pcp-flip-countdown--giveaway .pcp-flip-digit { width: 24px; height: 34px; font-size: 16px; } .pcp-flip-countdown--giveaway .pcp-flip-separator { font-size: 16px; } } /* ====================================== MINI GOOGLE MAP PREVIEW ====================================== */ .pcp-mini-map { margin-top: 16px; margin-bottom: 16px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #1a1a1a; box-shadow: 0 8px 24px -8px rgba(0,0,0,.4); width: 100%; } .pcp-mini-map__container { width: 100%; height: 300px; position: relative; } .pcp-mini-map__container img { max-width: none !important; } /* Google Maps UI adjustments (guest/front) */ .pcp-mini-map .gm-style .gm-style-iw-c { background: #ffffff !important; border-radius: 10px !important; } .pcp-mini-map .gm-style .gm-style-iw-d { color: #000000 !important; font-size: 14px !important; line-height: 1.35 !important; } .pcp-mini-map .gm-style .gm-style-iw-t::after { background: #ffffff !important; } /* Responsive */ @media (max-width: 768px) { .pcp-mini-map__container { height: 250px; } .pcp-mini-map { border-radius: 12px; } } /* ====================================== GOOGLE MAPS CONTROLS STYLING ====================================== */ /* Minimal styling - let Google Maps use default controls */ .pcp-mini-map .gm-control-active, .pcp-mini-map button { /* Remove our custom styling, use Google's defaults */ } /* Google logo and attribution */ .pcp-mini-map .gm-style-cc { background-color: rgba(255,255,255,0.9) !important; color: #000000 !important; } .pcp-mini-map a[href^="https://maps.google.com"] { background-color: #ffffff !important; padding: 2px 6px !important; border-radius: 4px !important; } /* ====================================== FLIP CLOCK ANIMATION FOR COUNTDOWN ====================================== */ .pcp-flip-countdown { display: flex !important; gap: 6px !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; /* Prevent scrollbars / layout reflow (this caused the hero card to "jiggle") */ overflow: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* Responsive flip sizing We drive ALL sizing from CSS variables so the countdown can truly shrink on phones. (Previously, the digit boxes shrank but the unit width stayed fixed, so it still overflowed.) */ .pcp-flip-countdown{ /* Default: fluid sizing so it stays responsive even if mobile class/viewport is wrong */ /* Extra-compact footprint: keep the timer narrow on phones */ --pcp-digit-w: clamp(14px, 4.8vw, 26px); --pcp-digit-h: clamp(22px, 6.6vw, 36px); --pcp-digit-gap: clamp(1px, 0.4vw, 2px); --pcp-unit-pad: 4px; --pcp-unit-w: calc((var(--pcp-digit-w) * 2) + var(--pcp-digit-gap) + var(--pcp-unit-pad)); } .pcp-flip-countdown::-webkit-scrollbar { display: none; } .pcp-flip-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; /* Keep each unit a FIXED width so translated labels don't resize the layout. IMPORTANT: a unit contains 2 digits, so width must fit both digits. */ width: var(--pcp-unit-w); min-width: var(--pcp-unit-w); } /* Two digits per unit: keep their layout stable */ .pcp-flip-digits{ display:flex; align-items:center; justify-content:center; gap: var(--pcp-digit-gap); } .pcp-flip-label{ font-size: 11px; line-height: 14px; height: 14px; /* fixed height prevents vertical reflow when language changes */ opacity: .75; white-space: nowrap; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; } /* Separators can also cause micro reflow; keep fixed */ .pcp-flip-separator{ display:inline-flex; width: 8px; justify-content:center; } .pcp-flip-digit { position: relative; display: inline-block; width: var(--pcp-digit-w); height: var(--pcp-digit-h); perspective: 400px; margin: 0 2px; } .pcp-flip-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); } .pcp-flip-card.flipping { animation: flipDown 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); } @keyframes flipDown { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-180deg); } } .pcp-flip-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%), rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; font-size: 32px; font-weight: 700; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; /* Prevent width jitter between digits (e.g. 1 vs 8) */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -1px; box-shadow: 0 4px 16px -4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); } .pcp-flip-face::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.3); box-shadow: 0 1px 0 rgba(255,255,255,.05); } .pcp-flip-face.front { z-index: 2; } .pcp-flip-face.back { transform: rotateX(180deg); } .pcp-flip-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.4); margin-top: 4px; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Keep labels from shifting when seconds flip */ .pcp-flip-label{height:14px;line-height:14px;margin-top:4px;} .pcp-flip-separator { font-size: 28px; font-weight: 600; color: rgba(255,255,255,.6); margin: 0 2px; /* Make separator take consistent space so the countdown doesn't shift */ width: 8px; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding-top: 14px; } /* Responsive sizing */ @media (max-width: 768px) { .pcp-nextCard { padding: 12px 16px; } .pcp-flip-countdown{ --pcp-digit-w: 34px; --pcp-digit-h: 46px; --pcp-digit-gap: 3px; } .pcp-flip-countdown { gap: 6px !important; } .pcp-flip-digit { margin: 0 1px; } .pcp-flip-face { font-size: 24px; } .pcp-flip-separator { font-size: 20px; padding-top: 12px; margin: 0 1px; } .pcp-flip-label { font-size: 7px; letter-spacing: 1px; } } @media (max-width: 520px) { .pcp-flip-countdown{ --pcp-digit-w: 28px; --pcp-digit-h: 40px; --pcp-digit-gap: 2px; } .pcp-nextCard { padding: 10px 14px; } .pcp-nextCard__k { font-size: 6px; letter-spacing: 1.5px; margin-bottom: 8px; } .pcp-flip-countdown { gap: 4px !important; } .pcp-flip-digit { margin: 0 1px; } .pcp-flip-face { font-size: 20px; } .pcp-flip-separator { font-size: 16px; padding-top: 10px; margin: 0; } .pcp-flip-label { font-size: 6px; letter-spacing: 0.8px; margin-top: 3px; } } @media (max-width: 400px) { .pcp-flip-countdown{ --pcp-digit-w: 24px; --pcp-digit-h: 34px; --pcp-digit-gap: 2px; } .pcp-nextCard { padding: 8px 12px; border-radius: 14px; } .pcp-nextCard__k { font-size: 5px; letter-spacing: 1.2px; margin-bottom: 6px; } .pcp-flip-countdown { gap: 3px !important; } .pcp-flip-digit { margin: 0; } .pcp-flip-face { font-size: 16px; border-radius: 6px; } .pcp-flip-separator { font-size: 14px; padding-top: 8px; } .pcp-flip-label { font-size: 5px; letter-spacing: 0.6px; margin-top: 2px; } } @media (max-width: 360px) { .pcp-flip-countdown{ --pcp-digit-w: 22px; --pcp-digit-h: 32px; --pcp-digit-gap: 1px; } .pcp-flip-face { font-size: 16px; border-radius: 5px; } .pcp-flip-separator { font-size: 14px; padding-top: 6px; } .pcp-flip-label { font-size: 4.5px; } /* Reduce padding on very small phones */ .pcp-nextCard { padding: 8px 10px 10px !important; } .pcp-nextCard__k { font-size: 5px; margin-bottom: 6px; } /* Make hero more compact */ .pcp-hero { padding: 8px; } .pcp-wrap { width: calc(100% - 16px); padding: 8px; } } /* Luxury animated effects for ticket statuses - Elegant pulsing glow that breathes - Smooth shimmer overlay - Premium feel with subtle motion - Respects prefers-reduced-motion */ /* Luxury glow pulse animation */ @keyframes pcp-glow-pulse { 0%, 100% { opacity: 0.4; filter: blur(12px); } 50% { opacity: 0.8; filter: blur(16px); } } /* Luxury shimmer animation */ @keyframes pcp-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* Luxury breathing border */ @keyframes pcp-border-breathe { 0%, 100% { box-shadow: 0 0 20px var(--glow-color), 0 0 40px var(--glow-color), inset 0 0 15px var(--glow-color); transform: scale(1); } 50% { box-shadow: 0 0 30px var(--glow-color), 0 0 60px var(--glow-color), inset 0 0 20px var(--glow-color); transform: scale(1.002); } } /* RED - Waiting for admin reply - Urgent pulsing */ .pcp-ticket--waiting { --glow-color: rgba(220, 38, 38, 0.15); position: relative; isolation: isolate; /* Prevent animation bleed-through */ } .pcp-ticket--waiting::before { content: ""; position: absolute; inset: -2px; border-radius: 20px; background: linear-gradient( 135deg, rgba(220, 38, 38, 0.15) 0%, rgba(239, 68, 68, 0.25) 25%, rgba(220, 38, 38, 0.15) 50%, rgba(239, 68, 68, 0.25) 75%, rgba(220, 38, 38, 0.15) 100% ); background-size: 200% 200%; opacity: 0.8; animation: pcp-shimmer 4s linear infinite; pointer-events: none; z-index: -1; } /* Hide animation when opened */ .pcp-ticket--waiting[open]::before, details.pcp-ticket--waiting[open]::before { display: none !important; } .pcp-ticket--waiting::after { content: ""; position: absolute; inset: -8px; border-radius: 22px; background: radial-gradient( circle at center, rgba(220, 38, 38, 0.3) 0%, rgba(239, 68, 68, 0.2) 30%, transparent 70% ); animation: pcp-glow-pulse 3s ease-in-out infinite; pointer-events: none; z-index: -2; } /* Hide glow when opened */ .pcp-ticket--waiting[open]::after, details.pcp-ticket--waiting[open]::after { display: none !important; } .pcp-ticket--waiting > * { position: relative; z-index: 1; } /* Ensure content background stays black */ .pcp-ticket--waiting[open], details.pcp-ticket--waiting[open] { background: #0a0a0a !important; background-color: #0a0a0a !important; } /* Hide animations when opened */ .pcp-ticket--waiting[open]::before, .pcp-ticket--waiting[open]::after, details.pcp-ticket--waiting[open]::before, details.pcp-ticket--waiting[open]::after { display: none !important; } /* GREEN - Admin replied - Calm breathing */ .pcp-ticket--admin-replied { --glow-color: rgba(34, 197, 94, 0.12); position: relative; isolation: isolate; /* Prevent animation bleed-through */ } .pcp-ticket--admin-replied::before { content: ""; position: absolute; inset: -2px; border-radius: 20px; background: linear-gradient( 135deg, rgba(34, 197, 94, 0.12) 0%, rgba(74, 222, 128, 0.2) 25%, rgba(34, 197, 94, 0.12) 50%, rgba(74, 222, 128, 0.2) 75%, rgba(34, 197, 94, 0.12) 100% ); background-size: 200% 200%; opacity: 0.7; animation: pcp-shimmer 5s linear infinite; pointer-events: none; z-index: -1; } /* Hide animation when opened */ .pcp-ticket--admin-replied[open]::before, details.pcp-ticket--admin-replied[open]::before { display: none !important; } .pcp-ticket--admin-replied::after { content: ""; position: absolute; inset: -8px; border-radius: 22px; background: radial-gradient( circle at center, rgba(34, 197, 94, 0.25) 0%, rgba(74, 222, 128, 0.15) 30%, transparent 70% ); animation: pcp-glow-pulse 4s ease-in-out infinite; pointer-events: none; z-index: -2; } /* Hide glow when opened */ .pcp-ticket--admin-replied[open]::after, details.pcp-ticket--admin-replied[open]::after { display: none !important; } .pcp-ticket--admin-replied > * { position: relative; z-index: 1; } /* Ensure content background stays black */ .pcp-ticket--admin-replied[open], details.pcp-ticket--admin-replied[open] { background: #0a0a0a !important; background-color: #0a0a0a !important; } /* Hide animations when opened */ .pcp-ticket--admin-replied[open]::before, .pcp-ticket--admin-replied[open]::after, details.pcp-ticket--admin-replied[open]::before, details.pcp-ticket--admin-replied[open]::after { display: none !important; } /* Accessibility: Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .pcp-ticket--waiting::before, .pcp-ticket--waiting::after, .pcp-ticket--admin-replied::before, .pcp-ticket--admin-replied::after, .pcp-ticket--placeholder-removed::before { animation: none !important; } /* Show static subtle glow instead */ .pcp-ticket--waiting::after, .pcp-ticket--admin-replied::after, .pcp-ticket--client-responded::after { opacity: 0.4; } } /* ------------------------------------------------------------------ Forced mobile layout via JS flag If media queries don't trigger (broken viewport meta / in-app browser), we still switch to mobile when html.pcp-is-mobile is present. ------------------------------------------------------------------- */ html.pcp-is-mobile .pcp-wrap{width:calc(100% - 20px);padding:10px;} html.pcp-is-mobile .pcp-hero{flex-direction:column;align-items:center;padding:10px;gap:10px;} html.pcp-is-mobile .pcp-shell{display:flex !important;flex-direction:column !important;} html.pcp-is-mobile .pcp-nav{position:relative !important;top:auto !important;width:100% !important;display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;} html.pcp-is-mobile .pcp-nav__item{width:auto !important;flex:0 0 auto !important;white-space:nowrap !important;} html.pcp-is-mobile .pcp-grid{grid-template-columns:1fr !important;} html.pcp-is-mobile .pcp-form__row{grid-template-columns:1fr !important;} html.pcp-is-mobile .pcp-slots{grid-template-columns:1fr !important;} html.pcp-is-mobile .pcp-services{grid-template-columns:1fr !important;} html.pcp-is-mobile .pcp-svcCards2, html.pcp-is-mobile .pcp-svc2__grid, html.pcp-is-mobile .pcp-svcGrid, html.pcp-is-mobile .pcp-svcCols{grid-template-columns:1fr !important;} html.pcp-is-mobile .pcp-svcKpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} /* Tables / wide blocks */ html.pcp-is-mobile .pcp-tableWrap, html.pcp-is-mobile table{max-width:100%;overflow-x:auto;display:block;} /* === Mobile responsiveness fixes (reservations + countdown) === */ /* Reservations list: stack content and actions on small screens */ @media (max-width: 560px){ .pcp-resItem{ flex-direction: column; align-items: stretch; } .pcp-resItem__right{ width: 100%; align-items: stretch; } .pcp-resItem__right .pcp-tag--status{ align-self: flex-start; } /* Make action buttons fill width if present */ .pcp-resItem__right a, .pcp-resItem__right button, .pcp-resItem__right .pcp-btn{ width: 100%; justify-content: center; } } /* Countdown: make it responsive even when html.pcp-is-mobile is not applied */ .pcp-flip-countdown{ max-width: 100%; min-width: 0; } @media (max-width: 680px){ .pcp-flip-countdown{ display:flex !important; flex-wrap:nowrap !important; justify-content:center !important; align-items:center; gap: clamp(4px, 2vw, 10px); overflow:hidden !important; --pcp-digit-w: clamp(12px, 5.2vw, 26px); --pcp-digit-h: clamp(20px, 8vw, 38px); } .pcp-nextCard--mobile .pcp-flip-unit, .pcp-nextCard .pcp-flip-unit{ flex: 0 0 auto; display:flex; flex-direction:column; align-items:center; width: calc(var(--pcp-digit-w) * 2 + 8px); min-width: 0; } .pcp-nextCard--mobile .pcp-flip-separator, .pcp-nextCard .pcp-flip-separator{ display:inline-flex !important; align-items:center; justify-content:center; opacity:.55; width:8px; flex: 0 0 8px; } .pcp-nextCard--mobile .pcp-flip-digit, .pcp-nextCard .pcp-flip-digit{ width: var(--pcp-digit-w); height: var(--pcp-digit-h); margin: 0 1px; flex: 0 0 auto; } .pcp-nextCard--mobile .pcp-flip-face, .pcp-nextCard .pcp-flip-face{ font-size: clamp(12px, 4.2vw, 18px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Labels: fixed height so translations never jiggle */ .pcp-nextCard--mobile .pcp-flip-label, .pcp-nextCard .pcp-flip-label{ min-height: 12px; line-height: 12px; white-space: nowrap; font-size: clamp(5px, 2vw, 8px); overflow: hidden; text-overflow: ellipsis; max-width: 100%; } } /* ═══════════════════════════════════════════════════════════ План за събитието — клиентски портал (светла тема) ═══════════════════════════════════════════════════════════ */ .pcp-res-plan { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .pcp-res-plan__title { font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .8px; color: #4A90E2; margin-bottom: 16px; } .pcp-res-plan .pcp-timeline { display: flex; flex-direction: column; } .pcp-res-plan .pcp-timeline__item { display: flex; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 18px; } .pcp-res-plan .pcp-timeline__item:last-child { padding-bottom: 0; } .pcp-res-plan .pcp-timeline__item:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(74,144,226,.35), rgba(74,144,226,.08)); border-radius: 1px; } .pcp-res-plan .pcp-timeline__dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #4A90E2; margin-top: 4px; position: relative; z-index: 1; box-shadow: 0 0 0 3px rgba(74,144,226,.22), 0 2px 8px rgba(74,144,226,.35); } .pcp-res-plan .pcp-timeline__content { display: flex; flex-direction: column; gap: 2px; } .pcp-res-plan .pcp-timeline__time { font-size: 13px; font-weight: 700; color: var(--pcp-text, #f5f5f5); } .pcp-res-plan .pcp-timeline__label { font-size: 13px; color: rgba(245,245,245,.6); }