.customer-portal {
	--portal-navy: #1f365c;
	--portal-red: #d8272f;
	--portal-ink: #172033;
	--portal-muted: #687386;
	--portal-line: #e1e7ef;
	--portal-canvas: #f5f7fb;
	background: var(--portal-canvas);
	color: var(--portal-ink);
	min-height: 760px;
	padding-top: 112px;
}

.portal-access {
	display: grid;
	grid-template-columns: minmax(360px, 46%) minmax(460px, 54%);
	min-height: calc(100vh - 112px);
}

.portal-access__story {
	background: var(--portal-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(44px, 7vw, 100px);
	position: relative;
}

.portal-access__story::before {
	background: var(--portal-red);
	border-radius: 5px;
	content: "";
	height: 5px;
	margin-bottom: 28px;
	width: 58px;
}

.portal-story__eyebrow,
.portal-kicker {
	color: var(--portal-red);
	display: block;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 1.5px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.portal-access__story h1 {
	color: #fff;
	font-size: clamp(42px, 5vw, 62px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 1.05;
	margin: 0 0 22px;
}

.portal-access__story > p {
	color: #d9e3f1;
	font-size: 17px;
	line-height: 1.6;
	max-width: 560px;
}

.portal-access__story ul {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.portal-access__story li {
	align-items: center;
	display: flex;
	font-weight: 800;
	gap: 13px;
	margin: 15px 0;
}

.portal-access__story li i {
	align-items: center;
	background: rgba(255,255,255,.1);
	border-radius: 9px;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.portal-access__form,
.portal-simple-shell {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: clamp(28px, 6vw, 84px);
}

.portal-simple-shell {
	min-height: calc(100vh - 112px);
}

.portal-form-card {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 16px;
	box-shadow: 0 18px 55px rgba(31,54,92,.1);
	max-width: 540px;
	padding: clamp(26px, 5vw, 48px);
	width: 100%;
}

.portal-form-card h1,
.portal-form-card h2 {
	color: var(--portal-ink);
	font-size: clamp(27px, 3vw, 36px);
	font-weight: 900;
	letter-spacing: -.8px;
	line-height: 1.18;
	margin: 0 0 9px;
}

.portal-form-card > p {
	color: var(--portal-muted);
	line-height: 1.55;
	margin-bottom: 25px;
}

.portal-form-card label,
.portal-modal-grid label {
	color: var(--portal-ink);
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin: 15px 0 7px;
}

.portal-input {
	align-items: center;
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 10px;
	display: flex;
	transition: border-color .18s, box-shadow .18s;
}

.portal-input:focus-within {
	border-color: var(--portal-navy);
	box-shadow: 0 0 0 3px rgba(31,54,92,.1);
}

.portal-input i {
	color: var(--portal-muted);
	padding-left: 15px;
}

.portal-input input {
	background: transparent;
	border: 0;
	color: var(--portal-ink);
	font-size: 15px;
	outline: 0;
	padding: 14px;
	width: 100%;
}

.portal-input select {
	background: transparent;
	border: 0;
	color: var(--portal-ink);
	outline: 0;
	padding: 14px;
	width: 100%;
}

.portal-name-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
}

.portal-input--code input {
	font-size: 21px;
	font-weight: 900;
	letter-spacing: 8px;
}

.portal-primary-button,
.portal-secondary-button,
.portal-danger-button {
	align-items: center;
	border-radius: 9px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 900;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	padding: 13px 18px;
	transition: .18s ease;
}

.portal-primary-button {
	background: var(--portal-navy);
	border: 1px solid var(--portal-navy);
	color: #fff;
}

.portal-form-card form > .portal-primary-button {
	margin-top: 22px;
	width: 100%;
}

.portal-primary-button:hover {
	background: #142846;
	color: #fff;
}

.portal-secondary-button {
	background: #fff;
	border: 1px solid var(--portal-line);
	color: var(--portal-navy);
}

.portal-danger-button {
	background: #fff;
	border: 1px solid #efcbd0;
	color: var(--portal-red);
}

.portal-secondary-button:disabled,
.portal-danger-button:disabled {
	background: #f4f6f9;
	border-color: var(--portal-line);
	color: #9aa4b2;
	cursor: not-allowed;
}

.portal-form-links {
	border-top: 1px solid var(--portal-line);
	display: grid;
	gap: 9px;
	margin-top: 22px;
	padding-top: 19px;
	text-align: center;
}

.portal-form-links a,
.portal-back-link,
.portal-help a {
	color: var(--portal-navy);
	font-size: 13px;
	font-weight: 900;
}

.portal-security,
.portal-help {
	color: var(--portal-muted);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 22px;
	text-align: center;
}

.portal-back-link {
	display: inline-flex;
	gap: 7px;
	margin-bottom: 25px;
}

.portal-alert {
	align-items: flex-start;
	border: 1px solid;
	border-radius: 10px;
	display: flex;
	font-size: 13px;
	font-weight: 700;
	gap: 10px;
	margin: 0 0 20px;
	padding: 13px 15px;
}

.portal-alert--error {
	background: #fcecee;
	border-color: #efcbd0;
	color: #8e2730;
}

.portal-alert--success {
	background: #e7f6ef;
	border-color: #bce4d1;
	color: #126440;
}

.portal-dashboard {
	margin: 0 auto;
	max-width: 1180px;
	padding: 46px 22px 80px;
}

.portal-dashboard__heading {
	align-items: flex-end;
	display: flex;
	gap: 25px;
	justify-content: space-between;
	margin-bottom: 24px;
}

.portal-dashboard__heading h1 {
	color: var(--portal-ink);
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 900;
	letter-spacing: -1.2px;
	margin: 0 0 6px;
}

.portal-dashboard__heading p {
	color: var(--portal-muted);
	margin: 0;
}

.portal-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.portal-rules {
	background: #eaf2fb;
	border: 1px solid #cfe0f3;
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	margin-bottom: 18px;
	padding: 16px 19px;
}

.portal-rules > div {
	align-items: center;
	color: var(--portal-navy);
	display: flex;
	font-size: 13px;
	gap: 9px;
}

.portal-booking-card {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 14px;
	box-shadow: 0 7px 24px rgba(31,54,92,.05);
	margin-bottom: 15px;
	overflow: hidden;
}

.portal-booking-card > header {
	align-items: center;
	border-bottom: 1px solid var(--portal-line);
	display: flex;
	justify-content: space-between;
	padding: 15px 20px;
}

.portal-booking-card > header span:first-child {
	color: var(--portal-muted);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
}

.portal-booking-card h2 {
	color: var(--portal-ink);
	font-size: 19px;
	font-weight: 900;
	margin: 0;
}

.portal-status {
	border-radius: 99px;
	font-size: 11px;
	font-weight: 900;
	padding: 7px 11px;
}

.portal-status--confirmed { background: #e7f6ef; color: #16734a; }
.portal-status--pending { background: #fff3d8; color: #8a5b00; }
.portal-status--rental { background: #eaf2fb; color: #315f96; }
.portal-status--completed { background: #edf1f5; color: #516071; }
.portal-status--cancelled { background: #fcecee; color: #9b2c33; }

.portal-booking-card__body {
	align-items: flex-end;
	display: grid;
	gap: 25px;
	grid-template-columns: minmax(0, 1fr) 230px;
	padding: 20px;
}

.portal-booking-facts {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.portal-booking-facts > div {
	align-items: flex-start;
	display: flex;
	gap: 10px;
}

.portal-booking-facts i {
	color: var(--portal-red);
	margin-top: 3px;
}

.portal-booking-facts span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.portal-booking-facts small {
	color: var(--portal-muted);
	font-size: 10px;
	font-weight: 900;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.portal-booking-facts strong {
	color: var(--portal-ink);
	font-size: 13px;
	line-height: 1.35;
}

.portal-booking-facts em {
	color: var(--portal-muted);
	font-size: 11px;
	font-style: normal;
	margin-top: 3px;
}

.portal-booking-actions {
	display: grid;
	gap: 8px;
}

.portal-booking-actions small {
	color: var(--portal-muted);
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
}

.portal-empty {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 14px;
	padding: 60px 22px;
	text-align: center;
}

.portal-empty > i {
	color: var(--portal-muted);
	font-size: 42px;
}

.portal-empty h2 {
	color: var(--portal-ink);
	font-weight: 900;
	margin: 15px 0 5px;
}

.portal-pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 25px;
}

.portal-pagination a {
	align-items: center;
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 8px;
	color: var(--portal-navy);
	display: inline-flex;
	font-weight: 900;
	height: 39px;
	justify-content: center;
	width: 39px;
}

.portal-pagination a.active {
	background: var(--portal-navy);
	color: #fff;
}

.portal-modal .modal-content {
	border: 0;
	border-radius: 15px;
	box-shadow: 0 24px 70px rgba(17,32,51,.2);
}

.portal-modal .modal-header,
.portal-modal .modal-body,
.portal-modal .modal-footer {
	padding: 20px 24px;
}

.portal-modal .modal-title {
	color: var(--portal-ink);
	font-size: 24px;
	font-weight: 900;
}

.portal-modal-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}

.portal-modal-grid label {
	margin: 0;
}

.portal-modal-grid input,
.portal-modal-grid select {
	background: #fff;
	border: 1px solid var(--portal-line);
	border-radius: 9px;
	color: var(--portal-ink);
	display: block;
	margin-top: 7px;
	padding: 11px 12px;
	width: 100%;
}

.portal-modal-note {
	background: #eaf2fb;
	border-radius: 9px;
	color: var(--portal-navy);
	font-size: 12px;
	margin: 18px 0 0;
	padding: 12px;
}

.portal-cancel-confirm {
	padding-top: 32px !important;
	text-align: center;
}

.portal-cancel-confirm > i {
	color: var(--portal-red);
	font-size: 38px;
}

.portal-cancel-confirm h2 {
	color: var(--portal-ink);
	font-size: 22px;
	font-weight: 900;
	margin: 15px 0 8px;
}

.portal-cancel-confirm p {
	color: var(--portal-muted);
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 1000px) {
	.portal-access { grid-template-columns: 1fr; }
	.portal-access__story { min-height: 500px; }
	.portal-access__form { min-height: 650px; }
	.portal-booking-card__body { grid-template-columns: 1fr; }
	.portal-booking-actions { display: flex; flex-wrap: wrap; }
	.portal-booking-actions small { flex-basis: 100%; text-align: left; }
}

@media (max-width: 767px) {
	.customer-portal { padding-top: 92px; }
	.portal-access__story { min-height: auto; padding: 46px 24px; }
	.portal-access__story h1 { font-size: 42px; }
	.portal-access__form, .portal-simple-shell { min-height: 0; padding: 28px 16px 45px; }
	.portal-form-card { padding: 26px 20px; }
	.portal-dashboard { padding: 32px 15px 55px; }
	.portal-dashboard__heading { align-items: flex-start; flex-direction: column; }
	.portal-booking-facts { grid-template-columns: 1fr 1fr; }
	.portal-booking-actions { display: grid; }
	.portal-rules { display: grid; }
	.portal-modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
	.portal-name-grid { grid-template-columns: 1fr; }
	.portal-booking-facts { grid-template-columns: 1fr; }
	.portal-dashboard__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.portal-dashboard__actions a { padding-left: 9px; padding-right: 9px; }
}