/**
 * Text Case Converter Pro — Frontend Stylesheet
 *
 * @package Text_Case_Converter_Pro
 * @version 1.0.0
 */

/* ============================================================
   CSS Custom Properties (design tokens)
   ============================================================ */
:root {
	--tccp-accent:       #6c63ff;
	--tccp-accent-dark:  #574fd6;
	--tccp-bg:           #ffffff;
	--tccp-surface:      #f8f8fe;
	--tccp-border:       #e2e2f0;
	--tccp-text:         #1a1a2e;
	--tccp-text-muted:   #6b6b8a;
	--tccp-shadow:       0 8px 40px rgba(108, 99, 255, 0.12);
	--tccp-radius:       16px;
	--tccp-radius-sm:    8px;
	--tccp-transition:   0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--tccp-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Dark Mode Overrides
   ============================================================ */
.tccp-dark {
	--tccp-bg:         #13131f;
	--tccp-surface:    #1e1e30;
	--tccp-border:     #2e2e45;
	--tccp-text:       #e8e8f5;
	--tccp-text-muted: #9090b8;
	--tccp-shadow:     0 8px 40px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Wrapper & Card
   ============================================================ */
.tccp-wrapper {
	font-family:    var(--tccp-font);
	color:          var(--tccp-text);
	padding:        16px 0;
	box-sizing:     border-box;
}

.tccp-card {
	background:    var(--tccp-bg);
	border:        1px solid var(--tccp-border);
	border-radius: var(--tccp-radius);
	box-shadow:    var(--tccp-shadow);
	padding:       36px 40px 32px;
	max-width:     860px;
	margin:        0 auto;
	position:      relative;
	overflow:      hidden;
}

/* Decorative top-bar */
.tccp-card::before {
	content:       '';
	position:      absolute;
	top:           0; left: 0; right: 0;
	height:        4px;
	background:    linear-gradient(90deg, var(--tccp-accent), #a98cf7);
}

/* ============================================================
   Title
   ============================================================ */
.tccp-title {
	font-size:     1.6rem;
	font-weight:   700;
	margin:        0 0 24px;
	color:         var(--tccp-text);
	letter-spacing: -0.02em;
}

/* ============================================================
   Textarea
   ============================================================ */
.tccp-textarea-wrap {
	position: relative;
	margin-bottom: 20px;
}

.tccp-textarea {
	width:         100%;
	box-sizing:    border-box;
	min-height:    180px;
	padding:       14px 16px;
	border:        2px solid var(--tccp-border);
	border-radius: var(--tccp-radius-sm);
	background:    var(--tccp-surface);
	color:         var(--tccp-text);
	font-family:   var(--tccp-font);
	font-size:     1rem;
	line-height:   1.65;
	resize:        vertical;
	transition:    border-color var(--tccp-transition), box-shadow var(--tccp-transition);
	outline:       none;
}

.tccp-textarea:focus {
	border-color: var(--tccp-accent);
	box-shadow:   0 0 0 3px rgba(108, 99, 255, 0.15);
}

.tccp-textarea::placeholder {
	color: var(--tccp-text-muted);
}

/* Output area — slightly different bg */
.tccp-output-area {
	background:  var(--tccp-surface);
	min-height:  120px;
	margin-top:  6px;
}

/* Counter */
.tccp-counter {
	font-size:   0.78rem;
	color:       var(--tccp-text-muted);
	text-align:  right;
	margin-top:  6px;
}

/* ============================================================
   Button Groups
   ============================================================ */
.tccp-btn-group {
	display:        flex;
	flex-wrap:      wrap;
	gap:            10px;
	margin-bottom:  20px;
}

/* ============================================================
   Base Button
   ============================================================ */
.tccp-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         9px 18px;
	border:          none;
	border-radius:   var(--tccp-radius-sm);
	font-family:     var(--tccp-font);
	font-size:       0.88rem;
	font-weight:     600;
	cursor:          pointer;
	transition:      transform var(--tccp-transition),
	                 box-shadow var(--tccp-transition),
	                 background var(--tccp-transition),
	                 opacity var(--tccp-transition);
	white-space:     nowrap;
	outline:         none;
	letter-spacing:  0.01em;
	user-select:     none;
}

.tccp-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.4);
}

/* ============================================================
   Case Conversion Buttons
   ============================================================ */
.tccp-btn-case {
	background:  var(--tccp-surface);
	color:       var(--tccp-text);
	border:      2px solid var(--tccp-border);
}

.tccp-btn-case:hover,
.tccp-btn-case:focus-visible {
	border-color: var(--tccp-accent);
	color:        var(--tccp-accent);
	transform:    translateY(-2px);
	box-shadow:   0 4px 14px rgba(108, 99, 255, 0.2);
}

.tccp-btn-case.tccp-active {
	background:   var(--tccp-accent);
	color:        #fff;
	border-color: var(--tccp-accent);
	box-shadow:   0 4px 14px rgba(108, 99, 255, 0.35);
}

.tccp-btn-icon {
	font-weight: 800;
	font-size:   0.95rem;
	opacity:     0.85;
}

/* ============================================================
   Action Buttons (Copy / Download / Clear)
   ============================================================ */
.tccp-btn-action {
	background:  linear-gradient(135deg, var(--tccp-accent) 0%, #a98cf7 100%);
	color:       #fff;
	box-shadow:  0 4px 14px rgba(108, 99, 255, 0.3);
}

.tccp-btn-action:hover {
	transform:   translateY(-2px);
	box-shadow:  0 6px 20px rgba(108, 99, 255, 0.45);
}

.tccp-btn-action:active {
	transform:   translateY(0);
}

.tccp-btn-clear {
	background:  linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
	box-shadow:  0 4px 14px rgba(255, 107, 107, 0.3);
}

.tccp-btn-clear:hover {
	box-shadow:  0 6px 20px rgba(255, 107, 107, 0.45);
}

/* ============================================================
   Output Label
   ============================================================ */
.tccp-output-label {
	font-size:   0.8rem;
	font-weight: 600;
	color:       var(--tccp-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ============================================================
   Toast / Success Message
   ============================================================ */
.tccp-toast {
	position:      fixed;
	bottom:        28px;
	right:         28px;
	background:    #22c55e;
	color:         #fff;
	padding:       12px 22px;
	border-radius: var(--tccp-radius-sm);
	font-size:     0.9rem;
	font-weight:   600;
	box-shadow:    0 6px 24px rgba(34, 197, 94, 0.35);
	opacity:       0;
	pointer-events: none;
	transform:     translateY(12px);
	transition:    opacity 0.25s ease, transform 0.25s ease;
	z-index:       99999;
}

.tccp-toast.tccp-toast-show {
	opacity:   1;
	transform: translateY(0);
}

/* ============================================================
   Output Section Reveal
   ============================================================ */
.tccp-output-wrap {
	margin-bottom: 20px;
	animation:     tccp-fade-in 0.3s ease;
}

@keyframes tccp-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
	.tccp-card {
		padding: 24px 18px 22px;
	}

	.tccp-title {
		font-size: 1.3rem;
	}

	.tccp-btn {
		font-size: 0.8rem;
		padding:   8px 14px;
	}

	.tccp-toast {
		bottom: 16px;
		right:  16px;
		left:   16px;
		text-align: center;
	}
}