/**
 * This file contains all the CSS File for this plugin although there are some point where it was neccessary for us to
use inline CSS to overide some styles
 */
 :root {
    --smartwoo-status-active: #28a745; /* Green for Active */
    --smartwoo-status-due-renewal: #ffc107; /* Yellow/Orange for Due for Renewal */
    --smartwoo-status-expired: #dc3545; /* Red for Expired */
    --smartwoo-status-suspended: #6c757d; /* Gray for Suspended */
	--smartwoo-status-grace-period: #17a2b8;
	--smartwoo-status-cancelled: #333333;

    --smartwoo-invoice-paid: #28a745;      /* Green for Paid */
    --smartwoo-invoice-unpaid: #dc3545;    /* Red for Unpaid */
    --smartwoo-invoice-cancelled: #6c757d; /* Gray for Cancelled */
    --smartwoo-invoice-due: #fd7e14;       /* Orange for Due */
}

.smartwoo-status {
    float: right;
    color: #ffffff;
    padding: 21.5px;
    font-weight: 500;
}

.smartwoo-status.active,
.smartwoo-status.active-nr {
    background-color: var(--smartwoo-status-active);
}

.smartwoo-status.due-for-renewal {
    background-color: var(--smartwoo-status-due-renewal);
}

.smartwoo-status.expired {
    background-color: var(--smartwoo-status-expired);
}

.smartwoo-status.suspended {
    background-color: var(--smartwoo-status-suspended);
}
.smartwoo-status.grace-period {
    background-color: var(--smartwoo-status-grace-period);
}

.smartwoo-status.cancelled {
    background-color: var(--smartwoo-status-cancelled);
}

.smartwoo-invoice-status {
    float: right;
    color: #ffffff;
    padding: 4px 8px;
	font-weight: 500;
    font-size: 14px;
    border-radius: 20px;
}

.smartwoo-invoice-status.paid {
    background-color: var(--smartwoo-invoice-paid);
}

.smartwoo-invoice-status.unpaid {
    background-color: var(--smartwoo-invoice-unpaid);
}

.smartwoo-invoice-status.cancelled {
    background-color: var(--smartwoo-invoice-cancelled);
}

.smartwoo-invoice-status.due {
    background-color: var(--smartwoo-invoice-due);
}

.smartwoo-hide {
	display: none !important;
}

.m-20-auto {
	margin: 20px auto;
}
.mt-10 {
	margin-top: 10px;
}

/************************************************************************************/
/**************************CSS for admin pages starts here **********************************/
/************************************************************************************/

/************** Button CSS******************/


.sw-red-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #db5534;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 9px;
	border: 2px solid #fafafa;
	margin-right: 10px;
	cursor: pointer;
}

.sw-red-button:focus {
	color: rgb(250, 250, 9);
	text-decoration: underline;
}

/* Style for the on hover */
.sw-red-button:hover {
	background-color: #2980b9;
	color: rgb(250, 250, 9);
}

.sw-blue-button {
	display: inline-block;
	padding: 10px 15px;
	background-color: #0073e6; /* Button background color */
	color: #fff; /* Text color */
	text-decoration: none;
	border: 2px solid #fafafa;
	border-radius: 9px;
	cursor: pointer;
	margin: 5px;
	font-weight: bold;
	font-size: 16px;
	transition: background-color 0.3s, color 0.3s;
}
.sw-blue-button:focus {
	color: rgb(236, 236, 13);
	text-decoration: underline;

}
.sw-blue-button:hover {
	background-color: #3f8fe6;
	color: rgb(236, 236, 13);
}
.sw-blue-button:disabled,
.sw-red-button:disabled {
	cursor: not-allowed;
}

.account-button {
	margin: 0 10px;
	margin-bottom: 10px;
	padding: 10px 15px;
	font-size: 14px;
	background-color: red;
	color: white;
	border-radius: 9px;
}

.sw-pagination-buttons {
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center !important;
	gap: 9px;
	background-color: #ffffff;
	border: solid 0.5px blue;
	border-radius: 5px;
	padding: 10px;
	max-width: 250px !important;
	height: 50px;
	margin: 20px 15px 30px 15px;
}

.sw-pagination-buttons p,
.sw-pagination-buttons a {
	font-weight: bold;
	margin: 0 auto;
}

.sw-pagination-buttons a button {
	border: none;
	width: 30px;
	height: 20px;
	padding: 3px;
	border-radius: 10px;
	background-color: #f1f1f1;
	cursor: pointer;
	line-height: 1;
}
.sw-pagination-buttons a button span {
	font-size: 12px;
	color: #000;
	vertical-align: middle;
}

.smartwoo-icon-button-blue {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #0073e6;
    border-radius: 3px;
    color: #ffffff;
    height: 30px;
    width: 30px;
	border: solid #dcdcde 1px;
}

.smartwoo-icon-button-blue:hover {
    background-color: #517aa3;

}

.smartwoo-icon-button-blue:focus {
    color: yellow;
    background-color: #000;
}

.sw-icon-button-admin {
	display: inline-block;
	background-color: #f1f1f1;
	color: #333333;
	border: 2px solid #dcdcde; 
	margin: 3px;
	cursor: pointer;
	text-decoration: none;
	border-radius: 4px;
	padding: 4px 10px;
}

.sw-icon-button-admin[disabled],
.sw-icon-button-admin.sw-not-allowed {
    cursor: not-allowed;
	background-color: #eeeded;
	color: #fb9898;
	
}

.sw-invoice-editor-form-submit-button {
	width: 150px;
	margin: 10px !important;
}

.smartwoo-account-button {
    background-color: #0073aa; /* WordPress blue */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none; /* Ensure no underline if it becomes a link */
    display: inline-block; /* Allow padding and margin */
}

