/* =============================================================================
   UGL OZ Replica — CONTENT PAGES  (owner: tuju-pages / P8)
   /faq/ · /how-to-order/ · /affiliates/ · /affiliate-registration/
   /affiliate-account/ · /contact/ · /subscription-confirmation/ + the single post.

   Every value is measured from ugloz.is, either from the captured InBio / plugin CSS
   (scrape/source-cdp/css/) or pixel-measured off the 1440 reference tiles in
   scrape/_shots/desktop/. Sources are cited inline.

   Depends on tokens.css (--ugloz-*) and base.css (.container, .rn-section-gap,
   .breadcrumb-area, .ugloz-prose) — both owned by tuju-homepage. Load AFTER them.

   SCOPE: everything prose-related hangs off `body.ugloz-content-page`, a class added
   by inc/forms.php on singular pages that are NOT the front page, plus single posts.
   That keeps this file away from the homepage SEO zone, which also uses .ugloz-prose.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Entry column geometry
   The source nests: .rn-section-gap (100px 0)  >  .container (1310 @ xl, 15px pad)
   > Elementor .elementor-container (max-width 1140, centred)  >  column padding 10px.
   Net: the text column is 1120px wide at x=160..1280 on a 1440 viewport — measured
   on _shots/desktop/faq.png (first ink x=160) and affiliates.png (x=160).
   (The FAQ's text-editor widget is additionally 101.648% wide — an Elementor sizing
   artefact worth ~18px on the right edge. Not replicated.)
   -------------------------------------------------------------------------- */
.ugloz-content-page .rn-entry-content {
	max-width: var(--ugloz-container, 1140px);
	margin: 0 auto;
	/* 10px on all four sides = Elementor's .elementor-element-populated column padding.
	   The top 10px is load-bearing: without it every content page's first line sits 10px
	   high (source gap under the title bar is 118px on /affiliates/, 108px without). */
	padding: 10px;
}

/* -----------------------------------------------------------------------------
   2. Editor prose on content pages
   InBio values: h4 24px/1.3, p 16px, ul/ol 16px #878e99, ul padding-left 20px.
   -------------------------------------------------------------------------- */
.ugloz-content-page .rn-entry-content > :first-child { margin-top: 0; }
.ugloz-content-page .rn-entry-content > :last-child { margin-bottom: 0; }

