@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

/* Detailed CSS for Custom Account System
   Mobile-first design (≤767px) and desktop split (≥768px)
   Values chosen to match blueprint: fixed header height, rounded cards, avatar sizes, button styles
*/

/* Base font & wrapper */
.cas-wrapper {
	max-width: 1100px;
	margin: 18px auto;
	padding: 10px;
	font-family:  "Merriweather", serif;
	color: #111;
}

/* Fixed header area */
.cas-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 56px; /* Fixed header height */
	padding: 6px 4px;
	position: relative;
}

/* Back link & title */
.cas-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #111;
	text-decoration: none;
	font-size: 22px;
	cursor: pointer;
}

/* Profile icon (right side) */
.cas-header .profile-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e6e6e6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 44px;
}

/* Blink animation when profile incomplete */
.cas-header .profile-icon.blink {
	animation: cas-pulse 1.5s infinite;
}
@keyframes cas-pulse {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0.04); }
	60% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(0,0,0,0.03); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Body layout */
.cas-body { margin-top: 14px; }

/* MOBILE LAYOUT (default) */
/* Left column acts as main column (stacked) */
.cas-left { display: block; width: 100%; }

/* Profile card */
.cas-profile-card {
	background: #f6f6f6;
	border-radius: 18px;
	padding: 24px;
	margin-bottom: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.02);
}

/* Avatar rounded square */
.cas-avatar {
	width: 96px;
	height: 96px;
	border-radius: 18px;
	background: #b4cbdd;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}

/* Avatar SVG sizing */
.cas-avatar svg { width: 56px; height: 56px; fill: #fff; }

/* Profile name style */
.cas-profile-name {
	font-size: 20px;
	font-weight: 700;
	margin-top: 4px;
}

/* Navigation buttons container */
.cas-nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Individual button style */
.cas-nav .cas-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #f6f6f6;
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	color: #111;
	transition: background 150ms ease, transform 80ms ease;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
}

.cas-nav .cas-btn:active {
	transform: translateY(1px);
}

.cas-nav .cas-btn:hover {
	background: #e6e6e6;
}

/* Icon on left */
.cas-nav .cas-btn .icon { width: 30px; height: 30px; display:inline-flex; align-items:center; justify-content:center; }
.cas-nav .cas-btn .label { font-size: 20px; font-weight: 700; font-family: "Georgia", serif; }

/* Logout button special (only present when profile complete) */
.cas-nav .cas-logout {
	margin-top: 8px;
}

/* Right panel (dynamic content) - hidden on mobile (we show it stacked below left) */
.cas-right {
	margin-top: 18px;
}

/* Account field list */
.cas-account-field {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0,0,0,0.04);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cas-account-field .label { color: #666; }
.cas-account-field .value { font-weight: 600; }

/* Edit button */
.cas-edit-btn {
	display: block;
	width: 100%;
	padding: 12px;
	margin-top: 12px;
	background: #111;
	color: #fff;
	text-align: center;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}

/* Modal / Popup */
.cas-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.36);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 99999;
}
.cas-modal {
	width: 92%;
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.14);
}
.cas-modal h3 { margin-top: 0; font-size: 18px; }

/* Inputs */
.cas-modal input[type="text"], .cas-modal input[type="email"], .cas-modal input[type="tel"], .cas-modal input[type="number"] {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid #eee;
	margin-bottom: 10px;
	font-size: 14px;
}

/* Primary button */
.cas-btn-primary {
	background: #111;
	color: #fff;
	padding: 10px 12px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	font-weight: 700;
}

