/* ============================================================
   CF7 Popup & Panel Pro – Frontend CSS v2.0
   ============================================================ */

/* ---- Per-panel CSS variables (set inline per popup) ---- */
:root {
	--cf7pp-panel-width:   420px;
	--cf7pp-anim-speed:    380ms;
	--cf7pp-primary:       #0073aa;
	--cf7pp-text:          #333;
	--cf7pp-bg:            #fff;
	--cf7pp-radius:        8px;
	--cf7pp-overlay-bg:    rgba(0,0,0,.6);
	--cf7pp-sidetab-bg:    #cc0000;
	--cf7pp-sidetab-color: #fff;
}

/* ================================================================
   OVERLAY
   ================================================================ */
.cf7pp-overlay {
	position:   fixed;
	inset:      0;
	background: var(--cf7pp-overlay-bg);
	z-index:    99990;
	opacity:    0;
	visibility: hidden;
	transition: opacity var(--cf7pp-anim-speed) ease,
	            visibility 0s var(--cf7pp-anim-speed);
}
.cf7pp-overlay.is-visible {
	opacity:    1;
	visibility: visible;
	transition: opacity var(--cf7pp-anim-speed) ease;
}

/* ================================================================
   SHARED PANEL SHELL
   ================================================================ */
.cf7pp-panel {
	position:   fixed;
	z-index:    99995;
	background: var(--cf7pp-bg);
	color:      var(--cf7pp-text);
	box-shadow: 0 12px 48px rgba(0,0,0,.22);
	overflow:   hidden;
	visibility: hidden;
	transition: transform var(--cf7pp-anim-speed) cubic-bezier(.4,0,.2,1),
	            opacity   var(--cf7pp-anim-speed) ease,
	            visibility 0s var(--cf7pp-anim-speed);
}

/* ================================================================
   POPUP MODAL
   ================================================================ */
.cf7pp-panel.cf7pp--popup {
	top:           50%;
	left:          50%;
	transform:     translate(-50%, -47%) scale(.96);
	opacity:       0;
	width:         min(var(--cf7pp-panel-width), 94vw);
	max-height:    90vh;
	overflow-y:    auto;
	border-radius: var(--cf7pp-radius);
}
.cf7pp-panel.cf7pp--popup.is-open {
	transform:  translate(-50%, -50%) scale(1);
	opacity:    1;
	visibility: visible;
	transition: transform var(--cf7pp-anim-speed) cubic-bezier(.4,0,.2,1),
	            opacity   var(--cf7pp-anim-speed) ease;
}

/* ================================================================
   SLIDE PANELS
   ================================================================ */
.cf7pp-panel.cf7pp--slide {
	top:        0;
	height:     100%;
	width:      min(var(--cf7pp-panel-width), 94vw);
	max-height: 100vh;
	overflow-y: auto;
	border-radius: 0;
	opacity:    1;
}
/* Right slide */
.cf7pp-panel.cf7pp--slide.cf7pp--slide-right {
	right:     0;
	left:      auto;
	transform: translateX(100%);
}
.cf7pp-panel.cf7pp--slide.cf7pp--slide-right.is-open {
	transform:  translateX(0);
	visibility: visible;
	transition: transform var(--cf7pp-anim-speed) cubic-bezier(.4,0,.2,1),
	            opacity   var(--cf7pp-anim-speed) ease;
}
/* Left slide */
.cf7pp-panel.cf7pp--slide.cf7pp--slide-left {
	left:      0;
	right:     auto;
	transform: translateX(-100%);
}
.cf7pp-panel.cf7pp--slide.cf7pp--slide-left.is-open {
	transform:  translateX(0);
	visibility: visible;
	transition: transform var(--cf7pp-anim-speed) cubic-bezier(.4,0,.2,1),
	            opacity   var(--cf7pp-anim-speed) ease;
}

/* ================================================================
   PANEL INNER
   ================================================================ */
.cf7pp-panel__inner {
	position: relative;
	padding:  2rem 1.75rem 1.75rem;
}
.cf7pp-panel__body { margin-top: .25rem; }

