/**
 * Print Area Manager - Frontend Styles
 * Styles for customer-facing designer interface
 */

/* ========================================
   STAGE 1: CSS FOUNDATION & ISOLATION
   Design System Based on Figma Controls
   ======================================== */

/* CSS RESET for PAM Controls - Prevent WooCommerce Theme Interference */
.pam-controls-wrapper,
.pam-controls-wrapper * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Remixicon", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Re-apply essential display properties */
.pam-controls-wrapper{
    display: block !important;
    position: relative !important;
}

.pam-controls-wrapper button {
    display: inline-flex;
    cursor: pointer !important;
	height: 2rem;
}
#pam_eyedropper{
	aspect-ratio: 1 / 1 !important;
    padding: 5px;
}
	
.pam-controls-wrapper input,
.pam-controls-wrapper textarea,
.pam-controls-wrapper select {
    display: block !important;
}

.pam-controls-wrapper label,
.pam-controls-wrapper span {
    display: inline !important;
}

/* CRITICAL: Hide control sections by default (they show on demand) */
.pam-control-section {
    display: none !important;
}

.pam-control-section.pam-active {
    display: block !important;
}
.pam-tool-panel button.pam-show {
    display: flex;
}

/* Figma Design Tokens */
:root {
    --pam-blue: #588296;
    --pam-blue-hover: #476e7d;
    --pam-blue-light: #e7f3f6;
    --pam-gray-50: #f9fafb;
    --pam-gray-100: #f3f4f6;
    --pam-gray-200: #e5e7eb;
    --pam-gray-300: #d1d5db;
    --pam-gray-400: #9ca3af;
    --pam-gray-500: #6b7280;
    --pam-gray-600: #4b5563;
    --pam-gray-700: #374151;
    --pam-gray-900: #111827;
    --pam-black: #000000;
	--pam-black-hover: #3f454a;
    --pam-white: #ffffff;
    --pam-red: #dc2626;
    --pam-dark-red: #b91c1c;
    --pam-darker-red: #971616;
    --pam-red-50: #fef2f2;
    --pam-red-500: #ef4444;
    --pam-blue-50: #eff6ff;
    --pam-blue-100: #ecfeff;
    --pam-blue-600: #0ea5e9;
    --pam-green-100: #ecfdf5;
    --pam-green-600: #16a34a;
    --pam-purple: #96588a;
    --pam-purple-light: #ede7f6;
}

/* Main Controls Container - Matches Figma Design */
.pam-controls-isolated {
    background-color: var(--pam-white) !important;
    padding: 16px !important;
    border-radius: 6px !important;
    border: 1px solid var(--pam-gray-300) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    margin: 0 !important;
    position: relative !important;    
    gap: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    transition: all 0.3s !important;
}

/* 2-Column Grid Layout */
.pam-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}

/* Spacing Utilities */
.pam-space-y-2 > * + * {
    margin-top: 8px !important;
}

.pam-space-y-4 > * + * {
    margin-top: 16px !important;
}
.pam-gap-1 {
    gap: 4px !important;
}

.pam-gap-2 {
    gap: 8px !important;
}

.pam-gap-3 {
    gap: 12px !important;
}

.pam-gap-4 {
    gap: 16px !important;
}

/* Typography */
.pam-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--pam-gray-700) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.pam-label-small {
    font-size: 12px !important;
    color: var(--pam-gray-600) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.pam-unit {
    font-size: 12px !important;
    color: var(--pam-gray-700) !important;
    font-weight: 400 !important;
}

/* Input Fields - Figma Style */
.pam-input {
    width: 100% !important;
    padding: 2px 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--pam-gray-900) !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    border-radius: 2px !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
}
#pam_text_font div{
    padding: 0px 8px !important;
	margin: 0 !important;
}
#pam_text_font div::-internal-select-inner-element {
	width: 100%;
	margin: 0 !important;
}
.pam-input:focus {
    outline: none !important;
    border-color: var(--pam-blue) !important;
    box-shadow: 0 0 0 1px var(--pam-blue) !important;
}

.pam-input-number {
    width: 64px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Textarea */
.pam-textarea {
    width: 100% !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--pam-gray-900) !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    border-radius: 2px !important;
    resize: none !important;
    outline: none !important;
}

.pam-textarea:focus {
    outline: none !important;
    border-color: var(--pam-blue) !important;
    box-shadow: 0 0 0 1px var(--pam-blue) !important;
}

/* Select Dropdown */
.pam-select {
    width: 100% !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--pam-gray-900) !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    outline: none !important;
}

