.elementor-2221 .elementor-element.elementor-element-25ace4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;border-style:solid;--border-style:solid;border-width:15px 15px 15px 15px;--border-top-width:15px;--border-right-width:15px;--border-bottom-width:15px;--border-left-width:15px;border-color:#F8F8F8;--border-color:#F8F8F8;--border-radius:30px 30px 30px 30px;--margin-top:-55px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-2221 .elementor-element.elementor-element-d3eae3a > .elementor-widget-container{border-radius:15px 15px 15px 15px;}.elementor-2221 .elementor-element.elementor-element-1593f08{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#DDDDDD;--border-color:#DDDDDD;--padding-top:20px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-2221 .elementor-element.elementor-element-0f04075{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2221 .elementor-element.elementor-element-3e5c718{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2221 .elementor-element.elementor-element-3e5c718 .elementor-heading-title{font-family:var( --e-global-typography-ce4a5ec-font-family ), Sans-serif;font-size:var( --e-global-typography-ce4a5ec-font-size );}.elementor-2221 .elementor-element.elementor-element-bdc9fbc{width:auto;max-width:auto;}.elementor-2221 .elementor-element.elementor-element-bdc9fbc > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2221 .elementor-element.elementor-element-bdc9fbc.elementor-element{--align-self:flex-start;}.elementor-2221 .elementor-element.elementor-element-bdc9fbc .info-box-title{color:var( --e-global-color-1ca6461 );}.elementor-2221 .elementor-element.elementor-element-bdc9fbc .info-box-inner{color:var( --e-global-color-1ca6461 );font-size:20px;font-weight:700;}.elementor-2221 .elementor-element.elementor-element-131ff94{width:auto;max-width:auto;}.elementor-2221 .elementor-element.elementor-element-131ff94 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2221 .elementor-element.elementor-element-131ff94.elementor-element{--align-self:flex-start;}.elementor-2221 .elementor-element.elementor-element-131ff94 .info-box-title{color:var( --e-global-color-1ca6461 );}.elementor-2221 .elementor-element.elementor-element-131ff94 .info-box-inner{color:var( --e-global-color-1ca6461 );font-size:20px;font-weight:700;}.elementor-2221 .elementor-element.elementor-element-670f01e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-2221 .elementor-element.elementor-element-0a86be5{padding:0px 0px 0px 0px;border-style:none;}.elementor-2221 .elementor-element.elementor-element-a3c9a1c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:40px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;}.elementor-2221 .elementor-element.elementor-element-1508543{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:80px;}.elementor-2221 .elementor-element.elementor-element-be11d8a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group{padding-right:calc( 24px/2 );padding-left:calc( 24px/2 );margin-bottom:12px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-form-fields-wrapper{margin-left:calc( -24px/2 );margin-right:calc( -24px/2 );margin-bottom:-12px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group.recaptcha_v3-bottomleft, .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-mark-required .elementor-field-label:after{color:var( --e-global-color-45529a8 );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group > label{font-family:var( --e-global-typography-2b8d111-font-family ), Sans-serif;font-size:var( --e-global-typography-2b8d111-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-type-html{padding-bottom:0px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group .elementor-field, .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-subgroup label{font-family:var( --e-global-typography-92a50e2-font-family ), Sans-serif;font-size:var( --e-global-typography-92a50e2-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-button[type="submit"]{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-message{font-family:var( --e-global-typography-92a50e2-font-family ), Sans-serif;font-size:var( --e-global-typography-92a50e2-font-size );}.elementor-2221 .elementor-element.elementor-element-e5307ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--flex-wrap:wrap;}@media(min-width:769px){.elementor-2221 .elementor-element.elementor-element-670f01e{--width:45%;}.elementor-2221 .elementor-element.elementor-element-1508543{--width:55%;}.elementor-2221 .elementor-element.elementor-element-e5307ca{--width:45%;}}@media(max-width:1024px){.elementor-2221 .elementor-element.elementor-element-3e5c718 .elementor-heading-title{font-size:var( --e-global-typography-ce4a5ec-font-size );}.elementor-2221 .elementor-element.elementor-element-a3c9a1c{--margin-top:20px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-2221 .elementor-element.elementor-element-1508543{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group > label{font-size:var( --e-global-typography-2b8d111-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group .elementor-field, .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-subgroup label{font-size:var( --e-global-typography-92a50e2-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-message{font-size:var( --e-global-typography-92a50e2-font-size );}}@media(max-width:768px){.elementor-2221 .elementor-element.elementor-element-3e5c718 .elementor-heading-title{font-size:var( --e-global-typography-ce4a5ec-font-size );}.elementor-2221 .elementor-element.elementor-element-a3c9a1c{--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-2221 .elementor-element.elementor-element-1508543{--padding-top:48px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2221 .elementor-element.elementor-element-be11d8a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group > label{font-size:var( --e-global-typography-2b8d111-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-group .elementor-field, .elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-field-subgroup label{font-size:var( --e-global-typography-92a50e2-font-size );}.elementor-2221 .elementor-element.elementor-element-be11d8a .elementor-message{font-size:var( --e-global-typography-92a50e2-font-size );}}/* Start custom CSS for wd_infobox, class: .elementor-element-bdc9fbc */.elementor-2221 .elementor-element.elementor-element-bdc9fbc img {
filter: brightness(0.05);
transform: translateY(1px);
}/* End custom CSS */
/* Start custom CSS for wd_infobox, class: .elementor-element-131ff94 */.elementor-2221 .elementor-element.elementor-element-131ff94 img {
filter: brightness(0.05);
transform: scale(0.80) translateY(1px);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a3c9a1c *//* ============================================
TP KASTES — Quote Form Custom Styles v4
============================================ */
/* ---------- HERO ---------- */
.tpk-hero-meta {
text-align: right;
font-size: 13px;
color: #777;
line-height: 1.6;
}
.tpk-hero-meta strong {
display: block;
color: #222;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
@media (max-width: 768px) {
.tpk-hero-meta { text-align: left; }
}
/* ---------- SECTION DIVIDERS ---------- */
.tpk-section-divider {
display: flex !important;
align-items: flex-start;
gap: 20px;
padding: 36px 0 28px 0;
border-top: 1px solid #ddd;
margin-top: 0 !important;
}
.tpk-section-divider[data-section="01"] {
border-top: none;
padding-top: 0;
}
.tpk-section-number-wrap {
min-width: 64px;
position: relative;
}
.tpk-section-number {
font-size: 44px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: #222;
font-variant-numeric: tabular-nums;
display: block;
}
.tpk-section-number-wrap::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 28px;
height: 3px;
background: #ED9942;
}
.tpk-section-meta { padding-top: 4px; }
.tpk-section-title {
font-size: 22px !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
line-height: 1.15 !important;
margin: 0 0 6px 0 !important;
color: #222 !important;
}
.tpk-section-subtitle {
font-size: 13px;
color: #777;
margin: 0;
font-weight: 500;
line-height: 1.5;
max-width: 440px;
}
/* ---------- FORM INPUTS ---------- */
#tpk-quote-form .elementor-field-group {
margin-bottom: 16px;
}
#tpk-quote-form .elementor-field-label {
display: block;
margin-bottom: 5px !important;
font-weight: 600 !important;
color: #222 !important;
font-size: 0.95rem !important;
text-transform: none;
letter-spacing: normal;
}
#tpk-quote-form .elementor-field-label .elementor-mark-required {
color: #ED9942 !important;
margin-left: 2px;
}
#tpk-quote-form input[type="text"],
#tpk-quote-form input[type="email"],
#tpk-quote-form input[type="tel"],
#tpk-quote-form input[type="number"],
#tpk-quote-form textarea {
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 0 !important;
background: #fff !important;
padding: 12px 14px !important;
color: #222 !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
box-shadow: none !important;
}
#tpk-quote-form input::placeholder,
#tpk-quote-form textarea::placeholder {
color: #777;
opacity: 1;
}
#tpk-quote-form input:focus,
#tpk-quote-form textarea:focus {
border-color: #c97a42 !important;
box-shadow: 0 0 0 3px rgba(201,122,66,0.15) !important;
outline: none !important;
}
#tpk-quote-form input[type="number"]::-webkit-inner-spin-button,
#tpk-quote-form input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
#tpk-quote-form input[type="number"] {
-moz-appearance: textfield;
}
/* CM UNIT — CSS background, left-aligned text */
#tpk-quote-form .elementor-field-group-length input[type="number"],
#tpk-quote-form .elementor-field-group-width input[type="number"],
#tpk-quote-form .elementor-field-group-height input[type="number"] {
padding-right: 42px !important;
text-align: left !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
}
/* Select dropdown */
#tpk-quote-form select {
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 0 !important;
background: #fff !important;
padding: 12px 40px 12px 14px !important;
color: #222 !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
appearance: none !important;
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23222' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#tpk-quote-form select:focus {
border-color: #c97a42 !important;
box-shadow: 0 0 0 3px rgba(201,122,66,0.15) !important;
outline: none !important;
}
/* ---------- RADIO CARDS ---------- */
#tpk-quote-form .elementor-field-type-radio .elementor-field-subgroup {
display: grid !important;
gap: 8px !important;
grid-template-columns: 1fr 1fr;
}
#tpk-quote-form .elementor-field-group-dimension_type .elementor-field-subgroup,
#tpk-quote-form .elementor-field-group-padding .elementor-field-subgroup,
#tpk-quote-form .elementor-field-group-lid .elementor-field-subgroup {
grid-template-columns: 1fr 1fr 1fr !important;
}
@media (max-width: 580px) {
#tpk-quote-form .elementor-field-type-radio .elementor-field-subgroup {
grid-template-columns: 1fr !important;
}
}
#tpk-quote-form .elementor-field-option {
position: relative;
display: flex !important;
align-items: center;
gap: 12px;
padding: 14px 16px !important;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
margin: 0 !important;
}
#tpk-quote-form .elementor-field-option:hover {
border-color: #c97a42;
}
#tpk-quote-form .elementor-field-option input[type="radio"] {
appearance: none !important;
-webkit-appearance: none !important;
width: 16px !important;
height: 16px !important;
border: 1.5px solid #ddd !important;
border-radius: 50% !important;
margin: 0 !important;
flex-shrink: 0;
position: relative;
cursor: pointer;
transition: border-color 0.2s ease;
background: transparent !important;
}
#tpk-quote-form .elementor-field-option input[type="radio"]::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: #ED9942;
opacity: 0;
transform: scale(0.3);
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#tpk-quote-form .elementor-field-option input[type="radio"]:checked {
border-color: #ED9942 !important;
border-width: 2px !important;
}
#tpk-quote-form .elementor-field-option input[type="radio"]:checked::after {
opacity: 1;
transform: scale(1);
}
#tpk-quote-form .elementor-field-option:has(input:checked) {
border-color: #c97a42;
background: rgba(237, 153, 66, 0.04);
box-shadow: 0 0 0 3px rgba(201,122,66,0.08);
}
#tpk-quote-form .elementor-field-option label {
font-size: 0.9rem !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
color: #222 !important;
cursor: pointer;
flex: 1;
margin: 0 !important;
}
/* ---------- SUBMIT BUTTON ---------- */
#tpk-quote-form .elementor-button {
background: #222 !important;
color: #fff !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 28px !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
transition: background 0.2s ease, transform 0.1s ease !important;
width: auto !important;
min-width: 220px;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
#tpk-quote-form .elementor-button:hover {
background: #444 !important;
transform: translateY(-1px);
}
#tpk-quote-form .elementor-button::after {
content: '→';
font-size: 1.1em;
transition: transform 0.2s ease;
}
#tpk-quote-form .elementor-button:hover::after {
transform: translateX(3px);
}
@media (max-width: 580px) {
#tpk-quote-form .elementor-button {
width: 100% !important;
}
}
#tpk-quote-form .field-hint,
#tpk-quote-form .elementor-field-description {
display: none !important;
}
/* ---------- MESSAGES ---------- */
#tpk-quote-form .elementor-message-success {
padding: 16px 20px;
background: rgba(237, 153, 66, 0.08);
border-left: 3px solid #ED9942;
font-weight: 600;
color: #222;
border-radius: 0 !important;
margin-top: 20px;
}
#tpk-quote-form .elementor-message-danger {
padding: 16px 20px;
background: #fef1f1;
border-left: 3px solid #e04444;
font-weight: 600;
color: #222;
border-radius: 0 !important;
margin-top: 20px;
}
/* ============================================
3D VISUALIZATION STYLES
============================================ */
.tpk-visual-card {
background: #1a1a1a;
color: #fff;
padding: 32px;
position: relative;
overflow: hidden;
font-family: inherit;
border: 1px solid #2a2a2a;
}
.tpk-visual-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 40%, rgba(237,153,66,0.08) 0%, transparent 55%),
radial-gradient(circle at 50% 70%, rgba(237,153,66,0.04) 0%, transparent 50%);
pointer-events: none;
}
.tpk-visual-header {
position: relative;
display: flex;
align-items: center;
margin-bottom: 8px;
z-index: 2;
}
.tpk-visual-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ED9942;
display: inline-flex;
align-items: center;
gap: 8px;
}
.tpk-visual-label::before {
content: '';
width: 6px;
height: 6px;
background: #ED9942;
border-radius: 50%;
animation: tpkPulse 2s ease-in-out infinite;
}
@keyframes tpkPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.tpk-visual-title {
position: relative;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 32px 0;
z-index: 2;
color: #fff;
}
/* 3D Scene */
.tpk-scene {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.85;
perspective: 1400px;
perspective-origin: 50% 40%;
margin-bottom: 28px;
z-index: 2;
cursor: grab;
}
.tpk-scene:active {
cursor: grabbing;
}
/* Scene inner — starts HIDDEN, transitions only when ready */
.tpk-scene-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-28deg);
opacity: 0;
}
.tpk-scene-inner.tpk-initialized {
opacity: 0.2;
transition: opacity 0.4s ease;
}
.tpk-scene-inner.tpk-initialized.active {
opacity: 1;
}
.tpk-scene-inner.tpk-interactive {
transition: transform 0.15s ease-out;
}
.tpk-scene-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.4);
font-size: 12px;
font-weight: 500;
text-align: center;
pointer-events: none;
z-index: 4;
padding: 0 20px;
transition: opacity 0.4s ease;
}
.tpk-scene-empty.hidden { opacity: 0; }
.tpk-scene-empty svg {
width: 32px;
height: 32px;
margin-bottom: 14px;
opacity: 0.4;
color: #ED9942;
}
.tpk-scene-empty strong {
display: block;
color: rgba(255,255,255,0.75);
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.tpk-crate-shadow {
position: absolute;
left: 50%;
top: 65%;
transform: translate(-50%, -50%);
width: 60%;
height: 14%;
background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
filter: blur(15px);
z-index: 1;
}
/* Crate — no transition until ready */
.tpk-crate {
position: absolute;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform: translate(-50%, -50%);
}
.tpk-crate.tpk-ready {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tpk-face {
position: absolute;
background: linear-gradient(180deg, #2e2e2e 0%, #1f1f1f 100%);
border: 1px solid rgba(255,255,255,0.08);
backface-visibility: hidden;
}
.tpk-crate.tpk-ready .tpk-face {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tpk-face::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(255,255,255,0.04);
pointer-events: none;
}
.tpk-crate.tpk-ready .tpk-face::before {
transition: all 0.3s ease;
}
.tpk-face .corner {
position: absolute;
width: 16px;
height: 16px;
background: linear-gradient(135deg, #e8e8e8 0%, #a8a8a8 50%, #6a6a6a 100%);
box-shadow: inset 0 0 2px rgba(0,0,0,0.4), 0 0 3px rgba(0,0,0,0.3);
}
.tpk-face .corner.tl { top: -1px; left: -1px; }
.tpk-face .corner.tr { top: -1px; right: -1px; }
.tpk-face .corner.bl { bottom: -1px; left: -1px; }
.tpk-face .corner.br { bottom: -1px; right: -1px; }
.tpk-face.front .handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 14px;
background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
border: 1px solid rgba(0,0,0,0.5);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.4);
}
.tpk-face.top::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 10%;
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tpk-crate[data-material="plywood-7"] .tpk-face {
background: linear-gradient(180deg, #2d2d2d 0%, #1e1e1e 100%);
}
.tpk-crate[data-material="plywood-9"] .tpk-face {
background: linear-gradient(180deg, #333 0%, #222 100%);
border-color: rgba(255,255,255,0.12);
}
.tpk-crate[data-material="plastic"] .tpk-face {
background: linear-gradient(180deg, #252525 0%, #151515 100%);
}
.tpk-crate[data-material="plastic"] .tpk-face::before {
background-image:
linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%);
background-size: 8px 8px;
}
.tpk-crate.has-padding .tpk-face::before {
border-color: rgba(237, 153, 66, 0.3);
box-shadow: inset 0 0 16px rgba(237, 153, 66, 0.1);
}
.tpk-wheels {
position: absolute;
transform-style: preserve-3d;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.tpk-wheels.visible { opacity: 1; }
.tpk-wheel {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #555 0%, #0a0a0a 100%);
border: 1.5px solid #000;
box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 -2px 3px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.08);
}
.tpk-wheel::after {
content: '';
position: absolute;
inset: 30%;
border-radius: 50%;
background: radial-gradient(circle, #2a2a2a 0%, #0a0a0a 100%);
border: 1px solid rgba(255,255,255,0.05);
}
.tpk-dim-annotations {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
opacity: 0;
transition: opacity 0.3s ease;
}
.tpk-dim-annotations.visible { opacity: 1; }
.tpk-dim-annotation {
position: absolute;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: #ED9942;
font-variant-numeric: tabular-nums;
white-space: nowrap;
background: rgba(26,26,26,0.9);
padding: 5px 10px;
border: 1px solid rgba(237,153,66,0.4);
backdrop-filter: blur(4px);
}
.tpk-dim-annotation.length { bottom: 14%; right: 10%; }
.tpk-dim-annotation.width { bottom: 18%; left: 8%; }
.tpk-dim-annotation.height { top: 28%; right: 6%; }
/* Specs with status loader */
.tpk-specs {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 22px;
}
.tpk-specs-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
gap: 16px;
}
.tpk-specs-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin: 0;
}
.tpk-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
transition: color 0.3s ease;
}
.tpk-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transition: background 0.3s ease;
position: relative;
flex-shrink: 0;
}
.tpk-status.updating { color: #ED9942; }
.tpk-status.updating .tpk-status-dot {
background: #ED9942;
animation: tpkStatusPulse 0.8s ease-in-out infinite;
}
@keyframes tpkStatusPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(237,153,66,0.6);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 6px rgba(237,153,66,0);
transform: scale(1.15);
}
}
.tpk-status.ready { color: rgba(74, 222, 128, 0.9); }
.tpk-status.ready .tpk-status-dot {
background: #4ade80;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.tpk-status-text { line-height: 1; }
.tpk-spec-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
}
.tpk-spec {
display: flex;
flex-direction: column;
gap: 4px;
}
.tpk-spec-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.tpk-spec-value {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
transition: color 0.2s ease;
}
.tpk-spec-value.changed { animation: tpkFlash 0.6s ease; }
@keyframes tpkFlash {
0% { color: #ED9942; }
100% { color: #fff; }
}
@media (max-width: 1024px) {
.tpk-visual-card {
margin-top: 40px;
}
}
/* FORM DISCLAIMER */
.tpk-form-disclaimer {
font-size: 13px;
color: #777;
line-height: 1.6;
font-weight: 400;
max-width: 560px;
margin: 12px 0 0px 0;
padding: 0 0 0 26px;
position: relative;
letter-spacing: 0;
}
.tpk-form-disclaimer::before {
content: '';
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 16px 16px;
}
.tpk-form-disclaimer a {
color: #222;
text-decoration: none;
font-weight: 600;
border-bottom: 1.5px solid #ED9942;
padding-bottom: 1px;
transition: all 0.2s ease;
}
.tpk-form-disclaimer a:hover {
color: #ED9942;
border-bottom-color: #c97a42;
}
/* ── Lid split line ── */
.tpk-lid-line {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: rgba(237,153,66,0.55);
pointer-events: none;
display: none;
transition: top 0.5s cubic-bezier(0.4,0,0.2,1);
}
.tpk-crate.has-split .tpk-lid-line { display: block; }
/* ── Extra annotations ── */
.tpk-dim-annotation.lid-h {
top: 12%;
right: 6%;
color: #ED9942;
border-color: rgba(237,153,66,0.5);
}
.tpk-dim-annotation.base-h {
top: 54%;
right: 6%;
color: rgba(255,255,255,0.6);
border-color: rgba(255,255,255,0.15);
background: rgba(26,26,26,0.85);
}
/* ── cm suffix on new fields ── */
#tpk-quote-form .elementor-field-group-base_height input[type="number"],
#tpk-quote-form .elementor-field-group-lid_height input[type="number"] {
padding-right: 42px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
}
#tpk-quote-form .elementor-field-group-base_height input[type="number"],
#tpk-quote-form .elementor-field-group-lid_height input[type="number"] {
padding-right: 42px !important;
text-align: left !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
}/* End custom CSS */