.smartwoo-account-button:hover {
	color: #ffffff;
    background-color: #005f8f; /* Darker blue on hover */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.smartwoo-account-button:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.sw-client-dashboard-button {
	display: inline;
	padding: 10px 15px;
	background-color: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	color: #333333;
	text-transform: none;
	transition: background-color .5s ease-in-out, transform .5s ease-in-out;
}
.sw-client-dashboard-button:focus,
.sw-client-dashboard-button:hover {
	background-color: #f1f1f1;
	color: #333333;
	transform: translateY(-1px);
}
.sw-settings-button-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sw-settings-button-container > button {
	text-transform: none;
}

.sw-email-send-button {
	vertical-align: middle !important; 
	margin-right: 4px !important;
}

.sw-button-container {
    display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: space-evenly;
}
/************** Button CSS Ends here******************/

/* Service Product form goes here*/

/* Apply styles to form labels */

.sw-textarea{
	width: 400px;
	padding: 8px;
	margin-bottom: 10px;
	height:250px;
}

/* Apply styles to the image preview container */
.sw-form-image-preview {
	margin-top: 10px;
	width: 100%;
	max-width: 250px;
}

/* Style for the Grace Period number input */
.grace-period-number {
	width: 80px;
	margin-right: 5px;
	padding: 5px;
}

/* Style for the Grace Period unit select */
.select-grace-period-unit {
	max-width: 20px;
	padding: 6px; /* Adjust the padding as needed */
}

/* Service Product form ends here*/

/************************************All form CSS starts here****************************************/


.sw-product-download-field-container {
	display: none;
	background-color: #fff;
	margin: 20px auto;
	padding: 10px;
	
}

.sw-product-download-field-container.show {
	display: block;
	margin-left: 5px;
	width: 100%;

}

.sw-product-download-fields {
    margin: 20px auto;
	width: 90%;
}

.sw-product-type-container label {
	font-weight: 500;
    display: inline;
    margin-bottom: 20px;
	
}

.sw-product-download-fields input,
.sw-product-download-fields button {
    margin-right: 5px;
    margin-bottom: 5px;
}

.sw-product-download-fields .swremove-field {
    color: red;
    cursor: pointer;
}

/* CSS for the product configuration container */
.smartwoo_template {
	position: relative;
	padding: 5px;
	margin: 0 auto;
	width: 100%;
}
.smartwoo_template #error-container .sw-error-notice {
	width: 80%;
}
.sw-configure-container {
	max-width: 99%;
	padding: 20px;
	margin: 10px auto;
	background-color: #fff;
	border: 2px solid #faefef;
	border-radius: 9px;
	/* box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2); */
}
.sw-configure-container form input {
	border: solid blue .5px;
	border-radius: 3px;
	width: 40%;
	margin-right: 18%;
}

@media ( min-width: 280px ) and ( max-width: 425px ) {
	.sw-configure-container form input {
		width: 50%;
		margin-right: 5%;
	}
	
	.sw-product-download-field-container.show {
		margin: auto;
	}

}

/* Styles for smartwoo-settings-form */
.smartwoo-settings-form {
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}



.sw-form-row {
display: flex;
align-items: center;
margin-bottom: 10px; /* Add some spacing between rows */
}


.sw-form-label {
flex: 1;
font-size: 14px;
font-weight: bold;
margin-right: 10px;

}

.sw-form-checkbox {
flex: 0.7;
font-size: 14px;
font-weight: bold;
margin-right: 10px;

}

.sw-field-description {
background-color: black;
color: rgb(255, 255, 255);
border-radius: 50%;
padding: 2px;
font-weight: bold;
font-size: 11px;
text-align: center;

}

/* Style for form descriptions (visible on hover) */
.sw-field-description {
margin-left: 5px; /* Add some space between the label and the question mark */
cursor: help;
position: relative;
}



.sw-cart-form {
width: 100%;
}


.sw-form-input {
max-width: 400px;
padding: 8px;
margin-bottom: 10px;
width: 100%;
border: 2px solid #fffefe;
box-sizing: border-box;

border-radius: 5px;
}

@media ( min-width: 280px ) and ( max-width: 425px ) {
	.sw-form-row {
		flex-wrap: wrap;
	}
}

/************************************All form CSS ends here****************************************/


/*********************Invoice Page CSS Starts Here*********************************/
/*Invoice Details page*/
/* Style for the main container */
.invoice-details {
	width: 70%;
	margin: 0 auto;
	padding: 20px;
	background-color: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
}

/* Style for the heading */
.invoice-details h2 {
	color: #333;
	font-size: 24px;
	margin-bottom: 20px;
	text-align: center;
}

/* Style for each invoice detail item */
.smartwoo-container-item {
	margin-bottom: 10px;
	display: flex;
	flex-wrap: nowrap;
	justify-items: center;
	width: 100%;
}

.smartwoo-container-item p {
	/* margin: 40%; */
	text-align: right;
}

.smartwoo-container-item span {
	justify-self: center;
	font-weight: bold;
	font-size: 16px;
	width: 50%;
	padding: 0px;
}

/* Style for the "Invoice not found" message */
.smartwoo-container-item.not-found {
	color: red;
	font-style: italic;
}