.pam-select:focus {
    outline: none !important;
    border-color: var(--pam-blue) !important;
    box-shadow: 0 0 0 1px var(--pam-blue) !important;
}

/* Range Slider - Figma Style */
.pam-range {
    width: 100% !important;
    height: 4px !important;
    background-color: var(--pam-gray-200) !important;
    border-radius: 2px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.pam-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    background-color: var(--pam-white) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 1px solid var(--pam-gray-300) !important;
    box-shadow: 0 0px 4px -1px rgba(0, 0, 0, 0.1), 0 0 4px -1px rgba(0, 0, 0, 0.07) !important;
}

.pam-range::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    background-color: var(--pam-white) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: none !important;
    border: 1px solid var(--pam-gray-300) !important;
    box-shadow: 0 0px 4px -1px rgba(0, 0, 0, 0.1), 0 0 4px -1px rgba(0, 0, 0, 0.07) !important;
}

.pam-range::-moz-range-track {
    background-color: var(--pam-gray-300) !important;
    border-radius: 2px !important;
}

/* Icon Buttons - 27x27px Figma Size */
.pam-icon-btn {
    display: inline-flex !important;
    font-family: "Remixicon" !important;
    align-items: center !important;
    justify-content: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    color: var(--pam-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    font-size: 15px !important;
    line-height: 27px !important;
}
#pam_text_font{
    height: 30px !important;
}

.pam-icon-btn:hover {
    background-color: var(--pam-gray-100) !important;
}

.pam-icon-btn:active {
    background-color: var(--pam-gray-200) !important;
    transform: scale(0.95) !important;
}

.pam-icon-btn.active {
    background-color: #d5d8dc !important;
    border-color: #d5d8dc !important;
}

#pam_text_color_clear { border-radius: 5px; }
#pam_text_color_clear:hover svg{ fill: black;}


/* Small Icon Buttons - 22x22px for Image Controls Align Row */
.pam-icon-btn-small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    color: var(--pam-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    font-size: 13px !important;
    line-height: 22px !important;
}

.pam-icon-btn-small:hover {
    background-color: var(--pam-gray-100) !important;
}

.pam-icon-btn-small:active {
    background-color: var(--pam-gray-200) !important;
    transform: scale(0.95) !important;
}

.pam-icon-btn-small.active {
    background-color: #d5d8dc !important;
    border-color: #d5d8dc !important;
}

.pam-icon-btn-small i {
    font-size: 13px !important;
}

/* Split Buttons - Similar to icon buttons but for numbers */
.pam-split-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    color: var(--pam-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 27px !important;
}

.pam-split-btn:hover {
    background-color: var(--pam-gray-100) !important;
}

.pam-split-btn:active {
    background-color: var(--pam-gray-200) !important;
    transform: scale(0.95) !important;
}

.pam-split-btn.active {
    background-color: var(--pam-blue) !important;
    border-color: var(--pam-blue) !important;
    color: var(--pam-white) !important;
}

/* Mini Icon Buttons - 18x18px for Lock Aspect Ratio */
.pam-icon-btn-mini {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-300) !important;
    color: var(--pam-gray-700) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    font-size: 11px !important;
    line-height: 18px !important;
    border-radius: 2px !important;
}

.pam-icon-btn-mini:hover {
    background-color: var(--pam-gray-100) !important;
}

.pam-icon-btn-mini:active {
    background-color: var(--pam-gray-200) !important;
    transform: scale(0.95) !important;
}

.pam-icon-btn-mini.active {
    background-color: var(--pam-blue-light) !important;
    border-color: var(--pam-blue) !important;
    color: var(--pam-blue) !important;
}

.pam-icon-btn-mini i {
    font-size: 11px !important;
}

/* Icon Button Groups */
.pam-btn-group {
    display: inline-flex !important;
    gap: 0 !important;
}

.pam-btn-group .pam-icon-btn {
    border-radius: 0 !important;
    margin-left: -1px !important;
}

.pam-btn-group .pam-icon-btn:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    margin-left: 0 !important;
}

.pam-btn-group .pam-icon-btn:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Small button groups */
.pam-btn-group .pam-icon-btn-small {
    border-radius: 0 !important;
    margin-left: -1px !important;
}

.pam-btn-group .pam-icon-btn-small:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    margin-left: 0 !important;
}

.pam-btn-group .pam-icon-btn-small:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* Primary Button - Purple */
.pam-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--pam-white) !important;
    background-color: var(--pam-black) !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
}

.pam-btn-primary:hover {
    background-color: var(--pam-black-hover) !important;
}

