/*
Theme Name:   Twenty Twenty-Four Billing Portal
Theme URI:    https://www.recharge.gr/
Author:       Charge GR
Author URI:   https://www.recharge.gr/
Template:     twentytwentyfour
Version:      1.0.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentytwentyfour-billing-portal
*/

/* --- Fonts & Basic Typography --- */

@font-face {
  font-family: 'Busorama';
  font-style: normal;
  font-weight: normal;
  src: local('Busorama'), url('TT_OMNIB.woff') format('woff');
}

html, body {
  overflow-x: hidden;
}

body {
  position: relative;
}

h1 {
	font-size: 2.2em;
	font-family: "Geologica";
	color: #2b435e;
}

h2 {
	font-size: 2em;
	color: #2b435e;
	font-family: "Comfortaa";
}

h3 {
	font-size: 1.6em;
  font-family: "Geologica", Helvetica, Arial;
	font-weight: 200;
	color: #527FB3;
}

h4 {
	font-size: 1.2em;
	color: #4F667D;
	font-weight: 700;
	font-family: "Geologica", Helvetica, Arial;
}

h5 {
	font-size: 1em;
	color: #677e99;
	font-family: "Comfortaa";
}

h6 {
	font-size: 16px;
	color: #5C6A7A;
	font-family: "Geologica", Helvetica, Arial;
	font-weight: 300;
}

p {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #273D56;
}

li {
  color: #273D56;
}

a:where(:not(.wp-element-button)) {
  color: #527FB3;
	text-decoration: none;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* --- Font Utilities --- */

/* Apply the primary brand/logo font to any element. */
.font-primary {
    font-family: "Comfortaa", sans-serif !important;
}

/* --- Action Button Styling --- */

/* Primary Action Button */
.action-button1,
.button.wp-element-button,
.wp-block-button__link.wp-element-button
{
	background-color: #2b435e !important;
	color: #fff !important;
	font-weight: 300;
	min-width: 200px;
	max-width: 250px;
	min-height: 25px;
	display: block;
	border-radius: 30px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Geologica";
	border: 5px solid #2b435e;
	padding: 10px;
}

.action-button1:hover {
	background-color: #702457 !important;
	box-shadow: 0px 0px 7px #4F667D;
	border: 5px solid #702457;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}

/* Secondary Action Button */
.action-button2 {
	color: #2B435E;
	background-color: #fff !important;
	box-shadow: 0px 0px 5px #BACADB;
	font-weight: 300;
	min-width: 200px;
	max-width: 250px;
	min-height: 25px;
	padding: 10px;
	display: block;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	font-family: "Geologica";
	border: 5px solid #4F667D;
}

.action-button2:hover {
	box-shadow: 0px 0px 7px #4F667D;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	text-decoration: none !important;
}

/* Link-style Action Button */
.action-button3 {
	color: #4F667D;
	font-size: 18px;
	font-family: "Geologica";
  --highlight-color: rgba(113, 176, 246, 0.55);
	background: linear-gradient(to top, var(--highlight-color) 25%, transparent 25%);
}

.action-button3:hover {
	text-decoration: underline;
	color: #2B435E;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}

/* Simple Link Action Button */
.action-button4 {
	color: #4F667D;
	text-decoration: none;
	font-size: 16px;
	font-family: "Geologica";
}

.action-button4:hover {
	text-decoration: underline;
	color: #2B435E;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}


/* --- Component Styling --- */

/* Sign-in card styling for login page */
.card {
	position: relative;
	border-radius: 16px !important;
	box-shadow: 0px 0px 20px #5C6A7A;
}

/* --- Footer Styling --- */

.footer-text,
.footer-text-link {
	color: #5C6A7A;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
}

.footer-text-link:hover {
	color: #2B435E;
	text-decoration: underline;
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
}

.footer-small-text {
	font-size: 12px;
	color: #5C6A7A;
	max-width: 240px;
}

.footer-copyright {
	color: #5C6A7A;
	font-size: 15px;
	font-weight: 400;
	font-family: Geologica;
}