/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #f7f7f7;
  color: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

/* Glass frame container */
.glass-frame {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 360px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Base beer glass image */
.glass-frame > img#pintImage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Canvas overlay for text and images */
#canvasOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Draggable images styling */
.draggable-image {
  border: 2px dashed #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* Text elements styling */
.text-element{ color:#777 !important; text-shadow:0 0 1px #999; }

/* Controls container */
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 500px;
  margin-bottom: 20px;
}

/* Buttons and inputs styling */
button, input[type="file"], select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover, input[type="file"]:hover, select:hover {
  background: #f0f0f0;
}

/* Center the beer mug thumbnails underneath the main preview */
.thumbs, #thumbnailBar, #bottleThumbnails {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}


/* Keep resize/rotate functionality but hide visual marks */
.resize-handle,
.rotate-handle {
  width: 14px;
  height: 14px;
  opacity: 0;                     /* invisible */
  background: transparent !important;
  border: none !important;
  pointer-events: auto;           /* still interactive */
  cursor: pointer;
}
.resize-handle::before,
.resize-handle::after,
.rotate-handle::before,
.rotate-handle::after{
  content: '' !important;
}


/* Ensure mug thumbnail not cropped */
.thumbs img {
  max-height: 180px;
  width: auto;
  object-fit: contain;
}


/* ---- Mug preview clipping fix ---- */
.img-wrapper, .thumbs, .thumb {
    overflow: visible !important;
}
.img-wrapper img, .thumbs img, .thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* --- Horizontal clipping fix for mug preview --- */
.preview, .mockup, .mockup-container, .thumbs, .thumb, .img-wrapper {
    overflow-x: visible !important;
}
.preview img, .mockup img, .mockup-container img {
    max-width: 100% !important;
    height: auto !important;
    width: auto;
    object-fit: contain !important;
}

/* --- glass-frame overflow fix --- */
.glass-frame { overflow: visible !important; }


/* === UI Upgrade === */
:root{
  --accent:#1976d2;
  --bg:#f5f7fa;
  --toolbar-bg:#ffffff;
  --text:#333;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',Arial,sans-serif;
}
header{
  text-align:center;
  padding:20px 0 10px;
}
header h1{
  font-size:2.2rem;
  margin:0;
  color:var(--accent);
}
header .subtitle{
  margin-top:4px;
  color:#555;
  font-weight:400;
}
main{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}
.tools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 16px;
  background:var(--toolbar-bg);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  position:sticky;
  top:0;
  z-index:1000;
  border-radius:8px;
}
.tools button,
.tools select,
.tools label{
  font-size:1rem;
  padding:6px 12px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  transition:background .15s;
}
.tools button:hover,
.tools select:hover,
.tools label:hover{
  background:#f0f0f0;
}
.tools button:active{
  transform:scale(.97);
}
/* upload input hide */
.tools .upload input{
  display:none;
}
.glass-frame{
  position:relative;
  margin:auto;
  width:max-content;
}
/* selection outline */
.selected-active{
  outline:2px dashed var(--accent);
  outline-offset:2px;
}
/* grid overlay style tweak */
#gridOverlay{
  background-image:linear-gradient(to right, rgba(25,118,210,.15) 1px, transparent 1px),linear-gradient(to bottom, rgba(25,118,210,.15) 1px, transparent 1px);
}


/* vertical layout for action buttons */
#toolbar .action-buttons{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#toolbar .action-buttons button{
  width:160px;
}


/* two-column toolbar */
#toolbar{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
#toolbar .left-buttons,
#toolbar .action-buttons{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#toolbar select,
#toolbar .left-buttons button,
#toolbar .left-buttons label{
  width:160px;
}


/* custom two-column layout */
#toolbar{
  display:flex;
  gap:40px;
  align-items:flex-start;
  flex-wrap:wrap;
}
#toolbar .toolbar-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#toolbar .toolbar-col button,
#toolbar .toolbar-col select,
#toolbar .toolbar-col label{
  width:180px;
}


/* Decorative heading font */
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
header h1{
  font-family:'Abril Fatface', cursive;
  font-size:3rem;
  letter-spacing:1px;
}


/* Align font select width with buttons */
#toolbar .toolbar-col select{
  width:180px;
  box-sizing:border-box;
}


/* Exact font picker alignment */
#fontPicker20{
  width:180px;
  margin:0;
  box-sizing:border-box;
}


/* Strong grey color override */
.text-element, .text-element *{
  color:#777 !important;
  -webkit-text-fill-color:#777 !important;
  text-shadow:0 0 1px #999;
}