/* Secondary Button - Gray */
.pam-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: var(--pam-gray-700) !important;
    background-color: var(--pam-gray-100) !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    aspect-ratio: 1 / 1;
}

.pam-btn-secondary:hover {
    background-color: var(--pam-gray-200) !important;
}

/* Delete Button - Red */
.pam-btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--pam-white) !important;
    background-color: var(--pam-dark-red) !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
}

.pam-btn-danger:hover {
    background-color: var(--pam-darker-red) !important;
}

/* Flex Utilities */
.pam-flex {
    display: flex !important;
}
.pam-w-100{
    width: 100%;
}
.pam-flex-col {
    display: flex !important;
    flex-direction: column !important;
}

.pam-flex-start {
    align-items: flex start !important;
}

.pam-items-center {
    align-items: center !important;
}

.pam-justify-between {
    justify-content: space-between !important;
}

.pam-justify-center {
    justify-content: center !important;
}

.pam-flex-1 {
    flex: 1 !important;
}

/* Width Utilities */
.pam-w-full {
    width: 100% !important;
}

/* Margin Bottom Utilities */
.pam-mb-1 {
    margin-bottom: 4px !important;
}

.pam-mb-2 {
    margin-bottom: 8px !important;
}

.pam-mb-3 {
    margin-bottom: 12px !important;
}

/* Margin Top Utilities */
.pam-mt-1 {
    margin-top: 4px !important;
}

.pam-mt-2 {
    margin-top: 8px !important;
}

.pam-mt-3 {
    margin-top: 12px !important;
}

/* Border Bottom */
.pam-border-b {
    border-bottom: 1px solid var(--pam-gray-200) !important;
    padding-bottom: 8px !important;
}

/* RemixIcon Sizing */
.pam-icon-btn i,
.pam-icon-btn svg {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 1 !important;
}

/* Ensure icons display correctly */
.pam-icon-btn i::before {
    font-size: 15px !important;
}

/* ========================================
   END STAGE 1: CSS FOUNDATION
   ======================================== */

/* ========================================
   STAGE 4: BACKGROUND CONTROLS - COLOR PICKER
   ======================================== */
/* Background Picker Container */
.pam-bg-picker {
    width: 100% !important;
    min-height: 300px;
}

/* Background Title */
.pam-bg-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--pam-gray-900) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

/* Main Grid: Left Controls + Right Picker */
.pam-bg-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 16px !important;
}

/* Left Column: Controls */
.pam-bg-controls {
    display: flex !important;
    flex-direction: column !important;
}

/* Saved Colors Swatches */
.pam-saved-colors {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
	grid-template-columns: repeat(5, auto) !important;
}

.pam-color-swatch {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--pam-gray-100) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    position: relative !important;
}

.pam-color-swatch:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
}
.pam-color-swatch:focus{
    border: 1px solid var(--pam-gray-400) !important;
}

.pam-color-swatch-delete {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background-color: #dc3232 !important;
    color: white !important;
    border: 1px solid white !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    font-weight: bold !important;
}

.pam-color-swatch:hover .pam-color-swatch-delete {
    display: flex !important;
}

.pam-color-swatch-delete:hover {
    background-color: #a00 !important;
}

/* Color Mode Tabs (HEX | RGB | HSL) */
.pam-hex-rgb{
    height: 100%;
    justify-content: flex-start !important;
    gap: 12px;
}
.pam-color-tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid var(--pam-gray-200) !important;
}
.pam-color-input-wrapper input {
    height: 2rem;
}
.pam-color-tab {
    flex: 1 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--pam-gray-400) !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin-bottom: -2px !important;
    text-transform: uppercase !important;
}

.pam-color-tab:hover {
    color: var(--pam-gray-900) !important;
}

.pam-color-tab.active {
    color: var(--pam-blue) !important;
    border-bottom-color: var(--pam-blue) !important;
}

/* 3-Column Grid for RGB/HSL */
.pam-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 0.5fr) !important;
}

