.woocommerce .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--gamplify-affiliate-wp-invites a::before {
    content: "\ee62";
}

.woocommerce-account .woocommerce-MyAccount-content .gamplify-affiliate-wp-invite-link-send {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
}

.woocommerce-account .woocommerce-MyAccount-content .gamplify-affiliate-wp-invite-link-send > div {
    flex: 1;
}

/* Container */
.gamplify-affiliate-wp-invite {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	border-radius: 12px;
}

/* Left and Right sections */
.gamplify-affiliate-wp-invite-shortcode-section,
.gamplify-affiliate-wp-invite-form-section {
	background-color: transparent;
	border-radius: 10px;
	flex: 1;
}

/* Headings */
.gamplify-affiliate-wp-invite-shortcode-section h3,
.gamplify-affiliate-wp-invite-form-section h3 {
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.3rem;
	margin-bottom: 5px;
    margin-top: 0;
}

.gamplify-affiliate-wp-invite-shortcode-section h3 svg,
.gamplify-affiliate-wp-invite-form-section h3 svg{
	flex-shrink: 0;
    stroke: #007CFF;
}

/* Paragraph */
.gamplify-affiliate-wp-invite-shortcode-section p,
.gamplify-affiliate-wp-invite-form-section p {
	font-size: 0.9rem;
    color: initial;
	margin-top: 0;
}

/* Label */
.gamplify-affiliate-wp-invite label {
	display: block;
	font-size: 0.85rem;
	color: #000;
	margin-bottom: 8px;
}

/* Select & Inputs */
.gamplify-affiliate-wp-invite select,
.gamplify-affiliate-wp-invite textarea,
.gamplify-affiliate-wp-invite input[type="text"] {
	width: 100%;
	padding: 12px;
	border-radius: 8px;
	font-size: 0.95rem;
	outline: none;
	transition: border 0.3s;
}


/* Buttons */
.gamplify-affiliate-wp-invite-generate-link,
.gamplify-affiliate-wp-invite-form-section .gamplify-affiliate-wp-invite-send-invite {
	display: inline-block;
	border: none;
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
	margin-top: 10px;
	width: 100%;
}

.gamplify-affiliate-wp-invite-generate-link:hover,
.gamplify-affiliate-wp-invite-form-section .gamplify-affiliate-wp-invite-send-invite:hover {
	transform: translateY(-2px);
}
.gamplify-affiliate-wp-invite-generate-link:focus,
.gamplify-affiliate-wp-invite-form-section .gamplify-affiliate-wp-invite-send-invite:focus {
	outline: 0;
}

body .gamplify-affiliate-wp-invite .select2-container .select2-selection {
    padding: 0px 10px;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.3s;
    height: auto;
}

body .gamplify-affiliate-wp-invite .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: unset;
}

.select2-container--open .select2-dropdown.gamplify-affiliate-wp-invite-page-id {
    top: 0;
    margin-top: -10px;
    padding-top: 10px;
    border-radius: 8px;
}

.select2-container--default .gamplify-affiliate-wp-invite-page-id .select2-search--dropdown .select2-search__field {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.3s;
}

body .select2-container--default .gamplify-affiliate-wp-invite-page-id .select2-results__option--selected,
body .select2-container--default .gamplify-affiliate-wp-invite-page-id .select2-results__option--highlighted[aria-selected=true],
body .select2-container--default .gamplify-affiliate-wp-invite-page-id .select2-results__option--highlighted[data-selected=true] {
    background-color: #ddd;
}

body .select2-container--default .gamplify-affiliate-wp-invite-page-id .select2-results__option--highlighted[aria-selected=true] {
    color: #000;
}

.gamplify-affiliate-wp-invite-page-id .select2-results__option .badge {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 6px;
    font-size: 11px;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: #121212;
    color: #fff;
    line-height: normal;
}

