/**
 * Colors
 */
:root {
	--predikta-primary: #446DCF;
	--predikta-secondary: #3FDFCF;
	--predikta-success: #28a745;
	--predikta-warning: #ffc107;
	--predikta-danger: #dc3545;
	--predikta-default: #6c757d;
	--predikta-black: #000000;
	--predikta-white: #ffffff;
}


/**
 * Typography
 */
body {
  font-family: 'Inter', sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', sans-serif;
}
.h1 { font-weight: 700; }
.h2 { font-weight: 600; }
.h3 { font-weight: 600; }
.h4 { font-weight: 500; }
.h5 { font-weight: 500; }
.h6 { font-weight: 400; }


/**
 * Buttons
 */
.predikta-btn {
	display: inline-block;
	padding: 0.6rem 1rem;
	border-radius: 4px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	text-transform: none !important;
	letter-spacing: 0.02em;
	line-height: 16px;
	font-size: 1em;
}
.predikta-btn-primary {
	background-color: var(--predikta-primary);
	color: var(--predikta-white);
}
.predikta-btn-secondary {
	background-color: var(--predikta-secondary);
	color: var(--predikta-black);
}
.predikta-btn-success {
	background-color: var(--predikta-success);
	color: var(--predikta-white);
}
.predikta-btn-warning {
	background-color: var(--predikta-warning);
	color: var(--predikta-black);
}
.predikta-btn-danger {
	background-color: var(--predikta-danger);
	color: var(--predikta-white);
}
.predikta-btn-default {
	background-color: var(--predikta-default);
	color: var(--predikta-white);
}
/* Outline Buttons */
.predikta-btn-outline-primary {
	background-color: transparent;
	border-color: var(--predikta-primary);
	color: var(--predikta-primary);
}
.predikta-btn-outline-primary:hover {
	background-color: var(--predikta-primary);
	color: var(--predikta-white);
}
.predikta-btn-outline-secondary {
	background-color: transparent;
	border-color: var(--predikta-secondary);
	color: var(--predikta-secondary);
}
.predikta-btn-outline-secondary:hover {
	background-color: var(--predikta-secondary);
	color: var(--predikta-black);
}
.predikta-btn-outline-success {
	background-color: transparent;
	border-color: var(--predikta-success);
	color: var(--predikta-success);
}
.predikta-btn-outline-success:hover {
	background-color: var(--predikta-success);
	color: var(--predikta-white);
}
.predikta-btn-outline-warning {
	background-color: transparent;
	border-color: var(--predikta-warning);
	color: var(--predikta-warning);
}
.predikta-btn-outline-warning:hover {
	background-color: var(--predikta-warning);
	color: var(--predikta-black);
}
.predikta-btn-outline-danger {
	background-color: transparent;
	border-color: var(--predikta-danger);
	color: var(--predikta-danger);
}
.predikta-btn-outline-danger:hover {
	background-color: var(--predikta-danger);
	color: var(--predikta-white);
}
.predikta-btn-outline-default {
	background-color: transparent;
	border-color: var(--predikta-default);
	color: var(--predikta-default);
}
.predikta-btn-outline-default:hover {
	background-color: var(--predikta-default);
	color: var(--predikta-white);
}
/* Gradient Buttons */
.predikta-btn-gradient-primary {
	background: linear-gradient(45deg, var(--predikta-primary), #6B8DE3);
	color: var(--predikta-white);
	border: none;
}
.predikta-btn-gradient-secondary {
	background: linear-gradient(45deg, var(--predikta-secondary), #6BE3D9);
	color: var(--predikta-black);
	border: none;
}
.predikta-btn-gradient-success {
	background: linear-gradient(45deg, var(--predikta-success), #34C759);
	color: var(--predikta-white);
	border: none;
}
.predikta-btn-gradient-warning {
	background: linear-gradient(45deg, var(--predikta-warning), #FFD60A);
	color: var(--predikta-black);
	border: none;
}
.predikta-btn-gradient-danger {
	background: linear-gradient(45deg, var(--predikta-danger), #FF6B6B);
	color: var(--predikta-white);
	border: none;
}
.predikta-btn-gradient-default {
	background: linear-gradient(45deg, var(--predikta-default), #8C8C8C);
	color: var(--predikta-white);
	border: none;
}
.predikta-btn-gradient-primary:hover,
.predikta-btn-gradient-secondary:hover,
.predikta-btn-gradient-success:hover,
.predikta-btn-gradient-warning:hover,
.predikta-btn-gradient-danger:hover,
.predikta-btn-gradient-default:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}
.design-buttons .predikta-btn {
	margin-bottom: 10px;
}
.predikta-btn-primary:hover,
.predikta-btn-success:hover,
.predikta-btn-warning:hover,
.predikta-btn-danger:hover,
.predikta-btn-secondary:hover,
.predikta-btn-default:hover,
.predikta-btn-outline-primary:hover,
.predikta-btn-outline-secondary:hover,
.predikta-btn-outline-success:hover,
.predikta-btn-outline-warning:hover,
.predikta-btn-outline-danger:hover,
.predikta-btn-outline-default:hover {
	border-color: transparent !important;
}
.predikta-btn-primary:hover { background-color: #3356a8 !important; }
.predikta-btn-success:hover,
a.predikta-btn-success:hover { background-color: #218838 !important; color: #fff !important; }
.predikta-btn-warning:hover { background-color: #e0a800 !important; color: #fff !important; }
.predikta-btn-danger:hover { background-color: #b52a37 !important; }
.predikta-btn-secondary:hover { background-color: #2bbfae !important; color: #fff !important; }
.predikta-btn-default:hover { background-color: #545b62 !important; }

/* Gradient Outline Button */
.predikta-btn-outline-gradient {
	position: relative;
	display: inline-block;
	padding: 2px;
	border: none;
	border-radius: 0.5rem;
	background: linear-gradient(90deg, var(--predikta-primary), var(--predikta-secondary));
	color: var(--predikta-primary);
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 0.02em;
	line-height: 16px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
	z-index: 1;
	overflow: hidden;
}

.predikta-btn-outline-gradient span {
	display: block;
	background: #fff;
	border-radius: 0.5rem;
	padding: 0.75rem 2.5rem;
	transition: background 0.2s, color 0.2s;
	position: relative;
	z-index: 2;
}

.predikta-btn-outline-gradient::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 0.5rem;
	padding: 1px; /* border thickness */
	background: linear-gradient(90deg, var(--predikta-primary), var(--predikta-secondary));
	-webkit-mask:
			linear-gradient(#fff 0 0) content-box, 
			linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 1;
	pointer-events: none;
}

.predikta-btn-outline-gradient:hover span {
	background: linear-gradient(90deg, var(--predikta-primary), var(--predikta-secondary));
	color: #fff;
}

/**
 * Color Swatches
 */
.color-swatch {
	width: 100px;
	height: 100px;
	margin: 10px;
	display: inline-block;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.swatch-primary { background: var(--predikta-primary); }
.swatch-secondary { background: var(--predikta-secondary); }
.swatch-success { background: var(--predikta-success); }
.swatch-warning { background: var(--predikta-warning); }
.swatch-danger { background: var(--predikta-danger); }
.swatch-default { background: var(--predikta-default); }
.swatch-black { background: var(--predikta-black); }
.swatch-white { background: var(--predikta-white); border: 1px solid #eee; }
.color-info {
	margin-top: 5px;
	font-size: 14px;
}


/**
 * Background & Text Utilities
 */
.bg-primary { background: var(--predikta-primary) !important; color: #fff !important; }
.bg-secondary { background: var(--predikta-secondary) !important; }
.bg-success { background: var(--predikta-success) !important; }
.bg-warning { background: var(--predikta-warning) !important; }
.bg-danger { background: var(--predikta-danger) !important; }
.bg-default { background: var(--predikta-default) !important; }
.bg-black { background: var(--predikta-black) !important; color: #fff !important; }
.bg-white { background: var(--predikta-white) !important; }

/* For dark backgrounds, use .text-on-dark to force white text */
.text-on-dark { color: #fff !important; }

.text-primary { color: var(--predikta-primary) !important; }
.text-secondary { color: var(--predikta-secondary) !important; }
.text-success { color: var(--predikta-success) !important; }
.text-warning { color: var(--predikta-warning) !important; }
.text-danger { color: var(--predikta-danger) !important; }
.text-default { color: var(--predikta-default) !important; }
.text-black { color: var(--predikta-black) !important; }
.text-white { color: var(--predikta-white) !important; }


/**
 * Layout & Section
 */
.design-section {
    margin-bottom: 3rem;
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
}
.component-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/**
 * Form Elements
 */
.astra-predikta .form-group {
    margin-bottom: 1.5rem;
}
.astra-predikta label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}
.astra-predikta .form-row {
    
}
.astra-predikta .form-row > div {
    flex: 1;
}
.astra-predikta input.form-control,
.astra-predikta textarea.form-control,
.astra-predikta select.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    color: #222;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.astra-predikta input.form-control:focus,
.astra-predikta textarea.form-control:focus,
.astra-predikta select.form-control:focus {
    border-color: var(--predikta-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(68,109,207,0.08);
}
.astra-predikta input.form-control[disabled],
.astra-predikta textarea.form-control[disabled],
.astra-predikta select.form-control[disabled] {
    background: #f1f3f4;
    color: #a0a0a0;
    border-color: #e0e0e0;
    cursor: not-allowed;
}
/* Success */
.astra-predikta .form-control-success {
    border-color: var(--predikta-success) !important;
    background: #f6fef8;
    color: #222;
}
.astra-predikta .form-control-success:focus {
    box-shadow: 0 0 0 2px rgba(40,167,69,0.08);
}
/* Warning */
.astra-predikta .form-control-warning {
    border-color: var(--predikta-warning) !important;
    background: #fffdf6;
    color: #222;
}
.astra-predikta .form-control-warning:focus {
    box-shadow: 0 0 0 2px rgba(255,193,7,0.08);
}
/* Error */
.astra-predikta .form-control-error {
    border-color: var(--predikta-danger) !important;
    background: #fff6f6;
    color: #222;
}
.astra-predikta .form-control-error:focus {
    box-shadow: 0 0 0 2px rgba(220,53,69,0.08);
}
.astra-predikta .input-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    pointer-events: none;
}
.astra-predikta .input-wrapper {
    position: relative;
    width: 100%;
}
.astra-predikta .input-label-icon {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.astra-predikta .input-label-icon .icon {
    font-size: 1.1em;
}
.astra-predikta .input-icon-success { color: var(--predikta-success); }
.astra-predikta .input-icon-warning { color: var(--predikta-warning); }
.astra-predikta .input-icon-error { color: var(--predikta-danger); }
.astra-predikta .input-label-icon .icon-success { color: var(--predikta-success); }
.astra-predikta .input-label-icon .icon-warning { color: var(--predikta-warning); }
.astra-predikta .input-label-icon .icon-error { color: var(--predikta-danger); }
.astra-predikta select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    background-image: none;
    position: relative;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    height: auto;
    min-height: 48px;
}
.astra-predikta .select-wrapper {
    position: relative;
    width: 100%;
}
.astra-predikta .select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.1em;
    color: #888;
}

/**
* Banners
*/
.predikta-banner {
    display: flex;
		flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
		text-align: left;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    color: var(--predikta-white);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px 0 rgba(68,109,207,0.10);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.predikta-banner:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px 0 rgba(68,109,207,0.13);
            color: var(--predikta-white);
}
.predikta-banner-bundle {
    background: linear-gradient(90deg, var(--predikta-primary) 0%, var(--predikta-secondary) 100%);
}
.predikta-banner-bundle-alt1 {
    background: linear-gradient(120deg, var(--predikta-primary) 0%, var(--predikta-secondary) 100%);
}
.predikta-banner-bundle-alt2 {
    background: linear-gradient(60deg, var(--predikta-primary) 0%, var(--predikta-secondary) 100%);
}
.predikta-banner-bundle-purplepink {
    background: linear-gradient(90deg, #8e54e9 0%, #ff6a88 100%);
}
.predikta-banner-bundle-orangeyellow {
    background: linear-gradient(90deg, #ffb347 0%, #ffcc33 100%);
    color: #222;
}
.predikta-banner-bundle-greenteal {
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}
.predikta-banner-bundle-redorange {
    background: linear-gradient(90deg, #ff5858 0%, #f09819 100%);
}
.predikta-banner-bundle-blueviolet {
    background: linear-gradient(90deg, #396afc 0%, #2948ff 100%);
}
.predikta-banner-title-bundles {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
		text-align: left;
}
.discount-rate {
    background: var(--predikta-white);
    color: var(--predikta-primary);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.5em 1.3em;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 2px 8px 0 rgba(68,109,207,0.08);
    display: inline-block;
}
/* Simulation Banner */
.predikta-banner-simulation {
    background: var(--predikta-black);
    color: var(--predikta-white);
    border-radius: 20px;
    padding: 2rem 1.5rem 2.5rem 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.13);
    max-width: 480px;
}
.predikta-banner-simulation h4 {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    opacity: 0.8;
}
.predikta-banner-simulation h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.15;
}
.predikta-banner-simulation .sim-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}
.predikta-banner-simulation .predikta-btn-sim-primary {
    background: var(--predikta-primary);
    color: var(--predikta-white);
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.9rem 0;
    cursor: pointer;
    transition: background 0.2s;
}
.predikta-banner-simulation .predikta-btn-sim-primary:hover {
    background: #3356a8;
}
.predikta-banner-simulation .predikta-btn-sim-secondary {
    background: #e0e0e0;
    color: #222;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.9rem 0;
    cursor: pointer;
    transition: background 0.2s;
}
.predikta-banner-simulation .predikta-btn-sim-secondary:hover {
    background: #cccccc;
}

/**
* Cards
*/
.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.card-body {
    padding: 0;
}
.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.card-text {
    font-size: 1rem;
    color: #666;
}
.card-gradient-bluegreen {
    background: linear-gradient(90deg, var(--predikta-primary) 0%, var(--predikta-secondary) 100%);
}
.card-gradient-purplepink {
    background: linear-gradient(90deg, #8e54e9 0%, #ff6a88 100%);
}
.card-gradient-orangeyellow {
    background: linear-gradient(90deg, #ffb347 0%, #ffcc33 100%);
}


/**
 *  Labels
 */
.color-label {
    display: inline-block;
    background: #aaa;
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
    border-radius: 6px;
    padding: 0.1em 0.7em;
    margin-left: 0.5em;
    vertical-align: middle;
    letter-spacing: 0.01em;
}
    

/* Label Variants */
.label-danger {
	background: #d32d3a; /* Gray */
}

.label-draft {
	background: #9e9e9e; /* Gray */
}

.label-in-progress {
	background: #1976d2; /* Blue */
}

.label-success {
	background: #388e3c; /* Green */
}

.label-warning {
	background: #f57c00; /* Orange */
}

.label-xs {
	font-size: 0.65em;
	padding: 0.05em 0.5em;
	border-radius: 4px;
}
.label-sm {
	font-size: 0.8em;
	padding: 0.08em 0.6em;
	border-radius: 5px;
}
.label-md {
	font-size: 1em;
	padding: 0.1em 0.7em;
	border-radius: 6px;
}
.label-lg {
	font-size: 1.2em;
	padding: 0.15em 1em;
	border-radius: 8px;
}



/**
 * Tag Labels – Light Backgrounds
 */
 .tag-label {
	display: inline-block;
	background: #eee; /* fallback light gray */
	color: #444; /* fallback dark gray */
	font-weight: 500;
	font-size: 0.9em;
	border-radius: 6px;
	padding: 0.1em 0.65em;
	margin-left: 0.5em;
	vertical-align: middle;
	letter-spacing: 0.01em;
}

/* Light Theme Variants */
.tag-label-danger {
	background-color: #fdeaea;  /* Light red */
	color: #d32d3a;
}

.tag-label-draft {
	background-color: #f5f5f5;  /* Very light gray */
	color: #616161;
}

.tag-label-in-progress {
	background-color: #e3f2fd;  /* Light blue */
	color: #1976d2;
}

.tag-label-success {
	background-color: #e8f5e9;  /* Light green */
	color: #388e3c;
}

.tag-label-warning {
	background-color: #fff3e0;  /* Light orange */
	color: #f57c00;
}




/**
 * Collapsible Content
 */
.collapsible-div-wrapper {
	border-radius: 4px;
	overflow: hidden;
}

.collapsible-div-content {
	max-height: 300px;
	overflow: hidden;
	padding: 15px;
	transition: all 0.3s ease;
	position: relative;
}

.collapsible-div-content.expanded {
	max-height: none;
	column-count: 2;
	column-gap: 20px;
}

.collapsible-div-content:not(.expanded):after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30px;
	background: linear-gradient(transparent, white);
	pointer-events: none;
}

.collapsible-div-toggle {
	display: block;
	width: 100%;
	padding: 10px;
	background: #0073aa;
	color: white;
	border: none;
	cursor: pointer;
	text-align: center;
}

.collapsible-div-toggle:hover {
	background: #005a87;
}