.sw-error-notice {
	margin: 20px auto;
	padding: 10px;
	border: 2px solid #f55247;
	border-radius: 8px;
	background-color: #ffffff;
	color: #000000;
	width: 50%;
	text-align: center;
	margin-bottom: 10px !important;
}
.sw-error-notice p {
	text-align: left;
}
.sw-notice{
	margin: 20px auto;
	padding: 10px;
	min-height: 40px;
	border: 1px solid #1764f5;
	border-radius: 8px;
	background-color: #ffffff;
	color: #000000;
	width: 50%;
	text-align: center;
}
.sw-notice p { 
	font-weight: bold; 
	text-align: center;
	max-width: 100%;
}
.sw-service-notice {
	display: flex;
	flex-direction: row;
	background-color: rgba(96, 245, 96, 0.596);
	width: 80%;
	border-left: solid red 3px;
	color: #7c7979;
	margin: 10px auto;
	padding: 5px;
	gap: 5px;
	align-items: center;
}

.sw-service-notice p {
	font-weight: bold;
}
.sw-service-notice a {
	background-color: #fff;
	padding: 5px;
	border-radius: 5px;
	font-size: 12px;
}

/* Settings and Documentation CSS */
.sw-container {
	display: flex;
	justify-content: space-between;
	margin: 20px auto;
	padding: 10px;
}

.sw-knowledgebase-left-column {
	background-color: #fff;
	border-radius: 9px;
	padding: 10px;
	width: 20%;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
	height: 400px;
}
.sw-knowledgebase-right-column {
	background-color: #fff;
	border-radius: 9px;
	padding: 20px;
	width: 70%;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);

}

/* .sw-right-column .image-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
} */
.sw-knowledgebase-left-column ul {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

.sw-knowledgebase-left-column li {
	margin: 10px;
	text-align: center;

}

.instruction {
	display: none;
}

.smartwoo-knowledgebase-nav{
	display: inline-block;
	text-decoration: none;
	border-radius: 5px;
	background-color: rgb(121, 59, 88);
	color: rgb(255, 255, 0);
	border: 2px solid #7589fc;
	width: 100px;
	padding: 10px;
	font-size: 14px;
	font-weight: bold;
	transition: all .5s ease-in-out;
}
.smartwoo-knowledgebase-nav:hover{
	color: #fafafa;
	box-shadow: 0 3px 10px rgba(248, 7, 7, 0.959);
}
.smartwoo-knowledgebase-nav.active{
	color: #fafafa;
	box-shadow: 0 10px 10px rgba(248, 7, 7, 0.959);

}

.sw-knowledgebase-notice {
	background-color: #FF0000;
	color: #FFFFFF; 
	font-weight: 700;
	padding: 8px;
	border-radius: 6px;
	box-shadow: inset 1px 1px 10px 4px rgba(0, 0, 0, 0.5);
}

/************************************************************************************/
/**************************FrontEnd  CSS Starts here **********************************/
/************************************************************************************/


/* Style for the service navigation bar */
.service-navbar {
	position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #FFFFFF;
	box-shadow: 1px 1px 8px 0px rgb(0 0 0 / 25%);
}

.navbar-title-container h3 {
	font-size: 24px;
    margin: 0;
	font-weight: 700;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
}

.navbar-title-container h3 a {
	text-decoration: none;
	color: #333333;
}

.navbar-links-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
	flex-direction: row;
	gap: 10px;
}

.navbar-links-container li {
	padding: 2px;
	border-radius: 4px;
	text-align: center;
}
.navbar-links-container li a {
	display: block;
	width: 100%;
	height: 100%;
}

.navbar-links-container li:hover {
	background-color: #f8f8f8;
}

.navbar-links-container a {
	font-size: 16px;
    text-decoration: none;
    color: #333333;
}

.sw-menu-icon,
.dashicons.dashicons-no-alt.sw-close-icon {
    display: none;
    cursor: pointer;
}

.smart-woo-logout {
	cursor: pointer;
}
.smartwoo-modal-frame,
.smartwoo-logout-frame {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    z-index: 9999;
    background-color: #000000c9;
}
.smartwoo-logout-contaner {
	display: flex;
    position: absolute;
    top: 35%;
    left: 25%;
    flex-direction: column;
    width: 50%;
    padding: 20px;
    margin: auto;
    border-radius: 9px;
    height: 150px;
    background-color: #ffffff;
    align-items: center;
}
.smartwoo-logout-contaner p{
	color: #333333;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	background-color: #ffffff;
	width: 100%;
}

.smartwoo-modal-content {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 100%;
    min-height: 90vh;
    max-height: 650px;
    overflow: hidden;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: transform 0.3s ease-out;
    z-index: 999999 !important;
}

.smartwoo-modal-heading {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #f1f1f1;
	padding: 1px 10px;
	border-bottom: solid 1px #dcdcde;

}

.smartwoo-modal-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
    line-height: 1;
    padding: 0;
}

.smartwoo-modal-close-btn:hover,
.smartwoo-modal-close-btn:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

.smartwoo-modal-body {
    padding: 10px;
	max-height: 500px;
	height: 500px;
	overflow-y: auto;
}

.smartwoo-modal-body:has( object.smartwoo-invoice-pdf-viewer ) {
	padding: 0;
}

.smartwoo-modal-content:has( iframe.smartwoo-support-checkout ) {
	max-width: 900px;
}

.smartwoo-modal-body:has( iframe.smartwoo-support-checkout ) {
	overflow-y: unset;
}

.smartwoo-modal-body iframe {
	height: 500px;
}

.smartwoo-modal-body .modal-status {
	padding: 10px;
}
.smartwoo-modal-body p {
	font-size: 12px;
}
.smartwoo-modal-body h3 {
	font-size: 16px;
	margin: 5px 0;
}

.smartwoo-modal-body strong {
    min-width: 100px;
    display: inline-block;
}

.smartwoo-modal-body object.smartwoo-invoice-pdf-viewer {
    width: 100%;
    height: 90%;
    border: none;
    display: block;
}

