/**
 * Max Cleaning Calculator — style.css
 * Design language aligned with maxwindowscleaning.com
 * Responsive: side-by-side desktop, stacked mobile
 */

/* ============================================================================
   TOKENS
   ========================================================================== */
:root {
	--mcc-blue:        #1a56db;
	--mcc-blue-dark:   #1240a8;
	--mcc-blue-light:  #ebf2ff;
	--mcc-teal:        #0e9f6e;
	--mcc-teal-dark:   #057a55;
	--mcc-amber:       #c27803;
	--mcc-amber-bg:    #fdf6b2;
	--mcc-amber-border:#fce96a;
	--mcc-info-bg:     #e8f4fd;
	--mcc-info-border: #bee3f8;
	--mcc-info-text:   #1e429f;
	--mcc-red:         #e02424;
	--mcc-green:       #057a55;
	--mcc-gray-100:    #f9fafb;
	--mcc-gray-200:    #f3f4f6;
	--mcc-gray-300:    #e5e7eb;
	--mcc-gray-500:    #6b7280;
	--mcc-gray-700:    #374151;
	--mcc-gray-900:    #111827;
	--mcc-radius:      10px;
	--mcc-radius-sm:   6px;
	--mcc-shadow:      0 2px 12px rgba(0, 0, 0, .09);
	--mcc-shadow-hover:0 6px 24px rgba(0, 0, 0, .14);
	--mcc-transition:  .18s ease;
	--mcc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   WRAPPER & GRID
   ========================================================================== */
.mcc-wrap {
	font-family:   var(--mcc-font);
	font-size:     15px;
	line-height:   1.55;
	color:         var(--mcc-gray-900);
	box-sizing:    border-box;
	padding:       0 0 32px;
}

.mcc-wrap *,
.mcc-wrap *::before,
.mcc-wrap *::after {
	box-sizing: inherit;
}

.mcc-grid {
	display:  grid;
	grid-template-columns: 1fr 1fr;
	gap:      28px;
	align-items: start;
}

.mcc-grid--single {
	grid-template-columns: 1fr;
	max-width: 600px;
	margin: 0 auto;
}

@media (max-width: 820px) {
	.mcc-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   CARD
   ========================================================================== */
.mcc-card {
	background:    #fff;
	border:        1px solid var(--mcc-gray-300);
	border-radius: var(--mcc-radius);
	box-shadow:    var(--mcc-shadow);
	overflow:      hidden;
	transition:    box-shadow var(--mcc-transition);
}

.mcc-card:hover {
	box-shadow: var(--mcc-shadow-hover);
}

/* Card header */
.mcc-card__header {
	padding:         28px 28px 20px;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	gap:             6px;
}

.mcc-card__header--res {
	background: linear-gradient(135deg, #1a56db 0%, #1240a8 100%);
	color:      #fff;
}

.mcc-card__header--com {
	background: linear-gradient(135deg, #0e9f6e 0%, #057a55 100%);
	color:      #fff;
}

.mcc-card__icon {
	width:       36px;
	height:      36px;
	flex-shrink: 0;
	opacity:     .9;
}

.mcc-card__title {
	margin:      0;
	font-size:   22px;
	font-weight: 700;
	line-height: 1.2;
	color:       #fff;
}

.mcc-card__subtitle {
	margin:     0;
	font-size:  13px;
	opacity:    .82;
	color:      #fff;
}

/* Card body */
.mcc-card__body {
	padding: 24px 28px 28px;
}

@media (max-width: 480px) {
	.mcc-card__header,
	.mcc-card__body {
		padding-left:  16px;
		padding-right: 16px;
	}
}

/* ============================================================================
   FORM FIELDS
   ========================================================================== */
.mcc-form {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

.mcc-field {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.mcc-field--inline {
	flex-direction:  row;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

.mcc-field--inline .mcc-label {
	flex: 1;
}

.mcc-field--checkbox {
	flex-direction: row;
	align-items:    flex-start;
}

/* Labels */
.mcc-label {
	font-size:   13px;
	font-weight: 600;
	color:       var(--mcc-gray-700);
}

.mcc-label--required::after {
	content:     ' *';
	color:       var(--mcc-red);
}

/* Text inputs */
.mcc-input,
.mcc-select,
.mcc-textarea {
	width:         100%;
	padding:       9px 12px;
	border:        1.5px solid var(--mcc-gray-300);
	border-radius: var(--mcc-radius-sm);
	font-family:   var(--mcc-font);
	font-size:     14px;
	color:         var(--mcc-gray-900);
	background:    var(--mcc-gray-100);
	transition:    border-color var(--mcc-transition), box-shadow var(--mcc-transition);
	outline:       none;
	-webkit-appearance: none;
	appearance:    none;
}

.mcc-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 10px center;
	background-size:     18px;
	padding-right:       36px;
	cursor: pointer;
}

.mcc-input:focus,
.mcc-select:focus,
.mcc-textarea:focus {
	border-color: var(--mcc-blue);
	box-shadow:   0 0 0 3px rgba(26, 86, 219, .15);
	background:   #fff;
}

/* Number inputs */
.mcc-number {
	width:         72px;
	min-width:     72px;
	flex-shrink:   0;
	padding:       8px 10px;
	border:        1.5px solid var(--mcc-gray-300);
	border-radius: var(--mcc-radius-sm);
	font-size:     14px;
	font-family:   var(--mcc-font);
	color:         var(--mcc-gray-900);
	background:    var(--mcc-gray-100);
	text-align:    center;
	transition:    border-color var(--mcc-transition), box-shadow var(--mcc-transition);
	outline:       none;
	-moz-appearance: textfield;
}

.mcc-number:focus {
	border-color: var(--mcc-blue);
	box-shadow:   0 0 0 3px rgba(26, 86, 219, .15);
	background:   #fff;
}

.mcc-number::-webkit-outer-spin-button,
.mcc-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Flatpickr alt-input override */
.mcc-field .flatpickr-input + input.form-control,
.mcc-field input.flatpickr-input[readonly] {
	width:         100%;
	padding:       9px 12px;
	border:        1.5px solid var(--mcc-gray-300);
	border-radius: var(--mcc-radius-sm);
	font-family:   var(--mcc-font);
	font-size:     14px;
	color:         var(--mcc-gray-900);
	background:    var(--mcc-gray-100);
	cursor:        pointer;
	outline:       none;
	-webkit-appearance: none;
	appearance:    none;
}

.mcc-field input.flatpickr-input[readonly]:focus,
.mcc-field .flatpickr-input + input:focus {
	border-color: var(--mcc-blue);
	box-shadow:   0 0 0 3px rgba(26, 86, 219, .15);
	background:   #fff;
}

/* File input */
.mcc-file {
	font-size:  13px;
	color:      var(--mcc-gray-700);
	cursor:     pointer;
}

/* Textarea */
.mcc-textarea {
	resize:     vertical;
	min-height: 76px;
}

/* Hint */
.mcc-hint {
	font-size: 12px;
	color:     var(--mcc-gray-500);
	margin:    2px 0 0;
}

/* Checkbox */
.mcc-checkbox-label {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	font-size:   13px;
	color:       var(--mcc-gray-700);
	cursor:      pointer;
	line-height: 1.4;
}

.mcc-checkbox-label input[type="checkbox"] {
	margin-top:  2px;
	flex-shrink: 0;
	width:       16px;
	height:      16px;
	accent-color:var(--mcc-blue);
	cursor:      pointer;
}

/* Price badge */
.mcc-price {
	display:        inline-block;
	padding:        1px 7px;
	border-radius:  4px;
	font-size:      11px;
	font-weight:    700;
	line-height:    1.5;
	letter-spacing: .02em;
	white-space:    nowrap;
	background:     var(--mcc-blue-light);
	color:          var(--mcc-blue);
	margin-left:    4px;
	vertical-align: middle;
}

.mcc-col--commercial .mcc-price {
	background: #d1fae5;
	color:      var(--mcc-teal-dark);
}

.mcc-price--addon {
	background: var(--mcc-blue-light);
	color:      var(--mcc-blue);
}

.mcc-col--commercial .mcc-price--addon {
	background: #d1fae5;
	color:      var(--mcc-teal-dark);
}

/* Size hint */
.mcc-size-hint {
	font-size:   11px;
	font-weight: 400;
	color:       var(--mcc-gray-500);
	font-style:  italic;
}

.mcc-addon-price {
	color:       var(--mcc-blue);
	font-weight: 600;
	white-space: nowrap;
}

/* ============================================================================
   DIVIDER
   ========================================================================== */
.mcc-divider {
	position:    relative;
	text-align:  center;
	margin:      4px 0;
}

.mcc-divider::before {
	content:   '';
	position:  absolute;
	left:      0;
	right:     0;
	top:       50%;
	border-top:1px solid var(--mcc-gray-300);
}

.mcc-divider span {
	position:    relative;
	background:  #fff;
	padding:     0 10px;
	font-size:   11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:       var(--mcc-gray-500);
}

/* ============================================================================
   ESTIMATE OUTPUT
   ========================================================================== */
.mcc-estimate {
	background:    var(--mcc-blue-light);
	border:        1.5px solid #c3d9ff;
	border-radius: var(--mcc-radius-sm);
	padding:       16px 18px;
	display:       flex;
	flex-direction:column;
	gap:           6px;
}

.mcc-estimate__total {
	font-size:   20px;
	font-weight: 700;
	color:       var(--mcc-blue-dark);
}

.mcc-estimate__total strong {
	font-size:  24px;
}

.mcc-estimate__deposit {
	font-size:   14px;
	font-weight: 500;
	color:       var(--mcc-gray-700);
}

.mcc-estimate__deposit strong {
	font-weight: 700;
	color:       var(--mcc-gray-900);
}

.mcc-estimate__minimum {
	font-size:  12px;
	color:      var(--mcc-gray-500);
	font-style: italic;
}

.mcc-estimate__not-serviced {
	font-size:   14px;
	font-weight: 700;
	color:       var(--mcc-red);
	padding:     8px 0 0;
}

/* Commercial green header → teal estimate */
.mcc-col--commercial .mcc-estimate {
	background: #d1fae5;
	border-color: #6ee7b7;
}

.mcc-col--commercial .mcc-estimate__total {
	color: var(--mcc-teal-dark);
}

/* ============================================================================
   NOTICES
   ========================================================================== */
.mcc-notice {
	border-radius: var(--mcc-radius-sm);
	padding:       10px 14px;
	font-size:     13px;
	line-height:   1.5;
}

.mcc-notice--info {
	background:   var(--mcc-info-bg);
	border:       1px solid var(--mcc-info-border);
	color:        var(--mcc-info-text);
}

.mcc-notice--warning {
	background:   var(--mcc-amber-bg);
	border:       1px solid var(--mcc-amber-border);
	color:        var(--mcc-amber);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.mcc-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
	margin-top:4px;
}

.mcc-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	padding:         11px 20px;
	border:          none;
	border-radius:   var(--mcc-radius-sm);
	font-family:     var(--mcc-font);
	font-size:       14px;
	font-weight:     600;
	cursor:          pointer;
	transition:      background var(--mcc-transition), opacity var(--mcc-transition), transform var(--mcc-transition), box-shadow var(--mcc-transition);
	text-decoration: none;
	white-space:     nowrap;
	line-height:     1;
}

.mcc-btn svg {
	width:       16px;
	height:      16px;
	flex-shrink: 0;
}

.mcc-btn--primary {
	background:  var(--mcc-blue);
	color:       #fff;
	flex:        1;
}

.mcc-btn--primary:hover:not(:disabled) {
	background:  var(--mcc-blue-dark);
	box-shadow:  0 4px 14px rgba(26, 86, 219, .35);
	transform:   translateY(-1px);
}

.mcc-btn--secondary {
	background:  transparent;
	border:      2px solid var(--mcc-blue);
	color:       var(--mcc-blue);
}

.mcc-btn--secondary:hover:not(:disabled) {
	background: var(--mcc-blue-light);
	box-shadow: 0 4px 12px rgba(26, 86, 219, .2);
}

.mcc-col--commercial .mcc-btn--primary {
	background: var(--mcc-teal);
}

.mcc-col--commercial .mcc-btn--primary:hover:not(:disabled) {
	background:  var(--mcc-teal-dark);
	box-shadow:  0 4px 14px rgba(14, 159, 110, .35);
}

.mcc-col--commercial .mcc-btn--secondary {
	border-color: var(--mcc-teal);
	color:        var(--mcc-teal);
}

.mcc-col--commercial .mcc-btn--secondary:hover:not(:disabled) {
	background: #d1fae5;
}

.mcc-btn:disabled {
	opacity: .45;
	cursor:  not-allowed;
	transform: none;
}

/* ============================================================================
   FORM MESSAGES
   ========================================================================== */
.mcc-form-msg {
	display:       none;
	padding:       12px 16px;
	border-radius: var(--mcc-radius-sm);
	font-size:     14px;
	font-weight:   500;
	line-height:   1.5;
}

.mcc-form-msg--success {
	background: #d1fae5;
	border:     1px solid #6ee7b7;
	color:      #065f46;
}

.mcc-form-msg--error {
	background: #fde8e8;
	border:     1px solid #f8b4b4;
	color:      #9b1c1c;
}

/* ============================================================================
   RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 480px) {
	.mcc-actions {
		flex-direction: column;
	}

	.mcc-btn--secondary {
		justify-content: center;
	}

	.mcc-field--inline {
		flex-direction: row;
		flex-wrap:      nowrap;
	}

	.mcc-estimate__total {
		font-size: 17px;
	}

	.mcc-estimate__total strong {
		font-size: 21px;
	}
}