/*
Theme Name: Astra Child by CA
Theme URI: https://printoz.se/ 
Description: Ett child theme för Astra custom stuff yeah.
Author: Ditt Namn
Author URI: https://siljandesign.se/ 
Template: astra
Version: 1.1.3
*/

/* Add custom CSS här */

/* Hide the sidebar */
body.woocommerce-shop .widget-area {
    display: none !important;
}

/* Adjust content area to fill the space */
body.woocommerce-shop .content-area.primary {
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove padding/margin inside ast-container and fix borders */
body.woocommerce-shop .content-area  {

    border-left: none !important; /* Remove the left border */
} 


/* Custom KATERGORI */

/* Custom Kategori info CSS */
.custom-cat-div {
	background-color: #e2e2e2;
	padding: 20px 0px 15px 35px;
	margin-top: 5px;
	border-radius: 0px;
	font-size: 12px;
	margin-bottom: 20px;
}
.content-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.text-content {
	width: 60%;
}

.text-content h3 {
	font-size: 33px;
	font-weight: bold;
	color: #000; /* Svart */
	margin-bottom: 10px;
}

.text-content p {
	font-size: 16px;
	color: #333;
	line-height: 1.8;
}

.image-content {
	width: 35%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-content img {
	max-width: 230px !important;
	height: auto;
	border-radius: 5px;
}

.features {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	margin-left: 10px;
}

.feature {
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: bold;
	color: #000; /* Svart */
}

.feature span {
	margin-right: 5px;
	font-size: 18px;
	color: #009639; /* Grön färg */
}


/* Custom Kategori info CSS - Funktion för att göra layouten responsiv */
@media (max-width: 768px) { /* För skärmar mindre än 768px */

	.custom-cat-div {
		background-color: #e2e2e2;
		padding: 14px 7px 4px 10px;
		margin-top: -10px;
		border-radius: 0px;
		font-size: 12px;
		margin-bottom: 20px;
	}
	.content-wrapper {
		flex-direction: column; /* Byter layout till kolumn */
		align-items: center;
	}

	.image-content {
		display: none;
	}

	.text-content {
		width: 90%; /* Låter texten också ta full bredd */
		text-align: left; /* Centrerar texten för bättre mobilanpassning */
	}
		.feature {
			display: flex;
			align-items: center;
			font-size: 11px;
			font-weight: bold;
			color: #000; /* Svart */
			margin-bottom: 20px;
			margin-left: 5px;
		}

		.feature span {
			margin-right: 5px;
			font-size: 14px;
			color: #009639; /* Grön färg */
		}
}



/* Custom PRODUKTSIDA */

/* Info ruta godkänd order + leveransvilkor */
.custom-info-div {
	background-color: #ddd;
	padding: 14px 14px 7px 24px !important;
	border-radius: 0px;
	font-size: 12px;
	margin-top: 20px !important;
	margin-bottom: 20px;
	display: block; /* Säkerställer att den inte påverkas av eventuella inline-stilar */
}


/* Custom SKU, size nedan rubrik */
.product-sku {
    font-size: 23px;
    color: #333;
    margin: 5px 0 15px;
    font-weight: 600;
}
 

/* TRY FIXING THE SIZE DIV STRECH */




/* STARTSIDAN FIX FÖR Flexbox-styling */


/* FIX Mobile BQ */
@media (max-width: 1024px) { 
    .ast-mobile-popup-inner { 
        background-color: #1aa3df !important; /* Ändrar hela popup-menyns bakgrund till blå */
    }
}

/* Fixar rubriken på varukorgssidan */
.woocommerce-cart .elementor-heading-title {
    font-family: inherit !important; /* Använder sidans standardtypsnitt */
    font-size: 2rem !important;      /* Justera storlek vid behov */
    font-weight: 600 !important;     /* Gör rubriken mer balanserad */
    padding-top: 40px !important;    /* Ger luft ovanför */
    margin-bottom: 20px;
    text-align: center;              /* Centrerar om du vill */
}

/* Stilfix för kassasidan – rubrik */
.woocommerce-checkout h1.elementor-heading-title {
    font-family: inherit !important;  /* Samma typsnitt som övriga */
    font-weight: 700 !important;
    font-size: 36px !important;
    color: #333 !important;
    padding-top: 30px !important;
    text-align: center !important;
}

/*KASSA TABLE FIX */
/* Gör plats för tabellen på kassasidan */
.woocommerce form.checkout .col2-set {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto;
}


@media (min-width: 622px) {

	/* Stretcha outer Elementor container på kassasidan */
	.woocommerce-checkout .elementor-container {
	    max-width: 80% !important;
	    width: 80% !important;
	}

    /* Justera bredd för faktureringsuppgifter */
    .woocommerce.woocommerce-checkout form #customer_details.col2-set,
    .woocommerce-page.woocommerce-checkout form #customer_details.col2-set {
        width: 41%;
        float: left;
        margin-right: 2.347826087%; /* Lämnar plats för order-review */
    }

    /* Justera bredd för orderöversikt */
    .woocommerce.woocommerce-checkout form #order_review,
    .woocommerce.woocommerce-checkout form #order_review_heading,
    .woocommerce-page.woocommerce-checkout form #order_review,
    .woocommerce-page.woocommerce-checkout form #order_review_heading {
        width: 55%;
        float: right;
        margin-right: 0;
        clear: right;
    }

    /* Lägg till clearfix så float inte bryter layouten */
    .woocommerce.woocommerce-checkout form .col2-set::after,
    .woocommerce-page.woocommerce-checkout form .col2-set::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* Fix fakkin product spec */
/* Göm knappen "Uppdatera varukorg" */
.woocommerce-cart .actions .button[name="update_cart"] {
    display: none !important;
}

/* Göm border/padding från actions-raden om den nu är tom */
.woocommerce-cart .cart .actions {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix layout of product names and extra attributes */
.woocommerce-page.woocommerce-checkout form #order_review td.product-name {
    display: block; /* Overrides any display: flex that causes inline mess */
    text-align: left;
    font-weight: 500;
}

.woocommerce-page.woocommerce-checkout form #order_review .product-name dl.variation,
.woocommerce-page.woocommerce-checkout form #order_review .product-name dl.variation dt,
.woocommerce-page.woocommerce-checkout form #order_review .product-name dl.variation dd {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.4em;
}