.smartwoo-modal-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.smartwoo-modal-details-table th,
.smartwoo-modal-details-table td {
    border: none;
    padding: 6px 0;
    text-align: left;
    vertical-align: top;
}

.smartwoo-modal-details-table th {
    font-weight: bold;
    color: #333;
    padding-right: 15px;
    white-space: nowrap;
    width: 120px;
}

.smartwoo-modal-details-table td {
    color: #555;
}

.smartwoo-modal-footer {
	position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
	min-height: 40px;
	background-color: #f1f1f1;
	border-top: solid 1px #dcdcde;
	padding: 5px;
}

@media (max-width: 768px) {

	@media (max-width: 617px) {
		.smartwoo-logout-contaner {
			width: 70%;
			left: 12.5%;
		}
	}
    .navbar-links-container {
        /* display: none; */
		position: fixed;
		top: 40px;
		padding: 15px;
		background-color: #ffffff;
		z-index: 9999;
		right: 0;
		width: 350px;
		font-size: 16px;
		border: solid 1px #dcdcde;
		height: 100%;
		max-width: 100%;
		transform:  translateX(100%);
		transition: transform 0.5s ease-in-out;
    }

    .sw-menu-icon {
        display: block;
    }
	.dashicons.dashicons-no-alt.sw-close-icon::before {
		font-size: 25px;
		margin-bottom: 20px;
		color: #333333;
		font-weight: 100;
	}

    .navbar-links-container ul {
        flex-direction: column;
    }

    .navbar-links-container li {
        margin: 10px 0;
		width: 100%;
		text-align: unset;
    }

	.navbar-links-container li a::after {
			content: "\f344";
			font-family: dashicons;
			font-style: normal;
			font-weight: normal;
			text-decoration: inherit;
			float: right;
		}


    .service-navbar.active .navbar-links-container {
		transform:  translateX(0);
		transition: transform 0.5s ease-in-out;
    }

	@media (max-width: 375px) {
		.smartwoo-logout-contaner {
			width: 90%;
			left: 5%;
		}
		
	}
}

#smartwooNoticeDiv{
	position: sticky;
	z-index: 1000;
	width: 768px;
	max-width: 90%;
	left: 2px;
	top: 170px;
	margin: 0 auto;
}


/* Add some basic styling to the container */
.status-counts {
	display: flex;
	background-color: #333;
	padding: 10px;
	flex-wrap: wrap;
}

.status-counts.portal {
	width: 100%;
}

/* Style each status count link */
.status-counts p {
	margin: 0 auto;
}

.status-counts a {
	text-decoration: none;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	transition: background-color 0.3s;
}

.status-counts a:hover {
	background-color: #0056b3;
}

.smartwoo-front-assets-container {
	display: none;
}

.smartwoo-page {
	position: relative;
	padding: 0 0 10px 0;
	margin: 0 0 20px 0;
	width: 100%;
	background-color: #f1f1f1;
	font-family: 'Inter', sans-serif;
	min-height: 50vh;
	font-size: medium;
	overflow: hidden;
}
.smartwoo-portal-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
}
.smartwoo-portal-header__greeting {
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
}

.smartwoo-portal-header__sorting #smartwooChangeLimitValue {
	padding: 10px;
	width: 70px;
}
.smartwoo-portal-header__sorting #smartwooChangeLimitBtn {
	cursor: pointer;
}
.smartwoo-page a {
	text-decoration: none;
}

.smartwoo-page p {
	font-size: 16px;
}

.smartwoo-page hr{
	border: solid 1px #dcdcde;
}

/* Table Styles */
.sw-table-wrapper {
    overflow-x: auto;
	width: 100%;
}

.sw-table {
    width: 90%;
    border-collapse: collapse;
	border-radius: 9px;
	margin: 20px auto;
    background-color: #fff;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
    overflow: hidden;
}

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

.sw-table th {
    background-color: #ffe1f5;
    color: #0e0101;
	font-weight: bold;
}

.sw-table:hover {
    background-color: #ffffff;
	box-shadow: none;

}

.sw-table-count {
	text-align: right;
	font-weight: bold;
	margin-top: 10px;
}

#smartwoo-front-table {
    padding: 4px;
    margin-bottom: 2px;
}

#smartwoo-front-table th,
#smartwoo-front-table td {
    padding: 3px;
    border: none;
}

/* Responsive Styles for mobile devices */
@media only screen and (min-width: 320px) and (max-width: 720px) {
	@media (max-width: 375px) {
		.smartwoo-container-item {
			flex-wrap: wrap;
		}
	}

    .sw-table {
        width: 90%;
        max-width: 100%;
        box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
        overflow-x: auto;
    }

    .sw-table thead,
    .sw-table tbody,
    .sw-table th,
    .sw-table td,
    .sw-table tr {
        display: block;
    }

    .sw-table tbody tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sw-table tbody td {
        text-align: left;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        width: 100%; /* Make the cells take full width */
    }
}

/* service-cards.css */
.service-card {
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f9f9f9;
}

/* Style for the mini service cards */
.service-mini-card {
	border: 1px solid #ddd;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f9f9f9;
}

.service-mini-card p {
	margin: 0;
	font-size: 16px;
}