.ugloz-content-page .rn-entry-content h4 {
	font-family: var(--ugloz-font-secondary, "Montserrat", sans-serif);
	font-size: var(--ugloz-h4, 24px);
	font-weight: var(--ugloz-w-bold, 700);
	line-height: 1.3;
	color: var(--ugloz-heading, #c4cfde);
	margin: 0 0 20px;
}

.ugloz-content-page .rn-entry-content h3 {
	font-size: var(--ugloz-h3, 30px);
	line-height: 30px;
	color: var(--ugloz-heading, #c4cfde);
}

/* Paragraph spacing is 30px, NOT InBio's 20px — Elementor's global kit raises it. Measured
   on _shots/desktop/affiliates.png: single-line paragraph ink pitch is 61px = 30.4 + 30. */
.ugloz-content-page .rn-entry-content p {
	margin: 0 0 30px;
	color: var(--ugloz-body, #878e99);
	font-size: var(--ugloz-fs-body, 16px);
	line-height: 30.4px;
}

/* An EMPTY <p> is a real Elementor artefact all through this source's copy. It
   collapses to nothing but its margin, exactly as it does on ugloz.is. */
.ugloz-content-page .rn-entry-content p:empty { margin: 0 0 30px; min-height: 0; }

.ugloz-content-page .rn-entry-content ul {
	list-style: disc;
	margin: 0 0 40px;
	padding-left: 20px;
}
.ugloz-content-page .rn-entry-content ol {
	margin: 0 0 30px;
	padding-left: 20px;
}
.ugloz-content-page .rn-entry-content li {
	font-size: 16px;
	font-weight: var(--ugloz-w-regular, 400);
	color: var(--ugloz-body, #878e99);
	line-height: 32px;   /* measured: 32px line pitch inside /affiliates/'s ordered lists */
	margin-top: 10px;
	margin-bottom: 10px;
}
.ugloz-content-page .rn-entry-content a {
	color: var(--ugloz-heading, #c4cfde);
	text-decoration: none;
	transition: var(--ugloz-transition, 0.4s);
}
.ugloz-content-page .rn-entry-content a:hover { color: var(--ugloz-primary, #dd9933); }

.ugloz-content-page .rn-entry-content img { max-width: 100%; height: auto; }
.ugloz-content-page .rn-entry-content img.aligncenter,
.ugloz-content-page .rn-entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ---- blockquote — InBio's signature neumorphic quote card --------------------
   Lifted from inbio/assets/css/style.css:
     padding 40px 40px 40px 100px; radius 5px; margin 30px 0;
     background var(--background-color-1); box-shadow var(--shadow-1);
     ::before  = a gold curly quote, 70px, at top:40px left:30px
     ::after   = linear-gradient(to right bottom,#212428,#16181c) behind, z-index -1
     p         = 20px/1.7, weight 500, colour --color-heading, font-style normal
   Verified against _shots/desktop/faq.png: quote-p line pitch 34px (20 x 1.7),
   list-item line pitch 28px (16 x 1.7, italic inherited from the blockquote).
   -------------------------------------------------------------------------- */
.ugloz-content-page .rn-entry-content blockquote {
	position: relative;
	z-index: 1;
	margin: 30px 0;
	padding: 40px 40px 40px 100px;
	font-size: 20px;
	line-height: 1.7;
	font-style: italic;
	font-weight: var(--ugloz-w-medium, 500);
	color: var(--ugloz-heading, #c4cfde);
	border: 0 none;
	border-radius: 5px;
	background: var(--ugloz-surface, linear-gradient(145deg, #1e2024, #23272b));
	box-shadow: var(--ugloz-shadow-1, 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e);
}

.ugloz-content-page .rn-entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	top: 40px;
	left: 30px;
	z-index: 1;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 1em;
	font-size: 70px;
	font-weight: 400;
	text-align: center;
	color: var(--ugloz-primary, #dd9933);
}

.ugloz-content-page .rn-entry-content blockquote::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background: var(--ugloz-surface-2, linear-gradient(to right bottom, #212428, #16181c));
	opacity: 1;
	z-index: -1;
	transition: var(--ugloz-transition, 0.4s);
}

/* margin 0 — InBio zeroes the bottom margin inside a quote and nothing sets a top one, so the
   stray empty <p> elements the source wraps every quote in contribute ZERO height. Getting
   this wrong inflated each quote card by ~52px. That is also why the source's own copy uses
   a literal <p>&nbsp;</p> when it wants a gap inside a quote. */
.ugloz-content-page .rn-entry-content blockquote p,
.ugloz-content-page .rn-entry-content blockquote p:empty {
	margin: 0;
	font-style: normal;
	font-size: 20px;
	line-height: 1.7;
	font-weight: var(--ugloz-w-medium, 500);
	color: var(--ugloz-heading, #c4cfde);
}
.ugloz-content-page .rn-entry-content blockquote ul { margin-bottom: 20px; }
.ugloz-content-page .rn-entry-content blockquote li { line-height: 28px; }

/* InBio's own breakpoints, verbatim: the quote loses its big left gutter from 991px down,
   but only tightens its vertical margin below 768px. */
@media only screen and (max-width: 991px) {
	.ugloz-content-page .rn-entry-content blockquote {
		padding: 20px 20px 20px 40px;
	}
	.ugloz-content-page .rn-entry-content blockquote::before {
		top: 7px;
		left: 0;
		font-size: 48px;
	}
}
@media only screen and (max-width: 767px) {
	.ugloz-content-page .rn-entry-content blockquote { margin: 20px 0; }
}

/* ---- responsive typography — InBio's own scale, verbatim ---------------------
   @768-991:  h1 38 · h2 32 · h3 28 · h4 24 · h5 18
   @<=767:    h1 34 · h2 28 · h3 24 · h4 20 · h5 16   and  p { margin: 0 0 20px }
   Blockquote paragraphs stay 20px at every breakpoint — InBio never overrides them.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.ugloz-content-page .rn-entry-content h3 { font-size: 28px; }
	.ugloz-content-page .rn-entry-content h4 { font-size: 24px; }
}
@media only screen and (max-width: 767px) {
	.ugloz-content-page .rn-entry-content h3 { font-size: 24px; }
	.ugloz-content-page .rn-entry-content h4 { font-size: 20px; }
	.ugloz-content-page .rn-entry-content p,
	.ugloz-content-page .rn-entry-content p:empty { margin: 0 0 20px; }
	.ugloz-content-page .rn-entry-content blockquote p,
	.ugloz-content-page .rn-entry-content blockquote p:empty { margin: 0; }
}

/* -----------------------------------------------------------------------------
   3. /contact/ — two columns
   Elementor post-3720.css: section padding 64px 0 80px; columns 34.999% / 64.618%
   at >=768px, both 100% at <=1024px. Measured on _shots/desktop/contact.png:
   card x=150..549, form column starts x=559.
   The :not(.breadcrumb-area) guard keeps the page-title bar on its own 40px padding.
   -------------------------------------------------------------------------- */
body.ugloz-page-contact .rn-section-gap:not(.breadcrumb-area) { padding: 64px 0 80px; }

.ugloz-contact-row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}
.ugloz-contact-col-info,
.ugloz-contact-col-form {
	padding: 0 10px;
	width: 100%;
}
@media (min-width: 1025px) {
	.ugloz-contact-col-info { width: 34.999%; }
	.ugloz-contact-col-form { width: 64.618%; }
}
@media (max-width: 1024px) {
	.ugloz-contact-col-info { margin-bottom: 50px; }
}

/* ---- the neumorphic contact card (InBio .contact-about-area, verbatim) ------ */
.contact-about-area {
	height: 100%;
	padding: 30px;
	border-radius: 10px;
	background-color: var(--ugloz-bg, #212428);
	box-shadow: var(--ugloz-shadow-1, 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e);
}
.contact-about-area .thumbnail {
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: 10px;
}
.contact-about-area .thumbnail img {
	width: 100%;
	height: auto;
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area:hover .thumbnail img { transform: scale(1.1); }

.contact-about-area .title-area { margin-bottom: 15px; }
.ugloz-content-page .rn-entry-content .contact-about-area .title-area h4.title {
	font-family: var(--ugloz-font-secondary, "Montserrat", sans-serif);
	font-size: 29px;
	line-height: 44px;
	color: #e4e6ea; /* InBio --color-light */
	margin-bottom: 9px;
}
.contact-about-area .title-area span { color: var(--ugloz-body, #878e99); }

.contact-about-area .description { margin-bottom: 39px; }
.ugloz-content-page .rn-entry-content .contact-about-area .description p {
	display: inline-block;
	margin-bottom: 20px;
	font-family: var(--ugloz-font-primary, "Poppins", sans-serif);
	font-size: 18px;
	font-weight: var(--ugloz-w-regular, 400);
	line-height: 30px;
	color: var(--ugloz-body, #878e99);
}
.contact-about-area .description span { display: block; }
.contact-about-area .description span a {
	position: relative;
	color: var(--ugloz-lightn, #c4cfde);
	font-weight: var(--ugloz-w-regular, 400);
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area .description span a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 2px;
	z-index: 10;
	width: 0;
	height: 1px;
	background-color: var(--ugloz-primary, #dd9933);
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area .description span a:hover { color: var(--ugloz-primary, #dd9933); }
.contact-about-area .description span a:hover::before { width: 100%; }

.contact-about-area .social-area .name {
	margin-bottom: 8px;
	font-family: var(--ugloz-font-secondary, "Montserrat", sans-serif);
	font-size: 14px;
	font-weight: var(--ugloz-w-medium, 500);
	color: var(--ugloz-body, #878e99);
}
.contact-about-area .social-area .social-icone {
	margin: -15px;
	margin-top: 24px;
}
.contact-about-area .social-area .social-icone a {
	position: relative;
	z-index: 1;
	display: inline-block;
	width: 61px;
	height: 61px;
	line-height: 62px;
	margin: 15px;
	border-radius: 6px;
	box-shadow: var(--ugloz-shadow-1, 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e);
	text-align: center;
	font-size: 20px;
	color: var(--ugloz-lightn, #c4cfde);
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area .social-area .social-icone a::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background: var(--ugloz-surface-2, linear-gradient(to right bottom, #212428, #16181c));
	opacity: 0;
	z-index: -1;
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area .social-area .social-icone a svg {
	width: 20px;
	stroke-width: 2;
	color: var(--ugloz-lightn, #c4cfde);
	transition: var(--ugloz-transition, 0.4s);
}
.contact-about-area .social-area .social-icone a:hover {
	transform: translateY(-5px);
	color: var(--ugloz-primary, #dd9933);
}
.contact-about-area .social-area .social-icone a:hover::before { opacity: 1; }
.contact-about-area .social-area .social-icone a:hover svg { color: var(--ugloz-white, #fff); }

@media only screen and (max-width: 767px) {
	.contact-about-area {
		height: auto;
		margin-bottom: 0;
		padding: 50px 20px;
	}
	.ugloz-content-page .rn-entry-content .contact-about-area .title-area h4.title { font-size: 20px; }
	.contact-about-area .description span { font-size: 16px; }
	.contact-about-area .social-area .social-icone { margin: -5px; margin-top: 24px; }
	.contact-about-area .social-area .social-icone a { margin: 5px; }
}

/* -----------------------------------------------------------------------------
   4. Forms — shared controls
   InBio: input[type=text|email|password|url]/textarea -> 18px, height 50px,
   background transparent, border 2px solid hsla(0,0%,100%,.2), radius 4px,
   padding 0 15px. Confirmed by pixel measurement on _shots/desktop/contact.png:
   input border rgb(77,79,83) at 2px wide, box height exactly 50px.
   -------------------------------------------------------------------------- */
.ugloz-form input[type="text"],
.ugloz-form input[type="email"],
.ugloz-form input[type="url"],
.ugloz-form input[type="password"],
.ugloz-form textarea {
	font-family: inherit;
	font-size: var(--ugloz-fs-b1, 18px);
	font-weight: var(--ugloz-w-regular, 400);
	line-height: 28px;
	height: 50px;
	padding: 0 15px;
	color: var(--ugloz-body, #878e99);
	background: transparent;
	border: var(--ugloz-border-width, 2px) solid var(--ugloz-border, hsla(0, 0%, 100%, 0.2));
	border-radius: 4px;
	box-shadow: none;
	outline: none;
	transition: all 0.4s ease-out 0s;
	max-width: 100%;
}
.ugloz-form textarea { padding: 10px 15px; resize: vertical; }
.ugloz-form input:focus,
.ugloz-form textarea:focus { border-color: var(--ugloz-primary, #dd9933); }
.ugloz-form input::placeholder,
.ugloz-form textarea::placeholder { color: var(--ugloz-body, #878e99); }

.ugloz-form label {
	color: var(--ugloz-body, #878e99);
	font-size: var(--ugloz-fs-body, 16px);
	line-height: 30.4px;
}

/* Honeypot — never visible, never reachable by tab. */
.ugloz-hnp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Validation tip — InBio .wpcf7-not-valid-tip */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: var(--ugloz-w-medium, 500);
	text-transform: uppercase;
	color: #ff0003;
}
.ugloz-form input.wpcf7-not-valid,
.ugloz-form textarea.wpcf7-not-valid { border-color: #ff0003; }

/* Form-level notice — InBio's .wpcf7-response-output treatment */
.ugloz-form-notice {
	margin: 0 0 20px;
	padding: 10px 16px;
	border: 0 none;
	border-radius: 6px;
	font-size: 14px;
	box-shadow: var(--ugloz-shadow-1, 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e);
}
.ugloz-form-notice.is-sent { color: #3eb75e; }
.ugloz-form-notice.is-invalid { color: #ff8f3c; }
.ugloz-form-notice:empty { display: none; }

/* -----------------------------------------------------------------------------
   5. /contact/ form
   CF7 renders each row as <p><label>text<br><span><input size=40></span></label></p>.
   MEASURED on _shots/desktop/contact.png at a 1440 viewport: the text inputs are
   441px wide (x=559..1000) and the textarea 409px (x=559..968) — the browser's
   size=40 / cols=40 intrinsic width, NOT 100% of the column. Row pitch is 121px.
   Those widths are pinned here so the rebuild matches; max-width drops them to the
   column on narrow viewports.
   -------------------------------------------------------------------------- */
/* Row rhythm, reproduced from the reference tile rather than from a stylesheet: on the source
   the field rows sit on a 120.5px pitch (input tops 366 / 486 / 607 / 727), the textarea->captcha
   gap is 41px and the captcha->submit gap is 31px. Label 30.4 + control 50 + 10 + 30 = 120.4. */
.ugloz-content-page .rn-entry-content .ugloz-contact-form p { margin: 0 0 30px; }
.ugloz-contact-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	margin-bottom: 10px;
}
/* padding, not margin — a margin here collapses into the <p>'s and the row loses 10px.
   Applied to the three single-line rows only: the source's LAST field row (the textarea)
   does not carry it (measured gap textarea-bottom -> captcha-top = 41px, not 51px), and the
   captcha card must keep its measured 105px height. */
.ugloz-contact-form .wpcf7-form-control-wrap[data-name="your-name"],
.ugloz-contact-form .wpcf7-form-control-wrap[data-name="your-email"],
.ugloz-contact-form .wpcf7-form-control-wrap[data-name="your-subject"] { padding-bottom: 10px; }

.ugloz-contact-form input[type="text"],
.ugloz-contact-form input[type="email"] { width: 441px; }
.ugloz-contact-form textarea { width: 409px; height: 50px; }

/* Submit — InBio input[type=submit]: gold pill, 50px tall, padding 0 30px,
   border-radius 500px, 2px solid --color-primary, white 18px/500.
   Verified: the button measures 129 x 49px on the reference tile. */
.ugloz-contact-form input[type="submit"] {
	display: inline-block;
	width: auto;
	height: 50px;
	padding: 0 30px;
	font-family: var(--ugloz-font-primary, "Poppins", sans-serif);
	font-size: var(--ugloz-fs-b1, 18px);
	font-weight: var(--ugloz-w-medium, 500);
	line-height: 1.7;
	color: var(--ugloz-white, #fff);
	background: var(--ugloz-primary, #dd9933);
	border: 2px solid var(--ugloz-primary, #dd9933);
	border-radius: 500px;
	cursor: pointer;
	transition: var(--ugloz-transition, 0.4s);
}
.ugloz-contact-form input[type="submit"]:hover {
	background: transparent;
	color: var(--ugloz-primary, #dd9933);
	transform: translateY(-5px);
}

@media (max-width: 575px) {
	.ugloz-contact-form input[type="text"],
	.ugloz-contact-form input[type="email"],
	.ugloz-contact-form textarea { width: 100%; }
}

/* ---- maths captcha ----------------------------------------------------------
   Geometry is ds-cf7-math-captcha's own stylesheet, byte-for-byte:
   240px wide, #f7f7f7, radius 10px, padding 15px; question 18px; answer input
   30px tall, 10px padding, radius 5px, 1px solid #eee, margin-top 10px.
   Cross-checked on the reference tile: card 240 x 105px at x=559.
   The refresh control is an inline Feather "refresh-cw" SVG standing in for the
   plugin's icons8 PNG, which is not part of our asset set.
   -------------------------------------------------------------------------- */
.dscf7-captcha-container * { box-sizing: border-box; }
.dscf7-captcha-container {
	width: 240px;
	max-width: 100%;
	padding: 15px;
	border-radius: 10px;
	background: #f7f7f7;
	color: #4a5568;
}
.dscf7-captcha-container span.dscf7_lt {
	position: relative;
	display: block;
	padding-right: 30px;
	font-size: 18px;
	line-height: 1.4;
	color: #4a5568;
}
.dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	color: #1a202c;
}
.dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha:hover { color: #1a202c; }
.dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha svg { width: 100%; height: auto; }
.dscf7-captcha-container span.dscf7_lt .dscf7_refresh_captcha.is-loading { opacity: 0.4; }
.dscf7-captcha-container span.wpcf7-form-control-wrap { display: block; width: 100%; }
.ugloz-form .dscf7-captcha-container span.wpcf7-form-control-wrap input {
	width: 100%;
	height: 30px;
	margin-top: 10px;
	padding: 10px;
	font-family: var(--ugloz-font-primary, "Poppins", sans-serif);
	font-size: 16px;
	line-height: 1;
	color: #1a202c;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 5px;
	box-shadow: none;
}
.dscf7-captcha-container span.wpcf7-form-control-wrap input::placeholder { color: #8a8f98; }
.dscf7-captcha-container .wpcf7-not-valid-tip { font-size: 16px; margin-top: 5px; }

/* -----------------------------------------------------------------------------
   6. Affiliate forms
   Class names + field order lifted from the captured SliceWP DOM
   (scrape/source-cdp/html/affiliate-registration.html · affiliate-account.html).
   NOTE: there is NO reference screenshot for either page — the harvest captured the
   DOM and the text only — so sizing follows SliceWP's own style-front-end.css
   (fields 100% wide, 25px apart) plus InBio's generic control styling.
   -------------------------------------------------------------------------- */
.ugloz-form .slicewp-form { max-width: 600px; }
.slicewp-field-wrapper { margin-bottom: 25px; }
.slicewp-field-wrapper.slicewp-last { margin-bottom: 0; }
.slicewp-field-label-wrapper { margin-bottom: 8px; }
.slicewp-field-label-wrapper label {
	display: block;
	color: var(--ugloz-body, #878e99);
	font-size: var(--ugloz-fs-body, 16px);
}
.slicewp-field-required-marker { color: var(--ugloz-primary, #dd9933); }
.ugloz-form .slicewp-field-wrapper input[type="text"],
.ugloz-form .slicewp-field-wrapper input[type="email"],
.ugloz-form .slicewp-field-wrapper input[type="url"],
.ugloz-form .slicewp-field-wrapper input[type="password"],
.ugloz-form .slicewp-field-wrapper textarea { width: 100%; max-width: 100%; }
.ugloz-form .slicewp-field-wrapper textarea { height: 120px; }
.slicewp-field-wrapper .slicewp-field-input-password {
	position: relative;
	margin: 0;
	padding: 0;
}

.slicewp-button-primary {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 50px;
	padding: 0 30px;
	font-family: var(--ugloz-font-primary, "Poppins", sans-serif);
	font-size: var(--ugloz-fs-b1, 18px);
	font-weight: var(--ugloz-w-medium, 500);
	color: var(--ugloz-white, #fff);
	background: var(--ugloz-primary, #dd9933);
	border: 2px solid var(--ugloz-primary, #dd9933);
	border-radius: 500px;
	cursor: pointer;
	transition: var(--ugloz-transition, 0.4s);
}
.slicewp-button-primary:hover {
	background: transparent;
	color: var(--ugloz-primary, #dd9933);
	transform: translateY(-5px);
}