.woocommerce-checkout table.shop_table {
    table-layout: auto !important; /* Allows columns to size based on content */
    width: 100%;
}

.woocommerce-checkout table.shop_table th.product-name {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 0;
}

/* Gör att produktnamns-kolumnen får flexibelt utrymme */
.woocommerce-checkout table.shop_table thead th.product-name,
.woocommerce-checkout table.shop_table tbody td.product-name {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Se till att produktnamn och variationer inte radbryts konstigt */
.woocommerce-checkout table.shop_table .product-name {
    display: block !important;
}

.woocommerce-page.woocommerce-checkout form #order_review td, .woocommerce-page.woocommerce-checkout form #order_review th, .woocommerce.woocommerce-checkout form #order_review td, .woocommerce.woocommerce-checkout form #order_review th {
    border-top: 0;
    border-right: 1px;
    padding-right: 100px;
    border-color: gray;
}


/* FONT SIZE SUB HEADER */
@media (max-width: 768px) {
  .ast-builder-html-element h3 span {
    font-size: 14px !important;
  }
}

/* UGGLY ASS BG, BUT THEY WANT IT */
body.post-type-archive-product .site-content {
    background: linear-gradient(to bottom, #009adcff 20%, transparent 100%);
}

/* Dölj rubrik och text för betalningsmetod "Fakturering" */
ul.wc_payment_methods .payment_method_cod .woocommerce-input-wrapper,
ul.wc_payment_methods .payment_method_cod label,
ul.wc_payment_methods .payment_method_cod .payment_box {
    display: none !important;
}

/* Fixa footer texts synlighet på index */
.site-above-footer-wrap {
    background: #0075be !important;
}
.site-footer .ast-builder-html-element {
    background-color: #0075be;
    padding: 1rem;
    border-radius: 5px;
}