.service-mini-card a.button {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 16px;
	background-color: #0073e6;
	color: #fff;
	text-decoration: none;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

.service-mini-card a.button:hover {
	background-color: #005bbd;
}

/* Style for the outer container of service cards on the main page */
.smartwoo-portal__subscription-item-container {
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
    gap: 10px;
	padding: 10px 15px;
}

.smartwoo-page .sw-products-container:has( > .main-page-card:only-child ) {
    justify-content: center;
	margin: 20px;
}

.smartwoo-portal__subscription-item-container:has(> .main-page-card:only-child) {
    justify-content: center;
}
.smartwoo-portal__subscription-item-container:has(> .main-page-card:only-child) .main-page-card {
    flex: unset;
	width: 400px;
}
/* Style for each individual service card on the main page */
.main-page-card {
	flex: 1 1 250px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 10px 15px;
	width: clamp(250px, 350px, 400px);
	box-shadow: 2px 4px 4px rgb(0 0 0 / 29%);
	background-color: #fff;
	text-align: center;
	transition: transform 0.5s ease-in-out;
}
.main-page-card:nth-last-of-type(2),.main-page-card:nth-last-of-type(3), .main-page-card:last-of-type {
	flex: 1 1 250px;
	max-width: 400px;
}

.main-page-card:hover {
	transform: translateY(-5px);
}

.main-page-card h3 {
	font-size: 20px;
	margin: 0;
	padding-bottom: 10px; /* Space between service name and other details */
	border-bottom: 1px solid #ccc; /* Horizontal line below the service name */
	color: #333;
}

.main-page-card p {
	font-size: 14px;
	color: #666;
	margin: 10px 0;
}

.main-page-card .sw-notice {
	width: 100%;
	padding: 0;
}
/* Media query for smaller screens */
@media (min-width: 280px) and (max-width: 768px) {
	.smartwoo-account-button {
		padding: 5px;
	}

	@media (min-width:280px) and (max-width:539px) {
		.main-page-card {
			min-width: 100%;
		}
	}
	/* .client-services {
		flex-wrap: wrap;
	} */
}

/* Style for the service details card */
.serv-details-card {
	padding: 20px;
	align-items: center;
	border-radius: 9px;
	margin: 20px auto;
	width: 70%;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
	background-color: #ffffff;
	transition: transform 0.2s ease-in-out;
}
.serv-details-card.frontend {
	margin: 5px auto;
}

.serv-details-card:hover {
	transform: translateY(-5px);
	box-shadow: none;

}

.serv-details-card h3 {
	font-size: 20px;
	margin: 0;
	padding-bottom: 10px; /* Space between service name and other details */
	border-bottom: 1px solid #ccc; /* Horizontal line below the service name */
	font-weight: bold;
	text-align: center;
}

.serv-details-card p {
	font-size: 16px;
	font-weight: bold;
	margin: 10px 0;
}

.smartwoo-mini-card {
	background-color: #ffffff;
	max-width: 80%;
	width: 768px;
	border-radius: 9px;
	justify-content: space-around;
	margin: 10px auto;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
	border: 1px solid #dcdcde;
}

.smartwoo-mini-card h2 {
	font-size: 24px;
	margin-bottom: 10px;
	text-align: center;
	padding-bottom: 5px;
	color: #333333;
}

.smartwoo-mini-card .mini-card-content {
	display: flex;
	flex-direction: column;
	padding: 10px;
	background-color: #f1f1f1;
	margin: 8px auto;
	border-radius: 8px;
	list-style: none;
	width: 97%;
}

.mini-card-content li {
	height: 100%;
	padding: 8px;
	border: 1px solid #dcdcde;
	margin: 8px;
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
	transition: all .5s ease-in-out;
}
.mini-card-content li:hover {
	background-color: #fcfcfc;
	transform: translateY(-1.5px);
}

.mini-card-content li a {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: row;
	justify-content: space-between;
	text-decoration: none;
	color: #4357F1;
}

.mini-card-content li a::after {
	content: attr(data-status);
}
.smartwoo-skeleton {
    height: 40px !important;
    margin: 10px 0;
    border-radius: 4px;
    width: 100%;
    animation: smartwoo-skeleton-loading .5s linear infinite alternate;
}

.smartwoo-skeleton-text {
    width: 50px;
    height: 40px;
}
@keyframes smartwoo-skeleton-loading {
    0% { 
		opacity: 0.9; 
	}
    50% { 
		opacity: 0.4; 
		background-color: #ffffff
	}
		
    100% { opacity: 1; }
}

.sw-mini-card-pagination {
	display: none;
	flex-direction: row;
	justify-content: space-between;
	margin: 6px;
}

.sw-mini-card-pagination.has-more {
	display: flex;
}

.sw-mini-card-pagination button {
	display: none;
}

/* Style for the "Renew" button */
.smartwoo-service-renew-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #4caf50; /* Green color */
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	margin-top: 10px;
	margin-left: 10px; /* Add margin to separate from the "Back to Services" button */
	transition: background-color 0.2s ease-in-out;
}

.smartwoo-service-renew-button:hover {
	background-color: #45a049; /* Darker green color on hover */
}


.invoice-pay-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #f4511e;
	color: #ffffff;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
}

.invoice-preview-button {
	display: inline-block;
	padding: 10px;
	background-color: #5c06e6;
	color: #ffffff;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
}

.invoice-preview-button:hover{
	color: #ffffff;
}

.sw-invoice-status-counts {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	justify-items: center;
	flex-wrap: wrap;
	text-align: center;
	margin-bottom: 20px;
	width: 100%;
}


.sw-user-status-item {
	flex: 1;
	font-weight: bold;
	font-size: 14px;
	background-color: #ffffff;
	height: 70px;
	width: 200px;
	min-width: 200px;
	padding: 10px;
	border-radius: 8px;
	margin: 10px;
	border: 1px solid #dcdcde;
	cursor: pointer;
}
.sw-user-status-item.active {
	box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
	border: 2px #dcdcde solid;
}

.sw-user-status-item p {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 15px;
	font-size: 16px;
	padding: 0;
}
.sw-user-status-item a {
	color: #6373bb;
	text-decoration: none;
}