.gamplify-affiliate-wp-invite-page-id .select2-results__option .badge.badge-course { background-color: #28a745; }   /* Green */
.gamplify-affiliate-wp-invite-page-id .select2-results__option .badge.badge-group { background-color: #007bff; }    /* Blue */
.gamplify-affiliate-wp-invite-page-id .select2-results__option .badge.badge-forum { background-color: #ffc107; }  /* Yellow */

/* Copy button */
.gamplify-affiliate-wp-invite-copy-shortcode {
	position: relative;
	padding: 8px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: background-color 0.3s, transform 0.2s;
}

.gamplify-affiliate-wp-invite-copy-shortcode:hover {
	transform: translateY(-2px);
}
.gamplify-affiliate-wp-invite-copy-shortcode:focus {
	outline: none;
}

/* Tooltip styling */
.gamplify-affiliate-wp-invite-copy-shortcode:after {
	content: 'Copied!';
	position: absolute;
	bottom: 114%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #385DFF;
	padding: 4px 8px;
	font-size: 0.75rem;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.gamplify-affiliate-wp-invite-copy-shortcode::before {
	content: '';
	position: absolute;
	bottom: 90%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: #385DFF transparent transparent transparent;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Show tooltip */
.gamplify-affiliate-wp-invite-copy-shortcode.show-tooltip::after,
.gamplify-affiliate-wp-invite-copy-shortcode.show-tooltip::before {
	opacity: 1;
}

/* Link Section */
.gamplify-affiliate-wp-invite-link-section {
	margin-top: 15px;
	padding: 10px;
    background-color: #efefef;
	border-radius: 8px;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.gamplify-affiliate-wp-invite-link {
	font-size: 0.9rem;
	word-break: break-all;
}

.gamplify-affiliate-wp-invite-form-section form p,
.gamplify-affiliate-wp-invite-form-section textarea,
.gamplify-affiliate-wp-invite-form-section input[type="text"],
.gamplify-affiliate-wp-invite-shortcode-section select {
	box-sizing: border-box;
	max-width: 100%;
    color: #000;
}

span#select2-page_id-container {
    color: #000;
}

.gamplify-affiliate-wp-invite select::placeholder,
.gamplify-affiliate-wp-invite textarea::placeholder,
.gamplify-affiliate-wp-invite input[type="text"]::placeholder {
    color: #000;
}

/* Ensure textarea doesn't overflow */
.gamplify-affiliate-wp-invite textarea {
	resize: vertical;
}

/* Loader Spinner */
.gamplify-affiliate-wp-invite {
	position: relative;
}

.gamplify-affiliate-wp-invite-loader {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(239, 239, 239, 0.38);
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
}

/* Spinner stays same */
.gamplify-affiliate-wp-invite-loader .spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top: 4px solid;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

/* Notice */
.gamplify-affiliate-wp-invite .invite-response {
    padding: 12px 16px;
    margin-top: 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.gamplify-affiliate-wp-invite .invite-error {
    background-color: #2a1c1c;
    border: 1px solid #d9534f;
    color: #f5b5b5;
}

.gamplify-affiliate-wp-invite .invite-success {
    background-color: #1d2a21;
    border: 1px solid #28a745;
    color: #a8e6b1;
}

.gamplify-affiliate-wp-invite .invite-response::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}

.gamplify-affiliate-wp-invite .invite-error::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.383 0 0 5.383 0 12c0 6.618 5.383 12 12 12 6.618 0 12-5.382 12-12 0-6.617-5.382-12-12-12zm0 22c-5.523 0-10-4.478-10-10 0-5.523 4.477-10 10-10 5.522 0 10 4.477 10 10 0 5.522-4.478 10-10 10zM11 6h2v8h-2V6zm0 10h2v2h-2v-2z'/%3E%3C/svg%3E") no-repeat center;
}

.gamplify-affiliate-wp-invite .invite-success::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.383 0 0 5.383 0 12c0 6.618 5.383 12 12 12 6.618 0 12-5.382 12-12 0-6.617-5.382-12-12-12zm0 22c-5.523 0-10-4.478-10-10 0-5.523 4.477-10 10-10 5.522 0 10 4.477 10 10 0 5.522-4.478 10-10 10zm-2-6l-4-4 1.414-1.414L10 13.172l6.586-6.586L18 8l-8 8z'/%3E%3C/svg%3E") no-repeat center;
}

.gamplify-affiliate-wp-invite .invite-response {
    padding-left: 40px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
	.gamplify-affiliate-wp-invite {
		flex-direction: column;
	}
}