/* Error */
.cas-error { color: #b00020; font-weight: 700; min-height: 20px; margin-top: 8px; }

/* Small muted text */
.cas-muted { color: #777; font-size: 14px; }

/* Desktop layout */
@media (min-width: 768px) {
	.cas-body {
		display: flex;
		gap: 28px;
		align-items: stretch; /* 🔥 both panels same height */
	}


	.cas-left {
		width: 40%;
	}

	.cas-right {
		width: 60%;
		background: #f7f7f7;
		border-radius: 18px;
		padding: 20px;

		/* 🔒 STATIC & EQUAL HEIGHT */
		min-height: 100%;
		display: flex;
		flex-direction: column;
		
	



	}

	/* On desktop, nav remains in left column; content displayed in right panel */
	.cas-profile-card { margin-bottom: 24px; }
}

/* Accessibility touches */
.cas-nav .cas-btn:focus { outline: 3px solid rgba(0,0,0,0.06); outline-offset: 2px; }

/* Ensure header height stable */
.cas-header, .cas-header * { line-height: normal; }

/* Small utilities */
.text-center { text-align: center; }
.hide { display: none !important; }







/* =========================
   ADDRESS SECTION (FINAL)
========================= */

#cas-section-address {
	max-height: 520px;
	overflow-y: auto;
	padding-right: 6px;
}

/* Scroll wrapper */
.cas-address-scroll {
	display: flex;
	flex-direction: column;
}

/* Address card */
.cas-address-card {
	background: #e0e0e0;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 14px;
}

/* Card header: title + actions */
.cas-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

/* View / Edit buttons (right corner) */
.cas-card-actions button {
	background: none;
	border: none;
	color: #0a58ca;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	margin-left: 6px;
}

.cas-card-actions button:hover {
	text-decoration: underline;
}

/* Address text */
.cas-card-body div {
	font-size: 14px;
	margin-bottom: 4px;
}

/* Muted text */
.cas-muted {
	color: #777;
	font-size: 14px;
}

/* Add new address button */
.cas-add-new-address {
	margin-top: 16px;
	width: fit-content;
}

.cas-address-card.active-view {
	outline: 2px solid #0a58ca;
}



/* View / Edit small rounded buttons */
.cas-card-actions {
	display: flex;
	gap: 6px;
}

.cas-card-actions .cas-btn-link {
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid #0a58ca;
	background: #fff;
	color: #0a58ca;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
}

.cas-card-actions .cas-btn-link:hover {
	background: #0a58ca;
	color: #fff;
}

/* When address selected (View mode highlight) */
.cas-address-card.active-view {
	border: 2px solid #0a58ca;
	background: #eaf2ff;
}





/* =========================
   ORDERS SECTION
========================= */

#cas-section-orders {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Header + filters */
.cas-orders-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cas-orders-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* Filters */
.cas-orders-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cas-order-filter {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid #ddd;
	background: #fff;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.15s ease;
}

.cas-order-filter.active {
	background: #111;
	color: #fff;
	border-color: #111;
}

/* Orders container */
#cas-orders-container {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Loading / empty */
.cas-orders-loading,
.cas-orders-empty {
	text-align: center;
	padding: 28px 12px;
	color: #777;
}

/* Order card */
.cas-order-card {
	display: flex;
	gap: 14px;
	background: #eaf2ff;
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* Left image */
.cas-order-left img {
	width: 72px;
	height: 72px;
	border-radius: 12px;
	object-fit: cover;
	background: #fff;
}

/* Right content */
.cas-order-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cas-order-right h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

/* Status badge */
.cas-status {
	display: inline-block;
	width: fit-content;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.badge-processing {
	background: #dbeafe;
	color: #1d4ed8;
}

.badge-completed {
	background: #dcfce7;
	color: #166534;
}

.badge-cancelled,
.badge-refunded {
	background: #fee2e2;
	color: #991b1b;
}

/* Actions */
.cas-order-actions button {
	margin-top: 6px;
	align-self: flex-start;
	background: none;
	border: none;
	color: #0a58ca;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}

/* Progress bar (processing only) */
.cas-progress {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.cas-progress span {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: #d1d5db;
}

.cas-progress span.done {
	background: #2563eb;
}

/* Desktop tweaks */
@media (min-width: 768px) {
	.cas-orders-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}


/* =========================
   ORDER DETAILS PAGE
========================= */

#cas-order-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Back button */
.cas-back-to-orders {
	background: none;
	border: none;
	color: #0a58ca;
	font-weight: 700;
	cursor: pointer;
	align-self: flex-start;
	padding: 0;
}

/* Wrapper */
.cas-order-details-content {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Item row */
.cas-order-item {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #fff;
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.cas-order-item img {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	background: #f2f2f2;
}

/* Status badge spacing */
#cas-order-details .cas-status {
	margin: 6px 0 10px;
}

/* Action buttons */
#cas-order-details .cas-btn-primary {
	margin-top: 8px;
	width: fit-content;
}

/* Divider */
#cas-order-details hr {
	border: none;
	height: 1px;
	background: rgba(0,0,0,0.08);
	margin: 10px 0;
}

/* Mobile spacing fix */
@media (max-width: 767px) {
	.cas-order-item {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* FIX: Orders filter text always visible */
.cas-order-filter {
	color: #000 !important;
}

.cas-order-filter.active {
	color: #fff !important; /* active pe white */
}


/* =========================
   SUPPORT SECTION
========================= */

.cas-support-wrapper {
	max-width: 520px;
	margin: 0 auto;
}

.cas-support-entry {
	text-align: center;
}

.cas-support-actions {
	display: flex;
	gap: 14px;
	margin-top: 18px;
	justify-content: center;
	flex-wrap: wrap;
}

.cas-support-btn {
	padding: 14px 22px;
	border-radius: 12px;
	border: none;
	background: #111;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.cas-support-form {
	background: #f6f6f6;
	padding: 18px;
	border-radius: 16px;
}

.cas-support-back {
	background: none;
	border: none;
	color: #0a58ca;
	cursor: pointer;
	margin-bottom: 8px;
	font-weight: 600;
}

.cas-support-message {
	background: #eaf2ff;
	padding: 14px;
	border-radius: 12px;
	margin-bottom: 16px;
	font-size: 14px;
}

.cas-support-form label {
	display: block;
	margin-top: 12px;
	font-weight: 600;
	font-size: 14px;
}

.cas-support-form input,
.cas-support-form select,
.cas-support-form textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	margin-top: 6px;
	font-size: 14px;
}

.cas-support-form textarea {
	min-height: 100px;
	resize: vertical;
}

.cas-support-send {
	margin-top: 16px;
	background: #111;
	color: #fff;
	padding: 12px;
	border-radius: 10px;
	border: none;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
}

.cas-support-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cas-support-success {
	text-align: center;
}

.cas-success-card {
	background: #f0fdf4;
	border-radius: 16px;
	padding: 24px;
}

.cas-success-icon {
	font-size: 28px;
	color: #16a34a;
	margin-bottom: 8px;
}

.hide {
	display: none !important;
}








/* =====================================================
   SUPPORT PAGE – FINAL UI POLISH (OVERRIDES ONLY)
===================================================== */

/* 1️⃣ Back button – small, grey, rounded */
.cas-support-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 13px;
	background: #e5e5e5;
	color: #333;
	border-radius: 8px;
	margin-bottom: 0;
}

/* 2️⃣ Header row: Back + Title centered */
.cas-support-issue > h3,
.cas-support-query > h3 {
	text-align: center;
	margin-top: 8px;
	margin-bottom: 14px;
}

.cas-support-issue .cas-support-back,
.cas-support-query .cas-support-back {
	position: absolute;
	left: 20px;
	top: 20px;
}

/* Ensure parent relative */
.cas-support-issue,
.cas-support-query {
	position: relative;
}

/* 3️⃣ Move blue message card up + compact spacing */
.cas-support-message {
	margin-top: 0;
	margin-bottom: 14px;
	padding: 12px 14px;
	line-height: 1.35;
}

/* Reduce gap after name */
.cas-support-message p br:first-of-type {
	display: none;
}

/* Reduce paragraph spacing */
.cas-support-message p {
	margin: 0;
}

/* 4️⃣ “Support Team:” alignment (slightly right) */
.cas-support-message strong {
	display: inline-block;
	margin-left: 4px;
}

/* 5️⃣ Inputs: placeholder-like labels (inside feel) */
.cas-support-form input::placeholder,
.cas-support-form textarea::placeholder {
	color: #999;
	font-size: 13px;
}

/* 6️⃣ Textarea scroll (fixed height) */
.cas-support-form textarea {
	min-height: 120px;
	max-height: 160px;
	resize: none;
	overflow-y: auto;
}

/* 7️⃣ Modern input look */
.cas-support-form input,
.cas-support-form select,
.cas-support-form textarea {
	border: 1px solid #e0e0e0;
	background: #fff;
	transition: border 0.15s ease, box-shadow 0.15s ease;
}

.cas-support-form input:focus,
.cas-support-form select:focus,
.cas-support-form textarea:focus {
	border-color: #111;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
	outline: none;
}

/* 8️⃣ Message typing animation (2s subtle reveal) */
.cas-support-message {
	animation: casMessageFade 2s ease forwards;
}

@keyframes casMessageFade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}





/* =====================================================
   SUPPORT PAGE – FINAL POSITION FIXES
===================================================== */

/* 1️⃣ Back button → top-right */
.cas-support-issue .cas-support-back,
.cas-support-query .cas-support-back {
	position: absolute;
	top: 16px;
	right: 20px;
	left: auto;
	background: #e5e5e5;
	color: #333;
	padding: 6px 14px;
	font-size: 13px;
	border-radius: 10px;
}

/* Ensure container relative */
.cas-support-issue,
.cas-support-query {
	position: relative;
}

/* 2️⃣ Support Team label → right aligned */
.cas-support-message strong {
	display: block;
	text-align: right;
	font-weight: 700;
	margin-bottom: 4px;
}

/* 3️⃣ Greeting + message spacing control */
.cas-support-message p {
	margin: 0;
	line-height: 1.35;
}

/* Move apology line slightly down */
.cas-support-message p br + br {
	display: none;
}

/* Add spacing before apology line */
.cas-support-message p {
	padding-top: 4px;
}

/* 4️⃣ Textarea fixed + scrollable */
.cas-support-form textarea {
	min-height: 140px;
	max-height: 140px;
	overflow-y: auto;
	resize: none;
}

/* Optional: smoother scroll look */
.cas-support-form textarea::-webkit-scrollbar {
	width: 6px;
}

.cas-support-form textarea::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px;
}


/* =====================================================
   SUPPORT PAGE – FINAL TYPO & ALIGNMENT FIX
===================================================== */

/* Container relative for proper alignment */
.cas-support-issue,
.cas-support-query {
	position: relative;
}

/* HEADER ROW: Report an Issue + Back button */
.cas-support-issue h3,
.cas-support-query h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Back button aligned with heading baseline */
.cas-support-back {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #e3e3e3;
	color: #333;
	padding: 4px 12px;
	font-size: 12px;
	border-radius: 8px;
	line-height: 1;
}

/* Support Team label – smaller */
.cas-support-message strong {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	display: block;
	text-align: right;
	margin-bottom: 2px;
}

/* Message text – slightly bigger & clean */
.cas-support-message p {
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
}

/* Reduce gap between lines */
.cas-support-message p br {
	display: none;
}

/* Add subtle spacing between greeting & body */
.cas-support-message p::after {
	content: "";
	display: block;
	height: 6px;
}

/* Textarea fixed height + scroll */
.cas-support-form textarea {
	min-height: 140px;
	max-height: 140px;
	overflow-y: auto;
	resize: none;
}

/* =====================================================
   SUPPORT PAGE – PURPLE THEME POLISH
===================================================== */

/* Support message card – light purple */
.cas-support-message {
	background: #f2efff;          /* light purple */
	border: 1px solid #e1dbff;
	border-radius: 14px;
}

/* Inputs, select & textarea – rounded + purple border */
.cas-support-form input,
.cas-support-form select,
.cas-support-form textarea {
	border-radius: 10px;          /* slightly rounded */
	border: 1px solid #d6ccff;    /* light purple border */
	background: #fff;
}

/* Focus state – soft purple glow */
.cas-support-form input:focus,
.cas-support-form select:focus,
.cas-support-form textarea:focus {
	outline: none;
	border-color: #b7a8ff;
	box-shadow: 0 0 0 2px rgba(183,168,255,0.18);
}

/* File input button polish */
.cas-support-form input[type="file"] {
	border-radius: 10px;
	border: 1px dashed #d6ccff;
	padding: 6px;
	background: #faf9ff;
}

/* Dropdown arrow spacing fix */
.cas-support-form select {
	cursor: pointer;
}

/* Textarea scrollbar (clean look) */
.cas-support-form textarea::-webkit-scrollbar {
	width: 6px;
}
.cas-support-form textarea::-webkit-scrollbar-thumb {
	background: #c5b9ff;
	border-radius: 6px;
}




/* =====================================
   GLOBAL UNDERLINE REMOVAL (FINAL FIX)
===================================== */

.cas-wrapper a,
.cas-wrapper a:link,
.cas-wrapper a:visited,
.cas-wrapper a:hover,
.cas-wrapper a:active,
.cas-wrapper button {
	text-decoration: none !important;
	border-bottom: none !important;
}


/* Typography polish – modern serif look */
.cas-profile-name,
.cas-nav .cas-btn .label,
h1, h2, h3, h4 {
	font-family: "Merriweather", serif;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.cas-account-field .label,
.cas-account-field .value,
.cas-card-body div,
.cas-muted,
.cas-support-message p {
	font-weight: 400;
	letter-spacing: 0;
}

/* Right panel content scroll (stable box) */
.cas-right {
	overflow-y: auto;
}


/* =====================================
   REMOVE GAP BELOW HEADER & ABOVE PROFILE
===================================== */

/* Header ke niche ka gap remove */
.cas-header {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Body ka default top gap remove */
.cas-body {
	margin-top: 0 !important;
}

/* Profile / back row ke upar ka gap */
.cas-back,
.cas-profile-name,
h1, h2, h3 {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.cas-wrapper {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/* ================================
   DESKTOP BASE RESET (SAFE)
================================ */
@media (min-width: 768px) {

    .cas-body {
        display: flex;
        gap: 24px;
        align-items: stretch;
    }

    .cas-left {
        width: 320px;
        flex-shrink: 0;
    }

    .cas-right {
        flex: 1;
        min-width: 0;
    }
}



/* Login text – LEFT SIDE of circle */
.cas-login-text {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    margin-right: 8px;   /* ⬅ circle se gap */
    cursor: pointer;
    white-space: nowrap;
}

/* Hover feedback */
.cas-login-text:hover {
    text-decoration: underline;
}

/* FORCE GAP between login text and circle icon */
.cas-right-header {
    display: flex;
    align-items: center;
    gap: 11px;   /* 👈 yaha space control hoga */

}




@media (min-width: 1024px) {

  body.woocommerce-account {
    overflow-x: hidden;
  }

  .cas-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
  }

  .cas-body {
    display: flex;
    align-items: stretch; /* 🔥 KEY FIX */
  }
}
@media (min-width: 1024px) {
    .cas-left {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 1024px) {

  .cas-profile-card {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .cas-avatar {
    width: 64px;
    height: 64px;
    margin-bottom: 6px;
  }

  .cas-profile-name {
    font-size: 15px;
  }
}
@media (min-width: 1024px) {

  .cas-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .cas-nav .cas-btn {
    padding: 10px 12px;
    border-radius: 10px;
  }

  .cas-nav .icon {
    width: 20px;
    height: 20px;
  }

  .cas-nav .label {
    font-size: 14px;
    line-height: 1.2;
  }

  .cas-logout {
    margin-top: 6px;
  }
}
@media (min-width: 1024px) {
    .cas-right {
        flex: 1;
        height: auto;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
}


/* ===============================
   DTShirts Premium Loader
================================ */

.cas-shirt-loader {
  text-align: center;
  padding: 32px 16px;
}

.cas-shirt-loader p {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #111;
}

/* Shirt */
.cas-shirt-loader .shirt {
  width: 88px;
  height: 88px;
  margin: 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: none;
  animation: premiumFold 1.8s cubic-bezier(.4,0,.2,1) infinite;
}

/* Icons */
.cas-shirt-loader .oversized {
  background-image: url('../icons/oversized-tshirt.svg');
}

.cas-shirt-loader .classic {
  background-image: url('../icons/classic-tshirt.svg');
}

/* Active */
.cas-shirt-loader .active {
  display: block;
}

/* Premium folding */
@keyframes premiumFold {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  30%  { transform: scale(0.95) translateY(2px); }
  60%  { transform: scale(0.75) translateY(6px); opacity: 0.85; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ===============================
   Mobile Optimization
================================ */

@media (max-width: 480px) {
  .cas-shirt-loader .shirt {
    width: 64px;
    height: 64px;
  }

  .cas-shirt-loader p {
    font-size: 12px;
  }
}