/* ==========================================================================
   Hanataba Customer Service Portal
   Frontend Styles
   ========================================================================== */


/* ==========================================================================
   Layout
   ========================================================================== */

.hanataba {
}

.hanataba-card {
	max-width: 900px;
	margin: 30px auto;
	padding: 48px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,.08);
}
.hanataba-order {
	margin-bottom:20px;
}
.hanataba-success {
	text-align: center;
}

.hanataba-success-icon {
	width: 90px;
	height: 90px;
	margin: 0 auto 30px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.hanataba-title {
	font-size: 48px;
	font-weight: 300;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.hanataba-section-title {
	font-family: "Libre Franklin", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 10px;
	color: #111;
}

.hanataba-description {
	font-size: 20px;
	color: #666;
	line-height: 1.7;
	margin-bottom: 40px;
}


/* ==========================================================================
   Forms
   ========================================================================== */

.hanataba-form {
}

.hanataba-field {
	margin-bottom: 24px;
}

.hanataba-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 10px;
}

.hanataba-card .hanataba-form input,
.hanataba-card .hanataba-form select,
.hanataba-card .hanataba-form textarea {
	width: 100%;
	padding: 16px;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	background: #fff;
	font-size: 16px;
	box-sizing: border-box;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.hanataba-button {
	display: inline-block;
	width: 100%;
	padding: 18px;
	border: 0;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}

.hanataba-button:hover {
	background: #333;
}


/* ==========================================================================
   Product Cards
   ========================================================================== */

.hanataba-product {
	display: flex;
	gap: 16px;
	padding: 18px 22px;
	margin-bottom: 24px;
	border: 1px solid #ececec;
	border-radius: 16px;
}

.hanataba-product-select {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hanataba-product-content {
	flex: 1;
}

.hanataba-product-title {
	font-family: "Libre Franklin", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 4px;
	color: #111;
}

.hanataba-product-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
	font-size: 14px;
	color: #666;
}

.hanataba-product-controls {
	display: flex;
	gap: 20px;
}

.hanataba-product-controls .hanataba-field {
	flex: 1;
	margin: 0;
}


/* ==========================================================================
   Messages
   ========================================================================== */

.hanataba-information {
	padding: 24px;
	margin: 40px 0;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fafafa;
	font-size: 15px;
	line-height: 1.7;
}

.hanataba-success {
	padding: 60px;
	text-align: center;
}

.hanataba-success h2 {
	margin-bottom: 20px;
	font-size: 36px;
}

.hanataba-message {
	padding: 18px 24px;
	margin-bottom: 24px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.6;
}

.hanataba-error {
	background: #fff5f5;
	border: 1px solid #e74c3c;
	color: #8b1e1e;
}

.hanataba-success-message {
	background: #f5faf5;
	border: 1px solid #3c8c4a;
	color: #22532a;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {

	.hanataba-product {
		flex-direction: column;
	}

	.hanataba-product-meta {
		flex-direction: column;
		gap: 12px;
	}

	.hanataba-product-controls {
		flex-direction: column;
	}

	.hanataba-card {
		margin: 20px;
		padding: 24px;
	}

}