/* Right Column: Picker Area */
.pam-bg-picker-area {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* 2D Gradient Picker (Saturation + Lightness) */
.pam-gradient-picker {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
	background-color: #00ffff;
	border-radius: 4px!important;
	overflow: hidden;
}
.pam-gradient-picker:before, .pam-gradient-picker:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
.pam-gradient-picker:before {
	background:linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.pam-gradient-picker:after {
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

/* Gradient Picker Handle (Circle) */
.pam-gradient-picker-handle {
	z-index: 1234;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid var(--pam-white) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* Hue Slider (Rainbow) */
.pam-hue-slider {
    position: relative !important;
    width: 100% !important;
    height: 3rem !important;
    background: linear-gradient(to right, 
	#ff3232 0%, 
	#ff9900 10%, 
	#ffff00 17%, 
	#ccff00 20%, 
	#32ff00 30%, 
	#00ff65 40%, 
	#00ffff 50%, 
	#0065ff 60%, 
	#3300ff 70%, 
	#cb00ff 81%, 
	#ff0098 90%, 
	#ff0004 100%)
   !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
/*************************************************************************************************************/

/************************************************************************************************************/
/* Hue Range Input */
.pam-hue-range {
    width: 100% !important;
    height: 24px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    outline: none !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.pam-hue-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: white !important;
    cursor: pointer !important;
    border: 3px solid white !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.pam-hue-range::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background-color: white !important;
    cursor: pointer !important;
    border: 3px solid white !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Hue Slider Handle (Circle) - For old implementation */
.pam-hue-slider-handle {
    position: absolute !important;
    width: 20px;
    height: 95% !important;
    border: 3px solid var(--pam-white) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}

/* Action Buttons Row */
.pam-bg-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--pam-gray-200) !important;
}

/* Responsive: Stack to single column on mobile */
@media (max-width: 640px) {
    .pam-bg-grid {
        grid-template-columns: 1fr !important;
    }
    
    .pam-gradient-picker {
        height: 200px !important;
    }
}

/* ========================================
   END STAGE 4: BACKGROUND CONTROLS
   ======================================== */

/* ========================================
   LAYERS PANEL
   ======================================== */

/* Layer Item */
.pam-layer-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background-color: var(--pam-white) !important;
    border: 1px solid var(--pam-gray-200) !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pam-layer-item:hover {
    background-color: var(--pam-gray-50) !important;
}

.pam-layer-item.pam-layer-selected {
    background-color: var(--pam-gray-50) !important;
    border-color: var(--pam-gray-400) !important;
}

/* Drag Handle */
.pam-layer-drag-handle {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: grab !important;
    color: var(--pam-gray-400) !important;
}

.pam-layer-drag-handle:active {
    cursor: grabbing !important;
}

/* Layer Icon (Text/Image/Background) */
.pam-layer-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.pam-layer-icon.pam-layer-text {
    background-color: var(--pam-blue-100) !important;
    color: var(--pam-blue-600) !important;
}

.pam-layer-icon.pam-layer-image {
    background-color: var(--pam-green-100) !important;
    color: var(--pam-green-600) !important;
}

.pam-layer-icon.pam-layer-background {
    background-color: var(--pam-blue-100) !important;
    color: var(--pam-blue-600) !important;
}

/* Layer Info */
.pam-layer-info {
    flex: 1 !important;
    overflow: hidden !important;
}

.pam-layer-name,
.pam-layer-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--pam-gray-900) !important;
    margin: 0 0 4px 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pam-layer-type {
    font-size: 12px !important;
    color: var(--pam-gray-500) !important;
    margin: 0 !important;
}

/* Layer Actions (Arrow buttons + Delete) */
.pam-layer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.pam-layer-action {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border: 1px solid var(--pam-gray-300) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    color: var(--pam-gray-600) !important;
    transition: all 0.2s !important;
    padding: 0 !important;
}

.pam-layer-action:hover {
    background-color: var(--pam-gray-100) !important;
    border-color: var(--pam-gray-400) !important;
    color: var(--pam-gray-900) !important;
}

.pam-layer-action i {
    font-size: 16px !important;
}

/* Move up button (forward) */
.pam-layer-move-up:hover {
    background-color: var(--pam-blue-50) !important;
    border-color: var(--pam-purple) !important;
    color: var(--pam-purple) !important;
}

/* Move down button (backward) */
.pam-layer-move-down:hover {
    background-color: var(--pam-blue-50) !important;
    border-color: var(--pam-purple) !important;
    color: var(--pam-purple) !important;
}

/* Delete button */
.pam-layer-delete:hover {
    background-color: var(--pam-red-50) !important;
    border-color: var(--pam-red-500) !important;
    color: var(--pam-red-500) !important;
}

/* Layer being dragged */
.pam-layer-dragging {
    opacity: 0.5 !important;
}

/* No Layers Message */
.pam-no-layers {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--pam-gray-500) !important;
    font-size: 14px !important;
}

/* ========================================
   END LAYERS PANEL
   ======================================== */
.woocommerce-variation-add-to-cart {
    display: flex;
    column-gap: 8px;
    row-gap: 15px;
    flex-wrap: wrap;
}
/* ========================================
   customize BUTTON
   ======================================== */

.pam-customize-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 58px;
    padding: 12px 30px;
    font-size: 100% !important;
    font-weight: 600;
    color: #fff;
    background-color: var(--pam-black) !important;
    border: none;
    border-radius: 58px!important;
    cursor: pointer;
    vertical-align: middle;
    grid-column: 3 / 3 !important;
}

.pam-customize-button:hover {
    background-color: var(--souvenir-grey-outline) !important;
}

.pam-customize-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pam-customize-description {
    display: block;
    margin: 8px 0 0 0;
    font-size: 13px;
    color: #646970;
    font-style: italic;
}

/* Disable button */
.pam-customize-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pam-customize-button:disabled:hover {
    background-color: #999;
    transform: none;
    box-shadow: none;
}



/* Mobile: Stack buttons vertically */
@media (max-width: 768px) {
    .pam-customize-button {
        display: flex;
        width: 100%;
        margin-left: 0;
        margin-top: 12px;
        justify-content: center;
    }
    
    .single_add_to_cart_button + .pam-customize-button,
    .wp-element-button + .pam-customize-button {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* ========================================
   CANVAS OVERLAY (over WooCommerce gallery)
   ======================================== */

.pam-canvas-overlay {
    position: relative !important;
    z-index: 100 !important;
    background-color: #ffffff !important;
    border-radius: 6px ;
    border: 1px solid #d1d5dc!important;
    display: none !important;
    /* Theme isolation */
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
	overflow: hidden;
    max-width: 580px;
    float: right;
}

.pam-canvas-overlay.active {
    display: flex !important;
    flex-direction: column !important;
}

/* Hide original WooCommerce gallery elements when designer is active */
.pam-canvas-overlay.active ~ .woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper:has(.pam-canvas-overlay.active) > .woocommerce-product-gallery__image {
    display: none !important;
}

.pam-canvas-overlay.active ~ .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__wrapper:has(.pam-canvas-overlay.active) > .woocommerce-product-gallery__trigger {
    display: none !important;
}

/* Make WooCommerce gallery wrapper position relative for absolute positioning */
.woocommerce-product-gallery {
    position: relative !important;
}

/* CRITICAL: Theme Isolation - Force consistent image rendering across all WordPress themes */
.woocommerce-product-gallery__wrapper img.wp-post-image {
    /* Override theme aspect-ratio and object-fit */
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    
    /* Ensure full width but natural height */
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    
    /* Remove any theme transforms or filters */
    transform: none !important;
    filter: none !important;
    
    /* Consistent display */
    display: block !important;
    
    /* Remove any theme padding/margins */
    padding: 0 !important;
    margin: 0 !important;
}

/* Additional override for themes that wrap the image in div.woocommerce-product-gallery__image */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure gallery wrapper doesn't have conflicting styles */
.woocommerce-product-gallery {
    margin: 0 !important;
    opacity: 1 !important;
}
/* Hide View Basket above add to basket*/
.woocommerce-variation-add-to-cart a.added_to_cart{
	display: none !important;
}
.wp-block-woocommerce-add-to-cart-form .variations_button, .wp-block-woocommerce-add-to-cart-form form.cart{
	width: fit-content;
}

/* ========================================
   PRINT AREA BADGE (Top Left of Gallery)
   ======================================== */

.pam-print-area-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 102;
    background-color: #000000;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.pam-print-area-badge span {
    display: block;
}

/* ========================================
   IMAGE QUALITY BADGE (Top Right of Gallery)
   ======================================== */

.pam-quality-badge {
    position: absolute;
    top: 50px;
    left: 15px;
    z-index: 102;
    text-align: right;
    color: #000000;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pam-quality-badge.quality-poor {
    color: #e74c3c;
}

.pam-quality-badge.quality-low {
    color: #f39c12;
}

.pam-quality-badge.quality-good {
    color: #27ae60;
}

.pam-quality-badge span {
    display: block;
}

/* ========================================
   IMAGE QUALITY TAG (Above Image Controls)
   ======================================== */

.pam-image-quality-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-align: center;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.95);
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: none;
}

.pam-image-quality-tag.pam-visible {
    opacity: 1;
    transform: none;
}

.pam-image-quality-tag.pam-static {
    transition: none !important;
}

.pam-image-quality-tag.quality-poor {
    color: #ffffff;
    background: #e74c3c;
    border: 1px solid #e74c3c;
}

.pam-image-quality-tag.quality-low {
    color: #ffffff;
    background: #f39c12;
    border: 1px solid #f39c12;
}

.pam-image-quality-tag.quality-good {
    color: #ffffff;
    background: #27ae60;
    border: 1px solid #27ae60;
}

/* ========================================
   PRINT AREA SELECTOR
   ======================================== */

.pam-print-area-selector-wrapper {
    position: absolute;
    top: 60px;
    right: 80px;
    z-index: 102;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pam-print-area-selector {
    display: flex;
    gap: 6px;
}

.pam-print-area-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pam-print-area-btn:hover {
    background-color: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.3);
}

.pam-print-area-btn.active {
    background-color: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

/* ========================================
   CLOSE BUTTON (Top Right of Gallery)
   ======================================== */

.pam-close-designer {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 102;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.pam-close-designer:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg);
}

.pam-close-designer svg {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

/* ========================================
   CANVAS CONTAINER (Centered in Gallery)
   ======================================== */

.pam-canvas-container {
    z-index: 101;
    position: relative; /* CRITICAL: Must be relative for absolute children */
    display: flex;
    align-items: center;
    justify-content: center;
	border-bottom: none;
    min-width: 200px !important;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    border-radius: 6px 6px 0 0;
}

/* Product image - base layer */
.pam-product-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* Print area overlay canvas - shows transparent print area (like admin thumbnails) */
.pam-print-area-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Don't block clicks */
    z-index: 4; /* Increase so split lines render above design elements */
}

/* Design canvas - customer's designs (text, images, backgrounds) */
.pam-design-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: move; /* Show it's interactive */
}

