.main-body {
padding: 20px;
}
.cpss-checkout-button-wrapper {
width: 100%;
} .trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only {
padding: 0px;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only .coolpenguin-shipping-system-container {
border: 0px;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only .coolpenguin-shipping-system-header {
border-radius: 10px;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only h2.coolpenguin-shipping-system-title {
font-size: 16px;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only p.coolpenguin-shipping-system-subtitle {
font-size: 15px;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only .coolpenguin-shipping-system-header {
padding: 0.7rem 1rem;
}
.trip-details-shortcode-checkout .coolpenguin-shipping-system-widget.cpss-trips-only h2.coolpenguin-shipping-system-title {
margin-bottom: 4px;
}
p.step-description {
line-height: 1.4em;
margin-top: 5px;
}
.coolpenguin-shipping-system-trip-title h4 {
line-height: 1.4em;
}
.coolpenguin-shipping-system-pickup-badge {
line-height: 1.3em;
}
.cpss-checkout-shipping-value.disabled {
background: #eaecef;
} .coolpenguin-shipping-system-trip-products {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.coolpenguin-shipping-system-product-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
background-color: #f9fafb;
border-radius: 6px;
transition: background-color 0.2s;
}
.coolpenguin-shipping-system-product-item:hover {
background-color: #f0f9ff;
}
.coolpenguin-shipping-system-product-image {
flex-shrink: 0;
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #e5e7eb;
background-color: #fff;
}
.coolpenguin-shipping-system-product-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.coolpenguin-shipping-system-product-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.coolpenguin-shipping-system-product-name {
font-size: 15px;
font-weight: 600;
color: #1f2937;
text-decoration: none;
display: block;
line-height: 1.35;
}
.coolpenguin-shipping-system-product-name:hover {
color: #1b9cba;
text-decoration: underline;
}
.coolpenguin-shipping-system-product-quantity {
font-weight: 500;
color: #4b5563;
}
.coolpenguin-shipping-system-product-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
} .coolpenguin-shipping-system-slot-badge,
.coolpenguin-shipping-system-delivery-badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
}
.coolpenguin-shipping-system-slot-badge {
background-color: #e0f2fe;
color: #0369a1;
}
.coolpenguin-shipping-system-badge-delivery {
background-color: #dcfce7;
color: #15803d;
}
.coolpenguin-shipping-system-badge-pickup {
background-color: #ffedd5;
color: #9a3412;
} .coolpenguin-shipping-system-pickup-items {
margin-top: 12px;
}
.coolpenguin-shipping-system-pickup-badge {
display: flex;
align-items: center;
background-color: #ffedd5;
color: #9a3412;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 600;
}
.coolpenguin-shipping-system-pickup-badge .coolpenguin-icon {
width: 16px;
height: 16px;
margin-right: 6px;
}
.coolpenguin-shipping-system-pickup-notice-text {
margin-top: 12px;
font-size: 0.95rem;
color: #9a3412;
padding: 10px;
background-color: #fffbeb;
border: 1px solid #fef3c7;
border-radius: 6px;
line-height: 1.5;
} .coolpenguin-shipping-system-widget {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
max-width: 100%;
padding: 20px;
}
.left-n-right {
display: flex;
flex-direction: row;
gap: 2rem;
width: 100%;
justify-content: flex-end;
}
.left-n-right > .coolpenguin-shipping-system-simple-form {
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 1;
padding: 0rem;
min-width: 0;
}
.col2-set#customer_details {
background: #f8fafc !important;
padding: 20px;
border-radius: 8px;
}
.left-n-right > .coolpenguin-shipping-system-results-section {
flex-basis: 50%;
flex-shrink: 1;
flex-grow: 0;
border: 1px solid #e2e5e9;
min-width: 0;
border-radius: 6px;
} @media (max-width: 900px) {
.left-n-right {
flex-direction: column;
gap: 0rem;
}
.left-n-right > .coolpenguin-shipping-system-simple-form,
.left-n-right > .coolpenguin-shipping-system-results-section {
flex-basis: auto;
width: 100%;
min-width: 0;
}
}
.coolpenguin-shipping-system-container {
background-color: #ffffff;
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
position: relative;
overflow: hidden;
}
.coolpenguin-shipping-system-container {
position: relative;
min-height: 100px;
overflow: hidden; }
.coolpenguin-shipping-system-container.loading:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.8);
z-index: 10;
}
.coolpenguin-shipping-system-container.loading:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: #333;
border-radius: 50%;
z-index: 11;
animation: coolpenguin-spinner 0.6s linear infinite;
}
@keyframes coolpenguin-spinner {
to {
transform: rotate(360deg);
}
} .coolpenguin-shipping-system-container.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -20px;
margin-left: -20px;
border: 4px solid #fff;
border-top-color: #083046;
border-radius: 50%;
z-index: 101;
animation: spin 1s linear infinite;
}
.coolpenguin-shipping-system-container.loading::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 12%);
z-index: 100;
} .coolpenguin-shipping-system-header {
background-color: #083046;
padding: 1.25rem;
color: #ffffff;
text-align: center;
}
.coolpenguin-shipping-system-title {
font-size: 17px;
color:#fff;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.coolpenguin-shipping-system-subtitle {
color: #e0f2fe;
margin: 0;
font-size: 16px;
} .coolpenguin-icon {
width: 20px;
height: 20px;
stroke-width: 2;
vertical-align: middle;
margin-right: 0.5rem;
} .coolpenguin-shipping-system-simple-form {
padding: 1.5rem;
} .coolpenguin-shipping-system-price-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: #f0f9ff;
border-radius: 0.5rem;
border: 1px solid #bae6fd;
}
.coolpenguin-shipping-system-price-badge {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
color: #0c4a6e;
margin-bottom: 0.5rem;
}
.coolpenguin-shipping-system-additional-info {
font-size: 0.875rem;
color: #0369a1;
text-align: center;
line-height: 1.5;
} .coolpenguin-shipping-system-form-group {
margin-bottom: 1.25rem;
position: relative;
}
.coolpenguin-shipping-system-form-group label {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.coolpenguin-shipping-system-input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
background-color: #ffffff;
transition: border-color 0.2s ease;
}
.coolpenguin-shipping-system-input:focus {
outline: none;
border-color: #bae6fd;
box-shadow: 0 0 0 3px rgb(186 230 253 / 42%);
}
.coolpenguin-shipping-system-input:disabled,
.coolpenguin-shipping-system-input[readonly] {
background-color: #e6eaf187;
color: #4b5563;
cursor: not-allowed;
}
.coolpenguin-shipping-system-input-group {
display: flex;
align-items: stretch;
}
.coolpenguin-shipping-system-input-group .coolpenguin-shipping-system-input {
flex: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.coolpenguin-shipping-system-input-suffix {
display: flex;
align-items: center;
padding: 0 1rem;
background-color: #f3f4f6;
border: 2px solid #d1d5db;
border-left: none;
font-size: 1rem;
font-weight: 600;
color: #4b5563;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.coolpenguin-shipping-system-help-text {
font-size: 0.875rem;
color: #6b7280;
margin-top: 0.375rem;
} .coolpenguin-shipping-system-link-button {
display: inline-flex;
align-items: center;
background: none;
border: none;
font-size: 0.875rem;
color: #2563eb;
padding: 0.25rem 0;
cursor: pointer;
transition: color 0.2s;
margin-top: 0.5rem;
}
.coolpenguin-shipping-system-link-button:hover {
color: #1d4ed8;
text-decoration: underline;
}
.coolpenguin-shipping-system-link-button .coolpenguin-icon {
width: 16px;
height: 16px;
} .coolpenguin-shipping-system-alert {
display: flex;
align-items: flex-start;
background-color: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1.25rem;
}
.coolpenguin-shipping-system-alert .coolpenguin-icon {
color: #ea580c;
flex-shrink: 0;
margin-top: 0.125rem;
}
.coolpenguin-shipping-system-alert-content {
color: #9a3412;
font-size: 15px;
font-weight: 500;
} .coolpenguin-shipping-system-calculate-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 15px;
background-color: #1b9cba;
color: #ffffff;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
text-align: center;
}
.coolpenguin-shipping-system-calculate-button:hover {
background-color: #083046;
} .coolpenguin-shipping-system-results-section {
padding: 1.5rem;
background-color: #f8fafc;
border-top: 1px solid #e5e7eb;
}
.coolpenguin-shipping-system-results-header {
margin-bottom: 1rem;
text-align: center;
}
.coolpenguin-shipping-system-results-header h3 {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
} .coolpenguin-shipping-system-summary-card {
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 1.5rem;
}
.coolpenguin-shipping-system-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
}
.coolpenguin-shipping-system-summary-item:last-child {
border-bottom: none;
}
.coolpenguin-shipping-system-summary-label {
font-size: 1rem;
color: #4b5563;
display: flex;
align-items: center;
}
.coolpenguin-shipping-system-summary-value {
font-size: 1rem;
font-weight: 600;
color: #1f2937;
}
.coolpenguin-shipping-system-summary-total {
background-color: #f0fdf4;
}
.coolpenguin-shipping-system-summary-total .coolpenguin-shipping-system-summary-label {
color: #166534;
}
.coolpenguin-shipping-system-summary-total .coolpenguin-shipping-system-summary-value {
color: #166534;
font-weight: 600;
font-size: 1.2rem;
} .coolpenguin-shipping-system-details-section {
margin-bottom: 1rem;
}
.coolpenguin-shipping-system-details-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.75rem;
background-color: #e6eaf1;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
color: #4b5563;
cursor: pointer;
transition: all 0.2s ease;
}
.coolpenguin-shipping-system-details-toggle:hover {
background-color: #e5e7eb;
color: #1f2937;
}
.coolpenguin-shipping-system-trip-details-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.coolpenguin-shipping-system-calculate-button,
.coolpenguin-shipping-system-details-toggle {
position: relative;
overflow: hidden;
cursor: pointer;
transition: background-color 0.3s ease;
}
.coolpenguin-shipping-system-calculate-button:active,
.coolpenguin-shipping-system-details-toggle:active {
transform: translateY(1px);
}
.coolpenguin-shipping-system-trip-details-container.open {
max-height: 2000px; transition: max-height 0.5s ease-in;
}
.coolpenguin-shipping-system-trip-details-container {
margin-top: 8px;
}
.coolpenguin-shipping-system-trip-details {
display: flex;
flex-direction: column;
gap: 1rem;
}
.coolpenguin-shipping-system-no-trips {
text-align: center;
padding: 1rem;
color: #6b7280;
font-style: italic;
} .coolpenguin-shipping-system-trip {
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #e5e7eb;
animation: fadeIn 0.5s ease-out forwards;
}
.coolpenguin-shipping-system-trip-header {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.coolpenguin-shipping-system-trip-title {
display: flex;
align-items: center;
}
.coolpenguin-shipping-system-trip-title h4 {
font-size: 15px;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.coolpenguin-shipping-system-trip-usage {
display: flex;
align-items: center;
gap: 0.75rem;
}
.coolpenguin-shipping-system-trip-usage-bar {
width: 6rem;
height: 0.5rem;
background-color: #e5e7eb;
border-radius: 9999px;
overflow: hidden;
}
.coolpenguin-shipping-system-trip-usage-fill {
height: 100%;
background-color: #10b981;
transition: width 0.3s ease;
}
.coolpenguin-shipping-system-trip-badge {
font-size: 0.875rem;
font-weight: 500;
color: #083046;
}
.coolpenguin-shipping-system-trip-content {
padding: 1rem;
}
.coolpenguin-shipping-system-trip-description {
font-size: 1rem;
color: #4b5563;
} .coolpenguin-shipping-system-pickup-notice {
display: flex;
align-items: flex-start;
background-color: #fff7ed;
border: 1px solid #fed7aa;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1.5rem;
}
.coolpenguin-shipping-system-pickup-notice .coolpenguin-icon {
color: #ea580c;
flex-shrink: 0;
margin-top: 0.125rem;
}
.coolpenguin-shipping-system-pickup-content {
margin-left: 0.75rem;
}
.coolpenguin-shipping-system-pickup-content h4 {
font-size: 1rem;
font-weight: 600;
color: #9a3412;
margin: 0 0 0.375rem 0;
}
.coolpenguin-shipping-system-pickup-content p {
font-size: 1rem;
color: #b45309;
margin: 0;
line-height: 1.5;
} .coolpenguin-shipping-system-status-message {
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.7rem;
background-color: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 0.5rem;
color: #166534;
font-size: 15px;
font-weight: 500;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.coolpenguin-shipping-system-status-message.active {
opacity: 1;
transform: translateY(0);
}
.coolpenguin-shipping-system-status-message .coolpenguin-icon {
color: #16a34a;
} .coolpenguin-shipping-system-loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
display: none;
}
.coolpenguin-shipping-system-spinner {
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
border: 0.375rem solid #e5e7eb;
border-top-color: #3b82f6;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
}
.coolpenguin-shipping-system-loading-text {
font-size: 1rem;
font-weight: 500;
color: #1f2937;
} .coolpenguin-shipping-system-notice {
display: flex;
align-items: flex-start;
margin: 1.5rem 0;
margin-bottom: 0px;
padding: 1rem;
border-radius: 0.5rem;
}
.coolpenguin-shipping-system-pickup-notice {
background-color: #fff7ed;
border: 1px solid #fed7aa;
}
.coolpenguin-shipping-system-delivery-notice {
background-color: #f0f9ff;
border: 1px solid #bae6fd;
}
.coolpenguin-shipping-system-notice-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
margin-right: 1rem;
flex-shrink: 0;
font-size: 1.25rem;
}
.coolpenguin-shipping-system-pickup-notice .coolpenguin-shipping-system-notice-icon {
background-color: #ffedd5;
color: #f97316;
}
.coolpenguin-shipping-system-delivery-notice .coolpenguin-shipping-system-notice-icon {
background-color: #e0f2fe;
color: #0ea5e9;
}
.coolpenguin-shipping-system-notice-content {
flex: 1;
}
.coolpenguin-shipping-system-notice-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.375rem 0;
margin-bottom: 0px;
}
.coolpenguin-shipping-system-pickup-notice .coolpenguin-shipping-system-notice-title {
color: #9a3412;
}
.coolpenguin-shipping-system-delivery-notice .coolpenguin-shipping-system-notice-title {
color: #0c4a6e;
}
.coolpenguin-shipping-system-notice-text {
font-size: 1rem;
margin: 0;
line-height: 1.5;
}
.coolpenguin-shipping-system-pickup-notice .coolpenguin-shipping-system-notice-text {
color: #b45309;
}
.coolpenguin-shipping-system-delivery-notice .coolpenguin-shipping-system-notice-text {
color: #0369a1;
} .coolpenguin-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background-color: #083046;
color: white;
padding: 12px 20px;
border-radius: 4px;
display: flex;
align-items: center;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
z-index: 9999;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
max-width: 90%;
width: auto;
}
.coolpenguin-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.coolpenguin-toast-icon {
margin-right: 10px;
display: flex;
align-items: center;
}
.coolpenguin-toast-icon svg {
width: 20px;
height: 20px;
stroke: white;
}
.coolpenguin-shipping-system-input[type="number"] {
-moz-appearance: textfield;
}
.coolpenguin-shipping-system-input[type="number"]::-webkit-outer-spin-button,
.coolpenguin-shipping-system-input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.shipping-cost-details {
display: block;
font-size: 0.9em;
color: #666;
margin-top: 5px;
font-style: italic;
}
.woocommerce-shipping-methods label {
display: inline-block;
margin-bottom: 5px;
width: 100%;
}
.pac-container {
z-index: 9999 !important;
}
.coolpenguin-shipping-system-summary-note {
margin-top: 10px;
display: flex;
font-size: 14px !important;
flex-direction: column;
font-weight: 500;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 0.7rem 1rem;
color: #0c4a6e;
background-color: #f0f9ff;
border-radius: 0.5rem;
border: 1px solid #bae6fd;
}
.coolpenguin-shipping-system-widget + .coolpenguin-shipping-system-widget {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #eee;
}
.coolpenguin-shipping-system-summary-note svg {
width: 18px;
height: 18px;
margin-right: 10px;
flex-shrink: 0;
margin-top: 2px;
}
.coolpenguin-toast-message {
flex: 1;
font-size: 0.875rem;
line-height: 1.5;
}
.coolpenguin-toast-success {
border-left: 4px solid #16a34a;
}
.coolpenguin-toast-success .coolpenguin-toast-icon {
color: #16a34a;
}
.coolpenguin-toast-error {
background-color: #F44336;
}
.coolpenguin-toast-error {
border-left: 4px solid #dc2626;
}
.coolpenguin-toast-error .coolpenguin-toast-icon {
color: #dc2626;
}
.coolpenguin-toast-info {
border-left: 4px solid #3b82f6;
}
.coolpenguin-toast-info .coolpenguin-toast-icon {
color: #3b82f6;
} @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} @media (max-width: 768px) {
.coolpenguin-shipping-system-title {
font-size: 17px;
}
.coolpenguin-shipping-system-subtitle {
font-size: 15px;
}
.coolpenguin-shipping-system-form-group label {
font-size: 16px;
}
.coolpenguin-shipping-system-input {
padding: 0.75rem;
font-size: 16px;
}
.coolpenguin-shipping-system-input-suffix {
padding: 0 0.75rem;
font-size: 16px;
}
.coolpenguin-shipping-system-calculate-button {
padding: 0.875rem;
font-size: 16px;
}
.coolpenguin-shipping-system-summary-label {
font-size: 16px;
}
.coolpenguin-shipping-system-summary-value {
font-size: 16px;
}
.coolpenguin-shipping-system-summary-total .coolpenguin-shipping-system-summary-value {
font-size: 16px;
}
.coolpenguin-toast {
min-width: auto;
max-width: 90%;
left: 5%;
right: 5%;
}
} @media (prefers-contrast: more) {
.coolpenguin-shipping-system-container {
border: 2px solid #000000;
}
.coolpenguin-shipping-system-header {
background-color: #000000;
}
.coolpenguin-shipping-system-input {
border-color: #000000;
}
.coolpenguin-shipping-system-input-suffix {
border-color: #000000;
background-color: #f8f8f8;
color: #000000;
}
.coolpenguin-shipping-system-calculate-button {
background-color: #000000;
}
.coolpenguin-shipping-system-summary-item {
border-color: #000000;
}
.coolpenguin-shipping-system-summary-label,
.coolpenguin-shipping-system-summary-value {
color: #000000;
}
.coolpenguin-shipping-system-details-toggle {
border-color: #000000;
color: #000000;
}
.coolpenguin-shipping-system-trip {
border-color: #000000;
}
} .unique.cpss-checkout-button-container {
text-align: center;
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 16px;
width: 100%;
} .unique .cpss-back-to-cart {
background: #f3f4f6;
color: #1e293b;
padding: 12px 32px;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
display: block;
width: 100%;
min-width: 120px;
transition: background 0.2s, color 0.2s;
border: 1px solid #cbd5e1;
box-shadow: 0 2px 8px rgba(100, 116, 139, 0.04);
}
.unique .cpss-back-to-cart:hover, .unique .cpss-back-to-cart:focus {
background: #e5e7eb;
}
.unique .cpss-continue-to-checkout {
background: #083046;
color: #fff;
padding: 12px 32px;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
display: block;
width: 100%;
min-width: 120px;
transition: background 0.2s;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
border: none;
}
.unique .cpss-continue-to-checkout:hover, .unique .cpss-continue-to-checkout:focus {
background: #1B9EBC;
color: #fff;
text-decoration: none;
} @media (max-width: 700px) {
.unique.cpss-checkout-button-container {
flex-direction: column;
gap: 16px;
}
.unique .cpss-back-to-cart,
.unique .cpss-continue-to-checkout {
width: 100%;
min-width: 0;
}
} div#cpss-checkout-shipping-notice {
display: flex;
align-items: center;
gap: 12px;
color: #1e293b;
font-weight: 500;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e0e7ef;
padding: 18px 22px;
margin-top: 18px;
box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04);
}
span.shipment-notification {
font-size: 0.9rem;
line-height: 1.6em;
}   .coolpenguin-shipping-system-map-container {
margin-bottom: 20px;
display: none; }
.trip-details-shortcode-checkout {
margin-bottom: 20px;
}
.coolpenguin-shipping-system-map-label {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
.coolpenguin-shipping-system-map-label .coolpenguin-icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
.coolpenguin-shipping-system-map {
height: 250px;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
border: 1px solid #e0e0e0;
}
.coolpenguin-shipping-system-map-help {
font-size: 12px;
color: #666;
margin-top: 4px;
display: flex;
align-items: center;
}
.coolpenguin-shipping-system-map-help::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #4285F4;
border-radius: 50%;
margin-right: 8px;
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
} .coolpenguin-toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 16px;
background-color: #333;
color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
z-index: 10000;
max-width: 300px;
transform: translateY(100px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.coolpenguin-toast.show {
transform: translateY(0);
opacity: 1;
}
.coolpenguin-toast-icon {
margin-right: 12px;
flex-shrink: 0;
}
.coolpenguin-toast-icon svg {
width: 20px;
height: 20px;
stroke-width: 2px;
}
.coolpenguin-toast-message {
font-size: 14px;
line-height: 1.4;
}
.coolpenguin-toast-success {
background-color: #34c759;
}
.coolpenguin-toast-error {
background-color: #ff3b30;
}
.coolpenguin-toast-info {
background-color: #007aff;
} .coolpenguin-shipping-system-container.loading .coolpenguin-shipping-system-map {
opacity: 0.6;
pointer-events: none;
} @media (max-width: 767px) {
.coolpenguin-shipping-system-map {
height: 200px;
}
} .coolpenguin-shipping-system-map:focus-visible {
outline: 3px solid #4285F4;
outline-offset: 2px;
} .gm-style .gm-style-iw-c {
padding: 12px !important;
border-radius: 8px !important;
} @keyframes markerPulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.coolpenguin-shipping-system-container.address-selected .coolpenguin-shipping-system-map::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: rgba(66, 133, 244, 0.3);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: markerPulse 1.5s infinite;
pointer-events: none;
}