/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 hr {
	border: none;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
 }

 a {
	color: var(--blue);
	text-decoration: underline;
 }

 .hidden {
	display: none;
 }

 .lang-short {
	text-transform: uppercase;
 }

.card { 
	border: 1px solid #e0e7ee; 
	border-radius: 18px; 
	background: #fff;
	box-shadow: 0 15px 42px rgba(9,43,89,.08);
	padding: 34px; 
	margin: 34px 0; 
}

.card > .title,
.card-title,
dialog .dialog-content .title {
	margin: 0;
	padding: 0;
	font-size: 1.85rem;
	font-weight: bold;
	line-height: 1.12;
  	letter-spacing: -.035em;
	color: var(--navy);
	margin-bottom: 1rem;
}

.card > .title-with-subtitle {
	margin-bottom: 0;
}
.card > .subtitle {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.12;
  	letter-spacing: -.035em;
	color: var(--blue);
	margin-bottom: 1rem;
}

.field.checkbox-field {
	margin-top: 0.1em;
}
.field:not(.checkbox-field) label {
	display: block;
}
.field label {
	color: var(--ink);
}
.field:not(.checkbox-field) label.required::after,
.field.checkbox-field label.required::before,
.required-description::before {
	content: '*';
	color: red;
}
.field label.required::after {
	margin-left: 5px;
}
.field.checkbox-field label.required::before,
.required-description::before {
	margin-right: 5px;
}
.required-description {
	margin-top: 1em;
	font-style: italic;
}

.field input:not([type="submit"]):not([type="checkbox"]) {
	background-color: white;
	border: var(--muted) 1px solid;
	border-radius: 3px;
	width: 100%;
	padding: 4px;
}

dialog .dialog-content .dialog-options button,
.field input[type="submit"] {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 12px 26px rgba(15,103,177,.23);
	border: var(--muted) 1px solid;
	border-radius: 3px;
	width: 100%;
	padding: 4px;
	cursor: pointer;

	/* display: inline-flex; */
	/* align-items: center; */
	/* justify-content: center; */
	/* gap: 38px; */
	/* padding: 0 30px; */
	/* text-transform: uppercase; */
	min-height: 54px;
	border-radius: 5px;
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .02em;
	transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
dialog .dialog-content .dialog-options button[disabled],
.field input[type="submit"][disabled] {
	background: var(--muted);
	color: var(--line);
}

dialog .dialog-content .dialog-options button:hover:not([disabled]),
.field input[type="submit"]:hover:not([disabled]) {
	background: var(--blue-dark);
	box-shadow: 0 15px 34px rgba(15,103,177,.3);  
	transform: translateY(-2px);
}

.field select {
	background-color: var(--sky);
	border: var(--blue-dark) 1px solid;
	border-radius: 3px;
	padding: 4px;
	width: 100%;
	cursor: pointer;
}
.field select > option {
	cursor: pointer;
}

.field > .status {
	color: red;
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1;
}

.order .order-item {
	color: var(--navy);
	font-size: 0.9rem;
}

.order .order-item .order-item-price {
	float: right;
}

.order .order-item-subtotal,
.order .order-item-total,
.order .order-item-vat {
	font-weight: bold;
} 

dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	background-color: unset;
	opacity: 1;
}

dialog .dialog-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 990;
	background-color: var(--ink);
	opacity: 0.5;
}

dialog .dialog-content {
	position: absolute;
	color: var(--ink);
	background-color: white;
	min-width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
	min-height: 200px;
	z-index: 999;
	opacity: 1;
	
	border: 1px solid var(--muted);
	border-radius: 20px;
	padding: 20px;
	
    top: 30%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

dialog .dialog-content .dialog-options {
	bottom: 0;
	position: absolute;
	display: flex;  width: calc(100% - 40px);
	gap: 20px;
	margin: 20px 0;
}
dialog .dialog-content .dialog-options > * {
	flex: 1;
}

.product-price-details .product-price {
	font-size: 1rem;
	font-weight: bold;
}

a.sketchup-lockup {
	color: unset;
	text-decoration: unset;
}

.simple-message {
	min-height: 70vh;
}
.simple-message h1 {
	margin: 0 0 12px;
	font-size: clamp(2.35rem, 4vw, 4rem);
}

.dropdown > .dropdown-menu {
  position: absolute;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #FFF;
  display: none;
}

.dropdown > .dropdown-menu.show {
	display: block
}

.dropdown > .dropdown-menu > .dropdown-item {
	padding: 0.5rem;  
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--navy);
}

.dropdown > .dropdown-menu > .dropdown-item:hover {
	background-color: var(--ink);
	color: #FFF;
}

.no_text_margin,
.no_text_margin p {
	margin: 0.1rem;
}

.legal-document table {
	border-collapse: collapse;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
.legal-document table thead {
	border-bottom: 1px solid black;
}
.legal-document table th {
	text-align: left;
}

.nav-item a.dropdown-toggle {
  display: flex; 
  align-items: center; 
  gap: 7px; 
  font-size: .85rem; 
  font-weight: 700; 
  color: var(--navy); 
}

.nav-item a.dropdown-toggle svg {
	width: 12px;
}

/* CSS For zoomable images */
.zoomable-image {
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.zoomable-image:hover {
  opacity: 0.9;
}


.image-zoom-dialog {
  width: fit-content;
  height: fit-content;

  max-width: 92vw;
  max-height: 92vh;

  /* Space for close button */
  padding: 42px 10px 10px;

  border: 0;
  border-radius: 4px;
  background: #fff;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

.image-zoom-dialog::backdrop {
  background: rgba(9, 32, 65, 0.78);
}

.image-zoom-large {
  display: block;

  width: auto;
  height: auto;

  max-width: calc(92vw - 20px);
  max-height: calc(92vh - 62px);

  object-fit: contain;
}

.image-zoom-close {
  position: absolute;
  top: 6px;
  right: 8px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: 0;
  border-radius: 50%;

  background: #082d60;
  color: #fff;

  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.image-zoom-close:hover {
  background: #061f43;
}