/* ========================================
   TOOL PANEL (Right Side of Gallery)
   ======================================== */

.pam-tool-panel {
    z-index: 102;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #ffffff !important;
    padding: 12px;
    border-top: none;
}
.pam-tool-panel button {
    display: flex;
}
.pam-tool-panel .pam-downloaddesign-btn {
    display: none !important;
}
.pam-tool-btn {
    width: 100% !important;
    height: 3em;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: none!important;
    color: #1d2327 !important;
    cursor: pointer;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
}

.pam-tool-btn:hover {
    background-color: var(--pam-gray-100) !important;
	outline-width: 0px !important;
}
.pam-tool-btn:focus {
    background-color: var(--pam-gray-200) !important;
	outline-width: 0px !important;
}

.pam-tool-btn svg {
    width: 26px;
    height: 26px;
    color: #1d2327 !important;
    transition: color 0.3s ease;
}

.pam-delete-btn{
    border: none !important;
}
.pam-delete-btn:hover{
    background-color: #fef2f2 !important;
}
.pam-delete-btn svg{
    color: #e7000b !important;
}
/*
.pam-downloadmockup-btn{
    border: 1px solid #8ec5ff !important;
}
.pam-downloadmockup-btn:hover{
    background-color: #eff6ff !important;
}
.pam-downloadmockup-btn svg{
    color: #155dfc !important;
}
.pam-downloaddesign-btn{
    border: 1px solid #7bf1a8 !important;
}
.pam-downloaddesign-btn:hover{
    background-color: #f0fdf4 !important;
}
.pam-downloaddesign-btn svg{
    color: #00a63e !important;
}*/

