#xtrme-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; max-width: 1200px; margin: 0 auto; color: #333; box-sizing: border-box; position: relative; }
#xtrme-app * { box-sizing: border-box; }
.xtrme-hidden { display: none !important; }

/* --- NEW MICRO-INTERACTION KEYFRAMES --- */
@keyframes xtrmePulse {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(227, 44, 34, 0.2); }
    50% { transform: scale(1.02); box-shadow: 0 8px 25px rgba(227, 44, 34, 0.4); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(227, 44, 34, 0.2); }
}
@keyframes xtrmePopIn {
    0% { opacity: 0; transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes xtrmeJump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

/* Friendly Bouncing Dots Spinner */
.xtrme-jumping-dots { display: inline-flex; align-items: center; gap: 4px; }
.xtrme-jumping-dots .dot { width: 6px; height: 6px; background-color: currentColor; border-radius: 50%; animation: xtrmeJump 0.5s infinite alternate ease-in-out; }
.xtrme-jumping-dots .dot:nth-child(2) { animation-delay: 0.15s; }
.xtrme-jumping-dots .dot:nth-child(3) { animation-delay: 0.3s; }

#xtrme-app.xtrme-immersive {
    position: fixed !important;
    /* Starts just below the site's menu (--xtrme-top is measured by the uploader; 0 if no menu is found) */
    top: var(--xtrme-top, 0px) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--xtrme-top, 0px)) !important;
    max-width: none !important;
    background: #fff !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    animation: xtrmePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
