/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html {
    font-size: 62.5%;
}
:root, :root.cf-theme-dark .theme-inverted {
  --primary: hsl(354, 80%, 48%);
  --primary-d-1: hsl(0, 72%, 34%);
  --primary-d-2: hsl(0, 57%, 25%);
  --primary-d-3: hsl(0, 42%, 15%);
  
  --black-color: hsl(240, 2%, 10%);
  --black-color-d-1: hsl(240, 2%, 8%);
  --black-color-d-2: hsl(240, 2%, 6%);
  --black-color-d-3: hsl(240, 3%, 3%);

  --light-color: hsl(0, 41%, 95%);
  --light-color-d-1: hsl(0, 4%, 69%);
  --light-color-d-2: hsl(0, 2%, 44%);
  --light-color-d-3: hsl(0, 2%, 22%);
  --light-bg-color: #FAF9F9;

  --white-color: hsl(0, 0%, 100%);

  --text-body: hsl(240, 2%, 10%);
  --text-title: hsl(240, 2%, 10%);


    /*Space*/
    --space-4xs: clamp(0.52rem, calc(-0.02vw + 0.53rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.13vw + 0.78rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.29vw + 0.93rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.55vw + 1.1rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(0.94vw + 1.3rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.53vw + 1.51rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(2.42vw + 1.73rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(3.74vw + 1.93rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(5.69vw + 2.08rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(8.55vw + 2.15rem), 15.83rem);

    /*Font size*/

    --text-xs: clamp(1.1rem, calc(0.31vw + 1rem), 1.5rem);
    --text-s: clamp(1.3rem, calc(0.31vw + 1.2rem), 1.7rem);
    --text-m: clamp(1.5rem, calc(0.47vw + 1.35rem), 2.1rem);
    --text-l: clamp(1.8rem, calc(0.23vw + 1.73rem), 2.1rem);
    --text-xl: clamp(2rem, calc(0.63vw + 1.8rem), 2.8rem);
    --text-2xl: clamp(2.8rem, calc(0.63vw + 2.6rem), 3.6rem);
    --text-3xl: clamp(3.8rem, calc(1.41vw + 3.35rem), 5.6rem);
    --text-4xl: clamp(4rem, calc(3.13vw + 3rem), 8rem);
	--text-5xl: clamp(8rem, calc(10vw + -1rem), 15rem);

    /*Border-radius, shadow, transition*/
	
    --shadow-xs: 0 1px 2px var(--primary-d-3);
    --shadow-s: 0 1.5px 3px var(--primary-d-3);
    --shadow-m: 0 2px 6px var(--primary-d-3);
    --shadow-l: 0 3px 12px var(--primary-d-3);
    --shadow-xl: 0 6px 48px var(--primary-d-3);
	
    --border: 1px solid var(--primary);
    --border-black: 1px solid var(--black-color);
    --border-white: 1px solid var(--light-color);
    --transition: all 0.2s ease-in-out;
}

body {
	animation: fadeInAnimation ease 0.1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

body.bricks-is-frontend :focus{
	outline: none !important;
}


.section{
	padding: 0 var(--space-m);
}


.container{
	width: 100%;
	max-width: 1480px;
	padding: var(--space-xl) 0;
	gap: var(--space-xs);
}

.btn{
	color: var(--black-color);
	border: var(--border-black);
	font-size: var(--text-s);
	text-wrap: nowrap;
	cursor: pointer;
	transition: var(--transition);
}
.btn:hover{
	background-color: var(--primary);
	color: var(--white-color);
	border: var(--border);
}
.btn-white{
	background-color: var(--white-color);
	color: var(--black-color);
	border: var(--border-black);
	border-radius: var(--radius-s);
	font-size: var(--text-m);
	text-wrap: nowrap;
	cursor: pointer;
	transition: var(--transition);
}

.btn-primary{
	color: var(--white-color);
	border: var(--border);
	border-radius: var(--radius-s);
	font-size: var(--text-m);
	text-wrap: nowrap;
	cursor: pointer;
	transition: var(--transition);
	background-color: var(--primary);
}
.btn:hover{
	background-color: var(--white-color);
	color: var(--primary);
	border: var(--border);
}


/*Mega menu*/

.menu-level1{
	font-size: var(--text-m) !important;
	font-weight: 600 !important;
	line-height: 120% !important;
	color: var(--primary) !important;
	transition: var(--transition) !important;
	margin-bottom: 0px !important;
	line-height: 120% !important;
}
.menu-level1:hover{
	color: var(--primary) !important;
}

.menu-level2{
	font-size: var(--text-s)!important;
	font-weight: 600 !important;
	line-height: 120% !important;
	color: var(--black-color) !important;
	margin-bottom: 5px !important;
	line-height: 120% !important;
}
.menu-level2:hover{
	color: var(--primary) !important;
}
.menu-level3{
	font-size: var(--text-s) !important;
	font-weight: 300 !important;
	line-height: 120% !important;
	color: var(--light-color-d-3) !important;
	margin-bottom: 5px !important;
	line-height: 120% !important;
}
.menu-level3:hover{
	color: var(--primary) !important;
}



/*Product archive*/

.brxe-woocommerce-products .product h2 {
    font-size: var(--text-s) !important;
    margin: 15px 0 0;
    font-weight: 500;
    line-height: 120%;
	transition: var(--transition);
}

.brxe-woocommerce-products .product:hover > a > h2{
	color: var(--primary);
}

.brxe-woocommerce-products .product{
	background-color: var(--white-color);
	padding: var(--space-s);
	padding-top: var(--space-m);
	padding-bottom: var(--space-m);
	transition: var(--transition);
}

.brxe-woocommerce-products .product:hover {
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.brxe-woocommerce-products .product > a > img{
	transition: var(--transition);
}

@media (max-width: 478px){
.brxe-woocommerce-products .products.columns-4 {
    grid-template-columns: repeat(2,1fr) !important;
}
}
.brxe-woocommerce-products .products.columns-4{
	gap: var(--space-xs);
}


/*Custom table harta*/

.custom-table {
    width: 100%;
    max-width: 1200px;
    border-collapse: collapse;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.custom-table th, .custom-table td {
    padding: 10px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.custom-table thead {
    background-color: #007BFF;
    color: #ffffff;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #e6f7ff;
}

.custom-table tbody tr:hover {
    background-color: #d0e7ff;
}

.custom-table th {
    font-size: 18px;
    font-weight: bold;
}

.custom-table td {
    font-size: 16px;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .custom-table th, .custom-table td {
        padding: 8px 10px;
        font-size: 14px;
    }
    
    .custom-table th {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .custom-table, .custom-table thead, .custom-table tbody, .custom-table th, .custom-table td, .custom-table tr {
        display: block;
    }
    
    .custom-table thead tr {
        display: none;
    }
    
    .custom-table td {
        position: relative;
        padding-left: 50%;
        text-align: right;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    
    .custom-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        text-align: left;
        font-weight: bold;
    }
}

.custom-table td[data-label] {
    position: relative;
}

.custom-table td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
}