/* === Iftikhar Prescription Options === */

.ipo-prescription-wrapper {
	margin: 20px 0;
}

/* Section titles */
.ipo-section-title {
	font-weight: 700;
	font-size: 15px;
	margin: 18px 0 8px;
	display: block;
}

/* === Prescription Tables === */

.ipo-prescription-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
}

.ipo-prescription-table thead th {
	background: #333;
	color: #fff;
	font-weight: 700;
	padding: 10px 12px;
	text-align: center;
	border: 1px solid #333;
	font-size: 14px;
}

.ipo-prescription-table thead th:first-child {
	width: 80px;
}

.ipo-prescription-table tbody td {
	padding: 8px;
	border: 1px solid #ddd;
	background: #fff;
	text-align: center;
	vertical-align: middle;
}

.ipo-prescription-table .ipo-row-label {
	font-weight: 600;
	background: #f5f5f5;
	text-align: left;
	padding-left: 12px;
	white-space: nowrap;
}

.ipo-prescription-table select {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 14px;
	background: #fff;
	color: #333;
	cursor: pointer;
}

/* === Upload Section === */

.ipo-upload-section {
	margin: 20px 0;
}

.ipo-upload-section input[type="file"] {
	display: block;
	margin-top: 5px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 3px;
	width: 100%;
	max-width: 400px;
	background: #fff;
}

.ipo-file-hint {
	display: block;
	font-size: 12px;
	color: #888;
	margin-top: 4px;
}

/* === Lens Type Section === */

.ipo-lens-section {
	margin: 20px 0;
}

.ipo-lens-section select {
	display: block;
	margin-top: 5px;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 14px;
	width: 100%;
	max-width: 400px;
	background: #fff;
	color: #333;
	cursor: pointer;
}

.ipo-lens-price-display {
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
	color: #e74c3c;
}

/* === Dark mode (Avanam color-switch-dark) === */

body.color-switch-dark .ipo-prescription-table tbody td {
	background: #2a2a2a;
	border-color: #444;
	color: #e0e0e0;
}

body.color-switch-dark .ipo-prescription-table .ipo-row-label {
	background: #333;
}

body.color-switch-dark .ipo-prescription-table select,
body.color-switch-dark .ipo-lens-section select {
	background: #333;
	border-color: #555;
	color: #e0e0e0;
}

body.color-switch-dark .ipo-upload-section input[type="file"] {
	background: #333;
	border-color: #555;
	color: #e0e0e0;
}

body.color-switch-dark .ipo-file-hint {
	color: #999;
}

body.color-switch-dark .ipo-section-title {
	color: #e0e0e0;
}

/* === Quantity + Add to Cart row === */

.ipo-prescription-wrapper + .quantity,
form.cart .quantity {
	display: inline-flex !important;
	align-items: center;
	height: 44px;
	vertical-align: middle;
}

form.cart .quantity input[type="number"] {
	width: 50px !important;
	height: 44px !important;
	text-align: center;
	font-size: 15px;
	padding: 0 4px;
	margin: 0;
	border: 1px solid #ccc;
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

form.cart .quantity input[type="number"]::-webkit-inner-spin-button,
form.cart .quantity input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

form.cart .quantity .qty-btn,
form.cart .quantity .minus,
form.cart .quantity .plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 44px !important;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid #ccc;
	background: #f5f5f5;
	color: #333;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

form.cart .quantity .minus {
	border-radius: 3px 0 0 3px;
	border-right: none;
}

form.cart .quantity .plus {
	border-radius: 0 3px 3px 0;
	border-left: none;
}

form.cart .single_add_to_cart_button {
	height: 44px;
	vertical-align: middle;
}

/* === Responsive === */

@media (max-width: 600px) {
	.ipo-prescription-table {
		font-size: 13px;
	}

	.ipo-prescription-table thead th,
	.ipo-prescription-table tbody td {
		padding: 6px 4px;
	}

	.ipo-prescription-table select {
		padding: 4px 2px;
		font-size: 12px;
	}

	.ipo-upload-section input[type="file"],
	.ipo-lens-section select {
		max-width: 100%;
	}
}

/* === AJAX notices === */

.ipo-notice {
	margin: 15px 0;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.ipo-notice-success {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	color: #155724;
}

.ipo-notice-error {
	background: #f8d7da;
	border: 1px solid #f5c6cb;
	color: #721c24;
}

.ipo-notice .button,
.ipo-notice .wc-forward {
	margin-left: 10px;
	font-size: 13px;
}