/* ========================================
   ELEMENT CONTROLS WRAPPER (Below Variations in Summary)
   ======================================== */

.pam-element-controls-wrapper {
    margin-bottom: 15px;
    border-radius: 8px;
    max-width: 580px;
}

.pam-controls-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
}

.pam-controls-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
}

.pam-controls-body {
    display: flex;
    flex-direction: column;
}

/* ========================================
   CONTROL SECTIONS
   ======================================== */

.pam-control-section {
    background-color: #ffffff;
    border-radius: 8px;
}

.pam-control-section h4 {
    margin: 0 0 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1d2327;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pam-control-item {
    margin-bottom: 16px;
}

.pam-control-item:last-child {
    margin-bottom: 0;
}

.pam-control-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
}

.pam-control-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pam-control-value {
    min-width: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #646970;
    text-align: right;
}

.pam-control-item input[type="range"] {
    flex: 1;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.pam-control-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: #2271b1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pam-control-item input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #135e96;
    transform: scale(1.2);
}

.pam-control-item input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background-color: #2271b1;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.pam-control-item input[type="range"]::-moz-range-thumb:hover {
    background-color: #135e96;
    transform: scale(1.2);
}

.pam-color-input {
    width: 100%;
    height: 48px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    transition: border-color 0.2s ease;
}