.sw-user-status-item small, .sw-admin-status-item small  {
	font-weight: bold;
	background-color: red;
	border-radius: 50%;
	color: #fff;
	font-size: 9px;
	padding: 5px;

}
@media (min-width: 180px) and (max-width: 646px) {
	@media (max-width: 600px) {
		.serv-details-card.frontend {
			width: 95%;
		}
	}
	.sw-invoice-status-counts {
		width: 100%;
		margin: none;
		
	}
	@media (max-width: 380px) {
		.sw-user-status-item, .sw-admin-status-item  {
			font-size: 11px;
			height: 80px;
			width: 100px;
			padding: 15px;
		}
	}
}



.transaction-status-list {
	list-style-type: none;
	padding: 0;
}

.transaction-status-list li {
	margin: 10px 0; /* Add margin at the bottom of each list item */
	font-weight: bold;
	color: #000;
}


/* Container for Settings and Tools Section */
.settings-tools-section {
	position: relative;
	display: flex;
	align-items: center;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
    margin: 10px auto;
    flex-direction: column;
	width: 90%;
}

.settings-tools-section button {
	text-transform: none;
}

.settings-tools-section #loader {
	position: absolute;
	left: 50%;
	top: 50%;
	transform:  translate(-50%);
}

/* Header Style */
.settings-tools-section h2 {
    font-size: 24px;
}

/* AJAX Content Container Style */
#ajax-content-container {
    margin-top: 20px;
	position: relative;
	width: 100%;
	height: 100%;
}


/* Style the user details container */
.smartwoo-details-container {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin: 20px auto;
	background-color: #f1f1f1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 95%;

}

/* --- Base Card Styling --- */
.smartwoo-section-card {
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    color: #333333;
	width: 95%;
	margin: 10px auto;
}

.smartwoo-section-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222222;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #dcdcde;
    padding-bottom: 15px;
	width: 100%;
}

/* --- Table Wrapper for Responsiveness --- */
.smartwoo-detail-table-wrapper {
    overflow-x: auto;
    margin-bottom: 10px;
}

.smartwoo-detail-table {
    width: 100%;
    border-collapse: collapse;
	border: none;
}


.smartwoo-detail-table__body {
    border: 1px solid #dcdcde;
    border-radius: 8px;
    overflow: hidden;
}

.smartwoo-detail-table__row {
    transition: background-color 0.2s ease;
}

.smartwoo-detail-table__row:last-child {
    border-bottom: none;
}

.smartwoo-detail-table__row:hover {
    background-color: #f9f9f9;
}

.smartwoo-detail-table__label,
.smartwoo-detail-table__value {
    padding: 12px 18px;
    font-size: 14px;
    vertical-align: top;
	border: none;
}

.smartwoo-detail-table__label {
    text-align: left;
    font-weight: 500;
    color: #555555;
    width: 35%;
    min-width: 120px;
    white-space: nowrap;
}

.smartwoo-detail-table__value {
	display: flex;
	flex-direction: column;
	gap: 8px;
    text-align: left;
    color: #333333;
    word-break: break-word;
}

.smartwoo-section-card__actions {
    padding-top: 8px;
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: flex-start;
	gap: 10px;
}

/* --- Basic Responsive Adjustments --- */
@media (max-width: 600px) {
    .smartwoo-section-card {
        padding: 15px;
    }
    .smartwoo-section-card__title {
        font-size: 1.3rem;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    .smartwoo-detail-table__label,
    .smartwoo-detail-table__value {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    .smartwoo-detail-table__label {
        width: 40%;
    }
}

#smartwoo-sub-info {
	display: flex;
	flex-direction: column;
	gap: 20px;

}

/* Form Containers and Input fields*/
.sw-cart-form {
	width: 100%;
}

/**Product subscription info */
.smartwoo-product-sub-info {
	background-color: #ffffff;
	border-left: solid #ff0303;
	margin: 10px 0 10px 0;
	padding: 10px;
}


/** Product CSS **/
.sw-products-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;

}

.sw-product-container {
	position: relative;
	background-color: #ffffff;
	box-shadow: 0 10px 10px rgba(3, 1, 2, 0.2);
	/* width: 100%; */
	min-width: 200px;
	width: 30%;
	margin: 10px;
	padding: 10px;
	border-radius: 9px;
}
.sw-product-container img {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height: 200px;
	border-top-right-radius: 9px;
	border-top-left-radius: 9px;
}

.sw-product-container h3 {
	font-size: 18px;
	margin-top: 205px;
	margin-bottom: 10px;
}

.sw-product-container p {
	margin-bottom: 8px;
}

.sw-products-container .sw-description {
	height: 150px;
	overflow: hidden;
}

.sw-products-container .sw-description:hover {
	overflow: auto;
	scrollbar-width: thin;
    scrollbar-color: #f1f1f1 #ffffff00;
}
.sw-products-container .sw-red-button {
	float: right;
	margin-top: 15px;
}

/* Responsive styling */
@media (min-width: 280px) and (max-width: 425px) {
	.sw-products-container {
		flex-wrap: wrap;
	}
	.sw-product-container {
		width: 40%;
	}

	@media (min-width: 280px) and (max-width: 375px) {
		.sw-product-container {
			width: 80%;
			margin: 20px auto;
		}
	}
}

.sw-configured-product-container {
	display: block;
	
}

.sw-configured-product {
color: rgb(56, 104, 236);
text-decoration:rgb(236, 236, 13);
font-family: poppins;
font-weight: 100;
}
.sw-delete-product-container {
	display: flex;
	
}