/* Close button */
.cf7pp-panel__close {
	position:        absolute;
	top:             .65rem;
	right:           .65rem;
	width:           1.9rem;
	height:          1.9rem;
	border:          none;
	background:      rgba(0,0,0,.08);
	border-radius:   50%;
	cursor:          pointer;
	font-size:       1.2rem;
	line-height:     1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--cf7pp-text);
	transition:      background .18s;
	padding:         0;
	flex-shrink:     0;
}
.cf7pp-panel__close:hover { background: rgba(0,0,0,.16); }
.cf7pp-panel__close:focus-visible { outline: 2px solid var(--cf7pp-primary); outline-offset: 2px; }

/* ================================================================
   SIDE TAB  (the vertical "Quick Contact" style button)
   ================================================================ */
.cf7pp-sidetab {
	position:        fixed;
	z-index:         99994;
	top:             50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	border:          none;
	cursor:          pointer;
	background:      var(--cf7pp-sidetab-bg);
	color:           var(--cf7pp-sidetab-color);
	font-size:       .82rem;
	font-weight:     700;
	letter-spacing:  .08em;
	text-transform:  uppercase;
	white-space:     nowrap;
	box-shadow:      0 4px 18px rgba(0,0,0,.25);
	transition:      transform .2s, box-shadow .2s;
}
.cf7pp-sidetab:hover { box-shadow: 0 6px 24px rgba(0,0,0,.32); }
.cf7pp-sidetab:focus-visible { outline: 3px solid var(--cf7pp-sidetab-bg); outline-offset: 3px; }

/* The inner <span> is rotated to make text vertical */
.cf7pp-sidetab span {
	display:          block;
	padding:          .9rem .55rem;
	writing-mode:     vertical-rl;
	text-orientation: mixed;
	transform:        rotate(180deg);
}

/* Right edge */
.cf7pp-sidetab--right {
	right:            0;
	left:             auto;
	transform:        translateY(-50%);
	border-radius:    6px 0 0 6px;
}
.cf7pp-sidetab--right:hover { transform: translateY(-50%) translateX(-3px); }

/* Left edge */
.cf7pp-sidetab--left {
	left:             0;
	right:            auto;
	transform:        translateY(-50%);
	border-radius:    0 6px 6px 0;
}
.cf7pp-sidetab--left:hover { transform: translateY(-50%) translateX(3px); }

/* ================================================================
   FLOATING ACTION BUTTON  (pill style)
   ================================================================ */
.cf7pp-fab {
	position:    fixed;
	z-index:     99993;
	display:     flex;
	align-items: center;
	gap:         .4rem;
	padding:     .65rem 1.15rem .65rem .85rem;
	background:  var(--cf7pp-primary);
	color:       #fff;
	border:      none;
	border-radius: 2rem;
	box-shadow:  0 4px 16px rgba(0,0,0,.26);
	cursor:      pointer;
	font-size:   .92rem;
	font-weight: 600;
	white-space: nowrap;
	transition:  transform .2s, box-shadow .2s;
}
.cf7pp-fab:hover         { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(0,0,0,.3); }
.cf7pp-fab:focus-visible { outline: 3px solid var(--cf7pp-primary); outline-offset: 3px; }
.cf7pp-fab__icon         { font-size: 1rem; }

.cf7pp-fab--bottom-right { bottom: 1.5rem; right: 1.5rem; }
.cf7pp-fab--bottom-left  { bottom: 1.5rem; left:  1.5rem; }
.cf7pp-fab--top-right    { top:    1.5rem; right: 1.5rem; }
.cf7pp-fab--top-left     { top:    1.5rem; left:  1.5rem; }

/* ================================================================
   INLINE TRIGGER BUTTON  (shortcode)
   ================================================================ */
.cf7pp-trigger-btn {
	display:       inline-flex;
	align-items:   center;
	padding:       .55rem 1.2rem;
	background:    var(--cf7pp-primary);
	color:         #fff;
	border:        none;
	border-radius: var(--cf7pp-radius);
	cursor:        pointer;
	font-size:     .95rem;
	font-weight:   600;
	transition:    opacity .18s, transform .18s;
}
.cf7pp-trigger-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ================================================================
   SCROLL LOCK
   ================================================================ */
body.cf7pp-lock { overflow: hidden; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 520px) {
	.cf7pp-panel__inner { padding: 1.25rem 1rem; }
	.cf7pp-fab__label   { display: none; }
	.cf7pp-fab {
		border-radius: 50%;
		width:   3rem;
		height:  3rem;
		padding: 0;
		justify-content: center;
	}
	.cf7pp-sidetab span { padding: .75rem .45rem; font-size: .72rem; }
}