/* ===================================== */
/* ========== Purchase Summary ========= */
/* ===================================== */

.summary-location-profile-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--margin-xxl);
  flex-direction: column;
  gap: var(--gap-xs);
}

.summary-location-profile {
  display: flex;
  gap: var(--gap-md);
  line-height: var(--line-height-body);
  font-size: var(--font-size-label);
  align-items: flex-start;
  text-align: left;
  justify-content: flex-start;
}

.summary-location-profile-img {
  display: block;
  border-radius: var(--border-radius-md);
  width: var(--summary-location-image-width);
  height: var(--summary-location-image-width);
  object-fit: cover;
  object-position: top left;  
}

.summary-location-crop-box {
  display: block;
  width: var(--summary-location-image-width);
  height: var(--summary-location-image-width);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--border-radius-md);
  padding-top: var(--gap-sm);
}

.summary-location-meta,
.summary-location-address {
  display: inline-flex;
  flex-direction: column;
  line-height: var(--line-height-body);
  font-size: var(--font-size-label);
}

.summary-location-meta h3,
.summary-location-address h3 {
  font-size: var(--font-size-heading-h3);
  color: var(--text-header-neutral);
}

.summary-location-address {
  color: var(--text-subtitle);
  text-align: start;
}

.summary-container .summary-session-bookings-block .session-details {  
  display: flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
  row-gap: var(--gap-xs);
  column-gap: var(--gap-md);
  white-space: nowrap;
  flex-wrap: wrap;
  line-height: var(--line-height-body);
  color: var(--text-label-neutral);
  font-weight: 400;
}

.summary-meta {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.session-details span.label {
  display: inline-flex;
  gap: var(--gap-md);
  color: var(--text-label-neutral);
  white-space: nowrap;
  font-weight: 600;
}

.session-details span.sublabel {
  display: inline-flex;
  gap: var(--gap-md);	
  color: var(--text-label-light);
  white-space: wrap;
}

.session-details-summary-header {  
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  color: var(--text-header-neutral);
  font-size: var(--font-size-heading-h3);
  font-weight: 600;
}

.session-details-summary-subtotal-price {
  font-weight: 600 !important;
  color: var(--text-price);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.summary-container-wrapper {  
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--screen-padding);
  gap: var(--gap-xxxl);
}

.summary-container {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.summary-container-divider {
  border: none;
  border-top: 1px solid var(--text-divider);
  margin: var(--padding-xxl) 0;
}

.summary-container-total {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  font-weight: 600;

}

.summary-container-total-content {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.summary-container-total span {
  color: var(--text-header-neutral);
  font-size: var(--font-size-price);
}

#shopping-cart-modal .modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--screen-min-width);
}

#shopping-cart-modal-content .modal-content {
  overflow-y: unset;
  padding-right: 0px;
}

/* Logout avatar container */
.logout-avatar-container {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	position: relative;
	transition: all 0.25s ease;
	min-height: var(--space-2-5);
}

.logout-avatar-container.hidden {
	display: none;
}

/* Avatar image */
.logout-avatar {
	width: var(--space-2-5);
	height: var(--space-2-5);
	border-radius: var(--border-radius-circle);
	object-fit: cover;
	cursor: pointer;
	border: 2px solid var(--button-neutral-border);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.logout-avatar:hover {
	transform: scale(1.05);
	border-color: var(--button-hover-border);
}

/* Controls (hidden until avatar clicked) */
.logout-controls {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
	opacity: 0;
	transform: translateX(-10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	max-width: 0;
	min-height: var(--space-2-5);
    overflow: hidden;
    flex-shrink: 1;
}

.logout-avatar-container.active .logout-controls {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	max-width: 250px;
	padding-right: var(--padding-xs);
}

.logout-text {
	font-weight: 600;
	color: var(--text-header-neutral);
	text-wrap: nowrap;
}

/* Buttons */
.logout-btn {
	min-width: var(--space-2);
	min-height: var(--space-2);
	border-radius: var(--border-radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	transition: transform 0.2s ease;
}

.logout-btn img {
	width: var(--space-1);
	height: var(--space-1);
}

.logout-btn.confirm img,
.logout-btn.cancel img {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.logout-btn.confirm::after,
.logout-btn.cancel::after {
  content: '';
  position: absolute;
  background-color: #FFF;
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.logout-btn.confirm::after {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  mask-image: url('../../icons/success_icon.svg');
  -webkit-mask-image: url('../../icons/success_icon.svg');
}

.logout-btn.cancel::after {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  mask-image: url('../../icons/cancel_icon.svg');
  -webkit-mask-image: url('../../icons/cancel_icon.svg');
}

.logout-btn.confirm {
	background: var(--green-gradient);
}

.logout-btn.cancel {
	background: var(--red-gradient);
}

.logout-btn:hover {
	transform: scale(1.1);
}