#swloader {
	display: none;
	width: 200px;
	background-color: #eb0d0d;
	color: rgb(255, 255, 255);
	position: fixed;
	left: 45%;
	top: 50%;
	font-size: 14px;
	border-radius: 50%;
	font-weight: bold;
	text-align: center;
	z-index: 999;
	animation: smartwoopulse 0.3s infinite ease-in-out;
}

@keyframes smartwoopulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
}

.sw-table-limit-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
	gap: 10px;
	margin: 15px;
}
.sw-table-limit-container input {
    height: 30px;
    border: .5px solid #0202ff67;
    border-radius: 3px;
    background-color: #ffffff;
	width: 50px;
	padding: 1px;
}
.sw-table-limit-container input[type="button"] {
    background-color: #f1f1f1;
	padding: 0;
	font-size: 12px;
	color: #333333;
	width: 100px;
}

/****************LOGIN FORM **********************/
.smartwoo-login-form{
	background-color: #ffffff;
	border-radius: 9px;
	margin: 20px auto;
	width: 70%;	
}

.smartwoo-login-form-content{
	width: 95%;
	margin: 20px auto;
	padding: 10px;
}
.smartwoo-login-form-notice {
	text-align: left;
	font-weight: bold;
}
.smartwoo-login-form-notice .sw-notice {
	width: 100%;
}

.smartwoo-login-form-notice a {
	color: #0073e6;
	text-decoration: underline;
	cursor: pointer;
}

.smartwoo-login-form-body {
	position:relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	margin-bottom: 20px;
}

.smartwoo-login-form-label {
	font-weight: bold;
	color: #000000;
	margin-left: 5px;
	padding: 10px;
	min-width: 30%;
	background-color: #f1f1f5;
	height: 57px;
}

.smartwoo-login-input {
	display: flex;
	border-radius: 5px;
	width: 100%;
	height: 50px;
}
.smartwoo-login-form-body span {
	position:absolute;
	left: 95%;
}
@media (min-width: 222px) and (max-width: 480px) {
	.smartwoo-login-form {
		width: 100%;
	}
	.smartwoo-login-form-body {
		flex-wrap: wrap;
		justify-content: center;
	}

	.smartwoo-login-form-label{
		margin-left: 0px;
		width: 100%;
	}
	.smartwoo-login-input{
		display: block;
		margin-left: 0px;
		width: 100%;

	}
	.smartwoo-login-form-body span {
		left: 90%;
		top: 65%;
	}
}

.smartwoo-cart-container {
	display: block;
}
.smartwoo-cart-container .smartwoo-cart-items{
	display: block;
	border: solid #dcdcde .5px;
	padding: 5px;
	border-radius: 8px;
}
.smartwoo-cart-items p {
	font-weight: bold;
}
.smartwoo-cart-items span {
	color: #0073e6;
	text-decoration: underline;
}

.smartwoo-remove {
	color: #ffffff;
	float: right;
	background-color: red;
	cursor: pointer;
	margin: 10px;
	border-radius: 5px;
}

.sw-fast-checkout-main {
	position: absolute;
	top: 15%;
    left: 50%;
	border: solid 2px #dcdcde;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #FFFFFF;
	transition: 1s ease-in-out;
	z-index: 9999;
	max-width: 768px;
	width: 95%;
	margin: auto;
	transform: translateX(-50%);
	padding: 10px;
	border-radius: 8px;
}

.smartwoo-fast-checkout-description {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	border: solid 1px #dcdcde;
	background-color: #f1f1f1;
	height: 50px;
	width: 100%;
}

.smartwoo-fast-checkout-description img {
	width: 50px;
	height: 49px;
}

.sw-fast-checkout-main h2,
.sw-fast-checkout-main input,
.sw-fast-checkout-main button {
	
	margin-right: auto;
	margin-left: auto;
}

.sw-fast-checkout-main h2 {
	font-size: 18px;
}
.sw-fast-checkout-main input {
	border: solid 1px #dcdcde;
	background-color: #ffffff;
	height: 50px;
	width: 100%;
	border-radius: 4px;
}

.sw-fast-checkout-main button {
	width: 80%;
}

.sw-flex-column {
	display: flex;
	flex-direction: column;
	margin: 10px;
	gap: 10px;
}

.sw-client-service-assets-header {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 20px;
    align-items: center;
    justify-content: center;
	flex-wrap: wrap;
}
.sw-service-assets-count-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    width: 30%;
	flex: 1;
	min-width: 150px;
}

.sw-client-service-assets-body {
    min-height: 50vh;
    max-width: 98%;
    background-color: #ffffff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
	margin: auto;
}

.sw-client-service-assets-body-nav-container {
    display: flex;
    flex-direction: row;
    padding: 10px;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-content: space-evenly;
}

.sw-client-service-assets-button {
    max-width: 50%;
    width: 20%;
	min-width: 150px;
    border: solid #0000ff91 1px;
    text-align: center;
    padding: 5px;
	height: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #f1f1f1;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.sw-client-service-assets-button.active {
    background-color: #ffffff;
    box-shadow: 7px 9px 9px 0px rgb(27 25 231 / 7%);
    transition: all 0.3s ease-in-out;

}

.sw-client-assets-body-content {
    margin: 10px;
}
.sw-client-assets-body-content .heading {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

.smartwoo-assets-downloads-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.smartwoo-assets-downloads-table thead {
    background: #f1f1f1;
    color: #333333;
}

.smartwoo-assets-downloads-table th, 
.smartwoo-assets-downloads-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: middle;
	overflow-wrap: anywhere;
}

.smartwoo-assets-downloads-table th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smartwoo-assets-downloads-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