.pam-color-input:hover,
.pam-color-input:focus {
    border-color: #2271b1;
    outline: none;
}

.pam-text-input {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.pam-text-input:focus {
    border-color: #2271b1;
    outline: none;
}

.pam-select {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.pam-select:focus {
    border-color: #2271b1;
    outline: none;
}

.pam-button-group {
    display: flex;
    gap: 8px;
}

.pam-style-button,
.pam-align-button {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pam-style-button:hover,
.pam-align-button:hover {
    background-color: #f0f0f1;
    border-color: #8c8f94;
}

.pam-style-button.active,
.pam-align-button.active {
    background-color: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

.pam-style-button.active svg,
.pam-align-button.active svg {
    color: #fff;
}

.pam-delete-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #d63638;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pam-delete-button:hover {
    background-color: #b32d2e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(214, 54, 56, 0.3);
}

/* ========================================
   CONTROLS FOOTER (Action Buttons)
   ======================================== */

.pam-controls-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pam-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.pam-action-btn svg {
    width: 18px;
    height: 18px;
}

.pam-action-btn-secondary {
    background-color: #ffffff;
    color: #1d2327;
    border: 2px solid #e0e0e0;
}

.pam-action-btn-secondary:hover {
    background-color: #f0f0f1;
    border-color: #8c8f94;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pam-action-btn-primary {
    background-color: #2271b1;
    color: #ffffff;
    border: 2px solid #2271b1;
}

.pam-action-btn-primary:hover {
    background-color: #135e96;
    border-color: #135e96;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.4);
}


/* ========================================
   ADMIN - ORDERS
   ======================================== */
#order_data .order_data_column~.pam-order-customizations {
	display: flex !important;
}
/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .pam-canvas-overlay {
        border-radius: 0;
    }
    
    .pam-print-area-badge {
        top: 10px;
        left: 10px;
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .pam-quality-badge {
        top: 50px;
        left: 15px;
        font-size: 9px;
        padding: 6px 10px;
    }
    
    .pam-print-area-selector-wrapper {
        top: 50px;
        right: 60px;
        padding: 6px;
    }
    
    .pam-print-area-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .pam-close-designer {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
    }
    
    .pam-close-designer svg {
        width: 18px;
        height: 18px;
    }
    
    .pam-tool-panel {
        right: 10px;
        gap: 8px;
    }
    
    .pam-tool-btn {
        width: 48px;
        height: 48px;
    }
    
    .pam-tool-btn svg {
        width: 22px;
        height: 22px;
    }
    
    .pam-element-controls-wrapper {
        padding: 16px;
    }
}

/* ========================================
   LOADING STATE
   ======================================== */

.pam-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 103;
}

.pam-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: pam-spin 0.8s linear infinite;
}

@keyframes pam-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   CUSTOM ADD TO CART BUTTON
   ======================================== */

/* Custom Add to Cart Button (replaces WooCommerce button when designer is active) */
.pam-add-to-cart-button {
    background-color: #2271b1 !important;
    border-color: #2271b1 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.pam-add-to-cart-button:hover:not(:disabled) {
    background-color: #135e96 !important;
    border-color: #135e96 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3) !important;
}

.pam-add-to-cart-button:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Spinner for loading state */
.pam-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pam-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes pam-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   TEXT CONTROLS - STAGE 1: 2-COLUMN GRID
   ======================================== */

/* 2-Column Grid Layout */
.pam-text-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pam-text-controls-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Label Styles */
.pam-control-label-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.pam-control-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

.pam-control-label-min {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    min-width: 50px;
}

