:root {
	/* Color Palette */
    --bg: #f5f9ff;
    --bg-green: #f8ffef;
    --bg-soft: #ffffff;
    --text: #272b25;
    --text-primary: #0d6efd;
    --text-muted: #5b6878;
    --brand-primary: #0d6efd;
    --brand-secondary: #31a202;
    --brand-orange: #FF9800;
    --brand-orange-dark: #c1692e;
	--border: rgba(15, 23, 42, .12);
	--border-light: #f1f1f1;
	--card-bg: #ffffff;
	--card-alt: #f7fbff;
	--glass-bg: rgba(255, 255, 255, 0.35);
	--glass-blur: blur(12px);
	--error: #dc3545;
	--error-hover: #c82333;
	--success: #28a745;
	--success-hover: #218838;

	/* Store specific colors */
	--store-header-gradient: linear-gradient(-180deg, #005fffc9 46%, #00b8ff4a 100%);
	--store-coin-float: #ffffff;
	--store-tab-hover: #ffffff6b;
	--store-tab-selected: #e5ff844f;
	--store-price-gradient: linear-gradient(0, #FFCC00 50%, #ffff00 90%);
	--store-price-border: #cb7c00;
	--store-price-text: #a84f00;
	--store-price-hover: linear-gradient(0, #fff200 50%, #ffff91 90%);

	/* Border radius */
	--radius: 16px;
	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 8px;

	/* Shadows */
	--shadow: 0 8px 28px rgba(0,0,0,.12);
	--shadow-sm: 0 6px 20px rgba(0, 0, 0, .12);
	--shadow-lg: 0 14px 35px rgba(0, 0, 0, .18);

	/* Typography */
	--fs-sm: 14px; 
	--fs-base: 16px; 
	--fs-lg: 18px; 
	--fs-xl: 22px; 
	--fs-2xl: 28px;

	/* Spacing */
	--gap-1: 4px;
	--gap-2: 8px; 
	--gap-3: 12px; 
	--gap-4: 16px; 
	--gap-5: 20px; 
	--gap-6: 24px; 
	--gap-8: 32px; 
	--gap-10: 40px;

	/* Layout */
	--maxw: 1200px;
}

/* ==========================================================================
   GLOBAL STYLES & RESET
   ========================================================================== */

* {
	font-family: "Assistant", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
	box-sizing: border-box;
}

html, body {
	height: 100%; 
	color: var(--text);
}

body {
	margin: 0; 
	background: var(--bg-green); 
	color: var(--text);
}

button {
	font-family: "Assistant", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2 {
	color: var(--text-primary);
	margin: 0;
}

a {
	text-decoration: underline;
	color: var(--text-primary);
}

.container {
	max-width: var(--maxw); 
	margin-inline: auto; 
	padding-inline: var(--gap-5);
}

/* Page-specific body styles */
body:has(.contact.page), 
body:has(.manage-account.page) {
	background: var(--bg);
}

/* ==========================================================================
   UTILITIES & COMPONENTS
   ========================================================================== */

/* Loading states */
.loading {
	pointer-events: none;
	opacity: 0.6;
	position: relative;
}

.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid transparent;
	border-top: 2px solid var(--brand-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Buttons */
.btn {
	padding: 10px 12px; 
	border-radius: 12px; 
	border: 1px solid var(--border); 
	background: var(--bg-soft); 
	cursor: pointer; 
	font-weight: 800;
}
.btn:hover {
	background: var(--card-alt);
}

.btn.close {
	border-radius: 50px;
	line-height: 1px;
	padding: 8px;
	font-size: 21px !important;
}

.material-symbols-rounded {
	font-size: 21px !important;
}

.btn.round {
	border-radius: 50px;
}

.btn.primary {
	background: linear-gradient(0, var(--brand-orange) 50%, #ffd715 90%);
	border: 3px solid var(--brand-orange-dark);
	color: #ffffff;
	padding: 10px 15px;
	border-radius: 40px;
	font-size: 20px;
	font-weight: bold;
}

.btn.primary:hover {
	background: linear-gradient(0, #ffb41a 50%, #ffed15 90%);
}

.btn.danger {
	background: var(--error); 
	color: white; 
	border: none;
}

.btn.danger:hover {
	background: var(--error-hover);
}

/* Messages */
.global-message {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    font-size: 19px;
    background: #ff5e00;
    color: #fff;
    padding: 20px 50px;
    transform: translateY(100%); 
    transition: transform 0.35s ease;
    will-change: transform;
	animation: toast-out 0.35s ease both;
}

.global-message.show {
    transform: translateY(0);
    animation: toast-in 0.35s ease both;
}

.global-message.error {
    background: #ff5e00;
}

.global-message.success {
    background: #71d700;
}

.global-message.info {
    background: #72d0ff;
}

.error-message {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	padding: var(--gap-3);
	border-radius: var(--radius-sm);
	margin: var(--gap-3) 0;
	font-size: var(--fs-sm);
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

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

@keyframes toast-in { 
	from { transform: translateY(75px); } 
	to { transform: translateY(0); } 
}

@keyframes toast-out { 
	from { transform: translateY(0); } 
	to { transform: translateY(75px); } 
}

@keyframes float { 
	0% { transform: translateY(0) rotate(0); } 
	50% { transform: translateY(-12px) rotate(12deg); } 
	100% { transform: translateY(0) rotate(0); } 
}

@keyframes punch {
	0% { transform: scale(1); }
	15% { transform: scale(1.4) rotate(-5deg); }
	30% { transform: scale(1.2) rotate(3deg); }
	45% { transform: scale(1.3) rotate(-2deg); }
	60% { transform: scale(1.1) rotate(1deg); }
	75% { transform: scale(1.2) rotate(-1deg); }
	90% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 30;
	background: var(--bg-soft);
	background: var(--store-header-gradient);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	box-shadow: 0px 0px 0px 5px rgb(0 128 255 / 23%);
	z-index: 1;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

.topbar {
	display: flex; 
	align-items: center; 
	gap: var(--gap-6); 
	padding: 0px 20px; 
	justify-content: space-between;
}

.logo {
	font-weight: 800; 
	font-size: var(--fs-xl); 
	letter-spacing: .2px; 
	color: var(--brand-primary);
}

.logo img {
	width: 147px;
	position: relative;
	top: 1px;
}

/* Desktop Menu */
.menu {
	display: flex; 
	gap: var(--gap-2); 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	align-items: center;
}

.menu a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	border-radius: 88px;
	font-weight: 600;
	font-size: 18px;
	font-weight: bold;
	color: #cffafe;
	transition: all 0.2s ease;
	position: relative;
	text-decoration: none;
}

.menu a:hover {
	color: #b7fbf8;
	background: #3de7f159;
}

.menu a:active {
	transform: translateY(0px);
}

.menu-icon {
	width: 40px; 
	height: 40px; 
	object-fit: cover; 
	border-radius: 4px;
}

.play-now {
	background: linear-gradient(to top, #ea580c, #ffc40c);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	transition: all 0.3s ease-in-out;
	transform: scale(1);
	text-decoration: none;
}

.play-now:hover {
	background: linear-gradient(to top, #f97316, #facc15);
	transform: scale(1.05);
}

.play-now-menu {
	box-shadow: 0px 0px 0px 5px rgb(255 255 255 / 24%);
	border: #a94c00 3px solid;
}

.nav-group {
	display: flex; 
	align-items: center; 
	gap: var(--gap-4);
}

/* Mobile Menu */
.mobile-menu-btn {
	display: none; 
	background: none; 
	border: none; 
	cursor: pointer; 
	padding: 8px; 
	border-radius: 8px; 
	transition: background 0.2s ease; 
	position: relative; 
	z-index: 32;
}

.mobile-menu-btn:hover {
	background: rgba(33, 193, 255, 0.08);
}

.mobile-menu-btn .hamburger {
	width: 24px; 
	height: 24px; 
	display: flex; 
	flex-direction: column; 
	justify-content: center; 
	gap: 4px;
}

.mobile-menu-btn .line {
	width: 100%; 
	height: 2px; 
	background: #fff; 
	border-radius: 2px; 
	transition: all 0.3s ease; 
	transform-origin: center;
}

.mobile-menu-btn.open .line {
	background: var(--text);
}

.mobile-menu-btn.open .line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.open .line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-btn.open .line:nth-child(3) {
	transform: rotate(-45deg) translate(4px, -4px);
}

.mobile-menu {
	position: fixed; 
	top: 0; 
	left: 0; 
	right: 0; 
	background: var(--bg-soft); 
	border-bottom: 1px solid var(--border); 
	box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
	transform: translateY(-100%); 
	opacity: 0; 
	transition: all 0.3s ease; 
	z-index: 31; 
	padding-top: 73px;
}

.mobile-menu.open {
	transform: translateY(0); 
	opacity: 1;
}

.mobile-menu ul {
	list-style: none; 
	margin: 0; 
	padding: var(--gap-4) 0; 
	display: flex; 
	flex-direction: column;
}

.mobile-menu a {
	display: flex; 
	align-items: center; 
	gap: 12px; 
	padding: 12px var(--gap-5); 
	font-weight: 600; 
	color: var(--text); 
	border-bottom: 1px solid rgba(15, 23, 42, 0.06); 
	text-decoration: none;
	transition: all 0.2s ease;
}

.mobile-menu a:hover {
	background: rgba(33, 193, 255, 0.08); 
	color: var(--brand-primary);
}

.mobile-menu a:last-child {
	border-bottom: none;
}

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;
	margin-left: calc(-50vw + 50%);
	height: 435px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero.store {
	background-image: url(https://www.tropy.co.il/tropy/images/style/store/hero_background.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.hero.faq {
	background-image: url(https://www.tropy.co.il/tropy/images/style/faq/new/hero_background.png);
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}

.hero::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 35%;
	background: linear-gradient(to top, var(--bg-green) 0%, transparent 100%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 0;
	text-align: center;
	max-width: var(--maxw);
	padding: 0 var(--gap-5);
	color: white;
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hero-content .store {
	display: none;
}

/* Store floating coins */
.store-coin {
	position: absolute;
	width: 100px;
	height: 100px;
	background: url(https://www.tropy.co.il/tropy/images/style/store/floating_coin.png);
	animation: float 6s ease-in-out infinite;
	opacity: .9;
}

.store-coin.two {
	background: url(https://www.tropy.co.il/tropy/images/style/store/floating_coin_2.png);
}

/* ==========================================================================
   STORE INTERFACE
   ========================================================================== */

/* Store Tabs */
.store-tabs-container {
	margin-top: var(--gap-6);
	padding: var(--gap-2);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	justify-content: center;
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	border: 2px solid rgb(0 0 0 / 5%);
	border-radius: var(--radius-xl);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
	background-image: url(https://www.tropy.co.il/tropy/images/style/store/tabs_background.png);
	background-size: 102%;
}

.store-tabs {
	display: flex; 
	flex-wrap: wrap; 
	gap: var(--gap-2); 
	place-content: center;
}

.store-tab {
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: unset;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 80px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.store-tab:hover {
	background: var(--store-tab-hover); 
	border: 1px solid var(--border); 
	color: #072018;
}

.store-tab[aria-selected="true"] {
	background: var(--store-tab-selected);
	border: 1px solid var(--border);
}

.store-tab-icon {
	font-size: 24px; 
	position: relative; 
	pointer-events: none;
}

.store-tab-label {
	font-size: 18px;
	text-align: center;
	color: #0d6efd;
	pointer-events: none;
}

/* Cart Count Badge */
.store-cart-count {
	background: url(https://www.tropy.co.il/tropy/images/style/store/category/category_cart_count.png);
	background-size: cover;
	width: 30px;
	height: 30px;
	position: absolute;
	margin-top: -48px;
	left: 10px;
	font-size: 16px;
	color: #fff;
	padding-top: 4px;
	text-align: center;
	display: none;
	transition: all 0.3s ease;
	will-change: transform;
}

.store-cart-count.show {
	display: block;
}

.store-cart-count.punch {
	animation: punch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Floating Cart Button */
.floating-cart-button {
	font-size: 13.3333px;
    background: #ffffff;
    color: #3b82f6;
    border: 2px solid #e2e8f0;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(10px);
    bottom: 24px;
    left: 24px;
    position: fixed;
	z-index: 1;
}

.floating-cart-button img {
	width: 100%;
}

.floating-cart-button .store-cart-count {
	font-size: 16px;
    left: -1px;
    top: 47px;
}

/* Membership Package Selection */
.membership-controls {
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 2px solid rgb(0 0 0 / 5%);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
	overflow: auto;
}

.package-type-selector h3 {
    color: white;
    margin: 0 0 15px 0;
    font-size: 18px;
    text-align: center;
}

.package-type-buttons {
    display: flex;
    gap: 10px;
	padding: 0 0 0 15px;
    justify-content: center;
    flex-wrap: nowrap;
    width: max-content;
}

.package-type-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
	font-size: 17px;
	background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 2px solid rgb(0 0 0 / 5%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .02);
    color: #1472fc;
    font-weight: bold;
}

.package-icon {
    font-size: 24px;
	width: 28px;
}

.package-icon img {
	position: absolute;
    top: -1px;
    right: 6px;
}

.package-type-btn:hover {
    background: rgb(168 201 0 / 12%);
}

.package-type-btn.active {
    background: linear-gradient(0deg, #1ea2ff 0%, #3ec9ff 100%);
    border-color: #217ed3;
    box-shadow: 0 4px 15px rgb(0 128 255 / 40%);
    color: #fff;
}

.duration-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   PRODUCTS GRID & CARDS
   ========================================================================== */

.grid {
	display: grid; 
	grid-template-columns: repeat(12,1fr); 
	gap: var(--gap-5); 
	align-items: start; 
	margin-top: var(--gap-6);
}

.products {
	grid-column: 1 / -1; 
	display: grid; 
	grid-template-columns: repeat(12,1fr); 
	gap: var(--gap-5);
	min-height: 200px;
}

/* Product Cards */
.container .grid .card {
	background: var(--card-bg); 
	border: 1px solid var(--border); 
	border-radius: var(--radius); 
	overflow: hidden; 
	box-shadow: var(--shadow); 
	display: flex; 
	flex-direction: column; 
	position: relative; 
	cursor: pointer; 
	transition: all 0.2s ease;
}

.container .grid .card:hover {
	transform: translateY(-2px); 
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
}

.container .grid .card-currency {
	background: transparent;
	border: 0px solid;
	border-radius: 0;
	overflow: hidden;
	box-shadow: unset !important;
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
	transition: all 0.2s ease;
}

.container .grid .card { 
	grid-column: span 3; 
}

.products.merch .card { 
	grid-column: span 4; 
}

/* Product Content */
.store-product-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.store-product-thumb img {
	max-width: 100%; 
	max-height: 100%; 
	object-fit: contain;
	width: -webkit-fill-available;
}

.store-product-thumb img,
.cart-thumb img,
.modal-image img {
    will-change: auto;
    transform: translateZ(0);
}

.cart-thumb img {
	width: 50px;
    border-radius: 5px;
}

.store-product-content {
	padding: var(--gap-5); 
	display: grid; 
	gap: var(--gap-3); 
	position: absolute; 
	bottom: 0;
	width: 100%; 
}

.store-product-title {
	font-weight: 800;
}

.products .card .store-product-content .store-product-title {
	color: #fff;
	font-weight: bold;
	font-size: 22px;
}

.store-product-meta {
	color: var(--text-muted); 
	font-size: var(--fs-sm);
}

.store-product-price {
	display: flex; 
	gap: 8px; 
	align-items: baseline; 
	font-weight: 800;
}

.store-price-was {
	text-decoration: line-through; 
	color: var(--text-muted); 
	font-size: var(--fs-sm);
}

/* Price Display */
.store-price-display {
	background: var(--store-price-gradient);
	border: 3px solid var(--store-price-border);
	width: fit-content;
	color: var(--store-price-text);
	padding: 10px 15px;
	border-radius: 40px;
	font-weight: 800;
	text-align: center;
	font-size: var(--fs-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.card-membership .store-price-display {
	justify-self: left;
	width: 53%;
}

.card-membership .store-product-content {
	padding: 12px;
}

.store-price-display:hover {
	background: var(--store-price-hover);
}

.store-price-display .store-price-was {
	color: #072018; 
	opacity: 0.7; 
	font-size: var(--fs-sm); 
	text-decoration: line-through;
}

.card-currency .store-price-display {
	width: 100%;
	font-size: 24px;
}

/* Cart Badge */
.cart-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6b35;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
	display: none;
	will-change: transform;
}

/* loading */
.loading-indicator {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loading-indicator::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top: 2px solid #666;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ==========================================================================
   COUPON SYSTEM
   ========================================================================== */

/* Enhanced coupon section styles */
.coupon-section {
    padding: var(--gap-4);
    border-top: 1px solid var(--border);
    background: var(--card-alt);
}

/* Active coupon display */
.active-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 12px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

.active-coupon-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coupon-icon {
    font-size: 24px;
    animation: pulse 2s infinite;
}

.coupon-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coupon-code {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
}

.coupon-discount {
    font-size: 13px;
    opacity: 0.9;
}

.remove-coupon-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.remove-coupon-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
}

.remove-coupon-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.remove-coupon-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Enhanced coupon input form styles */
.coupon-input {
    display: flex;
    gap: var(--gap-2);
    margin-bottom: var(--gap-2);
}

.coupon-field {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    direction: rtl;
}

.coupon-field:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.coupon-btn {
    background: #007bff;
	background: linear-gradient(0deg, #1ea2ff 0%, #3ec9ff 100%);
    border: 2px solid #217ed3;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.coupon-btn:hover:not(:disabled) {
    background: #0056b3;
	background: linear-gradient(0deg, rgb(16 155 253) 0%, rgb(34 186 245) 100%);
}

.coupon-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Enhanced coupon message styles */
.coupon-message {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.coupon-message.success {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: 1px solid #27ae60;
}

.coupon-message.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* Coupon-related product styles */
.card.coupon-discount {
    position: relative;
    border: 2px solid #27ae60;
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.2);
}

.coupon-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #27ae60;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.coupon-badge {
    background: #27ae60;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 5px;
}

/* Cart coupon styles */
.cart-item.coupon-item {
    border-left: 4px solid #27ae60;
    background: rgba(39, 174, 96, 0.05);
}

.cart-coupon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #27ae60;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.coupon-section-active {
    background: rgba(39, 174, 96, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #27ae60;
}

#couponForm {
    margin: 0;
}

.cart-price .discounted-price {
    color: #27ae60;
    font-weight: 600;
}

.cart-price .original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
    margin-left: 5px;
}

/* ==========================================================================
   CART & MODAL SYSTEM
   ========================================================================== */

/* Cart drawer */
.overlay {
	position: fixed; 
	inset: 0; 
	background: rgba(0,0,0,.35); 
	display: none; 
	z-index: 50; 
	cursor: unset;
}

.overlay.open {
	display: block;
}

.cart {
	position: fixed; 
	top: 0; 
	bottom: 0; 
	right: 0; 
	width: min(92vw,400px); 
	background: var(--bg-soft); 
	border-left: 1px solid var(--border); 
	box-shadow: var(--shadow); 
	display: grid; 
	grid-template-rows: auto 1fr auto; 
	transform: translateX(100%); 
	transition: transform .2s ease; 
	z-index: 900;
}

.cart.open {
	transform: translateX(0);
}

.cart-header {
	display: flex; 
	align-items: center; 
	flex-flow: column;
	padding: var(--gap-5); 
	/*border-bottom: 1px solid var(--border);*/
	
	background: url(/tropy/images/style/store/tile_background_light_blue.png);
    background-size: contain;
    background: linear-gradient(rgb(0 149 255 / 15%), rgb(255 255 255)), url(/tropy/images/style/store/tile_background_light_blue.png) 0px 76px / 150px;
}

.cart-header-title {
	display: flex; 
	align-items: center; 
	justify-content: space-between;
	width: 100%;
}

.cart-header-user {
	width: 100%;
}

.cart-list {
	padding: var(--gap-5); 
	overflow: auto; 
	display: flex; 
	flex-direction: column; 
	gap: var(--gap-3);
}

.cart-item {
	display: grid; 
	grid-template-columns: 64px 1fr auto; 
	gap: var(--gap-3); 
	align-items: center; 
	border: 1px solid var(--border); 
	border-radius: 12px; 
	padding: var(--gap-4); 
	width: 100%;
}

.cart-thumb {
	width: 64px; 
	height: 64px; 
	background: #eef6ff; 
	border-radius: 8px; 
	display: grid; 
	place-items: center; 
	position: relative;
}

.cart-info {
	display: flex; 
	flex-direction: column; 
	min-width: 0;
}

.cart-title {
	font-weight: 800; 
	font-size: var(--fs-sm);
}

.cart-qty-controls {
	display: flex; 
	align-items: center; 
	gap: 8px;
}

.cart-qty-display {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.qty-display-only {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.cart-qty-controls,
.cart-qty-display {
    min-height: 40px;
    display: flex;
    align-items: center;
}

.qty-btn {
	width: 24px; 
	height: 24px; 
	border: 1px solid var(--border); 
	border-radius: 4px; 
	background: var(--bg-soft); 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	cursor: pointer; 
	font-weight: 700; 
	font-size: 14px;
}

.qty-btn:hover {
	background: var(--card-alt);
}

.qty-btn:disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.qty-display {
	font-weight: 700; 
	color: var(--text); 
	min-width: 20px; 
	text-align: center;
}

.cart-price {
	font-weight: 800; 
	color: var(--brand-primary); 
	font-size: var(--fs-sm);
}

.cart-actions {
	display: flex; 
	justify-content: center;
}

.cart-remove-btn {
	padding: 6px 10px; 
	font-size: 12px; 
	border-radius: 8px;
}

.cart-footer {
	border-top: 1px solid var(--border); 
	padding: var(--gap-5); 
	display: grid; 
	gap: var(--gap-3);
}

.cart-user-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(13, 110, 253, 0.1);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    gap: 12px;
}

.cart-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cart-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid #0d6efd;
    object-fit: cover;
}

.cart-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cart-user-name {
    font-weight: 700;
    color: #0d6efd;
    font-size: 16px;
}

.cart-user-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.logout-btn {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

@media (max-width: 480px) {

    .logout-btn {
        align-self: center;
        justify-content: center;
    }
}

.logout-btn:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
}

.logout-btn .material-symbols-rounded {
    font-size: 16px;
}

/* Login prompt styles */
.cart-login-prompt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    gap: 12px;
    text-align: center;
}

.cart-login-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #856404;
    font-weight: 600;
    font-size: 16px;
}

.cart-login-message .material-symbols-rounded {
    font-size: 27px;
}

.login-btn {
    font-size: 14px;
    padding: 8px 16px;
    background: linear-gradient(0, #ffc107 50%, #ffed4e 90%);
    border: 2px solid #f0ad4e;
    color: #212529;
}

.login-btn:hover {
    background: linear-gradient(0, #ffcd39 50%, #fff176 90%);
}

/* Modal */
.modal {
	position: fixed; 
	inset: 0; 
	display: grid; 
	place-items: center; 
	z-index: 70; 
	backdrop-filter: blur(0px); 
	opacity: 0; 
	pointer-events: none; 
	transition: all 0.3s ease;
}

.modal.open {
	backdrop-filter: blur(4px); 
	opacity: 1; 
	pointer-events: auto;
}

.modal .backdrop {
	position: absolute; 
	inset: 0; 
	background: rgba(0,0,0,.35); 
	cursor: unset; 
	opacity: 0; 
	transition: opacity 0.3s ease;
}

.modal.open .backdrop {
	opacity: 1;
}

.modal .panel {
	position: relative; 
	background: var(--bg-soft); 
	border: 1px solid var(--border); 
	border-radius: 18px; 
	width: min(92vw,600px); 
	max-height: 90vh; 
	overflow: hidden; 
	box-shadow: var(--shadow); 
	display: grid; 
	grid-template-rows: auto 1fr auto; 
	transform: scale(0.7) translateY(30px); 
	opacity: 0; 
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal.open .panel {
	transform: scale(1) translateY(0); 
	opacity: 1;
}

.modal .panel .modal-header {
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	padding: var(--gap-5); 
	border-bottom: 1px solid var(--border);
}

.modal .panel .modal-body {
	padding: var(--gap-5); 
	overflow: auto; 
	gap: var(--gap-4);
}

.modal .panel .modal-footer {
	padding: var(--gap-5); 
	border-top: 1px solid var(--border); 
	display: flex; 
	gap: var(--gap-3); 
	justify-content: flex-end;
}

.modal-image {
	width: 100%; 
	max-width: 300px; 
	aspect-ratio: 16/10; 
	background: linear-gradient(135deg, #f7fcff, #eafbff);
	border-radius: 12px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	font-size: 4rem; 
	margin: 0 auto 15px auto;
}

.modal-image img {
	max-width: 100%; 
	max-height: 187px; 
	object-fit: contain;
	border-radius: 18px;
}

.modal-content {
	color: var(--text-muted);
	padding-bottom: 15px;
}

.modal-content img {
	max-width: 100%;
}

.modal-price {
	font-size: var(--fs-lg); 
	font-weight: 800; 
	color: var(--text);
}

/* Size selector for merch */
.size-selector {
	margin: var(--gap-4) 0;
}

.size-selector label {
	display: block;
	margin-bottom: var(--gap-2);
	font-weight: 600;
}

.size-selector select {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
}

/* ==========================================================================
   MAIN PAGE LAYOUTS
   ========================================================================== */

#main-page {
    position: relative;
    display: block;
    transition: 0.5s ease;
    z-index: 0;
    right: 0;
	margin: auto;
	padding: 90px 0px 0px 0px;
}

#main-page.home.page {
	padding: 0px 0px 0px 0px;
}

#main-page.store.page {
    padding: 0px;
}

#main-page.manage-account.page { 
	background: transparent;
}

#main-page.manage-account.page * {
	box-sizing: content-box;
}

#main-page.privacy-policy.page {
	max-width: 1100px;
}

#main-page.blog.page {
	max-width: 1300px;
}

#main-page.blog.page * {
	box-sizing: content-box;
}

#main-page.gallery.page {
	max-width: 100%;
}

.about.page {
	width: 980px;
}

.contact.page {
	width: 950px;
}

.section-line {
	position: relative;
	padding-bottom: 25px;
	box-sizing: content-box;
}

.section-line::after {
    content: "";
    position: absolute;
    height: 0.1em;
    z-index: 0;
    background-image: linear-gradient(45deg, transparent, #0065ff38);
    background-image: -moz-linear-gradient(center bottom, transparent, #AFFF85, transparent );
    padding: 2px;
    width: 100%;
    margin: auto;
    margin-top: 5px;
}

.safety.page .section-line::after {
	background-image: linear-gradient(45deg, transparent, #0058a630, transparent);
	margin-top: 8px;
}

.img {
	border-radius: 18px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1100px) {
	.card { grid-column: span 4; }
	.products.merch .card { grid-column: span 6; }
}

@media (max-width: 780px) {
	#main-page.about.page, #main-page.contact.page, #main-page.privacy-policy.page {
		max-width: 95vw;
	}
	#main-page.gallery.page {
		max-width: 95vw;
	}
	
	.card { grid-column: span 6; }
	.products.merch .card { grid-column: span 6; }
	.store-tabs { justify-content: center; }
}

@media (max-width: 1120px) {
	.menu { display: none; }
	.mobile-menu-btn { display: block; }
	.play-now { display: none; }
	.topbar { gap: var(--gap-4); height: 70px; }
	.nav-group { gap: var(--gap-4); }
	.logo { position: absolute; left: 50%; transform: translateX(-50%); }
	.package-type-btn { width: 100%; max-width: 200px; }
}

@media (max-width: 540px) {
	.card { grid-column: span 12; }
	.products.merch .card { grid-column: span 12; }
	.store-tabs { justify-content: center; }
}

@media (max-width: 480px) {
    .active-coupon {
        gap: 10px;
        text-align: center;
    }
    
    .active-coupon-info {
        justify-content: center;
    }
}

@media only screen and (max-width: 770px) {
	.store-tabs-container {
		background-size: cover;
		background-position: center;
		position: sticky;
		top: 70px;
		margin-right: -20px;
		z-index: 10;
		width: 100vw;
		border-radius: 0;
	}
	
	.store-tabs {
		gap: 0px;
	}
	
	.store-tab {
		padding: 5px;
	}
	
	.store-tab-icon img {
		width: 55px;
	}
	
	.store-tab-label {
		font-size: 16px !important;
	}
	
	.grid .products {
		grid-template-columns: auto;
	}
	
	.card-currency .store-price-display {
		height: 18vw;
		margin-bottom: 2.5vw;
		font-size: 8vw !important;
		border-width: 1vw;
	}
	
	.store-price-display .store-price-was {
		font-size: 6vw !important;
	}
	
	.store-cart-count {
		margin-top: -31px;
		left: 3px;
	}
	
	.card-membership .store-product-content {
		padding: 3vw;
	}
	
	.card-membership .store-price-display {
		font-size: 9vw;
		padding: 3vw 9vw;
		border-width: 1.2vw;
	}
	
	.package-type-btn {
		padding: 10px 12px 10px 16px;
		width: auto;
	}
	
	#main-page.parents.page {
        width: 100% !important;
		padding-left: 15px;
		padding-right: 15px;
    }
	
	.footer-container {
		padding-bottom: 100px;
	}
	
	.footer-container .left-trees {
		width: 40%;
	}
	
	.footer-container .right-trees {
		width: 40%;
	}
	
	.footer-cards a.card {
		margin-bottom: 25px;
	}
}

/* ==========================================================================
   SEO & UTILITY CLASSES
   ========================================================================== */

.seo-images {
	display: none;
}

#couponForm {
	margin: 0;
}

/* ==========================================================================
   HOMEPAGE SPECIFIC STYLES
   ========================================================================== */

.questions-container a {
	text-decoration: underline;
	font-weight: bold;
}

.home.page .intro .intro-play-container .intro-play-button, 
.home.page .download-container, 
.home.page .site-content * {
	box-sizing: content-box;
}

.home.page .all-site {
    padding: 10 5 10 0;
    width: 1150px;
    margin: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.home.page .row {
    display: inline-block;
}

.home.page .all-site .row .gallery-hot {
    margin-right: 10px;
    background: #fba141;
    background: linear-gradient(45deg, #fba141, #ef376d);
    height: 297px;
    border-radius: 10px;
    width: 250px;
    padding: 3px;
    -webkit-box-shadow: 1px 5px 14px #00000061;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 1px 5px 14px #00000061;
}

.home.page .all-site .row .gallery-hot .gallery-top .title-wrapper {
    padding: 5px 10px;
}

.home.page .all-site .row .gallery-hot .gallery-top .title-wrapper .title {
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
}

.home.page .all-site .row .gallery-hot .gallery-image {
    background-color: #fff;
    width: 230px;
    margin: auto;
    margin-bottom: 9px;
    height: 122px;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: hand;
}

.home.page .all-site a {
    text-decoration: none;
}

.home.page .all-site .row .box {
    display: block;
    background: #e7941a;
    padding: 5px;
    width: 532px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 10px;
    border: 2px solid #66280E;
    box-shadow: 0px 5px #00000030;
}

.home.page .all-site .row .box .text {
    background: url(https://www.tropy.co.il/tropy/images/style/main/tree_button_background.png) 5px -5px, -ms-linear-gradient(top,#953A1D 1%,#C27541 98%);
    background: url(https://www.tropy.co.il/tropy/images/style/main/tree_button_background.png) 5px -5px, -webkit-linear-gradient(top, #953A1D 1%, #C27541 98%);
    background: url(https://www.tropy.co.il/tropy/images/style/main/tree_button_background.png) 5px -5px, -o-linear-gradient(-180deg,#953A1D 1%,#C27541 98%);
    background: url(https://www.tropy.co.il/tropy/images/style/main/tree_button_background.png) 5px -5px, -moz-linear-gradient(top,#953A1D 1%,#C27541 98%);
    background: url(https://www.tropy.co.il/tropy/images/style/main/tree_button_background.png) 5px -5px, linear-gradient(-180deg, #953A1D 1%, #C27541 98%);
    padding: 10px;
    border-radius: 10px;
    color: #ffffff;
    text-shadow: 0px 3px #66280E;
    font-weight: bold;
    font-size: 17px;
}

.home.page .all-site .row .box .description {
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
    background: -ms-linear-gradient(top, rgba(254, 235, 201, 0.85) 1%, rgba(254, 235, 201, 0.6) 98%);
    background: -webkit-linear-gradient(top, rgba(254, 235, 201, 0.85) 1%, rgba(254, 235, 201, 0.6) 98%);
    background: -o-linear-gradient(-180deg,#feebc9de 1%,#feebc9a1 98%);
    background: -moz-linear-gradient(top,#feebc9de 1%,#feebc9a1 98%);
    background: linear-gradient(-180deg, rgba(254, 235, 201, 0.85) 1%, rgba(254, 235, 201, 0.6) 98%);
    color: #953A1D;
}

.home.page .all-site .row .box .description .d-text {
    display: inline-block;
    width: 430px;
    font-size: 16.3px;
}

.home.page .intro .img {
    display: block;
    width: 100%;
    height: 600px;
}

.home.page .intro .img img {
    width: 0px;
    height: 0px;
}

.home.page .all-site .row .survey {
    width: 280px;
    height: 300px;
    padding: 0 8px;
    position: relative;
}

.home.page .all-site .row .survey .survey-wrapper {
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-box-shadow: 1px 5px 14px #00000061;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 1px 5px 14px #00000061;
}

.home.page .all-site .row .survey .survey-top {
    width: 100%;
    background: linear-gradient(#fff, #B6CDDB);
    border-radius: 10px 10px 0px 0px;
    border: 3px solid #5E9EC2;
}

.home.page .all-site .row .survey .survey-top .title-wrapper {
    padding: 10px;
    min-height: 54px;
    max-height: 54px;
}

.home.page .all-site .row .survey .survey-top .title-wrapper .title {
    font-size: 21px;
    font-weight: bold;
    color: #3c5661;
}

.home.page .all-site .row .survey .survey-bottom {
    background: linear-gradient(#ffffff, white);
    border-radius: 0px 0px 10px 10px;
    border: 3px solid #5E9EC2;
    border-top: 0px;
    width: 100%;
    min-height: 220px;
}

.home.page .all-site .row .survey .survey-bottom .survey-options {
    direction: ltr;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option {
    padding: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #007FC9;
    margin-bottom: 4px;
    background: #f0f5f7;
    cursor: hand;
    transition: 0.3s ease;
	text-align: right;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option.disabled {
    cursor: context-menu;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option.disabled.voted {
    background: #64caf3;
    color: #fff;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option.disabled.details {
    background: #fff;
    font-size: 14px;
    text-align: center;
    color: #5e9ec2;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option-bar {
    width: 0px;
    height: 37px;
    position: absolute;
    margin-top: -43px;
    background: rgba(0, 127, 201, 0.2);
    transition: 1s ease;
}

.home.page .all-site .row .survey .survey-bottom .survey-options .option.active:hover {
    background: #64caf3;
    color: #fff;
}

.home.page .row .posts {
    padding-top: 3px;
}

/* ==========================================================================
   BLOG SPECIFIC STYLES
   ========================================================================== */

.post-glass {
	position: absolute;
    scale: 1.05;
    z-index: 0;
    filter: blur(20px);
    opacity: 42%;
}

.blog.page .blog-posts {
	position: relative;
    display: block;
    padding: 20px 10px;
    color: var(--text);
    font-weight: bold;
    margin: 5px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    border: 2px solid rgb(231 231 231 / 55%);
    border-radius: 15px;
    box-shadow: 0 4px 35px rgba(0, 0, 0, .05);
}

.blog.page .posts {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 5px;
    justify-content: center;
    width: 100%;
}

.posts .post {
    width: 300px;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 10px;
}

.posts .post .post-container {
    box-sizing: border-box;
}

.posts .post .post-container .post-data {
    border-radius: 10px;
    position: relative;
    height: auto;
    overflow: hidden;
    margin: 0 0 0px;
    float: unset;
    width: 100%;
    display: block;
    box-sizing: border-box;
    -webkit-box-shadow: 1px 5px 14px #00000061;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 1px 5px 14px #00000061;
}

.posts .post .post-container .post-data a {
    color: #6f6f6f;
    -webkit-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
    background: 0 0;
    box-sizing: border-box;
}

.posts .post .post-container .post-data a .post-thumbnail {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    box-sizing: border-box;
    margin: auto;
    display: block;
    width: 480px;
}

.posts .post .post-container .post-data a .post-thumbnail .like-btn {
    text-align: center;
    line-height: 42px;
    width: 55px;
    height: 48px;
    position: absolute;
    left: 7px;
    top: 60px;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    cursor: hand;
    display: block;
    text-align: center;
    text-shadow: 0px 0px 3px #000;
    background: url(/tropy/images/style/blog/like.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
    -webkit-filter: drop-shadow(0px 0px 5px #fff);
    filter: drop-shadow(0px 0px 5px #fff);
}

.posts .post .post-container .post-data a .post-thumbnail .comment-btn {
    text-align: center;
    line-height: 41px;
    width: 55px;
    height: 48px;
    position: absolute;
    left: 7px;
    top: 10px;
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    cursor: hand;
    display: block;
    text-align: center;
    text-shadow: 0px 0px 3px #000;
    background: url(/tropy/images/style/blog/comment.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
    -webkit-filter: drop-shadow(0px 0px 5px #fff);
    filter: drop-shadow(0px 0px 5px #fff);
}

.posts .post:hover > .post-container .post-data a .post-wrapper {
    background-color: rgba(0,0,0,0.7);
    transition: 0.5s ease;
}

.posts .post .post-container .post-data a .post-wrapper {
    padding-right: 7px;
    padding-left: 0px;
    position: absolute;
    bottom: 0;
    z-index: 5;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
    background: -webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    width: 100%;
    float: right;
    transition: 0.5s ease;
}

.posts .post .post-container .post-data a .post-wrapper .entry-header {
    margin: 0;
    padding: 6px 0 4px 0;
    border-bottom: 0;
    background: none;
    border: 0;
    width: 95%;
    position: relative;
    text-align: right;
    float: right;
}

.posts .post .post-container .post-data a .post-wrapper .entry-header .entry-title {
    font-size: 22px;
    color: #FFF;
    line-height: 20px;
    margin-bottom: 4px;
    padding-top: 4px;
    text-align: right;
    text-transform: none;
    margin: 0;
    -webkit-margin-after: -0.4em;
}

.posts .post .post-container .post-data a .post-wrapper .entry-header .entry-summary {
    margin-bottom: 0;
    color: #f2f2f2;
    line-height: 16px;
    margin: 0 0 0px;
    float: right;
    font-size: 14px;
    width: 95%;
    display: block;
}

.posts .post .post-container .post-data a .post-wrapper .entry-header .entry-summary p {
    margin: 0 0 10px;
    box-sizing: border-box;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    color: #f2f2f2;
    line-height: 16px;
}

.posts .post .post-container .post-data a .post-thumbnail .comments {
    text-align: center;
    line-height: 100px;
    background-color: #fff;
    background: -webkit-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0, 0, 0, 0.5));
    border: 3px solid rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 58px;
    -moz-border-radius: 58px;
    border-radius: 58px;
    -webkit-box-shadow: 2px 2px 4px #000;
    -moz-box-shadow: 2px 2px 4px #000;
    box-shadow: 2px 2px 4px #000;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    text-align: center;
    box-shadow: 0px 0px 25px rgba(255, 255, 255, 8);
}

.posts .post .post-container .post-data a .post-thumbnail .comments p {
    position: absolute;
    margin-right: -5px;
    margin-top: -35px;
    width: 50px;
    text-align: center;
    display: block;
    font-weight: bold;
}

.posts .post .post-container .post-data a .post-thumbnail .comments p:nth-child(2) {
    margin-top: -21px;
    font-weight: normal;
    font-size: 10px;
}

.posts .post .post-container .post-data a .post-thumbnail .post-type {
    text-align: center;
    line-height: 100px;
    width: 60px;
    height: 40px;
    position: absolute;
    right: 2px;
    top: 10px;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    text-align: center;
    -webkit-filter: drop-shadow(0px 0px 15px #000);
    filter: drop-shadow(0px 0px 15px #000);
}

.posts .post .post-container .post-data a .post-thumbnail .post-type.report {
    background: url(/tropy/images/style/blog/type/report.png) 0px;
    background-repeat: no-repeat;
}

.posts .post .post-container .post-data a .post-thumbnail .post-type.news {
    background: url(/tropy/images/style/blog/type/news.png) 0px;
    background-repeat: no-repeat;
}

.posts .post .post-container .post-data a .post-thumbnail .post-type.survey {
    background: url(/tropy/images/style/blog/type/survey.png) 0px;
    background-repeat: no-repeat;
}

.posts .post .post-container .post-data a .post-thumbnail .post-type.shopping {
    background: url(/tropy/images/style/blog/type/shopping.png) 0px;
    background-repeat: no-repeat;
}

.posts .post .post-container .post-data a .post-thumbnail .post-type.video {
    background: url(/tropy/images/style/blog/type/video.png) 0px;
    background-repeat: no-repeat;
}

.loadMore {
    position: absolute;
    z-index: 1000;
    bottom: 10px;
    right: 10px;
    border-radius: 0px 0px 10px 10px;
    border: 0px solid #FFF;
    padding: 10px;
    width: calc(100% - 40px);
    font-weight: bold;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,rgba(99, 185, 255, 0.5)),color-stop(100%,#69cdff)));
    background: -moz-linear-gradient(rgba(99, 185, 255, 0.5),#69cdff);
    background: -webkit-linear-gradient(rgba(99, 185, 255, 0.5),#69cdff);
    background: linear-gradient(rgba(99, 185, 255, 0.5),#69cdff);
    transition: 0.5s ease;
}

.loadMore:hover {
    color: #FFF;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,rgba(99, 185, 255, 0.5)),color-stop(100%,#69cdff)));
    background: -moz-linear-gradient(rgba(99, 185, 255, 0.5),#69cdff);
    background: -webkit-linear-gradient(rgba(99, 185, 255, 0.5),#69cdff);
    background: linear-gradient(rgba(99, 185, 255, 0.15),#69cdff);
}

/* ==========================================================================
   GALLERY SPECIFIC STYLES
   ========================================================================== */

.gallery.page * {
	box-sizing: content-box;
}

.main-gallery {
	font-size: 16px;
    max-width: 1200px;
    margin: auto;
	padding: 0 !important;
}

/* ==========================================================================
   FAQ SPECIFIC STYLES
   ========================================================================== */

.faq .categories-wrapper {
	margin: auto !important;
}

.liked {
    position: relative;
    display: inline-block;
    background: url(/tropy/images/style/faq/lkd.png) no-repeat -38px 0px;
    width: 38px;
    height: 45px;
    top: 0px;
    cursor: hand;
}

.liked:hover {
    display: inline-block;
    background: url(/tropy/images/style/faq/lkd.png) no-repeat -38px -43px;
    width: 38px;
    height: 45px;
}

.disliked {
    position: relative;
    display: inline-block;
    background: url(/tropy/images/style/faq/lkd.png) 0px 0px;
    width: 38px;
    height: 45px;
    top: 0px;
    cursor: hand;
}

.disliked:hover {
    display: inline-block;
    background: url(/tropy/images/style/faq/lkd.png) no-repeat 0px -88.5px;
    width: 38px;
    height: 45px;
}

main .faq .category-wrapper.feedback .category-container {
	font-size: 16px;
    text-align: center;
    font-weight: 700;
	padding: 20px !important;
}

main .faq .category-wrapper.feedback .category-container .title {
	font-size: 25px;
}

/* ==========================================================================
   CONTACT SPECIFIC STYLES
   ========================================================================== */

.contact.page .contact-section .selection-title .box {
	box-sizing: content-box;
}

.contact.page .message, .blog.page .message {
    background: #ff7400;
    border-radius: 5px;
    border: 0px solid #bd5600;
    padding: 10px;
    margin-bottom: 10px;
    color: #FFF;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0px;
    font-weight: bold;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
	background: #005fff;
	color: #c6ffff;
	margin-top: -1px;
	z-index: 0;
}

.footer-container .app-download {
	padding: 26px 10px 10px 10px;
	z-index: 10;
	position: relative;
}

.footer-cards {
	margin: auto;
	text-align: center;
    padding: 10px 5px 10px 0px;
    margin: 10px auto;
}

.footer-cards * {
	box-sizing: content-box;
}

.footer-cards a {
    z-index: 10;
    position: relative;
	text-decoration: none;
    color: #FFF;
    font-size: 17px;
    padding-right: 5px;
    padding-left: 5px;
    border-right: 1px solid #fff;
    opacity: 0.7;
    transition: 0.5s ease;
}

.footer-cards a.card {
    padding-right: 0px;
    padding-left: 0px;
    border-right: 0px solid #fff;
    opacity: 1;
    width: 150px;
}

.footer-cards a:hover {
    opacity: 1;
}

.footer-cards a:nth-child(1) {
    border-right: 0px solid #FFF;
}

.footer-cards .card {
    position: relative;
    width: 149px;
    margin-left: 0px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    z-index: 10;
}

.footer-cards .icon {
	background: #0042e5;
    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 50px;
    transition: 0.5s ease;
}

.footer-cards .icon {
	background: #0042e5;
}

.footer-cards .card .title {
	padding: 10px 0px;
    font-weight: bold;
    font-size: 20px;
	color: #c6ffff;
	text-shadow: none;
}

.footer-cards .rights {
    text-align: center;
    margin-top: 50px;
    color: #c6ffff;
    padding-bottom: 10px;
	font-size: 17px;
}

.footer-container .left-trees {
	position: absolute;
    left: 0;
    bottom: 0;
}

.footer-container .right-trees {
	position: absolute;
    right: 0;
    bottom: 0;
}

.footer-container .tiny-footer {
	margin-bottom: 10px;
}

.footer-container .social {
	margin-top: 10px;
}

.footer-cards .card:hover > .icon {
    transform: scale(1.10);
    background: #1593ff;
}

/* Footer Icon Sprites */
.icon.manage-account:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/manage-account.png);
    transform: scale(0.90);
}

.icon.membership:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/membership.png);
    transform: scale(0.90);
}

.icon.angles:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/angels.png);
    transform: scale(0.90);
}

.icon.faq:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/faq.png);
    transform: scale(0.90);
}

.icon.safety:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/safety.png);
    transform: scale(0.90);
}

.icon.forgot-password:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/forgot-password.png);
    transform: scale(0.90);
}

.icon.forum:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/forum.png);
    transform: scale(0.90);
}

.icon.about:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/about.png);
    transform: scale(0.90);
}

.icon.contact:after {
    content: ' ';
    display: block;
    width: 90px;
    height: 90px;
    background-position: center;
    background-size: 100%;
    background-image: url(/tropy/images/style/icons/contact.png);
    transform: scale(0.90);
}


/* Mobile/Desktop visibility */
.show-mobile {
    display: none;
}

@media (max-width: 780px) {
	.show-mobile {
		display: block;
	}
	.hide-mobile {
		display: none;
	}
}