.smartwoo-assets-downloads-table tbody tr:hover {
    background: #027cf7;
    color: #ffffff;
    transition: background 0.3s ease-in-out;
}
.smartwoo-assets-downloads-table tbody tr:hover .dashicons,
.smartwoo-assets-downloads-table tbody tr:hover a {
    color: #eeff00;
}
.smartwoo-assets-downloads-table td:first-child {
    width: 50px;
    /* text-align: center; */
}

.smartwoo-assets-downloads-table td .dashicons {
    font-size: 30px;
    color: #ab7ef3;
}

.smartwoo-assets-downloads-table a {
    color: #0073aa;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.smartwoo-assets-downloads-table a:hover {
    color: #005a87;
    text-decoration: underline;
}
.smartwoo-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: 700;
    width: 6px;
    height: 6px;
    padding: 5px;
    line-height: 1;
    font-size: 9px;
    border-radius: 50%;
    text-align: center;
}

.smartwoo-tooltip::before {
	content: attr(data-title);
	position: absolute;
	bottom: 125%;
	background-color: #000;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	white-space: normal;
	width: max-content;
	max-width: 240px;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	z-index: 999;
}

.smartwoo-tooltip:hover::before,
.smartwoo-tooltip:focus::before {
	opacity: 1;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .smartwoo-assets-downloads-table th,
    .smartwoo-assets-downloads-table td {
        padding: 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
	.sw-service-assets-count-box {
		width: 90%;
	}
	/* .sw-client-service-assets-body-nav-container{
		flex-direction: column;
		width: 100% !important;
		justify-content: center;
		align-items: center;
		
	}
	.sw-client-service-assets-button {
		max-width: 100% !important;
		width: 90% !important;
	} */
	
	
    .smartwoo-assets-downloads-table thead {
        display: none;
    }

    .smartwoo-assets-downloads-table tbody,
    .smartwoo-assets-downloads-table tr,
    .smartwoo-assets-downloads-table td {
        display: block;
    }

    .smartwoo-assets-downloads-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .smartwoo-assets-downloads-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        text-align: left;
        font-weight: 600;
        color: #555;
    }

    .smartwoo-assets-downloads-table td:last-child a {
        display: inline-block;
        padding: 8px 12px;
        background: #0073aa;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
    }

    .smartwoo-assets-downloads-table td:last-child a:hover {
        background: #005177;
    }
}
/* Two-column form layout */
#smartwoo-account-form.smartwoo-form,
#smartwoo-billing-form.smartwoo-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* space between fields */
    max-width: 95%;
    margin: 0 auto;
    padding: 1.5em;
    background: #f1f1f1;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

#smartwoo-account-form p,
#smartwoo-billing-form p {
	margin: 1px;
}

/* Default full-width for all fields */
#smartwoo-account-form .form-row,
#smartwoo-billing-form .form-row {
    flex: 1 1 100%;
}

/* Make specific fields half-width */
#smartwoo-account-form #password_1_field,
#smartwoo-account-form #password_2_field,
#smartwoo-account-form #account_first_name_field,
#smartwoo-account-form #account_last_name_field,
#smartwoo-billing-form #billing_first_name_field,
#smartwoo-billing-form #billing_last_name_field,
#smartwoo-billing-form #billing_city_field,
#smartwoo-billing-form #billing_postcode_field,
#smartwoo-billing-form #billing_state_field,
#smartwoo-billing-form #billing_country_field {
    flex: 1 1 calc(50% - 0.5em);
}

/* Labels */
#smartwoo-account-form .form-row label,
#smartwoo-billing-form .form-row label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.4em;
    display: block;
}

/* Inputs & selects */
#smartwoo-account-form .form-row input.input-text,
#smartwoo-account-form .form-row select,
#smartwoo-billing-form .form-row input.input-text,
#smartwoo-billing-form .form-row select {
    width: 100%;
    padding: 0.6em 0.8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fafafa;
    font-size: 14px;
    transition: border-color 0.2s, background 0.2s;
}

/* Focus effect */
#smartwoo-account-form .form-row input:focus,
#smartwoo-account-form .form-row select:focus,
#smartwoo-billing-form .form-row input:focus,
#smartwoo-billing-form .form-row select:focus {
    border-color: #0073aa;
    background: #fff;
    outline: none;
}

/* Country/state select2 dropdowns */
#smartwoo-billing-form .select2-container--default .select2-selection--single {
    height: 40px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
}
#smartwoo-billing-form .select2-container--default .select2-selection--single:focus {
    border-color: #0073aa;
}

/* Button */
.smartwoo-payment-methods-grid .sw-blue-button,
#smartwoo-account-form .sw-blue-button, 
#smartwoo-billing-form .sw-blue-button {
    display: inline-block;
    padding: 0.6em 1.5em;
    background: #0073aa;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#smartwoo-account-form .sw-blue-button:hover,
#smartwoo-billing-form .sw-blue-button:hover {
    background: #005d88;
}

#smartwoo-payment-edit-form.smartwoo-form {
    max-width: 95%;
    margin: 0 auto;
    padding: 1.5em;
    background: #f1f1f1;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}
.smartwoo-payment-methods-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.smartwoo-payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    justify-content: center; /* keeps them centered when fewer items */
}

.smartwoo-payment-method {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 300px;
    width: 100%;
}

.smartwoo-payment-method:hover {
    border-color: #007cba;
    background: #f8fbff;
}

.smartwoo-payment-method__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
	cursor: pointer;
	width: 100%;
	height: 100%;
}
.smartwoo-gateway-title {
	font-size: 18px;
	color: #333333;
	font-weight: 700;
}

.smartwoo-gateway-icon {
	max-width: 300px;
}