#xtrme-app.xtrme-immersive > div:not(.xtrme-exit-studio):not(#xtrme-toast):not(#xtrme-modal):not(#xtrme-dialog-overlay) {
    max-width: 1200px;
    margin: 0 auto;
}
.xtrme-exit-studio { display: none; position: fixed; top: calc(var(--xtrme-top, 0px) + 20px); right: 20px; background: #f1f1f1; color: #333; border: 1px solid #ccc; padding: 8px 15px; border-radius: 30px; font-size: 12px; font-weight: bold; text-transform: uppercase; cursor: pointer; z-index: 1000000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
.xtrme-exit-studio:hover { background: #e32c22; color: #fff; border-color: #e32c22; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(227, 44, 34, 0.3); }
.xtrme-exit-studio:active { transform: scale(0.95); } 
#xtrme-app.xtrme-immersive .xtrme-exit-studio { display: block; }

.xtrme-catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 900px) { .xtrme-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .xtrme-catalog-grid { grid-template-columns: 1fr; } }

.xtrme-product-card { background: #fff; border: 1px solid #eaeaea; padding: 10px 10px 15px 10px; text-align: center; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.04); display: flex; flex-direction: column; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.xtrme-product-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 12px 25px rgba(0,0,0,0.1); z-index: 2; }
.xtrme-product-card:active { transform: scale(0.98); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } 
.xtrme-product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; margin-bottom: 15px; background: #f5f5f5; pointer-events: none; transition: transform 0.3s ease; }
.xtrme-product-card:hover img { transform: scale(1.03); } 
.xtrme-product-card h3 { font-size: 15px !important; margin: 0 !important; text-transform: uppercase !important; color: #111 !important; font-weight: 800 !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; pointer-events: none; transition: color 0.2s; }
.xtrme-product-card:hover h3 { color: #e32c22 !important; }

/* Phase 9.0 Library Grid Styles */
.xtrme-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; gap: 20px; max-height: 55vh; overflow-y: auto; padding: 15px 5px; align-content: start; }
.xtrme-lib-card { position: relative; border: 3px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; aspect-ratio: 1/1; width: 100%; height: auto; min-height: min-content; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; }
.xtrme-lib-card:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,0.12); z-index: 2; }
.xtrme-lib-card:active { transform: scale(0.96); } 
.xtrme-lib-card.xtrme-selected { border-color: #0073aa; box-shadow: 0 4px 15px rgba(0,115,170,0.4); transform: scale(0.98); } 
.xtrme-lib-card img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.xtrme-lib-card.xtrme-selected img { opacity: 0.8; }

.xtrme-lib-check { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: #0073aa; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; opacity: 0; transform: scale(0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-size: 14px;}
.xtrme-lib-card.xtrme-selected .xtrme-lib-check { opacity: 1; transform: scale(1); }

.xtrme-lib-upload-card { border: 3px dashed #ccc; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; aspect-ratio: 1/1; width: 100%; height: auto; min-height: min-content; background: #fafafa; transition: all 0.2s ease; }
.xtrme-lib-upload-card:hover { border-color: #0073aa; background: #f0f8ff; color: #0073aa; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,115,170,0.15); }
.xtrme-lib-upload-card:active { transform: scale(0.96); }
.xtrme-lib-upload-card svg { width: 40px; height: 40px; fill: currentColor; margin-bottom: 10px; transition: transform 0.2s; }
.xtrme-lib-upload-card:hover svg { transform: scale(1.1); }

/* Library Footer Container */
.xtrme-lib-footer { display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; padding: 20px 25px; border-radius: 8px; border: 1px solid #eaeaea; margin: 20px 0 110px 0; gap: 15px; }
.xtrme-lib-footer-left { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }

.xtrme-spinner-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.85); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 5; color:#0073aa; }

.xtrme-kiosk-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 15px; }
.xtrme-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: max-content; gap: 15px; max-height: 500px; overflow-y: auto; padding-right: 5px; align-content: start; }

.xtrme-thumb-wrap { border: 2px solid #eee; border-radius: 6px; overflow: hidden; cursor: pointer; position: relative; background: #fff; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; aspect-ratio: 1/1; width: 100%; height: auto; min-height: min-content; justify-content: center; align-items: center;}
.xtrme-thumb-wrap:hover { border-color: #0073aa; transform: scale(1.03); box-shadow: 0 6px 15px rgba(0,115,170,0.15); z-index: 2; }
.xtrme-thumb-wrap:active { transform: scale(0.97); }
.xtrme-thumb-img { width: 100%; height: 100%; object-fit: contain; display: block; position: absolute; top:0; left:0; z-index: 1; transition: padding 0.2s, background-color 0.2s, object-fit 0.2s; background: #fff;}
.xtrme-thumb-overlay { bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; text-align: center; padding: 8px 0; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-top: auto; position: absolute; z-index: 15; transform: translateY(100%); transition: transform 0.2s ease;}
.xtrme-thumb-wrap:hover .xtrme-thumb-overlay { transform: translateY(0); } 
.xtrme-badge { position: absolute; top: -5px; right: -5px; background: #28a745; color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 20; animation: xtrmePopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

.xtrme-cart-summary { background: #f9f9f9; border: 1px solid #eaeaea; padding: 25px; border-radius: 8px; margin-top: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }

/* The Main Call To Action Buttons */
.xtrme-btn-red { background: #e32c22 !important; color: #fff !important; border: none !important; padding: 18px 35px !important; font-size: 16px !important; font-weight: bold !important; text-transform: uppercase !important; cursor: pointer !important; border-radius: 4px !important; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; display: inline-block !important; box-shadow: 0 4px 10px rgba(227, 44, 34, 0.2) !important;}
.xtrme-btn-red:hover:not(:disabled) { background: #c8231c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(227, 44, 34, 0.35) !important; }
.xtrme-btn-red:active:not(:disabled) { transform: translateY(1px) scale(0.98) !important; box-shadow: 0 2px 5px rgba(227, 44, 34, 0.2) !important; }
.xtrme-btn-red[style*="opacity: 1"] { animation: xtrmePulse 2s infinite; } 

.xtrme-btn { background: #333 !important; color: #fff !important; border: none !important; padding: 12px 30px !important; font-size: 14px !important; font-weight: bold !important; text-transform: uppercase !important; cursor: pointer !important; border-radius: 4px !important; transition: all 0.2s ease !important; display: inline-block !important;}
.xtrme-btn:hover { background: #111 !important; transform: translateY(-1px); }
.xtrme-btn:active { transform: translateY(1px) scale(0.97); }

.xtrme-progress-bar { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 15px; }
.xtrme-progress-fill { height: 100%; background: #e32c22; width: 0%; transition: width 0.3s; }

#xtrme-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.85); z-index: 9999999; display: flex; align-items: center; justify-content: center; padding: 15px; opacity: 0; pointer-events: none; transition: opacity 0.3s; box-sizing: border-box; }
#xtrme-modal.xtrme-active { opacity: 1; pointer-events: auto; }
.xtrme-modal-content { background: #fff; width: 100%; max-width: 1200px; height: 95%; max-height: 900px; border-radius: 8px; display: flex; flex-direction: row; overflow: hidden; position: relative; transform: translateY(20px) scale(0.98); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-sizing: border-box;}
#xtrme-modal.xtrme-active .xtrme-modal-content { transform: translateY(0) scale(1); }

.xtrme-modal-left { flex: 1.8; background: #f1f1f1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; border-right: 1px solid #ddd; position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

.img-container { flex-shrink: 0; min-height: 450px; width: 100%; height: 60vh; max-height: 700px; display: block; position: relative; background: transparent; overflow: hidden;}
.img-container img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; }

.xtrme-zoom-controls { flex-shrink: 0; position: relative; margin-top: 15px; display: flex; gap: 10px; background: rgba(0,0,0,0.8); padding: 8px 15px; border-radius: 30px; z-index: 20; align-items: center; margin-left: auto; margin-right: auto;}
.xtrme-zoom-btn { background: none; border: none; color: white; font-size: 18px; font-weight: bold; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s;}
.xtrme-zoom-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.xtrme-zoom-btn:active { transform: scale(0.9); }
.xtrme-zoom-label { color: white; font-size: 11px; font-weight: bold; text-transform: uppercase; margin: 0 5px; letter-spacing: 1px;}

.xtrme-modal-right { flex: 1; padding: 30px; display: flex; flex-direction: column; background: #fff; min-height: 0; overflow: hidden; }
.xtrme-modal-scroll-area { flex: 1; overflow-y: auto; padding-right: 10px; margin-bottom: 15px; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }

.xtrme-size-row { display: flex; flex-direction: column; padding: 15px 0; border-bottom: 1px solid #eee; }
.xtrme-size-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The size name/price block: allowed to shrink, but never below a readable width.
   min-width:0 lets long volume-pricing text wrap normally instead of forcing the row wider. */
.xtrme-size-row-top > div:first-child { flex: 1 1 150px; min-width: 0; }
/* Keep the quantity controls together as one unbreakable unit, pushed to the right.
   If the row runs out of room (iPad portrait, active "Adjusting now" row), the whole
   unit drops to its own line with the + still on screen, rather than overflowing. */
/* Allowed to break onto a second line when the panel is narrow; the stepper below
   stays whole, so the thumbnail and status sit on one line and - 1 + on the next. */
.xtrme-qty-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.xtrme-qty-stepper { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }.xtrme-qty-btn { background: #f0f0f0; border: 1px solid #ddd; width: 34px; height: 34px; border-radius: 50%; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #555; transition: all 0.2s ease; flex-shrink: 0;}
.xtrme-qty-btn:hover { background: #e0e0e0; color: #111; transform: scale(1.05); }
.xtrme-qty-btn:active { transform: scale(0.9); background: #d0d0d0; }
.xtrme-qty-val { font-weight: bold; font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }

.xtrme-btn-outline-small { background: #fff; color: #333; border: 1px solid #ccc; padding: 6px 12px; font-size: 11px; font-weight: bold; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; }
.xtrme-btn-outline-small:hover { background: #f5f5f5; border-color: #999; transform: translateY(-1px); }
.xtrme-btn-outline-small:active { transform: translateY(1px) scale(0.95); }

.xtrme-btn-modal-done { background: #28a745 !important; color: #fff !important; border: none !important; padding: 18px !important; font-size: 15px !important; font-weight: bold !important; text-transform: uppercase !important; width: 100% !important; cursor: pointer !important; border-radius: 4px !important; transition: all 0.2s ease !important; margin-top: auto !important; box-shadow: 0 4px 10px rgba(40,167,69,0.2) !important; flex-shrink: 0 !important; z-index: 9999999 !important; }
.xtrme-btn-modal-done:hover { background: #218838 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(40,167,69,0.3) !important; }
.xtrme-btn-modal-done:active { transform: translateY(1px) scale(0.98) !important; }

.xtrme-btn-modal-cancel { position: absolute; top: 15px; right: 15px; background: #fff !important; color: #dc3232 !important; border: 1px solid #dc3232 !important; padding: 8px 15px !important; font-size: 12px !important; font-weight: bold !important; text-transform: uppercase !important; cursor: pointer !important; border-radius: 4px !important; transition: all 0.2s ease !important; z-index: 9999999 !important;}
.xtrme-btn-modal-cancel:hover { background: #fff3f3 !important; transform: translateY(-1px) !important; }
.xtrme-btn-modal-cancel:active { transform: translateY(1px) scale(0.95) !important; }
/* The Cancel button sits over the top right corner of the editor's heading. Keep the first line of the
   heading clear of it (side-by-side layout only; on a phone the button is pinned to the screen instead). */
@media (min-width: 769px) { #xtrme-modal-configure-title::before { content: ""; float: right; width: 86px; height: 22px; } }

#xtrme-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: #333; color: white; padding: 12px 24px; border-radius: 4px; font-weight: bold; font-size: 14px; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10000000; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
#xtrme-toast.xtrme-show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Phase 9.1 Studio Art Modal */
.xtrme-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.85); z-index: 9999999; display: flex; align-items: center; justify-content: center; padding: 15px; box-sizing: border-box; }
.xtrme-art-modal-content { background: #fdfdfd; width: 100%; max-width: 1200px; height: 95%; max-height: 900px; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: xtrmePopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.xtrme-art-header { padding: 20px 30px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; background: #fff; flex-wrap: wrap; gap: 15px; }
.xtrme-art-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.xtrme-art-filters input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; transition: border-color 0.2s; outline: none; }
.xtrme-art-filters input:focus { border-color: #0073aa; }

.xtrme-art-header .xtrme-btn-modal-cancel { position: relative !important; top: 0 !important; right: 0 !important; margin-left: auto; }

.xtrme-art-masonry { flex: 1; padding: 20px; overflow-y: auto; column-count: 4; column-gap: 20px; background: #f1f1f1; }
@media (max-width: 900px) { .xtrme-art-masonry { column-count: 3; } }
@media (max-width: 600px) { .xtrme-art-masonry { column-count: 2; column-gap: 10px; padding: 10px; } .xtrme-art-header { flex-direction: column; align-items: flex-start; } }

.xtrme-art-item { break-inside: avoid; margin-bottom: 20px; position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 3px solid transparent; background: #fff; }
.xtrme-art-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 2; }
.xtrme-art-item:active { transform: scale(0.98); }
.xtrme-art-item img { width: 100%; display: block; border-radius: 3px; }

.xtrme-art-item.xtrme-selected { border-color: #0073aa; transform: scale(0.98); }
.xtrme-art-item.xtrme-selected img { opacity: 0.85; }
.xtrme-art-item .xtrme-lib-check { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: #0073aa; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; opacity: 0; transform: scale(0.5); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 10; box-shadow: 0 2px 6px rgba(0,0,0,0.3); font-size: 14px;}
.xtrme-art-item.xtrme-selected .xtrme-lib-check { opacity: 1; transform: scale(1); }

.xtrme-art-footer { padding: 15px 30px; background: #fff; border-top: 1px solid #ddd; }

/* Phase 9.2 Custom Quote Modal Form Styles */
#xtrme-quote-modal input:focus, #xtrme-quote-modal textarea:focus {
    border-color: #e32c22 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(227, 44, 34, 0.1) !important;
}

/* ========================================================= */
/* MOBILE LAYOUT & SPACING FIXES */
/* ========================================================= */
@media (max-width: 768px) { 
    
    /* 1. Prevent Top/Bottom App Content from Hiding Under Fixed Buttons */
    #xtrme-app.xtrme-immersive { padding-top: 70px !important; padding-bottom: 90px !important; }

    /* 2. Stack the Library Footer so the Continue Button is Full Width */
    .xtrme-lib-footer { flex-direction: column; align-items: stretch; padding: 15px; gap: 15px; }
    .xtrme-lib-footer-left { justify-content: center; text-align: center; }
    #xtrme-lib-continue-btn, #xtrme-lib-quote-btn { width: 100%; margin-top: 5px; }
    #xtrme-lib-top-ready { justify-content: center; }
    #xtrme-lib-top-btn { width: 100%; }

    /* 3. Center the Hero Information at the top of the Library */
    .xtrme-product-hero { flex-direction: column; text-align: center; }

    /* 4. Ensure Floating Buttons are Sized and Placed Properly */
    #xtrme-what-next-btn { bottom: 15px; right: 15px; font-size: 13px; padding: 10px 16px; }
    .xtrme-exit-studio { top: 15px; right: 15px; }

    /* Push 'What Next' above the fixed modal Done button when editing */
    #xtrme-modal.xtrme-active ~ #xtrme-what-next-btn { bottom: 85px !important; z-index: 99999999; }
    #xtrme-modal.xtrme-active ~ #xtrme-helper-bubble { bottom: 140px !important; z-index: 99999999; }

    /* 5. Better Library Grid for Mobile (2 Columns) to prevent massive stacked images */
    .xtrme-lib-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px !important; 
        padding: 10px 0 !important;
    }
    /* Ensure the cards maintain their square shape and don't collapse */
    .xtrme-lib-upload-card, .xtrme-lib-card {
        width: 100%;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Modal Mobile Adjustments */
    .xtrme-modal-content { display: block; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transform: none; transition: none; top: 0; }
    #xtrme-modal.xtrme-active .xtrme-modal-content { transform: none; }
    .xtrme-modal-left { flex: none !important; height: auto !important; padding: 15px !important; display: flex; flex-direction: column; overflow: visible !important; }
    .img-container { height: 45vh !important; min-height: 300px; flex-shrink: 0; width: 100%; margin-bottom: 15px; display: block !important; position: relative; }
    .xtrme-modal-right { padding: 15px 15px 100px 15px !important; flex: none; display: flex; flex-direction: column; overflow: visible; height: auto !important; }
    .xtrme-modal-scroll-area { overflow: visible; flex: none; margin-bottom: 20px; }
    .xtrme-btn-modal-done { position: fixed !important; bottom: 15px !important; left: 15px !important; width: calc(100% - 30px) !important; z-index: 9999999 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; margin-top: 0 !important;}
    .xtrme-btn-modal-cancel { position: fixed !important; top: 15px; right: 15px; padding: 8px 15px !important; font-size: 11px !important; z-index: 9999999 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;}
}