/* Text Textarea */
.pam-text-textarea {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    resize: none;
    margin-bottom: -4px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pam-text-textarea:focus {
    outline: none;
    border-color: #96588a;
    box-shadow: 0 0 0 1px #96588a;
}

.pam-text-textarea::placeholder {
    color: #9ca3af;
}

/* Font Dropdown */
.pam-select-font {
    flex: 1;
    width: 100%;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pam-select-font:focus {
    outline: none;
    border-color: #96588a;
    box-shadow: 0 0 0 1px #96588a;
}

/* Font options styled with their own font-family */
.pam-select-font option {
    padding: 8px;
}

/* ========================================
   TEXT CONTROLS - STAGE 2: TYPOGRAPHY SLIDERS
   ======================================== */

/* Control unit labels (px, °, etc.) */
.pam-control-unit {
    font-size: 12px;
    color: #4b5563;
}

/* Slider + Number Input Row */
.pam-slider-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Slider Styles */
.pam-slider {
    flex: 1;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pam-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: #2271b1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pam-slider::-webkit-slider-thumb:hover {
    background-color: #135e96;
    transform: scale(1.15);
}

.pam-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #2271b1;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.pam-slider::-moz-range-thumb:hover {
    background-color: #135e96;
    transform: scale(1.15);
}

/* Number Input Styles */
.pam-number-input {
    width: 64px;
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    text-align: center;
    background-color: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pam-number-input:focus {
    outline: none;
    border-color: #96588a;
    box-shadow: 0 0 0 1px #96588a;
}

/* Remove spinner arrows in number input */
.pam-number-input::-webkit-outer-spin-button,
.pam-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pam-number-input[type=number] {
    -moz-appearance: textfield;
}

/* ========================================
   TEXT CONTROLS - STAGE 3: STYLE BUTTONS
   ======================================== */

/* Style Buttons Grid (2 columns) */
.pam-style-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Style Toggle Buttons */
.pam-style-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 56px;
}

.pam-style-toggle:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.pam-style-toggle.active {
    background-color: #ede7f6;
    border-color: #96588a;
    color: #96588a;
}

.pam-style-toggle.active svg {
    stroke: #96588a;
}

.pam-style-toggle svg {
    flex-shrink: 0;
}

.pam-style-toggle span {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* ========================================
   TEXT CONTROLS - STAGE 5: COLOR CONTROLS
   ======================================== */

/* Color Picker Wrapper (color input + hex text input) */
.pam-color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Color Picker (visual color selector) */
.pam-color-picker {
    width: 48px;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    background-color: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pam-textcolor-picker{
	width: 27px; 
	height: 27px; 
	border: 1px solid var(--pam-gray-300); 
	border-radius: 5px; 
	overflow: hidden; 
	flex-shrink: 0; 
	padding: 2px; 
	background-color: var(--pam-gray-200);
}
.pam-textcolor-picker:focus, .pam-textcolor-picker:active, .pam-textcolor-picker:hover{
    outline: none;
	background-color: var(--pam-gray-300);
}
.pam-textcolor-picker input[type="color" i]{
    outline: none;
   	border-radius: 5px;
    inline-size: 100%;
    block-size: 100%;
    appearance: auto;
}
.pam-textcolor-picker input[type="color" i]::-webkit-color-swatch,
.pam-textcolor-picker input[type="color" i]::-moz-color-swatch {
    outline: none;
    border-radius: 5px;
}
.pam-textcolor-picker input[type="color" i] {
    outline: none;
    padding: 1px;
    background-color: transparent;
}
.pam-textcolor-picker input[type="color" i]::-webkit-color-swatch {
    outline: none;
   	border-radius: 5px;
    padding: 0px;
}
.pam-textcolor-picker input[type="color" i]::-webkit-color-swatch-wrapper {
    outline: none;
    padding: 1px;
    overflow: hidden;
}

.pam-color-picker:focus {
    outline: none;
	border: 1px solid var(--pam-gray-300); 
}

/* Hex Color Text Input */
.pam-color-hex-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    background-color: #fff;
    text-transform: uppercase;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pam-color-hex-input:focus {
    outline: none;
    border-color: #96588a;
    box-shadow: 0 0 0 1px #96588a;
}

.pam-color-hex-input::placeholder {
    color: #9ca3af;
    text-transform: none;
}

/* ========================================
   TEXT CONTROLS - STAGE 6: TRANSFORM CONTROLS
   ======================================== */

/* Element Alignment Grid (3x2 grid for 6 buttons) */
.pam-element-align-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Element Alignment Buttons */
.pam-element-align-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
}

.pam-element-align-button:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.pam-element-align-button:active {
    background-color: #ede7f6;
    border-color: #96588a;
    transform: scale(0.95);
}

.pam-element-align-button svg {
    flex-shrink: 0;
}

/* Rotation uses existing slider styles from Stage 2 */

/* ========================================
   TEXT CONTROLS - STAGE 4: ALIGNMENT BUTTONS
   ======================================== */

/* Alignment Buttons Row (4 columns) */
.pam-alignment-buttons-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Alignment Buttons */
.pam-align-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
}

.pam-align-button:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.pam-align-button.active {
    background-color: #ede7f6;
    border-color: #96588a;
    color: #96588a;
}

.pam-align-button.active svg {
    stroke: #96588a;
}

.pam-align-button svg {
    flex-shrink: 0;
}

/* Responsive - Stack columns on mobile */
@media (max-width: 768px) {
    .pam-text-controls-grid {
        grid-template-columns: 1fr;
    }
}