.cwa-auth-wrapper {
	max-width: 520px;
	margin: 30px auto;
}

.cwa-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 25px;
}

.cwa-tab {
	border: 1px solid #ddd;
	background: #f5f5f5;
	padding: 14px 18px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	border-radius: 5px;
}

.cwa-tab.active {
	background: #111;
	color: #fff;
	border-color: #111;
}

.cwa-panel {
	display: none;
}

.cwa-panel.active {
	display: block;
}

.cwa-form p {
	margin: 0 0 18px;
}

.cwa-form label {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
}

.cwa-form label span,
.cwa-form .required {
	color: #d00;
}

.cwa-form input[type="text"],
.cwa-form input[type="email"],
.cwa-form input[type="password"],
.cwa-form input[type="tel"],
.cwa-form input[type="file"],
.cwa-form select {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

.cwa-form input[type="file"] {
	padding: 9px;
}

.cwa-form small {
	display: block;
	margin-top: 5px;
	color: #777;
}

.cwa-button {
	display: inline-block;
	border: 0;
	background: #111;
	color: #fff;
	padding: 13px 24px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
}

.cwa-button:hover {
	opacity: .9;
	color: #fff;
}

.cwa-submit-row {
	margin-top: 24px !important;
}

.cwa-lost-password {
	text-align: center;
}

.cwa-notice {
	padding: 12px 15px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.cwa-error {
	background: #ffe8e8;
	color: #9b0000;
}

.cwa-success {
	background: #e9f8ed;
	color: #176b2c;
}

.cwa-auth-logged-in {
	text-align: center;
}

.cwa-account-profile-image {
	margin: 0 0 25px;
}

.cwa-account-profile-image img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.cwa-account-fields {
	margin-top: 30px;
}

.cwa-account-edit-image {
	display: block;
	margin-bottom: 12px;
}

.cwa-account-edit-image img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.iti {
	width: 100%;
}

@media (max-width: 600px) {
	.cwa-auth-wrapper {
		width: 100%;
	}
}


/* =========================================================
   CUSTOM WC AUTH - SITE LIME COLOR
   Main Color: #D7FF3F
   ========================================================= */

:root {
    --cwa-primary: #D7FF3F;
    --cwa-primary-hover: #D7FF3F;
    --cwa-primary-text: #000000;
}


/* =========================================================
   LOGIN / REGISTER TABS
   ========================================================= */

.cwa-tab {
    border-color: var(--cwa-primary) !important;
    color: #ffffff !important;
    background: transparent !important;
}

.cwa-tab:hover,
.cwa-tab:focus {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: var(--cwa-primary-text) !important;
}

.cwa-tab.active,
.cwa-tab.active:hover,
.cwa-tab.active:focus {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: var(--cwa-primary-text) !important;
}


/* =========================================================
   ALL FORM BUTTONS
   ========================================================= */

.cwa-button,
.cwa-login-form button,
.cwa-registration-form button,
.cwa-form button,
button.cwa-button,
input[type="submit"].cwa-button {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: var(--cwa-primary-text) !important;
}


/* Button Hover */

.cwa-button:hover,
.cwa-button:focus,
.cwa-login-form button:hover,
.cwa-login-form button:focus,
.cwa-registration-form button:hover,
.cwa-registration-form button:focus,
.cwa-form button:hover,
.cwa-form button:focus,
button.cwa-button:hover,
button.cwa-button:focus,
input[type="submit"].cwa-button:hover,
input[type="submit"].cwa-button:focus {
    background-color: var(--cwa-primary-hover) !important;
    border-color: var(--cwa-primary-hover) !important;
    color: var(--cwa-primary-text) !important;
}


/* =========================================================
   FORM INPUT FOCUS
   ========================================================= */

.cwa-registration-form input:focus,
.cwa-registration-form select:focus,
.cwa-registration-form textarea:focus,
.cwa-login-form input:focus,
.cwa-login-form select:focus,
.cwa-login-form textarea:focus,
.cwa-form input:focus,
.cwa-form select:focus,
.cwa-form textarea:focus {
    border-color: var(--cwa-primary) !important;
    outline-color: var(--cwa-primary) !important;
    box-shadow: 0 0 0 1px var(--cwa-primary) !important;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.cwa-registration-form input[type="checkbox"]:checked,
.cwa-login-form input[type="checkbox"]:checked,
.cwa-form input[type="checkbox"]:checked,
.cwa-registration-form input[type="radio"]:checked,
.cwa-login-form input[type="radio"]:checked,
.cwa-form input[type="radio"]:checked {
    accent-color: var(--cwa-primary) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.cwa-wrapper a,
.cwa-auth-wrapper a,
.cwa-login-form a,
.cwa-registration-form a,
.cwa-form a {
    color: var(--cwa-primary) !important;
}

.cwa-wrapper a:hover,
.cwa-auth-wrapper a:hover,
.cwa-login-form a:hover,
.cwa-registration-form a:hover,
.cwa-form a:hover {
    color: var(--cwa-primary) !important;
}


/* =========================================================
   LOST PASSWORD LINK
   ========================================================= */

.cwa-lost-password,
.cwa-forgot-password,
.cwa-login-form .lost_password a,
.cwa-login-form a[href*="lost-password"],
.cwa-login-form a[href*="lost_password"] {
    color: var(--cwa-primary) !important;
}

.cwa-lost-password:hover,
.cwa-forgot-password:hover,
.cwa-login-form .lost_password a:hover,
.cwa-login-form a[href*="lost-password"]:hover,
.cwa-login-form a[href*="lost_password"]:hover {
    color: var(--cwa-primary) !important;
}


/* =========================================================
   REQUIRED FIELD ASTERISKS
   ========================================================= */

.cwa-registration-form .required,
.cwa-login-form .required,
.cwa-form .required {
    color: var(--cwa-primary) !important;
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.cwa-profile-image img,
.cwa-profile-avatar img {
    border-color: var(--cwa-primary) !important;
}


/* Profile image upload/change button */

.cwa-profile-image button,
.cwa-profile-avatar button,
.cwa-change-profile-image,
.cwa-upload-profile-image {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: #000000 !important;
}


/* =========================================================
   FILE UPLOAD FIELD
   ========================================================= */

.cwa-registration-form input[type="file"]:focus,
.cwa-form input[type="file"]:focus {
    border-color: var(--cwa-primary) !important;
    outline-color: var(--cwa-primary) !important;
}


/* =========================================================
   COUNTRY / PHONE SELECTOR
   ========================================================= */

.cwa-phone-wrapper input:focus,
.cwa-phone-wrapper select:focus,
.cwa-phone-input:focus {
    border-color: var(--cwa-primary) !important;
    box-shadow: 0 0 0 1px var(--cwa-primary) !important;
}


/* intl-tel-input country dropdown */

.iti__country:hover {
    background-color: rgba(215, 255, 63, 0.15) !important;
}

.iti__country.iti__highlight {
    background-color: rgba(215, 255, 63, 0.20) !important;
}

.iti__selected-country:focus,
.iti__selected-country:hover {
    background-color: rgba(215, 255, 63, 0.10) !important;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.cwa-success,
.cwa-success-message,
.cwa-registration-success {
    border-color: var(--cwa-primary) !important;
}

.cwa-success strong,
.cwa-success-message strong,
.cwa-registration-success strong {
    color: var(--cwa-primary) !important;
}


/* =========================================================
   ERROR MESSAGE
   ========================================================= */

.cwa-error,
.cwa-error-message,
.cwa-registration-error {
    border-color: #ff4d6d !important;
}


/*
 * Error color intentionally stays red/pink.
 * This is a status/error color, not the site's primary accent.
 */


/* =========================================================
   LOADING / SPINNER
   ========================================================= */

.cwa-loading,
.cwa-spinner {
    border-color: rgba(215, 255, 63, 0.25) !important;
    border-top-color: var(--cwa-primary) !important;
}


/* =========================================================
   PASSWORD STRENGTH INDICATOR
   ========================================================= */

.cwa-password-strength {
    border-color: var(--cwa-primary) !important;
}

.cwa-password-strength.strong {
    background-color: var(--cwa-primary) !important;
    color: #000000 !important;
}


/* =========================================================
   FORM LABEL / ACCENT ELEMENTS
   ========================================================= */

.cwa-form label.active,
.cwa-registration-form label.active,
.cwa-login-form label.active {
    color: var(--cwa-primary) !important;
}


/* =========================================================
   ACTIVE / SELECTED STATES
   ========================================================= */

.cwa-active,
.cwa-selected,
.cwa-form .active {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: #000000 !important;
}


/* =========================================================
   WOOCOMMERCE MY ACCOUNT CUSTOM ELEMENTS
   ========================================================= */

.woocommerce-account .cwa-button,
.woocommerce-account .cwa-profile-button,
.woocommerce-account .cwa-edit-profile {
    background-color: var(--cwa-primary) !important;
    border-color: var(--cwa-primary) !important;
    color: #000000 !important;
}

.woocommerce-account .cwa-button:hover,
.woocommerce-account .cwa-profile-button:hover,
.woocommerce-account .cwa-edit-profile:hover {
    background-color: var(--cwa-primary-hover) !important;
    border-color: var(--cwa-primary-hover) !important;
    color: #000000 !important;
}


/* =========================================================
   WOOCOMMERCE FORM FOCUS
   ========================================================= */

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus {
    border-color: var(--cwa-primary) !important;
    box-shadow: 0 0 0 1px var(--cwa-primary) !important;
}


/* =========================================================
   REMOVE COMMON PINK ACCENTS
   ========================================================= */

.cwa-wrapper [style*="pink"],
.cwa-wrapper [style*="#ff"],
.cwa-wrapper [style*="#e91e63"],
.cwa-wrapper [style*="#ff4081"],
.cwa-wrapper [style*="#ff1493"] {
    --cwa-primary: #D7FF3F !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cwa-tab.active {
        background-color: var(--cwa-primary) !important;
        border-color: var(--cwa-primary) !important;
        color: #000000 !important;
    }

    .cwa-button,
    .cwa-login-form button,
    .cwa-registration-form button {
        background-color: var(--cwa-primary) !important;
        border-color: var(--cwa-primary) !important;
        color: #000000 !important;
    }

}